Model Binding and Form Validation in ASP.Net MVC 3

Model Binding in ASP.NET MVC

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:

create table tbl_Student_LogIn
(
ID int identity primary key,
Student_Name varchar(50),
UserName varchar(50),
Password varchar(50),
RePassword varchar(50)
)

Step 1

Add a Controller to the Project as in the following:

Add Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApplication3.Controllers
{
public class Student_ManagementController : Controller
{
//
// GET: /Student_Management/
public ActionResult Index()
{
return View();
}
}
}

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

Class Name Added: "Cls_Student_LogIn"

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
//
using System.Data.Entity;
using System.ComponentModel.DataAnnotations;
namespace MvcApplication3.Models
{
public class Cls_Student_LogIn
{
}
}

Step 4

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
//
using System.Data.Entity;
using System.ComponentModel.DataAnnotations;
namespace MvcApplication3.Models
{
public class Cls_Student_LogIn
{
public string PStudent_Name
{
set;
get;
}
public string PUser_Name
{
set;
get;
}
public string PPassword
{
set;
get;
}
public string PRepassword
{
set;
get;
}
}
}

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:

@model MvcApplication3.Models.Cls_Student_LogIn
@{
ViewBag.Title = "Index";
}
<h6>Index Page Of Student Management System</h6>
@using (Html.BeginForm("LogIn","Student_Management",FormMethod.Post))
{
<table>
<tr>
<td>User Name</td><td>:</td><td>*</td><td>@Html.TextBoxFor(Model=>Model.PUser_Name)</td>
</tr>
<tr>
<td>Password</td><td>:</td><td>*</td><td>@Html.PasswordFor(Model=>Model.PPassword)</td>
</tr>
<tr>
<td>Log In</td><td>:</td><td></td><td><input type="submit" value="Log In" /></td>
</tr>
<tr>
<td>Don't Have An Account</td><td>:</td><td></td><td>@Html.ActionLink("New User", "NewUser","Student_Management")</td>
</tr>
</table>
}

Run the application and watch the output:

index

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”.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
//
using System.Data.Entity;
using System.ComponentModel.DataAnnotations;
namespace MvcApplication3.Models
{
public class Cls_Student_LogIn
{
[Required(ErrorMessage = "Enter Your Name")]
[DataType(DataType.Text)]
[Display(Name = "Name")]
public string PStudent_Name
{
set;
get;
}
[Required(ErrorMessage = "Enter Your User Name")]
[DataType(DataType.Text)]
[Display(Name = "User Name")]
public string PUser_Name
{
set;
get;
}
[Required(ErrorMessage = "Enter Your Password")]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string PPassword
{
set;
get;
}
[Required(ErrorMessage = "Enter Your RePassword")]
[DataType(DataType.Password)]
[Display(Name = "RePassword")]
public string PRepassword
{
set;
get;
}
}
}

Step 10

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

Step 11

After dragging:

<h6>Index Page Of Student Management System</h6>
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

Step 12

Modify the Index.cshtml file as in the following:

@model MvcApplication3.Models.Cls_Student_LogIn
@{
ViewBag.Title = "Index";
}
<h6>Index Page Of Student Management System</h6>
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
@using (Html.BeginForm("LogIn","Student_Management",FormMethod.Post))
{
<table>
<tr>
<td>User Name</td><td>:</td><td>*</td><td>@Html.TextBoxFor(Model=>Model.PUser_Name)</td>
</tr>
<tr>
<td></td><td></td><td></td><td>@Html.ValidationMessageFor(Mode=>Model.PUser_Name)</td>
</tr>
<tr>
<td>Password</td><td>:</td><td>*</td><td>@Html.PasswordFor(Model=>Model.PPassword)</td>
</tr>
<tr>
<td></td><td></td><td></td><td>@Html.ValidationMessageFor(Model=>Model.PPassword)</td>
</tr>
<tr>
<td>Log In</td><td>:</td><td></td><td><input type="submit" value="Log In" /></td>
</tr>
<tr>
<td>Don't Have An Account</td><td>:</td><td></td><td>@Html.ActionLink("New User", "NewUser","Student_Management")</td>
</tr>
</table>
}

Run the application and test it for validation.

Step 13

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

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

Step 14

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApplication3.Controllers
{
public class Student_ManagementController : Controller
{
//
// GET: /Student_Management/
public ActionResult Index()
{
return View();
}
public ActionResult NewUser()
{
return View();
}
}
}

Step 15

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

