介紹混合微軟MVC AJAX和驗證輔助與本地jQuery的AJAX
這篇文章是關於與本機的jQuery阿賈克斯混合微軟MVC傭工。我一路上遇到的主要問題是:
- 雙崗提交
- @ Html.ValidationMessageFor不輸出
屬性
要求
我有一個要求驗證併發布表格(id =「my-form」)
形式勢必飾驗證模型的屬性,所以我想利用輔助方法,如@ Html.ValidationMessageFor駕馭不顯眼的好處
我同時需要客戶端和服務器端驗證(服務器端我做一個獨特的名稱檢查與數據庫)
我需要做一些客戶端處理時提交表單添加額外的表單數據。
迭代步驟
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」參數都是多餘的,因爲我的自定義事件處理程序接管了表單提交過程。
解決
一切似乎現在的工作
- 沒有雙提交
- 不顯眼的驗證使用@ Html.ValidationMessageFor
- 定製表單處理/提交
- 客戶端和服務器端驗證
我的問題。
這是正確的做法嗎? 我很樂意聽到任何人在這方面的經驗。
問候
菲爾