在Asp.net MVC使用thickbox實現調用頁面的Ajax更新

在MVC模式中，通常都是Controller處理請求並產生資料，選擇一個合適的 View來顯示結果給使用者。雖然Asp.net MVC已經有非常豐富的ActionResult來滿 足不同情況下的需求，但是有了Ajax的利器，我們希望有更流暢的互動方式。我 們希望能夠在一個介面自動完成清單的顯示，編輯或者新增，並完成重新整理。藉助 jQuery的一個擴充thickbox我們能夠達到這個效果。

本文的靈感來自於一篇博文：MVC AJAX Form with Ajax.BeginForm() and jQuery Thickbox （http://geekswithblogs.net/michelotti/archive/2009/08/31/mvc-ajax- form-with-ajax.beginform-and-jquery-thickbox.aspx）

和該文的差異在於thickbox中提交後，他更新的是thickbox中的內容，而不 是載入thickbox的頁面（即thickbox後面的那個頁面）。

我示範的情境如下

點擊“建立角色”①彈出一個建立的角色thickBox輸入視窗②，填入相應的 資訊後，將利用Ajax更新角色列表③。

假設你已經非常瞭解Asp.net MVC了。

這裡我們不討論MVC中的Model層，假設Model資料可以通過Service層擷取。

在這個例子裡，我們需要3個View：RoleList.aspx，RoleNameList.ascx和 RoleCreate.ascx。後兩個PartialView。

RoleController需要處理以下幾個請求：

[get] RoleNameList()：顯示Role列表，返回RoleNameList.ascx這個 PartialView.

[get] RoleCreate()：顯示Create的輸入介面RoleCreate.ascx等待使用者輸入 相關的資訊。

[post]ReleCreate(Role role)：處理Create的提交，並返回 RoleNameList.ascx。