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 }
恩,这样可以实现的效果如图:
您可以对页面提示的效果进行改进,这对于开发者来说是容易的。