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

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

JS提交表单代码：

<script type="text/javascript">
    function submitForm() {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("AJAXReview", "Common")',
            data: $("#form1").serialize(),
            success: function (data) {
                if (data.res)
                    alert("提交成功");
                else
                    alert("提交失败，失败信息为：" + data.info);
            }
        })
    }
</script>

View:

@using (Html.BeginForm("Review", "Common", FormMethod.Post, new
{
    id = "form1"
}))
{
    <fieldset>
        <legend>评论 </legend>
        <ul>@Html.ValidationSummary(true)
            @Html.HiddenFor(i => i.ObjID)
            @Html.HiddenFor(i => i.ObjType)
            <li></li>
            <li>标题：@Html.TextBoxFor(i => i.Title)</li>
            <li>@Html.ValidationMessageFor(i => i.Title)</li>
            <li>内容：@Html.TextAreaFor(i => i.Content)</li>
            <li>@Html.ValidationMessageFor(i => i.Content)</li>
        </ul>
    </fieldset>
    <input type="button" onclick="submitForm()" value="提交" />
}

Model:

  /// <summary>
  /// 评论对象
  /// </summary>
  public class Review
  {
    public long ID { get; set; }
    public int ObjType { get; set; }
    public long ObjID { get; set; }
    [Required]
    public string Title { get; set; }
    [Required]
    public string Content { get; set; }
    [Required]
    public DateTime CreateDate { get; set; }
  }

Controller:

   /// <summary>
    /// 异步评论视图
    /// </summary>
    /// <param name="objID"></param>
    /// <param name="objType"></param>
    /// <returns></returns>
    public ActionResult AJAXReview(int? objID, int? objType)
    {
      return View(new Review
      {
        ObjID = objID ?? 0,
        ObjType = objType ?? 1,
        Content = "",
        Title = "",
      });
    }
    [HttpPost]
    public JsonResult AJAXReview(Review entity)
    {
      JsonResult js = new JsonResult();
      js.Data = new { res = true };
      if (ModelState.IsValid)
      {
        //相关逻辑
      }
      else
      {
        js.Data = new { res = false, info = "请认真填写表单！" };
      }
      return js;
    }

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

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