用easyUI框架做form表單的提交,提交後發現後臺老是報錯,要麼是提示路徑不對,要麼是提示沒有表單驗證字段。
幾經檢查發現,原來我後臺按照常規的MVC模式,在方法前面加了限制爲POST請求, 並且強制要求驗證表單。所以easyUI自帶的form表單提交方法無法提交。
後臺代碼如下:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult SubmitForm(RdProjectTaskEntity mEntity, string keyValue)
{
app.SubmitForm(mEntity, keyValue);
return Success("操作成功。");
}
解決的方法有兩個:
第一個是將後臺方法的[HttpPost] 和 [ValidateAntiForgeryToken] 驗證取消;
第二個是在前端form 中加入method="post" 屬性,這樣提交的時候就能以POST方式提交。關於防僞字段驗證,可以再在form的onSubmit方法中加入一段代碼
if ($('[name=__RequestVerificationToken]').length > 0) {
param.__RequestVerificationToken = $('[name=__RequestVerificationToken]').val();
}
手動將頁面中的__RequestVerificationToken 加入到form的表單參數中提交給後臺。這樣既可以保證使用POST提交,又能夠進行表單防僞驗證。
第二種方法的前端完整代碼:
<script>
$("#form1").form({
url: "/ServiceManage/SubmitForm?keyValue=" + keyValue,
ajax: true,
onSubmit: function (param) {
if ($('[name=__RequestVerificationToken]').length > 0) {
param.__RequestVerificationToken = $('[name=__RequestVerificationToken]').val();
}
var isValid = $(this).form('enableValidation').form('validate');
if (!isValid) {
$.loading(false);
}
return isValid;
},
success: function (data) {
var data = eval('(' + data + ')');
if (data.state == "success") {
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
$(form).submit();
</script>
<body>
<form id="form1" method="post">
<input id="T_Title" name="T_Title" type="text" class="easyui-textbox" style="width:100%" data-options="required:true">
</form>
</body>