爱上MVC3系列~当Ajax.Beform不能满足我们的要求时...

mvc架构中提供了Html.BeginForm与Ajax.BeginForm，主要实现同步提交表单与异步提交表单，对于同步提交与传统的方式没有区别，而异步表单MVC自己进行了封装（可以看我的文章了解两种方式的表单提交），使我们很轻松的完成异步提交，而如果你的视图比较复杂，使用AJAX.BeginForm可能就显得不可供了，有时需要修改异步回调的细节，有时需要返回特定的消息，而这时你必须要手动写异步表单了，今天主要来说一下JQ实现的异步表单提交。效果：

JS提交表单代码：

 1 <script type="text/javascript">
 2     function submitForm() {
 3         $.ajax({
 4             type: 'POST',
 5             url: '@Url.Action("AJAXReview", "Common")',
 6             data: $("#form1").serialize(),
 7             success: function (data) {
 8                 if (data.res)
 9                     alert("提交成功");
10                 else
11                     alert("提交失败，失败信息为：" + data.info);
12             }
13         })
14     }
15 </script>

View:

 1 @using (Html.BeginForm("Review", "Common", FormMethod.Post, new
 2 {
 3     id = "form1"
 4 }))
 5 {
 6     <fieldset>
 7         <legend>评论 </legend>
 8         <ul>@Html.ValidationSummary(true)
 9             @Html.HiddenFor(i => i.ObjID)
10             @Html.HiddenFor(i => i.ObjType)
11             <li></li>
12             <li>标题：@Html.TextBoxFor(i => i.Title)</li>
13             <li>@Html.ValidationMessageFor(i => i.Title)</li>
14             <li>内容：@Html.TextAreaFor(i => i.Content)</li>
15             <li>@Html.ValidationMessageFor(i => i.Content)</li>
16         </ul>
17     </fieldset>
18     <input type="button" onclick="submitForm()" value="提交" />
19 }

Model:

 1   /// <summary>
 2   /// 评论对象
 3   /// </summary>
 4   public class Review
 5   {
 6     public long ID { get; set; }
 7     public int ObjType { get; set; }
 8     public long ObjID { get; set; }
 9     [Required]
10     public string Title { get; set; }
11     [Required]
12     public string Content { get; set; }
13     [Required]
14     public DateTime CreateDate { get; set; }
15   }

Controller:

 1    /// <summary>
 2     /// 异步评论视图
 3     /// </summary>
 4     /// <param name="objID"></param>
 5     /// <param name="objType"></param>
 6     /// <returns></returns>
 7     public ActionResult AJAXReview(int? objID, int? objType)
 8     {
 9       return View(new Review
10       {
11         ObjID = objID ?? 0,
12         ObjType = objType ?? 1,
13         Content = "",
14         Title = "",
15       });
16     }
17     [HttpPost]
18     public JsonResult AJAXReview(Review entity)
19     {
20       JsonResult js = new JsonResult();
21       js.Data = new { res = true };
22       if (ModelState.IsValid)
23       {
24         //相关逻辑
25       }
26       else
27       {
28         js.Data = new { res = false, info = "请认真填写表单！" };
29       }
30       return js;
31     }

恩，这样可以实现的效果如图：

您可以对页面提示的效果进行改进，这对于开发者来说是容易的。