Submitting forms via Ajax using jQuery and ASP.NET MVC 2 extensions

In a previous post I talked about a neat way to submit forms via Ajax using jQuery. In another, more recent post I talked about some extension methods that you could add to the Html Helpers that will allow you to map properties of a Request Model to the “name” attributes of Input elements.

I want to reiterate that I think it’s important to distinguish between View Models and Request Models. For example, many pages in the  app I am currently working on contain, among other things, “Add New” forms. These forms will be submitted via Ajax in order to avoid unnecessary full page refreshes. As none of the fields in these forms are ever populated when the page loads, it seems messy to me if I had to include these properties along with the View Model, just in order to map the “name” properties of the fields (which I would have to do with the MVC version 2 Html Helpers out-of-the-box functionality). It seems more appropriate to me to have more than one set of models – one for rendering the page (the “View Models”), and another, different set for submitting (“Request Models”).

I’d now like to dig a little deeper and put it all together with an example. Say you have an page for managing employees, which includes a form to add an employee. The Request Model might look something like this:

    public class EmployeeMaintenanceRequestModel
    {
        public Employee Employee { get; set; }
    }

Where the Employee class looks something like this:

    public class Employee
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string PhoneNumber { get; set; }
        public string EmailAddress { get; set; }
    }

These property names can then be mapped to the names of Input elements in the form on the page:

The form will be submitted via Ajax, which I can do using jQuery:

A Closer Look at the “serializeArray()” magic

Let’s take a look closer at the data that will be posted, and note that I am using jQuery’s “serializeArray()” magic trick to automatically build an array from the values of the input elements in the form:

The object that gets submitted will look like this:

Then when the request hits the MVC Controller action, the data will automatically get bound to an Employee object:

One Step Further – Binding to a Request Model

Automatically binding to an Employee object is nice, but what if there were some other business objects forming part of the request? It would be nice to automatically bind to the RequestModel object, i.e.:

To achieve that, one way would be to set up Model Binders. However, another alternative would be to modify the Html Helper extensions to output HTML like this:

<input id=”anything” name=”requestModel.Employee.FirstName” type=”text” value=”" />

That can be done, for example, by changing the TextBoxFor method like this:

This will then output the “name” attribute of Input Elements including the entire text of the right-hand-side of the lambda expression, in other words allowing for this syntax:

This will then be packaged up in a suitable array again using jQuery’s serializeArray() magic:

Which will then be passed to the Controller action method like this:

Conclusion

I have tried to demonstrate that by using a combination of extensions to the Asp.NET MVC 2 Html Helpers, jQuery, and a separation of View and Request Models, the asynchronous posting of form data using the Asp.Net MVC framework can be made cleaner, simpler, and more organized than with the out-of-the-box functionality. Almost all other guides don’t differentiate between View and Request Models, and the majority of examples are for full-page refreshes rather than Ajax calls. It might not suit everyone, but for me this fits very well to the type of business applications I will be building with Asp.NET MVC.

Advertisement

« Adding Extension Methods to the ASP.NET MVC 2 Strongly Typed Html Helpers

Creating a Generic Base Fake Repository Class »