爱上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     }

恩,这样可以实现的效果如图:

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

本文转自博客园张占岭(仓储大叔)的博客,原文链接:爱上MVC3系列~当Ajax.Beform不能满足我们的要求时...,如需转载请自行联系原博主。

目录
相关文章
|
5月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
38 0
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
57 0
|
4月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
3月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
16 0
|
8月前
|
前端开发 JavaScript
jQuery中的Ajax请求----ajax请求篇(二)
在jQuery中的Ajax请求其实是在底层对原生js请求方式的封装,那么jQuery中的Ajax请求是怎样的呢?
42 0
|
3月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
41 0
|
4月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
4月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
48 0
|
4月前
|
前端开发 JavaScript API
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
|
4月前
|
XML 缓存 JavaScript
jQuery 第十章(jQuery AJAX以及jQuery和其他框架兼容)
jQuery 第十章(jQuery AJAX以及jQuery和其他框架兼容)
26 0