NewUser

NewUser.cshtml file

@{
ViewBag.Title = "NewUser";
}
<h2>NewUser</h2>

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

Step 16

Again do Model Binding.

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

Design of the NewUser.cshtml file

@model MvcApplication3.Models.Cls_Student_LogIn
@{
ViewBag.Title = "NewUser";
}
<h2>NewUser</h2>
<h4>@Html.ActionLink("Go Back", "Index", "Student_Management")</h4>
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
@using (@Html.BeginForm("Insert", "Student_Management", FormMethod.Post))
{
<table>
<tr>
<td>Enter Your Name</td><td>:</td><td>*</td><td>@Html.TextBoxFor(Model=>Model.PStudent_Name)</td>
</tr>
<tr>
<td> </td><td></td><td></td><td>@Html.ValidationMessageFor(Model=>Model.PStudent_Name)</td>
</tr>
<tr>
<td>Enter Your UserName</td><td>:</td><td>*</td><td>@Html.TextBoxFor(Model=>Model.PUser_Name)</td>
</tr>
<tr>
<td> </td><td></td><td></td><td>@Html.ValidationMessageFor(Model=>Model.PUser_Name)</td>
</tr>
<tr>
<td>Enter Password</td><td>:</td><td>*</td><td>@Html.PasswordFor(Model=>Model.PPassword)</td>
</tr>
<tr>
<td> </td><td></td><td></td><td>@Html.ValidationMessageFor(Model=>Model.PPassword)</td>
</tr>
<tr>
<td>Enter RePassword</td><td>:</td><td>*</td><td>@Html.PasswordFor(Model=>Model.PRepassword)</td>
</tr>
<tr>
<td> </td><td></td><td></td><td>@Html.ValidationMessageFor(Model=>Model.PRepassword)</td>
</tr>
<tr>
<td>Submit The Data </td><td>:</td><td></td><td><input type="submit" value="Save" /></td>
</tr>
</table>
}

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:

create table tbl_Student_LogIn
(
ID int identity primary key,
Student_Name varchar(50),
UserName varchar(50),
Password varchar(50),
RePassword varchar(50)
)
GO
--
select * from tbl_Student_LogIn

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.

output

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.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//include the model namespaces here
using MvcApplication3.Models;
namespace MvcApplication3.Controllers
{
public class Student_ManagementController : Controller
{
//
// GET: /Student_Management/
public ActionResult Index()
{
return View();
}
public ActionResult NewUser()
{
return View();
}
public ActionResult Insert(Cls_Student_LogIn Obj) // put the class name and create an object of it
{
using (MVC_PracticeEntities DbContext = new MVC_PracticeEntities())
{
//table Object
tbl_Student_LogIn tbl = new tbl_Student_LogIn();
//
tbl.Student_Name = Obj.PStudent_Name;
tbl.UserName = Obj.PUser_Name;
tbl.Password = Obj.PPassword;
tbl.RePassword = Obj.PRepassword;
//
DbContext.AddTotbl_Student_LogIn(tbl);
int i = DbContext.SaveChanges();
if (i > 0)
{
ViewBag.M = "One User Created Successfully.";
}
//
}
return View();
}
}
}

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

new user

6 Comments

Join the conversation! Your thoughts help the community grow.

Rasmiranjan sahoo11y ago
Please explain about AddTotbl_Student_LogIn(tbl) .
- Priti Ranjan Dash11y ago
  Hello, Rashmi -- This Program was developed by using EntityFramework for Database operation.Step 1: In Entity Framework First We have to declare the DataContext Object (The object of the.edmx class) Step 2: Then we have to create the Object of the Database table which we want to work with. Step 3: Then Adding this Database table object to the ADO.Net Entity Data Model. AddTo+(Table Object) is only assignment, And also a Syntactical Rule in Entity Framework. Step 4: Then we are calling the SaveChanges() Method to perform Final Operation. (If you want to know more about EntityFramework, Please Follow these Links.) 1. http://csharp-guide.blogspot.in/2012/08/entity-framework.html 2. www.entityframeworktutorial.net/
Priti Ranjan Dash11y ago
Thank You to all of you. Very soon I will clarify all yours doubts related to the above article.
Gaurav Gupta11y ago
what is the purpose of using 3 JS Script file in "NewUser.cshtml" file..??
Jeetendra Gund11y ago
Welcome... Sir
Dinesh Beniwal11y ago
Good start Priti Ranjan Dash, Welcome to C# Corner.