在MVC3中使用jquery及jquery.form.js来提交表单

使用ajax来提交表单，这是许多人喜爱的事，其实，作起来并不困难。如果你没有用过jquery，那么你会觉得无从下手。

下面，我来介绍一下，如何使用jquery.form.js

首先你要下载一个jquery.form.js，这里我就不提供下载地址了，有许多，大家可以去直接下载。

在我们的MVC项目中，VIEW里，我们首先要加上，库的引用，如下：

<script src="<%:Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
<script type ="text/javascript" src ="<%:Url.Content("~/Scripts/jquery.form.js") %>"></script>

第一行，根据你实际的版本，链接对应的js文件。

引用库后，我们可以像平常一样，正常写你的form表单，这个没有任何区别。但请注意，在form标签上，你必须包括id或name属性。

form属性中，请注明是post还是get。不然，你会在某些情况下，发现post不成功。

写完你的form，下面就是写你的ajax提交表单的js代码了。如下：

$(document).ready(function () {

var form = $('#form1');
form.submit(function ()//提交表单
{

var options = {
beforeSubmit: function () {
return true;
},
url: '/Student/PracticeYes/' , //提交给哪个执行
type: 'POST',
dataType: "json",//这里是指控制器处理后返回的类型，这里返回json格式。
success: function (context) {
alert(context.name);//这里就是控制器返回的json里的一项name.
},
error: function (XMLResponse) {
alert(XMLResponse.responseText);
//这里是错误处理，通过这个alert可以看到错误的信息。对于你调试来说是比较重要的哦。

}

};
form.ajaxSubmit(options);
return false; //为了不刷新页面,返回false
});

OK,到这一步，你的提交就完成了。HTML里的表单你不需要作任何其它处理。直接加载这段js即可。

下面，把控制器完成。

[HttpPost]
public JsonResult PracticeYes(FormCollection collection, int id)
{

// Response.Write("ok" + Request.Form["idlist"]);//如果你不用json，就可以用这一行，当然，函数返回类型，请改成void.
return Json(new
{
name = "ok" + Request.Form["idlist"]
//这里可以测试，你表单里数据是否成功获取到，如果获取到，再发回去。发回去的时间，在json里，项目名是name.

});
}

很轻松，我们就完成了，ajax的提交，在一开始，我可是花了不少功夫去作。