Model Binders In ASP.NET MVC

Introduction

In this article we will try to understand what ASP.NET MVC Model Binders are. We will try to implement Model binding to see how they beneficial for all of us.

Background

As we know that when we make a browser request to the class object and the properties name of the class are same as the html control name that data is automatically mapped to the class properties, this mapping is automatic as shown below:

Using the Sample Code

Class Customer with Properties

publicclassCustomer
{

    publicstring Code
    {
        get;
        set;
    }

    publicstring Name
    {
        get;
        set;
    }
}

View

<formaction="Customer/Submit" method="post">
    <table>
        <tr>
            <td>CustomerCode</td>
            <td>
                <inputid="Code" name="Code" type="text" />
            </td>
        </tr>
        <tr>
            <td>Customer Name</td>
            <td>
                <inputid="Name" name="Name" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <inputid="btnSubmit" name="btnSubmit" type="submit" value="Login" />
            </td>
        </tr>
    </table>
    </form>

So now when we submit the form to the controller the form data is automatically mapped to the class object having the same name as html control name as shown below:


                                 Figure 1: User Login Screen.


      Figure 2: Auto model mapping, we can see the form data passed to the class object.

Now what if we have our properties and html control name different let’s try the same and see what happens:

View and Html control name

<div>
    <formaction="Customer/Submit" method="post">
        <table>
            <tr>
                <td>CustomerCode</td>
                <td>
                    <inputid="TxtCustomerCode" name="TxtCustomerCode" type="text" />
                </td>
            </tr>
            <tr>
                <td>Customer Name</td>
                <td>
                    <inputid="TxtCustomerName" name="TxtCustomerName" type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    <inputid="btnSubmit" name="btnSubmit" type="submit" value="Login" />
                </td>
            </tr>
        </table>
        </form>

Class Properties

publicclassCustomer
{

    publicstring Code
    {
        get;
        set;
    }

    publicstring Name
    {
        get;
        set;
    }
}

                                             Figure 3: UI Screen

Hence we can see below as soon as the name is different the form data is not automatically mapped.


                                 Figure 4: Form data doesn’t map with class object

As we know that User Interface are designed by the Web Developers and C# created by Developers. So they can change the name to their preference, then the auto mapping won’t happen as we have seen above because our property name and user interface name is different the form data is not bind to the class object. So here Model Binder comes into picture. Model Binder contains a code which maps the browser request to data object.

The System.Web.MvcNamespace provides the concrete implementation of a model binder.

In order to implement Model binder we have to implement IModelBinder interface as shown below.

publicclassCustomerBinder : IModelBinder

For this we create our class called CustomerBinder and implement IModelBinder interface and then we implement the Interface method.


                     Figure 5: Demonstrating Implementation of IModelBinder Interface

As we know the Web works on simple principle of Request and Response. The User sends the request to the server with the help of browser and server interprets the request and gives desired response to the User on the browser.


                        Figure 6: Simple Demonstration of Web working

Now both of the Request and Response object belongs to Context object. Let’s get access to Request and Response object and map them together as shown below:

publicclassCustomerBinder: IModelBinder
{

    publicobjectBindModel(ControllerContextcontrollerContext, ModelBindingContextbindingContext)
    {
        HttpContextBaseobjContext = controllerContext.HttpContext;
        stringCustomerCode = objContext.Request.Form["TxtCustomerCode"]; //binding with UI txtCustomerCode
        stringCustomerName = objContext.Request.Form["TxtCustomerName"]; //binding with UI txtCustomerName
        CustomerobjCustomer = newCustomer() {
            Code = CustomerCode, //mapping to the properties
                Name = CustomerName //mapping to the properties
        };
        returnobjCustomer; //returning the object

    }
}

Now we will use this class and map to the CustomerObject, in the Submit Action as shown below:

publicActionResult Submit([ModelBinder(typeof(CustomerBinder))] Customerobj)
    //call the CustomerBinder class and fill this Customer Object
    {
        if (ModelState.IsValid) {
            return View("Customer", obj);
        } else {
            return View("Index", obj);
        }
    }

([ModelBinder(typeof(CustomerBinder))] Customerobj
Now the above Class CustomerBinder will be called and from the Http Context we can get the Request.Form data and bind it to the Class properties.


                                                            Figure 7:Model Binding 



Now we can see that the mapping has been done by Model Binder class, now developers and designers can work separately. So we can see how Model Binders help us to map the UI data with Class properties. It would be easy that we are not dependent upon the UI controls Name we can simply put the Name in the Model Binder mapping code.

Conclusion

In this article we specially focused about Model Binders and how we can bind different name UI controls with different properties. Your comments, votes and suggestions motivate us for writing more stuff like this.