MVC中的Ajax（AjaxHelper）
| authour： | chenboyi |
| updatetime： | 2015-04-30 20:47:49 |
| friendly link： |
目录
ps：mvc中同样也能用jquery中的方法来发起ajax请求
2.1 示例说明：
下面是获取服务器的时间的小例子，主要有两个文件：1，getDate.cshtml ;2,getDateController（action：GetTime）
2.2 CodeSimple:
1 //getDate.cshtml 2 @{ 3 Layout = null; 4 } 5 6 <!DOCTYPE html> 7 8 <html> 9 <head> 10 <meta name="viewport" content="width=device-width" /> 11 <title>Index</title> 12 <style> 13 .none { 14 display: none; 15 } 16 #dispTime { 17 border:1px solid red; 18 height:50px; 19 } 20 </style> 21 <script src="~/Scripts/jquery-1.7.1.js"></script> 22 <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 23 24 <script type="text/javascript"> 25 //表示开始请求 26 function begin() { 27 //alert("begin()"); 28 $("#loading1").removeClass("none"); 29 } 30 31 //表示成功 如果后台action利用的是 return Json()方法返回，此处的obj就是被Json.parse()自动转换的一个js对象（数组） 32 function sucess1(obj) { 33 var o = obj; //{now:2014-2-23 10:09:09} 34 //开始利用obj 执行当前的业务逻辑 35 //alert("sucess1():" + o.now); 36 } 37 38 //表示失败 39 function fail(obj) { 40 // alert("fail():" + obj); 41 } 42 43 //表示完成 44 function comp(obj) { 45 var o = obj; 46 // alert("comp():" + o) 47 $("#loading1").addClass("none"); 48 } 49 50 </script> 51 </head> 52 <body> 53 <div> 54 @*<a href="/AjaxHelper/GetTime" data-ajax="true" data-ajax-url="/AjaxHelper/GetTime"></a>*@ 55 @Ajax.ActionLink( 56 "Get请求服务器时间" 57 , "GetTime" 58 , "AjaxHelper" 59 , new AjaxOptions() 60 { 61 Confirm = "是否要请求服务器吗？", 62 HttpMethod = "Get", 63 InsertionMode = InsertionMode.Replace, //Replace：表示最新的结果替换原来的结果 64 Url = Url.Action("GetTime", "AjaxHelper"), //负责将结果生成 到a标签的 data-ajax-url属性中 65 LoadingElementId = "loading", // 当请求发出时显示id=loading 元素，提醒用户当前正在处理 66 OnSuccess = "sucess1", //表示服务器响应回来以后调用的成功回调函数 67 OnComplete = "comp", //表示服务器已经响应完成，并且执行了OnSuccess，是在OnSuccess调用之后被触发 68 OnBegin = "begin", //发出ajax请求的时候被触发 69 OnFailure = "fail" //当ajax请求失败的回调函数 70 }) 71 </div> 72 <div> 73 @Ajax.ActionLink( 74 "Get请求服务器时间1" 75 , "GetTime1" 76 , "AjaxHelper" 77 , new AjaxOptions() 78 { 79 Confirm = "是否要请求服务器吗？", 80 HttpMethod = "Get", 81 InsertionMode = InsertionMode.Replace, //Replace：表示最新的结果替换原来的结果 82 UpdateTargetId = "dispTime", //将服务器响应回来的结果填充到 id = dispTime 的元素中,注意action方法中只能返回文本字符串，不能返回json格式的字符串 83 Url = Url.Action("GetTime1", "AjaxHelper"), //负责将结果生成 到a标签的 data-ajax-url属性中 84 LoadingElementId = "loading" // 当请求发出时显示id=loading 元素，提醒用户当前正在处理 85 }) 86 </div> 87 88 <div> 89 @Ajax.ActionLink( 90 "Post请求服务器时间" 91 , "GetTime2" 92 , "AjaxHelper" 93 , new AjaxOptions() 94 { 95 Confirm = "是否要请求服务器吗？", 96 HttpMethod = "Post", 97 InsertionMode = InsertionMode.Replace, //Replace：表示最新的结果替换原来的结果 98 UpdateTargetId = "dispTime", //将服务器响应回来的结果填充到 id = dispTime 的元素中,注意action方法中只能返回文本字符串，不能返回json格式的字符串 99 Url = Url.Action("GetTime2", "AjaxHelper"), //负责将结果生成 到a标签的 data-ajax-url属性中 100 LoadingElementId = "loading" // 当请求发出时显示id=loading 元素，提醒用户当前正在处理 101 }) 102 </div> 103 <div id="dispTime"></div> 104 <div id="loading" style="color: red; display: none">正在加载中.....</div> 105 <div id="loading1" style="color: red;" class="none">正在加载中1111111.....</div> 106 </body> 107 </html>
1 /// <summary> 2 /// 被ajax请求的方法 3 /// </summary> 4 /// <returns></returns> 5 public ActionResult GetTime() 6 { 7 System.Threading.Thread.Sleep(2000); 8 //格式：{"time":"2014-8-4 12:00:00"} 9 return Json(new { time = DateTime.Now.ToString() }, JsonRequestBehavior.AllowGet); 10 } 11 12 //public ActionResult GetTime1() 13 //{ 14 // System.Threading.Thread.Sleep(2000); 15 16 // return Content(DateTime.Now.ToString()); 17 //}
3.1 示例说明：
下面是通过一个简单的“模拟新增”（并非真的做新增操作）方法，说明BeginForm的使用方式。
其中主要有两段代码：1，Add.schtml;2,C#(Add方法)
3.2 CodeSimple：
1 //Add.cshtml 2 @{ 3 Layout = null; 4 } 5 @model Mvc03知识点.Pig 6 7 <!DOCTYPE html> 8 9 <html> 10 <head> 11 <meta name="viewport" content="width=device-width" /> 12 <title>Add</title> 13 <style type="text/css"> 14 #saveing { 15 position: absolute; 16 left: 400px; 17 top: 300px; 18 border: 1px solid blue; 19 width: 100px; 20 } 21 22 .none { 23 display: none; 24 } 25 </style> 26 <script src="~/Scripts/jquery-1.7.1.js"></script> 27 <script src="~/Scripts/jquery.validate.js"></script> 28 <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> 29 <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 30 <script type="text/javascript"> 31 function begin() { 32 //将saveing 对于的div上的none 类移除，显示div给用户 33 $("#saveing").removeClass("none"); 34 } 35 36 function sucess1(jsobj) { 37 //1.0 接收 jsojb 38 //2.0 利用jsobj 做业务逻辑处理 39 if (jsobj.status == "sucess") { 40 alert("新增成功"); 41 } else { 42 alert(jsobj.msg); 43 } 44 //将saveing 对于的div 隐藏 45 $("#saveing").addClass("none"); 46 } 47 48 </script> 49 </head> 50 <body> 51 <div> 52 @using (Ajax.BeginForm( 53 "Add" 54 , "ajaxBegForm" 55 , new AjaxOptions() 56 { 57 HttpMethod = "Post", 58 OnBegin = "begin", 59 OnSuccess = "sucess1", 60 Url = Url.Action("Add", "ajaxBegForm") 61 })) 62 { 63 @Html.TextBoxFor(c=>c.ID)<br /> 64 @Html.TextBoxFor(c=>c.Name) @Html.ValidationMessageFor(c=>c.Name)<br /> 65 @Html.TextBoxFor(c=>c.Age)<br /> 66 <input type="submit" value="新增" /> 67 } 68 </div> 69 <div id="saveing" class="none">数据正在保存</div> 70 </body> 71 </html>
1 #region 2.0 演示@Ajax.BeginForm()的ajax操作 2 3 [HttpGet] 4 public ActionResult Add() 5 { 6 return View(); 7 } 8 9 [HttpPost] 10 public ActionResult Add(Pig pig) 11 { 12 //TODO:执行新增逻辑代码 13 //以json格式将提醒数据返回 14 return Json(new { status = 0, msg = "新增成功" }); 15 } 16 17 #endregion
4, Ajax非侵入式脚本
ajax请求的步骤：
4.1、利用@Ajax 中的相应方法生成相应html元素
4.2、导入两个脚本：
<script src="~/Scripts/jquery-xx.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
4.3、确认web.config中 <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 的值为true，表示开启非侵入式脚本