Off the Ridge Code Newsletter

Search

All posts in "ASP.NET MVC"

ASP.NET MVC

Published October 6, 2013 in ASP.NET MVC - 0Comments

As a recent convert from fat client applications (MFC (C++), Windows Forms, WPF) to ASP.NET and ASP.NET MVC, I’ve created a simple project and implemented it twice using both of these two technologies. First in ASP.NET and second in ASP.NET MVC.

Here you can download the sample solution file that includes both the ASP.NET and ASP.NET MVC projects. It was written using Visual Studio 2012 and .NET Framework 4.5
Latest code for this solution from codeplex:

Let’s start with ASP.NET and create a Web Forms application to post and record blog posts.

1. First we’ll start with creating an ASP.NET WebForms application
   a. Create an empty application.
 
   Go to File -> New -> Project and select ASP.NET Empty Web Application:

 2. Add new Web Form:
    a. Right click on the project
       Add New Item -> Web Form
       Type “Default.aspx” and click the OK button:

    b. Right-click on the Default.aspx entry in the Solution Explorer and select Set as Start Page from the pop-up menu.

       
3. Add Data Model:
     a. Right click on the project
        Add New Item -> Class
        Type: Comment.cs

Copy/Paste the following lines into the Comment model object:

[[code style="color: black; word-wrap: normal;"]]czozNTM6XCIgdXNpbmcgU3lzdGVtLkNvbXBvbmVudE1vZGVsLkRhdGFBbm5vdGF0aW9uczsgIDxiciAvPiBuYW1lc3BhY2UgQ29tbWV7WyYqJl19bnRQb3N0ICA8YnIgLz4geyAgPGJyIC8+ICAgcHVibGljIGNsYXNzIENvbW1lbnQgIHsgIDxiciAvPiAgICAgW1JlcXVpcmVkXSAgPHtbJiomXX1iciAvPiAgICAgcHVibGljIHN0cmluZyBQb3N0ZXJOYW1lIHsgZ2V0OyBzZXQ7IH0gIDxiciAvPiAgICAgW1JlcXVpcmVkXSAgPGJye1smKiZdfSAvPiAgICAgcHVibGljIHN0cmluZyBQb3N0ZXJFbWFpbCB7IGdldDsgc2V0OyB9ICA8YnIgLz4gICAgIFtSZXF1aXJlZChFcnJvck17WyYqJl19ZXNzYWdlID0gXCJEaWQgeW91IGxpa2Ugb3IgZGlkblwndCBsaWtlIG15IHBvc3Q/XCIpXSAmbmJzcDtcIjt7WyYqJl19[[/code]]
[[code style="color: black; word-wrap: normal;"]]czo3MTpcIiAgICAgcHVibGljIGJvb2w/IExpa2VkUG9zdCB7IGdldDsgc2V0OyB9ICA8YnIgLz4gICB9ICA8YnIgLz4gfSAgPGJyIC97WyYqJl19PlwiO3tbJiomXX0=[[/code]]
I’m jumping ahead and adding Model Validation here. The [Required] Attribute simply specifies that a data field value is required.
       

4. Add a Collection object – we need to have some sort of storage, since we don’t have any database backing:

     a. Right click on the Project:

        Right click and select Add New Item -> Class

     
 Copy/Paste the following lines into the CommentsCollection object:

[[code style="color: black; word-wrap: normal;"]]czo3MDU6XCIgdXNpbmcgU3lzdGVtLkNvbGxlY3Rpb25zLkdlbmVyaWM7ICA8YnIgLz4gbmFtZXNwYWNlIENvbW1lbnRQb3N0ICA8YnJ7WyYqJl19IC8+IHsgIDxiciAvPiAgIHB1YmxpYyBjbGFzcyBDb21tZW50c0NvbGxlY3Rpb24gIDxiciAvPiAgIHsgIDxiciAvPiAgICAgcHJpdntbJiomXX1hdGUgc3RhdGljIHJlYWRvbmx5IENvbW1lbnRzQ29sbGVjdGlvbiBDb2xsZWN0aW9uID0gbmV3IENvbW1lbnRzQ29sbGVjdGlvbigpe1smKiZdfTsgICAgcHJpdmF0ZSByZWFkb25seSBMaXN0Jmx0O0NvbW1lbnQmZ3Q7IF9jb21tZW50cyA9IG5ldyBMaXN0Jmx0O0NvbW1lbnQmZ3R7WyYqJl19OygpOyAgPGJyIC8+ICAgICBwdWJsaWMgdm9pZCBBZGRSZXNwb25zZShDb21tZW50IHJlc3BvbnNlKSAgPGJyIC8+ICAgICB7ICA8YntbJiomXX1yIC8+ICAgICAgIF9jb21tZW50cy5BZGQocmVzcG9uc2UpOyAgPGJyIC8+ICAgICB9ICA8YnIgLz4gICAgIHB1YmxpYyBzdGF0aWMge1smKiZdfUNvbW1lbnRzQ29sbGVjdGlvbiBHZXRDb21tZW50c0NvbGxlY3Rpb24oKSAgPGJyIC8+ICAgICB7ICA8YnIgLz4gICAgICAgcmV0dXJ7WyYqJl19biBDb2xsZWN0aW9uOyAgPGJyIC8+ICAgICB9ICA8YnIgLz4gICAgIHB1YmxpYyBJRW51bWVyYWJsZSZsdDtDb21tZW50Jmd0OyBHZXtbJiomXX10QWxsQ29tbWVudHMoKSAgPGJyIC8+ICAgICB7ICA8YnIgLz4gICAgICAgcmV0dXJuIF9jb21tZW50czsgIDxiciAvPiAgICAgfSAge1smKiZdfTxiciAvPiAgIH0gIDxiciAvPiB9ICA8YnIgLz5cIjt7WyYqJl19[[/code]]
5. Now we are going to create a simple form in Default.aspx page
 
