Post
Ask Question

ASP.NET MVC Model Binder And Custom Binder

ASP.NET MVC Model binding is one of the best features in ASP.NET MVC Framework. It is a bridge between HTTP request and action methods. It helps GET and POST to get automatically transferred into the data model.

MVC Model Binder uses Default Model Binder for building model parameter for MVC runtime.

Now,  before this we would like to first explain simple model binding.

  • Now, we have created a new MVC Web application project by File- New Project- Web Application – MVC.
  • Now, we will add a new strongly typed View which we will bind to the model, as shown below.
    1. @model ModelBinding.Models.Client  
    2. @ {  
    3.     ViewBag.Title = "GetClient";  
    4. } < h3 Details < /h3>   
    5.   < h2 >   
    6.   Cleint Code: @Model.ClientCode   
    7.     < br / >   
    8.     Cleint Name: @Model.ClientName   
    9. < /h2>  
  • Now, add a Client Model in Models folder, as shown below.
    1. public class Client {  
    2.     public string ClientCode {  
    3.         get;  
    4.         set;  
    5.     }  
    6.     public string ClientName {  
    7.         get;  
    8.         set;  
    9.     }  
    10. }  
  • Add ClientController which is shown below.
    1. public class ClientController: Controller {  
    2.     // GET: Client  
    3.     public ActionResult GetClient() {  
    4.         Client cnt = new Client {  
    5.             ClientCode = "1001",  
    6.                 ClientName = "Aman"  
    7.         };  
    8.         return View(cnt);  
    9.     }  
    10. }  
  • Now, add another action method as EnterClient which will allow the users to enter client details, as shown below.
    1. public ActionResult EnterCleint() {  
    2.     return View();  
    3. }  
  • As shown below, it is having two textboxes and Submit button. Along with it, the form is using POST method for the action Submit.
    1. @ {  
    2.     ViewBag.Title = "EnterCleint";  
    3. } < h2 > EnterCleint < /h2> < form action = "Submit"  
    4. method = "post" > Cleint Code: < input type = "text"  
    5. name = "ClientCode " / > < br / > Cleint Name: < input type = "text"  
    6. name = "ClientName " / > < br / > < input type = "submit"  
    7. value = "Submit"  
    8. id = "Submit" / > < /form>  
  •  Now, we will create Submit action methond in the Controller.
    1. public ActionResult Submit() {  
    2.     Client cnt = new Client {  
    3.         ClientCode = Request.Form["CleintCode"],  
    4.             ClientName = Request.Form["CleintName"]  
    5.     };  
    6.     return View("GetClient", cnt);  
    7. }  
    In the above code, we are fetching the values on the basis of textbox name and assigning it to Client and passing to GetCleint View.

  • Now, you can improve your code by adding parameter of type model in action method as shown below,
    1. public ActionResult Submit(Client cnt) {  
    2.     return View("GetClient", cnt);  
    3. }  

Here, we have to take care textboxes name must be same in above example.

Now, if we will take a real-life example - the designing team works on design and developers work on development i.e. property name of the model and control names are different. In this case, it is very difficult to maintain the name on both sides or we can say lots of efforts is required for the same.

To overcome such a scenario, we can take the help of Model Binders, we can say Model Binder has mapping code which connects your user interface with your Model. It acts like a bridge between the Model and View.

Now, let’s see the same with example.

  • Lets add a View having two textboxes and Submit button. Along with it, the form is using post method to action Submit.
    1. @ {  
    2.     ViewBag.Title = "EnterCleint";  
    3. } < h2 > EnterCleint < /h2> < form action = "Submit"  
    4. method = "post" > Cleint Code: < input type = "text"  
    5. name = "txtClientCode" / > < br / > Cleint Name: < input type = "text"  
    6. name = "txtClientName" / > < br / > < input type = "submit"  
    7. value = "Submit"  
    8. id = "Submit" / > < /form>  

In the above example, the View is having two textboxes, i.e., txtClientCode and txtClientName which are not same as property names of Client model.

  • Now, add a new folder as Utilities.
  • Now, add a class, ClientBinder class, which will implement the System.Web.Mvc.IModelBinder as shown below.
    1. public class ClientBinder: IModelBinder {  
    2.     public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext) {  
    3.         HttpContextBase context = controllerContext.HttpContext;  
    4.         string clientCode = context.Request.Form["txtClientCode"];  
    5.         string clientName = context.Request.Form["txtClientName"];  
    6.         return new Client {  
    7.             ClientCode = clientCode,  
    8.                 ClientName = clientName  
    9.         };  
    10.     }  
    11. }  

In the above code, we are accessing the form object from the request object with the help of context object and converting it into Model, i.e., Client.

  • Now, we need to use the above ClientBinder and map it to our Client object which we will do in below.
    1. ActionResult Submit([ModelBinder(typeof(ClientBinder))] Client cnt)  

In the above code, we are using ClientBinder.

  • Now, add/modify the action method.
    1. public ActionResult Submit([ModelBinder(typeof(ClientBinder))] Client cnt) {  
    2.     return View("GetClient", cnt);  
    3. }  
That's it. We are done here.