[翻譯] AJAX Panels with ASP.NET MVC

AJAX Panels with ASP.NET MVC

原文地址：http://www.singingeels.com/Articles/AJAX_Panels_with_ASPNET_MVC.aspx

原著作者：Timothy Khouri

翻譯：Anders Liu

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

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”的<div>內，你需要這樣做：

<p> <!-- Your form elements here... --></p><p>

上面的代碼會產生下面的<form>標籤：

<br /><p>

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

伺服器會和平常一樣接收這個請求，它也會和平常一樣發送請求的資料。這個魔術發生在ASP.NET MVC內部。從伺服器傳回的響應將會放在我們的<div>中，頁面的其他部分不會改變。

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

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

<p>

提示

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

看看結果吧！

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

這裡是上面的項目的原始碼。記住，該項目是在ASP.NET MVC Preview 4下編寫和編譯的，你下載的時候可能已經過時了（譯註：真希望它趕緊過時）：

此處下載原始碼：SingingEels_MVC_Asyncronous_AJAX_Panels.zip。