Copy/Paste the following lines into your Default.aspx page:
[[code style="color: black; word-wrap: normal;"]]czoxNTU1OlwiICZsdDslQCBQYWdlIExhbmd1YWdlPVwiQyNcIiBBdXRvRXZlbnRXaXJldXA9XCJ0cnVlXCIgQ29kZUJlaGluZD1cIkRlZmF1bHtbJiomXX10LmFzcHguY3NcIiBJbmhlcml0cz1cIkNvbW1lbnRQb3N0LkRlZmF1bHRcIiAlJmd0OyAgPGJyIC8+ICZsdDshRE9DVFlQRSBodG1sJmd0e1smKiZdfTsgIDxiciAvPiAmbHQ7aHRtbCB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWxcIiZndDsmbHQ7aGVhZCBydW5hdD1cInN7WyYqJl19ZXJ2ZXJcIiZndDsgICZsdDt0aXRsZSZndDtNeSBCbG9nJmx0Oy90aXRsZSZndDsgIDxiciAvPiAgICZsdDtsaW5rIHJlbD1cInN0eWxle1smKiZdfXNoZWV0XCIgaHJlZj1cIlN0eWxlU2hlZXQxLmNzc1wiIC8mZ3Q7Jmx0Oy9oZWFkJmd0OyZsdDtib2R5Jmd0OyAgJmx0O2Zvcm0gaWQ9XCJme1smKiZdfW9ybTFcIiBydW5hdD1cInNlcnZlclwiJmd0OyAgICAmbHQ7ZGl2Jmd0OyAgPGJyIC8+ICAgICAgICZsdDtoMSZndDtXZWxjb21lIHRvIG17WyYqJl19eSBibG9nISAgPGJyIC8+ICAgICAgICZsdDsvaDEmZ3Q7ICA8YnIgLz4gICAgICAgJmx0O3AmZ3Q7ICA8YnIgLz4gICAgICAgICBQbHtbJiomXX1lYXNlIGxlYXZlIGEgdmVyeSBwb3NpdGl2ZSBjb21tZW50LiAgPGJyIC8+ICAgICAgICZsdDsvcCZndDsgIDxiciAvPiAgICAgJmx0e1smKiZdfTsvZGl2Jmd0OyAgPGJyIC8+ICAgICAmbHQ7ZGl2Jmd0OyAgPGJyIC8+ICAgICAgICZsdDthc3A6VmFsaWRhdGlvblN1bW1hcnkgSUR7WyYqJl19PVwidmFsaWRhdGlvblN1bW1hcnlcIiBydW5hdD1cInNlcnZlclwiIFNob3dNb2RlbFN0YXRlRXJyb3JzPVwiVHJ1ZVwiLyZndDsgICAgICAmbHtbJiomXX10O2xhYmVsJmd0O05hbWU6ICZsdDsvbGFiZWwmZ3Q7ICA8YnIgLz4gICAgICAgJmx0O2lucHV0IHR5cGU9XCJ0ZXh0XCIgaWQ9XCJQb3N0e1smKiZdfWVyTmFtZVwiIHJ1bmF0PVwic2VydmVyXCIgLyZndDsgICAgJmx0Oy9kaXYmZ3Q7ICA8YnIgLz4gICAgICZsdDtkaXYmZ3Q7ICA8YnIgLz57WyYqJl19ICAgICAgICZsdDtsYWJlbCZndDtFbWFpbDogJmx0Oy9sYWJlbCZndDsgIDxiciAvPiAgICAgICAmbHQ7aW5wdXQgdHlwZT1cInRleHR7WyYqJl19XCIgaWQ9XCJQb3N0ZXJFbWFpbFwiIHJ1bmF0PVwic2VydmVyXCIgLyZndDsmbHQ7L2RpdiZndDsgICAgJmx0O2RpdiZndDsgIDxiciAvPiAge1smKiZdfSAgICAgJmx0O2xhYmVsJmd0O0xpa2VkIHRoZSBwb3N0PzogJmx0Oy9sYWJlbCZndDsgIDxiciAvPiAgICAgICAmbHQ7c2VsZWN0IGl7WyYqJl19ZD1cIkxpa2VkUG9zdFwiIHJ1bmF0PVwic2VydmVyXCImZ3Q7Jmx0O29wdGlvbiB2YWx1ZT1cIlwiJmd0O0xpa2VkIGl0PyZsdDsvb3B0aW9uJntbJiomXX1ndDsgIDxiciAvPiAgICAgICAgICZsdDtvcHRpb24gdmFsdWU9XCJ0cnVlXCImZ3Q7TWUgTGlrZXkhJmx0Oy9vcHRpb24mZ3Q7ICA8YnJ7WyYqJl19IC8+ICAgICAgICAgJmx0O29wdGlvbiB2YWx1ZT1cImZhbHNlXCImZ3Q7TWUgTk8gTGlrZXkhJmx0Oy9vcHRpb24mZ3Q7ICA8YnIgLz4ge1smKiZdfSAgICAgICZsdDsvc2VsZWN0Jmd0OyAgPGJyIC8+ICAgICAmbHQ7L2RpdiZndDsgIDxiciAvPiAgICAgJmx0O2RpdiZndDsmbHQ7YnV7WyYqJl19dHRvbiB0eXBlPVwic3VibWl0XCImZ3Q7T0smbHQ7L2J1dHRvbiZndDsmbHQ7L2RpdiZndDsgIDxiciAvPiAgICZsdDsvZm9ybSZndDsge1smKiZdfSA8YnIgLz4gJmx0Oy9ib2R5Jmd0OyZsdDsvaHRtbCZndDsgICA8YnIgLz5cIjt7WyYqJl19[[/code]]

Notice that I’ve already included support to display validation errors:
  <asp:ValidationSummary ID=”validationSummary” runat=”server” ShowModelStateErrors=”True”/>  

