2012-04-30 56 views
3

介紹混合微軟MVC AJAX和驗證輔助與本地jQuery的AJAX

這篇文章是關於與本機的jQuery阿賈克斯混合微軟MVC傭工。我一路上遇到的主要問題是:

  1. 雙崗提交
  2. @ Html.ValidationMessageFor不輸出
    屬性

要求

  1. 我有一個要求驗證併發布表格(id =「my-form」)

  2. 形式勢必飾驗證模型的屬性,所以我想利用輔助方法,如@ Html.ValidationMessageFor駕馭不顯眼的好處

  3. 我同時需要客戶端和服務器端驗證(服務器端我做一個獨特的名稱檢查與數據庫)

  4. 我需要做一些客戶端處理時提交表單添加額外的表單數據。

迭代步驟

STEP 1

我開始了與沒有本地jQuery和使用微軟幫助創建AJAX形式:

@using (Ajax.BeginForm(... 

所有的工作如廣告所示。這給了我不顯眼的驗證,但它不符合我定製的表單數據發佈要求。

所以我想我會重寫提交過程。

STEP 2

在我的文件準備好我勾了新的事件處理程序:

$(document).ready(function() 
{ 
    // Rebind validators 
    $.validator.unobtrusive.parse('#my-form'); 

    // Hook up submit event 
    $("#my-form").submit(SubmitForm); 
}); 

在我提交功能,我可以做我自己的表單數據處理:

function SubmitForm(e) 
{ 
    // Suppress normal event behaviour 
    e.preventDefault(); 

    // Validate the form 
    var valid = $("#my-form").validate(); 
    if (valid.errorList.length > 0) 
     return; 

    // Collect up form data manually 
    var formData = ...(code removed for clarity) 

    // Display animated gif 
    $("#ajax-loader").css("display", "inline") 

    // Post Form 
    $.post(
      '@Url.Action("MyAction", "MyController")', // url 
      formData,         // data 
      SuccessFunction        // success 
     ) 
     .error(ErrorFunction);       // error 
} 

好吧現在已經設定了。

問題

一個問題是,我將兩種類型的阿賈克斯。這導致了雙重職位。使用小提琴手我可以看到這個帖子發生了兩次。 (一次爲micosoft表單聲明,一個爲jquery post) 這是因爲2個處理程序已經連接起來了。做了一些Google搜索,我發現有些人正在使用jquery刪除一個處理程序,但它看起來有點混亂。

STEP 3

所以我改變了@using(Ajax.BeginForm(...語法成一個簡單的表單標籤:

<form id = "my-form"> 
    ... 
</form> 

的問題,現在

的@ Html.ValidationMessageFor沒有做它的東西。使用螢火蟲我可以看到我的表單輸入不再具有應用的驗證屬性。

@ Html.ValidationMessageFor似乎只能與表單助手一起使用。

,因爲我得到雙倍的意見我不能使用Ajax.BeginForm(...

STEP 4

所以我接下來要使用:

@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { id = "my-form" })) 
{.... 

我使用Html.BeginForm純粹是爲了讓我的@ Html.ValidationMessageFor做他們的東西。「MyAction」和「MyController」參數都是多餘的,因爲我的自定義事件處理程序接管了表單提交過程。

解決

一切似乎現在的工作

  1. 沒有雙提交
  2. 不顯眼的驗證使用@ Html.ValidationMessageFor
  3. 定製表單處理/提交
  4. 客戶端和服務器端驗證

我的問題。

這是正確的做法嗎? 我很樂意聽到任何人在這方面的經驗。

問候

菲爾

回答

0

通常,在這類情況下我喜歡的方式在Fluent Validation建議。現在,第一件事它將在客戶端上爲您生成驗證,並且可以使用JQuery進行檢查,並且您還可以在服務器端創建/生成強制驗證。意味着您在示例中所示的類中定義規則,然後使用該類檢查驗證。所以,它會檢查服務器端。我通常使用ajax只是不寫html,大部分時間我會忘記括號和幾件事情,所以助手很好,但我不支持Ajax.Beginform。簡單的Beginform很好。

我通常會遵循拇指規則,該視圖必須具有簡單明瞭的HTML或Helpers,我試圖使用更少的嵌套div和其他東西。

請讓我知道是否有任何進一步的細節需要通過此主題。有很多好的文章可以通過網絡找到。如果你想我可以分享。