Learn--asp.net MVC Ajax

Has been confused about the asynchronous submission of ASP. NET MVC, today decided to explore.

In fact, the core is encapsulated in the jquery.unobtrusive-ajax.js.

We found that all the code in the (function ($) {} (JQuery)), the structure is very strange, the general JS function is function () {}, but this later a parameter, in fact, this is an anonymous method, we have a little to restore its true face.

We can write this (function ($) {}) (JQuery),

Let's get the function method out again.

function AA ($) {}AA (jQuery);

Does that make sense, equivalent to declaring a function AA, and then immediately executing it.

The reason for this layer on the outer bread is to get jquery in, in case the $ and other libraries collide. And in the world of jquery, you can be willful with $.

Then there are a lot of methods, don't worry, we look at each other, in fact, everything starts from it:

function (evt) {        var name = Evt.target.name,            = $ (evt.target). Parents ("form") [0];         ? [{name:name, value:evt.target.value}]: []);        SetTimeout (function  () {            $ (form). Removedata (Data_click);         0); });

It seems to be a live method of doing something.

Let's see what it is.

$ (form[data-ajax=true]: Submit)

First find the property "Data-ajax" is true of the form form, and then find the inside of the submit button, plainly speaking is our own page click on the Submit button when saved.

<input type= "Submit" value= "Save"/>

This is the right, asynchronous submission.

To see the live method, you can review the jquery document, http://www.php100.com/manual/jquery/

Oh, it turns out that the click Method is bound to the Submit button, but the live binding is more rigorous and the details are first put. Anyway, we know this is a click the Submit button executes the function first.

and see what this function is doing.

var name = Evt.target.name,    = $ (evt.target). Parents ("form") [0?  [{name:name, value:evt.target.value}]: []); SetTimeout (function  () {    0);

Two variables are defined, name is the Name property value of the Submit button, and form is the form where the Submit button resides.

But what about the data method? It seems that a value has been saved.

Yes, it is true that a key-value pair has been saved. In fact, data is stored in the form form this element, as to how to save, here is not much to pursue.

Key is called Data_click,value is behind that lump. Data_click is a variable, full-text search, at the top will find its statement

var data_click = "Unobtrusiveajaxclick"

That lump is actually a trinocular operator, and when name has a value, put the following object in an array, and plainly, Data_click holds the name and Value property of the Submit button:

var o = {   = name,   = Evt.target.value};

When name is empty, an empty array is saved.

The last method is after a period of time, will data_click delete, but here a little doubt, time set to 0, not immediately delete it? What's the point?

OK, next go to the next function.

$ ("form[data-ajax=true]"). Live ("Submit",function(evt) {varClickinfo = $ ( This). Data (Data_click) | | [];        Evt.preventdefault (); if(!validate ( This)) {            return; } asyncrequest ( This, {URL: This. Action, type: This. Method | | "GET", Data:clickInfo.concat ($ ( This). Serializearray ())}); });

This is the Submit event binding function for the form form with the Data-ajax property True, which is the serious commit function.

First, the Data_click value stored in the first function is removed, which is the name and value information of the Submit button.

The submit function invokes the first function that executes the binding to the submit event, including the browser's default behavior.

And we want to verify before the browser makes a difference, so stop the default behavior first, as follows:

Evt.preventdefault ();

Learn--asp.net MVC Ajax