6. Handle the Form Post when the ‘OK’ button is pressed:
ASP.NET 4.5 has a built in Web Forms binding. It is a Ad-Hoc Model Biding where you can bind to controls without using data bound controls such as formview.
We need to grab values from the browser request and populate properties in our data model through process called: model binding, for this purpose we’ll use Page.TryUpdateModel method.

a. Double click on Default.aspx.cs file

Copy/Paste the following lines into your Default.aspx.cs page:

[[code style="color: black; word-wrap: normal;"]]czo4MTU6XCIgdXNpbmcgU3lzdGVtOyAgPGJyIC8+IHVzaW5nIFN5c3RlbS5XZWIuTW9kZWxCaW5kaW5nOyAgPGJyIC8+IG5hbWVzcGF7WyYqJl19Y2UgQ29tbWVudFBvc3QgIDxiciAvPiB7ICA8YnIgLz4gICBwdWJsaWMgcGFydGlhbCBjbGFzcyBEZWZhdWx0IDogU3lzdGVtLldlYntbJiomXX0uVUkuUGFnZSAgeyAgPGJyIC8+ICAgICBwcm90ZWN0ZWQgdm9pZCBQYWdlX0xvYWQob2JqZWN0IHNlbmRlciwgRXZlbnRBcmdzIGUpe1smKiZdfSAgPGJyIC8+ICAgICB7ICA8YnIgLz4gICAgICAgaWYgKCFJc1Bvc3RCYWNrKSByZXR1cm47ICA8YnIgLz4gICAgICAgQ29tbWVudCB7WyYqJl19Y29tbWVudCA9IG5ldyBDb21tZW50KCk7ICA8YnIgLz4gICAgICAgaWYgKCFUcnlVcGRhdGVNb2RlbChjb21tZW50LCBuZXcgRm9ybXtbJiomXX1WYWx1ZVByb3ZpZGVyKE1vZGVsQmluZGluZ0V4ZWN1dGlvbkNvbnRleHQpKSkgcmV0dXJuOyAgPGJyIC8+ICAgICAgIENvbW1lbnRze1smKiZdfUNvbGxlY3Rpb24uR2V0Q29tbWVudHNDb2xsZWN0aW9uKCkuQWRkUmVzcG9uc2UoY29tbWVudCk7ICA8YnIgLz4gICAgICAgaWYgKGN7WyYqJl19b21tZW50Lkxpa2VkUG9zdC5IYXNWYWx1ZSAmYW1wOyZhbXA7IGNvbW1lbnQuTGlrZWRQb3N0LlZhbHVlKSAgPGJyIC8+ICAgICAgIHtbJiomXX17ICA8YnIgLz4gICAgICAgICBSZXNwb25zZS5SZWRpcmVjdChcInRoYW5rc2Zvcmxpa2luZ2l0Lmh0bWxcIik7ICA8YnIgLz4gICAgICB7WyYqJl19IH0gIDxiciAvPiAgICAgICBlbHNlICAgICAgeyAgPGJyIC8+ICAgICAgICAgUmVzcG9uc2UuUmVkaXJlY3QoXCJvaHdlbGwuaHRtbFwie1smKiZdfSk7ICA8YnIgLz4gICAgICAgfSAgPGJyIC8+ICAgICB9ICA8YnIgLz4gICB9ICA8YnIgLz4gfSAgPGJyIC8+XCI7e1smKiZdfQ==[[/code]]

Notice that I’ve added runat=”server” to the HTML elements. If I didn’t the biding process would not work.

7. Create two response pages:
   a. thanksforlikingit.html
 
   Right click on the project and select new item -> HTML page
   Type: thanksforlikingit.html and Click ‘Add’ button

   b. ohwell.html
    Perform the same steps as above but type ohwell.html instead.
 
   c. Double click on  thanksforlikingit.html file and type

