MVC的Ajax的异步请求

在这里小写一下MVC的异步请求的一点小总结。

个人认为是有两种的，一种就是跟webform一样的，依旧是使用jQuery的$.get()方法，只是请求地址不同，webform是请求的那个cs文件，而MVC是请求控制器下面的那个方法，其余两个参数也就都一样了。其区别如下（可见下面视图中的代码，此处附图，以示区别之处）：

。

另外一种就是用隐式的异步请求，其写法如下：

小解释一下这代码，Ajax.BeginForm中的三个参数，第一个是方法名，第二个是控制器的名字，第三个就是异步的选项了，HttpMethod表示的是请求的HTTP的方法。Onsuccess表示更新页面成功后要调用js方法，也就是说这里的afterSuccess是我们要写的一个函数，当页面加载成功后就执行此函数，Confrim则是可以弹一个窗口的，会有确定有取消的选项，内容自然就是上面的“小杜确定想知道现在几点吗?”,然后我们在上面写的afterSuccess方法是显示当前时间的，当我们点确定时，就会弹窗并且显示当前时间。也就是这样：

和这样：。

另外说一下上面的Ajax.BeginFrom的写法其实会编译成这样：

具体的可见下面的代码，这代码呢，也是我从源代码那里copy过来略改了一下的，其中上面的Confrim就相当于此处的data-ajax-confirm,OnSuccess就相当于此处的data-ajax-success。这个可以认为是纯前端的MVC,讲究的是js是行为，HTML就相当于页面。其追求的是完整的分离。CSS,HTML,JS做到完整的分离，耦合做到最低。这样就可以做到当JS脚本出了问题，此处还是可以正常的提交，只是没有异步的效果而已了。他们是一个无亲热的脚本。做到了彻底的分离。如果是第一种，也就是get的那个，如果下面的id出现的问题，也就执行不了了，相对而言就有些耦合了。最高级的自然是下面的这两个。

另外再写几个对应的异步选项,

OnFaile ：在发送异步请求失败的时候触发的JavaScript方法,跟OnSuccess相对应。

LoadingElementId ：指定在进行异步请求的时候要显示的提示信息的Loading元素的ID。

InsertionMode InsertionMode ：返回的内容要更新的目标元素的方式。有三种方式：
Replace ：替换目标元素里面的内容；
InsertBefore ：返回内容插入到目标元素的前面；
InsertAfter：返回内容插入到目标元素的后面。

最后附上我写的代码，供诸位参考。就这个样子了，一会还得帮朋友搬家呢。欢迎赐教。

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Mvc;
 6 
 7 namespace _1122MVC_Ajax.Controllers
 8 {
 9     public class AjaxController : Controller
10     {
11         //
12         // GET: /Ajax/
13 
14         public ActionResult Index()
15         {
16             return View();
17         }
18 
19         public ActionResult Date()
20         {
21             //以下代码就相当于是Response.Write();
22             return Content(DateTime.Now.ToString());
23         }
24     }
25 }

控制器的代码

 1 <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html>
 6 <head runat="server">
 7     <meta name="viewport" content="width=device-width" />
 8     <title>Index</title>
 9     <script src="../../Scripts/jquery-1.8.2.js"></script>
10     <script src="../../Scripts/jquery.unobtrusive-ajax.js"></script>
11     <script type="text/javascript">
12         $(function() {
13             $('#btn').click(function() {
14                 $.get("/ajax/date", {}, function(data) {
15                     alert(data);
16                 });
17             });
18         });
19         function afterSuccess(data) {
20             alert(data);
21         }
22     </script>
23 </head>
24 <body>
25     <div>
26         <input type="button" id="btn" value="Get the time1" />
27         <hr/>
28         <% using (Ajax.BeginForm("date","ajax",new AjaxOptions()
29            {
30                HttpMethod ="Post",OnSuccess ="afterSuccess",Confirm = "小杜确定想知道现在几点吗"
31            }))
32            {%>
33         <input type="submit" name="name" value="Get the Time2 " />
34           <% } %>
35         <hr/>
36         <form data-ajax-confirm="小杜是不是想念某个城市了" action="/ajax/date" data-ajax="true" data-ajax-method="Post" data-ajax-success="afterSuccess" id="form1" method="post">
37         <input type="submit" name="name" value="Get the Time3 " />
38           </form>
39     </div>
40 </body>
41 </html>

视图的代码