取經——ASP.NET MVC Ajax

標籤：

一直對ASP.NET MVC 的非同步提交搞不懂，今天決定一探究竟。

 

其實核心都封裝在jquery.unobtrusive-ajax.js裡。

我們發現所有的代碼都放在了(function($){}(jQuery))裡，這個結構很奇妙，一般的js函數都是function(){}，可這個後面多了個參數，其實說白了這是個匿名方法，我們一點點還原它的真實面目。

我們可以寫成這樣(function($){})(jQuery)，

我們再把function方法拿出來

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

這樣是不是就看懂了，相當於聲明了一個函數aa，然後立即執行它。

而之所以在最外麵包上這麼一層，是為了把jQuery傳進去，以防$和其他庫衝突。而在jQuery的世界裡，就可以任性的用$了。

 

然後是一大堆的方法，別急，我們一個個看，其實一切都是從它開始的：

$("form[data-ajax=true] :submit").live("click", function (evt) {        var name = evt.target.name,            form = $(evt.target).parents("form")[0];        $(form).data(data_click, name ? [{ name: name, value: evt.target.value }] : []);        setTimeout(function () {            $(form).removeData(data_click);        }, 0); });

看樣子是給某個東西執行了live方法。

 

先來看是什麼東西。

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

首先找到屬性"data-ajax"為true的form表單，然後找到裡面的submit按鈕，說白了就是我們自己頁面點擊儲存時的提交按鈕。

<input type="submit" value="儲存"/>

這就對上了，非同步提交嘛。

 

再來看live方法，可以查閱Jquery文檔，http://www.php100.com/manual/jquery/

哦，原來是給提交按鈕綁定click方法，不過通過live綁定更嚴謹些，詳情先一放。總之我們知道這是一點擊提交按鈕首先執行的函數。

 

然後來看這個函數都幹了什麼

var name = evt.target.name,    form = $(evt.target).parents("form")[0];$(form).data(data_click, name ? [{ name: name, value: evt.target.value }] : []);setTimeout(function () {    $(form).removeData(data_click);}, 0);

定義了兩個變數，name是提交按鈕的name屬性值，form是提交按鈕所在的表單。

但是data方法又是幹什麼的呢？貌似是存了一個值。

沒錯，準確的說是存了一個索引值對。其實data是把資料存到了form表單這個元素中，至於如何存的，此處暫不多追究。

key叫data_click，value是後面那坨。data_click是個變數，全文檢索搜尋一下，在頂部會發現它的聲明

 var data_click = "unobtrusiveAjaxClick"

那坨其實是個三目運算子，當name有值時，將下面的對象放到一個數組中，說白了，data_click儲存的是提交按鈕的name和value屬性：

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

當name為空白時，存一個空數組。

最後一個方法是過一段時間後，將data_click刪掉，但此處有點小疑惑，時間設定為0，不是立即刪嗎？那還有什麼意義？

 

ok，接下來進入下一個函數

$("form[data-ajax=true]").live("submit", function (evt) {        var clickInfo = $(this).data(data_click) || [];        evt.preventDefault();        if (!validate(this)) {            return;        }        asyncRequest(this, {            url: this.action,            type: this.method || "GET",            data: clickInfo.concat($(this).serializeArray())        }); });

這個是給data-ajax屬性為true的form表單的submit事件綁定函數，是正兒八經的提交函數。

首先，取出了第一個函數中存好的data_click值，就是提交按鈕的name和value資訊。

submit函數會調用執行綁定到submit事件的首要函數，包括瀏覽器的預設行為。

而我們想在瀏覽器有所作為之前進行驗證，所以要先阻止預設行為的發生，如下：

evt.preventDefault();

 

取經——ASP.NET MVC Ajax