[[code style="color: black; word-wrap: normal;"]]czo4MTU6XCIgdXNpbmcgU3lzdGVtOyAgPGJyIC8+IHVzaW5nIFN5c3RlbS5XZWIuTW9kZWxCaW5kaW5nOyAgPGJyIC8+IG5hbWVzcGF7WyYqJl19Y2UgQ29tbWVudFBvc3QgIDxiciAvPiB7ICA8YnIgLz4gICBwdWJsaWMgcGFydGlhbCBjbGFzcyBEZWZhdWx0IDogU3lzdGVtLldlYntbJiomXX0uVUkuUGFnZSAgeyAgPGJyIC8+ICAgICBwcm90ZWN0ZWQgdm9pZCBQYWdlX0xvYWQob2JqZWN0IHNlbmRlciwgRXZlbnRBcmdzIGUpe1smKiZdfSAgPGJyIC8+ICAgICB7ICA8YnIgLz4gICAgICAgaWYgKCFJc1Bvc3RCYWNrKSByZXR1cm47ICA8YnIgLz4gICAgICAgQ29tbWVudCB7WyYqJl19Y29tbWVudCA9IG5ldyBDb21tZW50KCk7ICA8YnIgLz4gICAgICAgaWYgKCFUcnlVcGRhdGVNb2RlbChjb21tZW50LCBuZXcgRm9ybXtbJiomXX1WYWx1ZVByb3ZpZGVyKE1vZGVsQmluZGluZ0V4ZWN1dGlvbkNvbnRleHQpKSkgcmV0dXJuOyAgPGJyIC8+ICAgICAgIENvbW1lbnRze1smKiZdfUNvbGxlY3Rpb24uR2V0Q29tbWVudHNDb2xsZWN0aW9uKCkuQWRkUmVzcG9uc2UoY29tbWVudCk7ICA8YnIgLz4gICAgICAgaWYgKGN7WyYqJl19b21tZW50Lkxpa2VkUG9zdC5IYXNWYWx1ZSAmYW1wOyZhbXA7IGNvbW1lbnQuTGlrZWRQb3N0LlZhbHVlKSAgPGJyIC8+ICAgICAgIHtbJiomXX17ICA8YnIgLz4gICAgICAgICBSZXNwb25zZS5SZWRpcmVjdChcInRoYW5rc2Zvcmxpa2luZ2l0Lmh0bWxcIik7ICA8YnIgLz4gICAgICB7WyYqJl19IH0gIDxiciAvPiAgICAgICBlbHNlICAgICAgeyAgPGJyIC8+ICAgICAgICAgUmVzcG9uc2UuUmVkaXJlY3QoXCJvaHdlbGwuaHRtbFwie1smKiZdfSk7ICA8YnIgLz4gICAgICAgfSAgPGJyIC8+ICAgICB9ICA8YnIgLz4gICB9ICA8YnIgLz4gfSAgPGJyIC8+XCI7e1smKiZdfQ==[[/code]]
}
   d. Double click on ohwell.html file and type:
[[code style="color: black; word-wrap: normal;"]]czo0MTg6XCIgICZsdDshRE9DVFlQRSBodG1sJmd0OyAgPGJyIC8+ICAmbHQ7aHRtbCB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzE5e1smKiZdfTk5L3hodG1sXCImZ3Q7ICA8YnIgLz4gICZsdDtoZWFkJmd0OyAgPGJyIC8+ICAgICZsdDt0aXRsZSZndDtNeSBCbG9nIC0gc29ycnkge1smKiZdfXlvdSBkaWQgbm90IGxpa2UgaXQhJmx0Oy90aXRsZSZndDsgIDxiciAvPiAgJmx0Oy9oZWFkJmd0OyAgPGJyIC8+ICAmbHQ7Ym9keSZ7WyYqJl19Z3Q7ICA8YnIgLz4gICAgJmx0O2gxJmd0O1RoYW5rcyEmbHQ7L2gxJmd0OyAgPGJyIC8+ICAgICZsdDtwJmd0O1BsZWFzZSB3cml0ZXtbJiomXX0gbWUgd2l0aCB5b3VyIGNvbW1lbnRzIGFuZCBzdWdnZXN0aW9ucyBvbiBob3cgdG8gaW1wcm92ZS4mbHQ7L3AmZ3Q7ICA8YnIgLz4ge1smKiZdfSAmbHQ7L2JvZHkmZ3Q7ICA8YnIgLz4gICZsdDsvaHRtbCZndDsgIDxiciAvPlwiO3tbJiomXX0=[[/code]]
8. Optionally apply some basic CSS:
a. Add style sheets:
 Right Click the project in the solution and select “StyleSheet”



 Copy paste CSS:

