Model Binding and Form Validation in ASP.Net MVC 3

Model Binding in ASP.NET MVC



There are the following three ways to pass a value or data from a view to an action:

• Parameterized Query.
• Form Data.
• Model Binding.

Model binding: In this method we can bind a form using a Model class. The class is bound with the form, in other words the User Interface (View). So the form can be validated using the class and the control's value like the value from TextBoxes and others are passed to the Action Method directly.

• What we will do in this application.
• We learn how to do Model Binding in MVC.
• We will create a User Registration Form.
• We will perform Login Authentication.
• We will Validate the Form using Model Binding.
• For all these operations we will use the Entity Framework.
  
  (The database script is available in the file.)

Create the following table inside your database:

Step 1

Add a Controller to the Project as in the following:

Step 2

Add a class to the Model folder by right-clicking it then selecting Add Class.



Step 3

Provide it a name such as Cls_Student_LogIn.



Class Name Added: "Cls_Student_LogIn"

Step 4

Add properties to the class for the database table's columns.

Step 5

Add a view (to the Controller by right-clicking).



Step 6

Go to View.



Step 7

At the Index View do this.



Index script and code:

Run the application and watch the output:



Note: When we click on the Submit Button it automatically finds the Login Action Method. So we need to add an Action Method named as Login.

But before that let's validate the Form

Step 8

Add the following two namespaces to the “Cls_Student_LogIn.cs” class if not yet added.

• using System.Data.Entity;
• using System.ComponentModel.DataAnnotations;

Property: We must add basically these three properties to the class.

• [Required(ErrorMessage = " ")]
• [DataType(DataType.Text)]
• [Display(Name = " ")]

Step 9

Add validation code to the class or modify the class “Cls_Student_LogIn.cs”.

Step 10

Then go to the View files, in this case the Index.cshtml file and 3 jQuery files.



Step 11

After dragging:

Step 12

Modify the Index.cshtml file as in the following:

Run the application and test it for validation.



Step 13

We need to register for a New User and to perform Log on Authentication.

1. Insert New Data
2. Log On Program
3. We need to design the form for Insert and validate it.

Step 14

Add a new Action Method to the “Student_Management” controller.

Step 15

Right-click on the NewUser() Action Method and add a new View.



NewUser.cshtml file

Design it ("New User") and validate it as we have done previously.

Step 16

Again do Model Binding.

1. Bind the class “Cls_Student_LogIn.cs” to it.
2. Validate it

Design of the NewUser.cshtml file

Run the application:



Click on the New User link:



Now our data validation is complete. We will now do the save operation of the new user.

First create a database table as in the following:

Procedure:

• Add this table to the EntityFramework file (.Edmx) file.
• Remember, we have already created a class file for the table “Cls_Student_LogIn”.
• Right-click on the .edmx file and select Update Model.
  
  

Step 1

Add the table name.



Step 2

After adding the table, you will see this output. Click Save.



Step 3

For saving the New User we will create an ActionMethod Insert and we will insert the data now.

• Go to the Controller and create an Action Method as Insert.
  
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. //include the model namespaces here
  7. using MvcApplication3.Models;
  9. namespace MvcApplication3.Controllers
  10. {
  11. public class Student_ManagementController : Controller
  12. {
  13. //
  14. // GET: /Student_Management/
  16. public ActionResult Index()
  17. {
  18. return View();
  19. }
  21. public ActionResult NewUser()
  22. {
  23. return View();
  24. }
  26. public ActionResult Insert()
  27. {
  28. return View();
  29. }
  31. }
  32. }
      
• To add a View for It, right-click on Insert() then select Add view.
  
  
  
  Watch it:
  
  

Step 4

Write code for the Insert operation at the Insert() action method in the Controller.

• Run the application and add a user.
  
  
  
  
• Click on Save:
  
  
• Add some more users and watch them in the database.
  
• SQL Management Studio:
  
  1. select * from tbl_Student_LogIn
     
  
  
  
• Now we will do the Login authentication.
  

Step 5

Add a Login() action method to the Controller.

• Go To The Controller and add an action method named "Login”.
  
  1. public ActionResult LogIn()
  2. {
  3. return View();
  4. }
     
