Asp.net

MVC 中普遍接受的 jQuery 對話框中的表單方法

  • October 13, 2011

似乎有幾種方法可以將 jQuery 對話框與 ASP.NET MVC 集成。是否有一種特定的方法成為普遍接受的最佳實踐方法?

舉個例子:我有一個列表頁面,在其中點擊任何列出的項目的“編輯”會在 jQuery 對話框中打開一個表單,其中填充了項目的詳細資訊。使用者編輯詳細資訊並點擊“保存”。如果在伺服器端保存成功,則關閉對話框並使用新數據重新建構列表。如果在伺服器端保存失敗,對話框將保持打開狀態並向使用者顯示錯誤消息。

  1. **無 JSON 方法:**每個“編輯”連結都是“編輯”控制器操作的 HREF。該控制器操作建構了一個與“列表”視圖相同的視圖,此外它還包括一個部分操作來建構編輯表單、填充它並定義 javascript 以將其彈出為 jquery 對話框。“保存”是一個表單文章;如果成功,它會將重定向操作返回到列表頁面。如果失敗,它會重建顯示錯誤消息的整個頁面(包括在對話框中彈出的表單)。
  2. **全 JSON 方法:**列表頁面呈現一個空的編輯表單(隱藏),準備好彈出打開到對話框中。“編輯”連結呼叫本地 javascript,它執行 ajax 請求以獲取完整對象(我定義了一個控制器,它將完整對像作為 JsonResult 返回)。成功後,它會用對象的數據填充編輯表單並打開對話框。“保存”連結呼叫本地 javascript,它將表單數據捆綁到 json 對像中,並以該 json 對像作為有效負載呼叫 post 操作(我定義了一個期望該對象的控制器,嘗試保存,並返回一個 JsonResult 指示成功/失敗+錯誤消息)。來自 ajax 請求的成功回調評估返回的對象,並在仍然打開的 jquery 對話框中顯示錯誤消息,或者關閉對話框並重新載入“列表”
  3. **[編輯] Ajax-HTML 方法:**剛剛看到這個 SO 討論,它描述了另一種方法。“編輯”呼叫本地 javascript,它執行 ajax 發布以獲取對話框的完整 HTML(我會編寫一個返回部分視圖的控制器:完全填充的表單)。它將返回的 HTML 渲染到一個 jquery 對話框中,並“重新連接”表單送出以對錶單內容進行 ajax-post(我將編寫一個 httpPost 控制器,與上面的 #2 相同)。成功回調評估響應並填充錯誤消息或關閉對話框。
  4. 我還沒有想到其他一些很酷的方法?

選項 1 似乎更符合“純” ASP.NET MVC。但是,它似乎具有較大的 HTTP 有效負載(因為我們在每次請求時將整個頁面發送回瀏覽器),並且伺服器端性能較慢(因為我們正在為每個請求重新建構列表)。

選項 2 似乎更符合更現代的基於 Ajax 的 Web 應用程序(更小的 HTTP 負載,更精細的操作)。但是,似乎許多控制器將是 JSON 控制器,我將編寫大量客戶端程式碼來將 JSON 對象的數據編組到表單欄位/從表單欄位、顯示錯誤消息等。看起來我也會錯過很多很酷的 MVC 功能,比如 EditorFor() 和 ValidationMessageFor()。它只是“感覺”就像我正在圍繞 MVC 系統工作而不是使用它。

**[編輯:添加選項 3]**選項 3 似乎是 1 和 2 之間的混合體。我使用“純”MVC 方法來建構和填充表單,並返回一個完整的 HTML FORM 標記。將 HTML 返回到 ajax 請求感覺很奇怪,因為它非常冗長,但我可以克服它。post 操作很好,緊湊的 JSON “感覺”比 ajax 更好。但是,不幸的是,有效負載對像是 FormCollection 而不是真正的 viewmodel 對象。似乎我可以利用一些 MVC 便利(EditorFor()),但不能利用其他便利(ValidationMessageFor())。

我正在尋找執行此操作的“正確”方法,而不僅僅是將其破解的最快方法。是的,是的,我知道沒有普遍“正確”的方式。但我確信有一些明顯錯誤的方法可以做到這一點,我想避免它們。

我在 ASP.NET/C# 方面非常有經驗,但我對 MVC 還是很陌生。在此先感謝您的幫助!

[編輯] - 出色的回复 - 我希望我可以獎勵多個答案/賞金,因為我發現幾個回复非常有用。但由於我做不到,所以我將投票率最高的回复標記為答案。再次感謝所有回复者!

我和我的團隊在編寫支持 AJAX 的 MVC 應用程序方面擁有豐富的經驗,並且我們已經使用了所有 3 種方法。

但是,我最喜歡的絕對是AJAX-HTML 方法——使用 aPartialView來呈現對話框的內容,其中可能包括伺服器端驗證消息和任何其他邏輯。

這種方法的最大好處是關注點分離——你的視圖總是負責渲染你的 HTML,你的 JavaScript 不必包含渲染 JSON 所需的任何文本、標記或“模板”。

另一個很大的優勢是所有偉大的 MVC 特性都可用於呈現 HTML:強類型視圖、HtmlHelperDisplayFor模板EditorForDataAnnotations。這使得更容易保持一致並有助於重構。

請記住,沒有要求堅持單一的方法。當您的 AJAX 呼叫只需要一些簡單的東西時,例如像“成功”這樣的狀態更新,只需使用stringJSON傳達這些消息就可以了。需要 HTML 時使用PartialViews,需要通信時使用更簡單的方法。

引用自:https://stackoverflow.com/questions/7759119