Why does setting UnobtrusiveJavaScriptEnabled = true prevent ajax from working?

Question

While doing a sample using MVC3 razor, I wrote:

<p>
    Show me the time in:
    @Ajax.ActionLink("UTC", "GetTime", new { zone = "utc" }, new AjaxOptions { UpdateTargetId = "myResults" })
    @Ajax.ActionLink("BST", "GetTime", new { zone = "bst" }, new AjaxOptions { UpdateTargetId = "myResults" })
    @Ajax.ActionLink("MDT", "GetTime", new { zone = "mdt" }, new AjaxOptions { UpdateTargetId = "myResults" })
</p>
<div id="myResults" style="border: 2px dotted red; padding: .5em;">
    Results will appear here
</div>
<p>
    This page was generated at @DateTime.UtcNow.ToString("h:MM:ss tt") (UTC)
</p>

None of my ajax calls worked until I changed this key in web.config:

<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

I read in this article: http://weblogs.asp.net/owscott/archive/2010/11/17/mvc-3-ajax-redirecting-instead-of-updating-div.aspx
But now my client-side validation is not working as before.

My question is: how do I make both the ajax and client-side validations work at the same time? What does the "UnobtrusiveJavaScriptEnabled" do? Is it a switch between them?! I hope to understand more about it in simple terms.

Westbound

Answer 1

In ASP.NET MVC 3 there are 2 things: client side validation and unobtrusive javascript which are controlled by their corresponding values in web.config:

<add key="ClientValidationEnabled" value="true" /> 
<add key="UnobtrusiveJavaScriptEnabled" value="true" /> 

Client side validation is based on the jquery.validate.js plugin alongside with the jquery.validate.unobtrusive.js script from Microsoft. When you include those two scripts inside a view which contains a HTML form client side validation will be performed based on the data annotation rules you have defined on your model. When you look at the generated HTML source code of the view you will notice that input fields have HTML5 data-* attributes which contain the validation rules. The Microsoft unobtrusive validation script would then read those rules and configure the jquery validate plugin.

The unobtrusive javascript is different. It is based on jquery. When you use one of the Ajax.* HTML helpers such as Ajax.ActionLink, in ASP.NET MVC 3, those helpers also emit HTML5 data-* attributes on the corresponding anchor. Those attributes are then interpreted by the Microsoft jquery.unobtrusive-ajax.js script which you need to include in your page and AJAXify those links. So for example when you write:

@Ajax.ActionLink("UTC", "GetTime", new { zone = "utc" }, new AjaxOptions { UpdateTargetId = "myResults" })

this would generate the following HTML:

<a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#myResults" href="/Home/GetTime?zone=utc">UTC</a>

As you can see now all the information about how to perform the AJAX request is contained in the DOM. So you could have a separate javascript file where you would subscribe for the click event of this link, send an AJAX request to the url contained in the href attribute and then based on the value of the data-ajax-mode attribute replace the html of some container with id contained in the data-ajax-update attribute selector. And that's exactly what the jquery.unobtrusive-ajax.js does. It's just that it is in a separate file and your markup and javascript are independent which wasn't the case in previous versions.

So contrary to ASP.NET MVC 1 and 2, in ASP.NET MVC 3 jQuery is the default javascript framework and HTML helpers are based on it. All MicrosoftAjax* scripts are no longer used.

Wetnurse

Answer 2

I resolved that using this code:

@using (Ajax.BeginForm("Index2","Home", 
    new AjaxOptions
        {
            UpdateTargetId = "result", 
            HttpMethod = "POST"
        }, 
    new
        {
            onclick = "Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));",
            onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'POST', updateTargetId: 'result' });"
        }))
{
    <input type="hidden" name="id" value='1'/>
    <input type="submit" value="OK" />
}

Adding the lines:

new
        {
            onclick = "Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));",
            onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'POST', updateTargetId: 'result' });"
        }))

You're adding the same behavior than the Ajax.BeginForm without loses the javascript behavior.

I tested that, with MVC4

Shandeigh