• Add a View. To do that right-click on Login() then selct Add View.
  
  
  
  
• Watch it after was created.
  
  
  
  
• Now we will do the Login Authentication as in the following:
  
  
  • Go The the Controller.
  • Add the following code for Login().
    
    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Web;
    5. using System.Web.Mvc;
    6. //include the model namespaces here
    7. using MvcApplication3.Models;
    9. namespace MvcApplication3.Controllers
    10. {
    11. public class Student_ManagementController : Controller
    12. {
    13. //
    14. // GET: /Student_Management/
    16. public ActionResult Index()
    17. {
    18. return View();
    19. }
    21. public ActionResult NewUser()
    22. {
    23. return View();
    24. }
    26. public ActionResult Insert(Cls_Student_LogIn Obj) // put the class name and create an object of it
    27. {
    28. using (MVC_PracticeEntities DbContext = new MVC_PracticeEntities())
    29. {
    30. //table Object
    31. tbl_Student_LogIn tbl = new tbl_Student_LogIn();
    32. //
    33. tbl.Student_Name = Obj.PStudent_Name;
    34. tbl.UserName = Obj.PUser_Name;
    35. tbl.Password = Obj.PPassword;
    36. tbl.RePassword = Obj.PRepassword;
    37. //
    38. DbContext.AddTotbl_Student_LogIn(tbl);
    39. int i = DbContext.SaveChanges();
    40. if (i > 0)
    41. {
    42. ViewBag.M = "One User Created Successfully.";
    43. }
    44. //
    45. }
    47. return View();
    48. }
    53. public ActionResult LogIn(Cls_Student_LogIn Obj)// put the class name and create an object of it
    54. {
    55. using (MVC_PracticeEntities DbContext = new MVC_PracticeEntities())
    56. {
    57. tbl_Student_LogIn tbl = new tbl_Student_LogIn();
    59. var Data2 = (from abc in DbContext.tbl_Student_LogIn
    60. where abc.UserName == Obj.PUser_Name && abc.Password == Obj.PPassword
    61. select abc).SingleOrDefault();
    62. }
    63. ViewBag.M = "Welcome User";
    64. return View();
    65. }
    66. }
    67. }
        
• Run the application and watch the output or perform a Login.
  
  
  
• Click on Login.
  
  
  
  I am again providing all the code and scripts.
  
  
• The following is the database table script.
  
  1. create table tbl_Student_LogIn
  2. (
  3. ID int identity primary key,
  4. Student_Name varchar(50),
  5. UserName varchar(50),
  6. Password varchar(50),
  7. RePassword varchar(50)
  8. )
  10. GO
      
  
  
• The following is the full code of the Cls_Student_LogIn class (Model Class).
  
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. //
  6. using System.Data.Entity;
  7. using System.ComponentModel.DataAnnotations;
  8. using System.Web.Mvc;
  10. namespace MvcApplication3.Models
  11. {
  12. public class Cls_Student_LogIn
  13. {
  14. [Required(ErrorMessage = "Enter Your Name")]
  15. [DataType(DataType.Text)]
  16. [Display(Name = "Name")]
  17. public string PStudent_Name
  18. {
  19. set;
  20. get;
  21. }
  23. [Required(ErrorMessage = "Enter Your User Name")]
  24. [DataType(DataType.Text)]
  25. [Display(Name = "User Name")]
  26. public string PUser_Name
  27. {
  28. set;
  29. get;
  30. }
  32. [Required(ErrorMessage = "Enter Your Password")]
  33. [DataType(DataType.Password)]
  34. [Display(Name = "Password")]
  35. public string PPassword
  36. {
  37. set;
  38. get;
  39. }
  41. [Required(ErrorMessage = "Enter Your Re Password")]
  42. [DataType(DataType.Password)]
  43. [Display(Name = "RePassword")]
  44. [Compare("PPassword", ErrorMessage = "The Password and Re Password do not match.")]
  45. public string PRepassword
  46. {
  47. set;
  48. get;
  49. }
  51. }
  52. }
      
  
  
• The following is the full code of Index.cshtml.
  
  1. @model MvcApplication3.Models.Cls_Student_LogIn
  2. @{
  3. ViewBag.Title = "Index";
  4. }
  6. <h6>Index Page Of Student Management System</h6>
  8. <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
  9. <script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
  10. <script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
  13. @using (Html.BeginForm("LogIn","Student_Management",FormMethod.Post))
  14. {
  15. <table>
  16. <tr>
  17. <td>User Name</td><td>:</td><td>*</td><td>@Html.TextBoxFor(Model=>Model.PUser_Name)</td>
  18. </tr>
  19. <tr>
  20. <td></td><td></td><td></td><td>@Html.ValidationMessageFor(Mode=>Model.PUser_Name)</td>
  21. </tr>
  22. <tr>
  23. <td>Password</td><td>:</td><td>*</td><td>@Html.PasswordFor(Model=>Model.PPassword)</td>
  24. </tr>
  25. <tr>
  26. <td></td><td></td><td></td><td>@Html.ValidationMessageFor(Model=>Model.PPassword)</td>
  27. </tr>
  28. <tr>
  29. <td>Log In</td><td>:</td><td></td><td><input type="submit" value="Log In" /></td>
  30. </tr>
  31. <tr>
  32. <td>Don't Have An Account</td><td>:</td><td></td><td>@Html.ActionLink("New User", "NewUser","Student_Management")</td>
  33. </tr>
  34. </table>
  35. }
      
  
  
