用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>