AJAX Panels with ASP.NET MVC

ASP.NET MVC Preview 4帶來了一些AJAX支援，能夠適應MVC設計模式的本質。這篇文章向你展示了在ASP.NET MVC中使用“延遲載入AJAX皮膚”是如何使其變得不可思議的簡單。

首先，“ASP.NET AJAX”的問題
由於“Web Froms”（傳統的ASP.NET）是基於同時包含了表現層和後臺程式碼的“頁面”的，所以ASP.NET AJAX並沒有像它本應該的那樣光芒四射。很多步入AJAX領域的ASP.NET開發者只是向頁面中隨意地放置一些“UpdatePanel”來使其“看上去”支援AJAX。實際上，這只是防止了頁面的“閃爍”，而頁面還是進行了完整的回發，並且要經歷整個頁面的生存週期。

這並不是說這些問題是ASP.NET AJAX的責任，而是由是否需要使用完全的AJAX的不同心態造成的。公平地講，有比UpdatePanel控制元件更好的ASP.NET AJAX選擇。包括：

Page Methods——直接呼叫位於後臺程式碼中（伺服器上）的方法。
Web Services——呼叫位於應用程式的Web Services中的方法。
這兩種選擇比使用UpdatePanel“好”在無需重新載入整個頁面，只需向客戶端呈現一部分HTML即可。但它們“壞”在你需要使用JavaScript實現所有的表現邏輯（不用別人說也知道這是很恐怖的）。

MVC AJAX給你轉機
如果你能得到和使用UpdatePanel一樣的ASP.NET呈現能力，並且所有的程式碼都能分離開，效能也和訪問Web Services一樣，你會不吃驚嗎？來吧，一起感謝MVC設計模式的本質吧——還要感謝ASP.NET MVC——你能！

我們來看一下現實世界中建立“延遲載入”AJAX皮膚的問題。假設我們有一個Web應用程式，用於向客戶端釋出一些巨大的報表。如果我們不使用AJAX，每個報表都會增加頁面的整體載入時間。因此，我們將非同步地請求每個報表（使用AJAX），是的頁面自身能夠立即載入，而每個報表都會在執行完畢後顯示出來。

我們將向頁面中新增4個“報表”。每個報表都要執行3到5秒。因此如果我們使用傳統的Web Forms，這個頁面將要載入12到20秒。但由於有了MVC，我們可以將載入時間降低到5秒，並且頁面看上去仍然很漂亮。

注意

有很重要的一點需要注意。上面提到的效能收益會受到一些因素的限制。你必須考慮到伺服器要處理所有這些請求，這會使最終的結果有所下降。另外，很多瀏覽器只允許2個併發的下載，因此對於上面的例子，你節省的時間會降低約50%。

使用Ajax.Form方法
MVC Preview 4在“this.Ajax”欄位中為所有MVC頁面和MVC使用者控制元件新增了一些方法。“Ajax.Form”方法和“Html.Form”方法類似，但它會新增一些JavaScript來幫助確保可以非同步地傳送請求。另外，這裡還能為應該返回的結果定義一個HTML元素。

例如，如果你想POST諸如“傳送郵件”這樣的操作，並希望伺服器能將“Your email has been sent”這樣的文字放在一個ID是“resultDiv”的

內，你需要這樣做：

view plaincopy to clipboardprint?

<!-- Your form. elements here... --&gt

view plaincopy to clipboardprint?

<!-- Your form. elements here... --&gt

<!-- Your form. elements here... --&gt

上面的程式碼會生成下面的
   <!-- Your form. elements here... --&gt

view plaincopy to clipboardprint?

<!-- Your form. elements here... --&gt

<!-- Your form. elements here... --&gt

和我們前面提到的一樣，這非常像“Html.Form”方法生成的form，但你也能清楚地看到“onsubmit”方法被替換為使用AJAX來傳送請求，而且你也能看到“resultDiv”引數被傳遞到伺服器了。

伺服器會和平常一樣接收這個請求，它也會和平常一樣傳送請求的資料。這個魔術發生在ASP.NET MVC內部。從伺服器傳回的響應將會放在我們的

中，頁面的其他部分不會改變。

這是真的，非常簡單的AJAX。然而，還必須向你指出一個問題，該表單只在使用者明確地點選了提交按鈕（）“提交”該表單時，它才會與伺服器聯絡。為了解決這個問題，我們需要新增一行JavaScript使其能夠自動提交表單，非同步地請求報表。我還對“Form”方法進行了些微改動，新增了一個HTML ID屬性，以便我能在JavaScript中訪問它。

現在我們新的程式碼看起來是下面這樣：

view plaincopy to clipboardprint?

      new AjaxOptions { UpdateTargetId = "resultOne" },
      new { id="reportFormOne" })) { } %>

   $get("reportFormOne").onsubmit();

view plaincopy to clipboardprint?

new AjaxOptions { UpdateTargetId = "resultOne" },
new { id="reportFormOne" })) { } %>

$get("reportFormOne").onsubmit();

new AjaxOptions { UpdateTargetId = "resultOne" },
new { id="reportFormOne" })) { } %>

$get("reportFormOne").onsubmit();

提示

如果我直接呼叫“Sys.Mvc.AsyncForm.handleSubmit”方法，上面的程式碼還能更簡單些。但我選擇讓MVC為我建立表單，然後通過JavaScript訪問它，因此如果JavaScript方法將來發生了變化，我依然能夠使用。

看看結果吧！
使用上面的方法，再加上我從Internet上弄來的“loading gif”，我們就有了這樣一個頁面，它可以動態地（並且是非同步地）載入報表，並在可用的時候立即顯示給使用者。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-434721/，如需轉載，請註明出處，否則將追究法律責任。

上一篇： AJAX基於ASP.NET MVC

下一篇： ASP.NET MVC和AJAX

請登入後發表評論登入

全部評論

AJAX Panels with ASP.NET MVC

相關文章