• The following is the full code of NewUser.cshtml.
  
  1. @model MvcApplication3.Models.Cls_Student_LogIn
  2. @{
  3. ViewBag.Title = "NewUser";
  4. }
  6. <h2>NewUser</h2>
  8. <h4>@Html.ActionLink("Go Back", "Index", "Student_Management")</h4>
  10. <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
  11. <script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
  12. <script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
  14. @using (@Html.BeginForm("Insert", "Student_Management", FormMethod.Post))
  15. {
  16. <table>
  17. <tr>
  18. <td>Enter Your Name</td><td>:</td><td>*</td><td>@Html.TextBoxFor(Model=>Model.PStudent_Name)</td>
  19. </tr>
  20. <tr>
  21. <td> </td><td></td><td></td><td>@Html.ValidationMessageFor(Model=>Model.PStudent_Name)</td>
  22. </tr>
  23. <tr>
  24. <td>Enter Your UserName</td><td>:</td><td>*</td><td>@Html.TextBoxFor(Model=>Model.PUser_Name)</td>
  25. </tr>
  26. <tr>
  27. <td> </td><td></td><td></td><td>@Html.ValidationMessageFor(Model=>Model.PUser_Name)</td>
  28. </tr>
  29. <tr>
  30. <td>Enter Password</td><td>:</td><td>*</td><td>@Html.PasswordFor(Model=>Model.PPassword)</td>
  31. </tr>
  32. <tr>
  33. <td> </td><td></td><td></td><td>@Html.ValidationMessageFor(Model=>Model.PPassword)</td>
  34. </tr>
  35. <tr>
  36. <td>Enter Re Password</td><td>:</td><td>*</td><td>@Html.PasswordFor(Model=>Model.PRepassword)</td>
  37. </tr>
  38. <tr>
  39. <td> </td><td></td><td></td><td>@Html.ValidationMessageFor(Model=>Model.PRepassword)</td>
  40. </tr>
  41. <tr>
  42. <td>Submit The Data </td><td>:</td><td></td><td><input type="submit" value="Save" /></td>
  43. </tr>
  44. </table>
  45. }
      
  
  
• The following is the full code for the Controller again:
  
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. //include the model namespaces here
  7. using MvcApplication3.Models;
  9. namespace MvcApplication3.Controllers
  10. {
  11. public class Student_ManagementController : Controller
  12. {
  13. //
  14. // GET: /Student_Management/
  16. public ActionResult Index()
  17. {
  18. return View();
  19. }
  21. public ActionResult NewUser()
  22. {
  23. return View();
  24. }
  26. public ActionResult Insert(Cls_Student_LogIn Obj) // put the class name and create an object of it
  27. {
  28. using (MVC_PracticeEntities DbContext = new MVC_PracticeEntities())
  29. {
  30. //table Object
  31. tbl_Student_LogIn tbl = new tbl_Student_LogIn();
  32. //
  33. tbl.Student_Name = Obj.PStudent_Name;
  34. tbl.UserName = Obj.PUser_Name;
  35. tbl.Password = Obj.PPassword;
  36. tbl.RePassword = Obj.PRepassword;
  37. //
  38. DbContext.AddTotbl_Student_LogIn(tbl);
  39. int i = DbContext.SaveChanges();
  40. if (i > 0)
  41. {
  42. ViewBag.M = "One User Created Successfully.";
  43. }
  44. //
  45. }
  47. return View();
  48. }
  50. public ActionResult LogIn(Cls_Student_LogIn Obj)// put the class name and create an object of it
  51. {
  52. using (MVC_PracticeEntities DbContext = new MVC_PracticeEntities())
  53. {
  54. tbl_Student_LogIn tbl = new tbl_Student_LogIn();
  56. var Data2 = (from abc in DbContext.tbl_Student_LogIn
  57. where abc.UserName == Obj.PUser_Name && abc.Password == Obj.PPassword
  58. select abc).SingleOrDefault();
  59. }
  60. ViewBag.M = "Welcome User";
  61. return View();
  62. }
  64. }
  65. }
      

Output