淺談ASP.NET MVC架構

伺服器端的實現原理並不複雜，不過作為解決方案的另一個關鍵區段，如何在用戶端觸發一個AJAX提交也是一個值得思考的話題。 UpdatePanel的方式可謂“全自動”：頁面載入時將會把伺服器端的Trigger資訊輸出至用戶端，然後在用戶端截獲form的提交事件，並通過 UniqueID或DOM結構等方式來判斷這次提交是否該轉化為AJAX方式。不過在一個ASP.NET MVC頁面中幾乎不會出現產生PostBack的元素，相反會有大量的普通連結，它們才是AJAX更新的主要截獲目標。

為此我提供了一些JavaScript代碼，截獲一個連結原本的目標地址並將其轉化為一個AJAX請求。我在這裡通過樣本中的代碼來展示這種使用方式（這個樣本源於Brad Abrams提供的ASP.NET MVC樣本，不過我捨棄了Northwind資料庫與Entity Framework，取而代之的是XML資料以及自訂的簡單Model。此外，我也將其移植到ASP.NET MVC架構的0416 Build中）：

＜% foreach (var category in this.ProductCategories)
{ %＞
＜li＞
＜%= Html.ActionLink＜ProductsController＞(
c =＞ c.List(category, 1),
category,
new { onclick = "mvcAjax.get(this, event)" })%＞
＜/li＞＜%
} %＞

這段代碼來自分類列表頁。與AJAX改進之前的代碼相比，唯一的區別就是額外指定了元素的onclick事件（加粗部分）。在onclick事件執行中，這個連結預設的跳轉行為將被取消，取而代之的是一個AJAX請求，請求的目標便是ProductsController中名為List的Action。

我們可以使用上面的方式應對普通連結，那麼又該如何將一個用戶端from的提交行為也變成AJAX操作呢？以下依舊是樣本中的代碼：

＜form method="post"
action="＜%= Url.Action("Update", new { id = this.Product.ProductID }) %＞"
onsubmit="mvcAjax.submit(this, event);"＞
＜table＞
＜tr＞
＜td＞Name:＜/td＞
＜td＞＜%= Html.TextBox("Name", this.Product.Name) %＞＜/td＞
＜/tr＞
＜/table＞
＜input type="submit" value="Save" /＞
＜/form＞