[[code style="color: black; word-wrap: normal;"]]czo0MDY6XCIgI2Zvcm0xIGxhYmVsIHsgYm9yZGVyLXJhZGl1czo2cHg7IHdpZHRoOiAxMjBweDsgZGlzcGxheTogaW5saW5lLWJsb2N7WyYqJl19azt9ICA8YnIgLz4gICAjZm9ybTEgaW5wdXQgeyBib3JkZXItcmFkaXVzOjZweDsgbWFyZ2luOiA0cHg7IG1hcmdpbi1sZWZ0OiA2cHtbJiomXX14OyB3aWR0aDogMTUwcHg7fSAgPGJyIC8+ICAgI2Zvcm0xIHNlbGVjdCB7IGJvcmRlci1yYWRpdXM6NnB4OyBtYXJnaW46IDRweDsge1smKiZdfXdpZHRoOiAxNTBweDt9ICA8YnIgLz4gICBidXR0b25bdHlwZT1zdWJtaXRdIHtib3JkZXItcmFkaXVzOjZweDsgZm9udDoyLjRlbSB7WyYqJl19RnV0dXJhLCBcJ0NlbnR1cnkgR290aGljXCcsIEFwcGxlR290aGljLCBzYW5zLXNlcmlmOyBmb250LXNpemU6MTAwJTsgY3Vyc29yOnBve1smKiZdfWludGVyOyBtYXJnaW4tdG9wOiAyMHB4O30gIDxiciAvPlwiO3tbJiomXX0=[[/code]]
*****************************************************
ASP.NET MVC

MVC stands for Model-View-Controller where
M – is a Model(s) – > that represent the data of the application and logic.
V – is View(s) – > these managed display of the information
C – controller (usually) interprets the mouse and keyboard inputs from the user, except in ASP.NET MVC it acts as a handler for incoming browser requests and retrieves model data.

We are going to add ASP.NET MVC to the same solution 
1. Right click on the solution file and choose new project then Web->ASP.NET MVC 4 Web application



Hit OK

(Don’t forget to set CommentPostMVC project as the startup project)


Choose Empty for project template and Razor View Engine.

2. Adding controller
We need to add controller to our MVC application:
Right click on the controllers and choose Add -> Controller
Name the controller: CommentController

MVC parses path in the following manner:

 url: “{controller}/{action}/{id}”




 Now since we’ve named our controller CommentController we have to modify our default routing. Head over to to App_Start folder and open RouteConfig.cs file. Change controller to controller = ‘Comment”

  routes.MapRoute(
                name: “Default”,
                url: “{controller}/{action}/{id}”,
                defaults: new { controller = “Comment”, action = “Index”, id = UrlParameter.Optional }
            );

         
         


   3. Adding View
   Right click on the Views folder in the project area – type ‘Index’ for the view name and uncheck ‘Use a layout or master page:’ and click Add button.

Controllers pass data to the view, which is responsible for rendering it to HTML.
 
   4. Adding Model
   Right click on the Models, add -> class and name is Comments – just like we did for web forms ASP.NET – non mvc

 
   Copy/paste the following lines into Models: (hint: it’s same as ASP.NET NON MVC)
 
using System.ComponentModel.DataAnnotations;

