Is there a good explanation on what ASP.NET MVC3 is doing with its ajax helpers and rendering unobtrusive javascript?

Question

I'm trying to look for good (in-depth) explanation on what happens when you use MVC ajax helpers. What events and css classes get added. I can find sprinkle of info here and there but no overall explanation of how this ajax framework works. Is there a good explanation out there?

Answer 1

The Ajax Helper methods render Html to your page.

The best way to see exactly what an Ajax Helper method adds is by viewing the source when it renders in your browser at runtime.

You can even see the unobtrusive stuff rendered in the source if you remove your reference to the jquery.unobtrusive-ajax.js.

You can also write your own Ajax (and Html) Helper methods in the form of Extension Methods.

Answer 2

MVC3 Ajax helpers simply add some css class names and data on the form element. You have to include jquery.unobtrusive-ajax.js in your project.

When the dom is ready, this script searches form elements with the above css class names. When the form is submitted, the script catch the event, serialize the form values, use $.ajax to call the target url, and can put the response into a given element id, or give it to your custom js method depending on the options you used.

input-validation-error and input-validation-valid classes are used for unobtrusive validation, which is not the same as unobtrusive ajax (they only share the word unobtrusive). It needs jquery.validate.unobtrusive.js and transform microsoft script validation into jquery validate validation. See http://rocketsquared.com/wiki/Plugins/Validation for details about jquery validate validation.