Extending MVC Ajax Form

In this article, I'll explain and demonstrate how to extend MVC Ajax form helpers with the following functionality:

1. Automatically create an ajax target element when no UpdateTargetId is provided.
2. Auto-refresh a form after a period of time, say 1 minute.

 Here, I'll assume that you have a basic understanding of how to work with MVC Ajax forms.

If not then read the "Introduction to MVC Ajax forms" section below, otherwise skip it and go to the section "Extending Ajax form helper".
 
1. Introduction to MVC Ajax forms

In MVC, to place elements in a form, the Html.BeginForm helper method is used.

@using(Html.BeginForm("Method","Controller"…)

{

}

To enable Ajax capabilities for your form (post to and refresh from the server without refreshing an entire page), do the following:

• Create a partial view for the form
• Create an action method that returns the partial method above.
• Ensure "jquery.unobtrusive-ajax.js" is included in your main view or layout
• Use Ajax.BeginForm with Ajax options instead of using the Html.BeginForm helper method
• Render the partial view in your main view

The common Ajax.BeginForm method syntax is as shown below:

@using(Ajax.BeginForm("Action","Controller", RouteAjaxOptions, HtmlAttributes)

{

}

The required Ajax option is UpdateTargetId. It denotes the target element id in which the response is either updated to or inserted before or after, depending on another Ajax option InsertionMode.  InsertionMode is optional and set to replace by default. If no UpdateTargetId is provided then the Ajax response is never updated.
 

@using (Ajax.BeginForm("ActionMethod", "Controller", new AjaxOptions { UpdateTargetId ="targetelementid"})

{

}

Generally the partial view is rendered inside the update target element in the main view. It really depends on the situation.

When the Ajax form is submitted, the action method returns HTML from a partial view and the response is updated in or inserted before or after the UpdateTargetId element.

2. Extending Ajax form helper
 
In the example project, I'll demonstrate how to handle a MVC form without the UpdateTargetId option and Auto Refresh the form with randomly generated background colors from the server after some time period. All this using custom form helper methods.

1. Create a basic MVC4 project. A project will be created without any controllers and views other than layout and view_ start views. In VS2010, no control and views are created.
   
   
   
   
2. Copy the Helpers directory from the source code to your project's main directory.
   
   
   
   I have added:
   
    a) A new AjaxOptions object that inherits System.Web.Mvc.Ajax.AjaxOptions and extended with properties RefreshTime
    b) A new Ajax extension helper method BeginFormEx that takes a new extended AjaxOptions object instead of System.Web.Mvc.Ajax.AjaxOptions
   
   Ajax.BeginFormEx(string action, string controller, RouteValueDictionary routeValues, AjaxOptions options, RouteValueDictionary htmlAttributes);
   
   Also added various overload methods for the method above.
    
3. Copy "jquery.unobtrusive-ajax.js" to your scripts folder. This updated file contains extra script to handle required functionality.
4. Copy "FooModel.cs" from the source code to your project's Models directory. This model holds CurrentColor, PreviousColor and RefreshTime values. 
5. Add a new partial view "MyForm" in your project shared views folder and add the following code.
   
   
   
   
6. Add a new (update if it exists) view Index.cshtml in the Views/Home directory. This will be the main view that displays the preceding partial view MyForm. Add the following code.
   
   
   
   
7. Add a new controller (or update if it exists) HomeController.cs in Controllers/Home directory. This controller will handle a main view and partial views. Create two methods, one for the main view Index and another to handle the MyForm post.
   
   
   
   
8. All done, compile and start the project. 

You'll see the form background color will be changed every 3 seconds. Try with various timings in the Refresh Time text box(1s= 1000).

In this article I have demonstrated how to extend MVC ajax helpers and how to auto-refresh an ajax form after a period of time.