namespace CommentPostMVC.Models
{
    public class Comment
    {
        [Required]        public string PosterName { get; set; }
        [Required]        public string PosterEmail { get; set; }
        [Required(ErrorMessage = “Did you like or didn’t like my post?”)]        public bool? LikedPost { get; set; }
    }
}

5. Add call to our leave comment on our page:

a. Add Html.ActionLink from index.cshtml page to BlogPostComments page:

Copy/paste the following lines into index.cshtml

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name=”viewport” content=”width=device-width” />
    <title>Index</title>
</head>
<body>
    <div>
     
        @Html.ActionLink(“Leave blog post comment”, “BlogPostComments”)
     
    </div>
</body>
</html>

6. The second parameter in ActionLink is essentially an action that we need to implement back in our CommentController, so let’s head back to CommentController.cs and add 
two new methods:

       [HttpGet]
        public ViewResult BlogPostComments()
        {
            return View();
        }
        [HttpPost]
        public ViewResult BlogPostComments(Comment comment)
        {
            return View(“Comment”, comment);
        }

     
        Now, Right click either on the method itself (BlogPostComments or inside the method and add View.
        Check ‘Create a strongly-typed view’ and choose our previously created model Comment (CommentPostMVC.Models) from the drop down list.
 

  The method tagged with attribute [HttpGet] will handle our initial page load and the method tagged with [HttpPost] will handle our post back(s). It also tells MVC to render a view called Comment and pass in a comment model (object.)

     
7. Modify BlogPostComments.cshtml

Copy/Paste the following lines into BlogPostComments.cshtml
     

@model CommentPostMVC.Models.Comment
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name=”viewport” content=”width=device-width” />
    <title>BlogPostComments</title>
</head>
<body>
   @using (Html.BeginForm())
   {
        <p>Name: @Html.TextBoxFor(x => x.PosterName) </p>
        <p>Email: @Html.TextBoxFor(x => x.PosterEmail)</p>
     
       <p>Liked the post?:
           @Html.DropDownListFor(x => x.LikedPost, new[]            {
                new SelectListItem {Text = “Me Likey!”, Value = bool.TrueString},
                new SelectListItem {Text = “Me NO Likey”, Value = bool.FalseString}
            }, “Liked it?”)
        </p>
        <input type=”submit” value=”OK” />
    }
</body>
</html>

     
Notice: the Html.BeginForm() generates PostBack which will be handled by the method tagged with attribute [HttpPost] in our CommentController. 

 
  8. Add a second view (Comment View) for the action method:  ViewResult BlogPostComments(Comment comment)
  Right click inside that method add choose add view:
  Type: ‘Comment’ as a view name.
  Check ‘create a strongly-typed view’ and choose Comment (CommendPostMVC.Models) as a model from the drop down list.

copy/paste the following lines into the Comment.cshtml

@model CommentPostMVC.Models.Comment
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name=”viewport” content=”width=device-width” />
    <title>Comment</title>
</head>
<body>
    <div>
        <h1>Thank you, @Model.PosterName! with email: @Model.PosterEmail</h1>
        @if (Model.LikedPost.HasValue && Model.LikedPost.Value)
        {
            @:Thanks! and Please come again..
        }
        else
        {
           @:Please write me with your comments and suggestions on how to improve.
        }
    </div>
</body>
</html>

9. Validation
Now, that we’ve already have copy/pasted our old Comment model (from our asp.net comment.cs to MVC project comment.cs) mean that we are already including some have some very basic validation inside.

Go back to CommentController.cs and add check to validate the model:

        [HttpPost]        public ViewResult BlogPostComments(Comment comment)
        {
            return ModelState.IsValid ? View(“Comment”, comment) : View();
        }

We, also need to display the errors back to the user, to do this we’ll use:  @Html.ValidationSummary() which returns an unordered list (ul element) of validation messages that are in the System.Web.Mvc.ModelStateDictionary object.

That’s all folks. You can download and/or browse the code here: codeplex