[ASP.NET MVC] 利用動态注入HTML的方式來設計複雜頁面一、執行個體示範二、作為容器的View三、顯示聯系人清單四、彈出“修改聯系人”對話框五、聯系人資訊的最終修改

目錄 一、執行個體示範 二、作為容器的View 三、顯示聯系人清單 四、彈出“修改聯系人”對話框 五、聯系人資訊的最終修改

我們先來示範一個簡單的例子，假設我們要設計一個“聯系人”管理的頁面。該頁面初始狀态如左圖所示，它僅僅具有一個用于輸入查詢條件（First Name和Last Name）進行聯系人查詢的表單。當使用者輸入相應的查詢條件之後點選“Retrieve”按鈕，相應的聯系人清單顯示以表格的形式顯示出來（中圖）。當我們點選作為ID的連結後，會以“模态對話框”的形式顯示目前聯系人的編輯“視窗”（右圖）。

這個“單頁面應用”是通過ASP.NET MVC開發的，接下來我們來逐漸介紹如果将同一頁面中的這三塊不同的内容提取出來進行“分而治之”。

如下所示的是表示聯系人的Contact類型的定義，沒有什麼特别之處：

聯系人管理對應的HomeController定義如下。簡單起見，我們通過一個靜态字段來表示維護的聯系人清單。我們僅僅列出了預設的Action方法Index，它會直接将作為“容器頁面”的View呈現出來。

如下所示的是Index.cshtml的定義，在這裡使用了Twitter的Bootstrap，所示我們引用了相應的CSS和JS。這個主體部分包含三個<div>，分别對應着上述的三個部分。

表示“查詢表單”的部分定義在如下所示的Partial View（QueryFormPartial.cshtml），直接通過調用HtmlHelper的Partial方法呈現在目前View中。

QueryFormPartial.cshtml定義了一個以Ajax方式送出的表單，目标Action為具有如下定義的Find，它根據指定的First Name和Last Name篩選比對的聯系人清單，并将其呈現在一個名為ContactListPartial的View中。

如下所示的ContactListPartial.cshtml的定義，這是一個Model類型為IEnumerable<Contact>的強類型View，它以表格的形式将聯系人清單呈現出來。

從QueryFormPartial.cshtml的定義可以看到，表單成功送出之後會調用一個名為renderCustomerList的JavaScript函數（@using (Ajax.BeginForm("Find", new AjaxOptions { OnSuccess = "renderCustomerList" }))），它以如下的方式定義在Index.cshtml中。從定義了看出，它将擷取的資料（實際上ContactListPartial這個View最終的HTML）作為contactList這個<div>的HTML。

</script>

從ContactListPartial.cshtml的定義可以看到聯系人ID以一個連結的方式呈現出來，點選該連結會以Ajax的方式通路Action方法Update，目前聯系人ID會作為請求的參數（<td>@Ajax.ActionLink(contact.Id, "Update", new { contactId = contact.Id }, new AjaxOptions { OnSuccess = "showDialog" , HttpMethod="GET"})</td>）。如下所示的是Action方法Update的定義，它根據指定的ID擷取對應的聯系人，并将其呈現在一個名為ContactPartial 的View中。

如下所示的ContactPartial.cshtml的定義，這是一個Model類型為Contact的強類型View，它将聯系人資訊呈現在一個表單中。

聯系人編譯視窗的彈出最終通過調用JavaScript函數showDialog實作（<td>@Ajax.ActionLink(contact.Id, "Update", new { contactId = contact.Id }, new AjaxOptions { OnSuccess = "showDialog" , HttpMethod="GET"})</td>），具體定義如下所示。它将擷取到的資料（實際上是ContactPartial這個View最終的HTML）作為第三個<div>的HTML，并按照Bootstrap的方式以模态對話框的形式将其呈現出來。至于中間的兩行代碼，在于解決動态添加表單無法實施驗證的問題。

通過ContactPartial.cshtml的定義可以看出編輯聯系人表單最終以POST的方式送出到HomeController的Action方法Update（@using(Ajax.BeginForm("Update", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "reLoad" }, new { @class = "form-horizontal" }))），該Action方法具有如下的定義。它在完成修改之後，傳回字元串“OK”表明聯系人修改成功。

聯系人修改表單送出後關閉目前視窗并加載新的資料通過具有如下定義JavaScript函數Reload實作（@using(Ajax.BeginForm("Update", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "reLoad" }, new { @class = "form-horizontal" }))），該函數依然定義在Index.cshtml中。