用jquery ajax和mvc发布表单的正确方法是什么?
本文关键字:方法 是什么 表单 ajax jquery mvc 布表单 | 更新日期: 2023-09-27 18:04:43
关于如何做到这一点,我已经看到了几个方法。我自己的方法,我喜欢,除了从一个部分,是以下:
- 劫持提交-表单 事件
收集数据并构建
json
对象var objToSend = { Property : $('#propertyField').val(), Property2 : ... };
这是我不喜欢的部分,因为像这样收集25个值很乏味
调用
$.ajax({})
并指定url指向某处启用[HttpPost]
的动作- 在ajax-query的success:部分中,收集返回的数据(我作为字符串返回)并在适当的地方将其写出来。我也在这里处理错误,检查第一个单词是否为"Error:",然后采取适当的行动。
我喜欢这种方法,除了收集阶段。我确信有更好的方法来做到这一点,但我已经把自己一头扔进了jquery
,因为我来自ASP.NET
的webforms背景,所以整个"拥抱网络"的部分对我来说完全陌生。
您可以使用serialize()
方法来避免逐个传递所有字段。它将使用application/x-www-form-urlencoded
内容类型将整个表单数据发送到服务器,就像它是一个标准表单提交一样:
$('#myform').submit(function() {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function(result) {
// TODO: handle the success case
}
});
return false;
});
另一种可能是jQuery表单插件:
$('#myform').ajaxForm(function(result) {
// TODO: handle the success case
});
有些人发现使用Ajax.BeginForm
帮助器来呈现表单也很有用:
@using (Ajax.BeginForm(new AjaxOptions { OnSuccess = "success" }))
{
... some input fields
}
在ASP。. NET MVC 3需要包含jquery.unobtrusive-ajax.js
脚本,该脚本将Ajax helper发出的HTML 5 data-*
属性低调地Ajax化。
允许jQuery为您构建json。你可以序列化一个表单,它将创建一个数据集供你提交。
$.post("myUrl",
$("form").serialize(),
function(callback) { ... }
);
我就是这么做的!
如果你正在处理一个表单,你也可以选择使用MVC帮助器为你创建邮政编码处理代码,例如
<% using (html.BeginForm()) {%>
// html for the form
<input type='submit' value='post' />
<% } %>
从WebForms到MVC的过渡可能是一个棘手的人,你真的是处理web编程的原始方面,即http, html和javascript…顺便说一句,我认为这是一件好事,因为我不是WebForms伪单进程事件模型的粉丝。
MVC万岁!:)
我倾向于使用"jQuery表单插件"。它允许您轻松地将标准表单抽象为AJAX表单:
http://jquery.malsup.com/form/它还允许您轻松捕获各种事件、失败条件、验证等,并且可以根据需要将表单转换为JSON请求或XML。也处理文件上传