MVC4 AspNet MVC下的Ajax / 使用微软提供的Ajax请求脚本 [jquery.unobtrusive-ajax.min.js]

时间：2016-03-02 08:20:42 阅读：1486 评论：0 收藏：0 [点我收藏+]

源码参考：链接：http://pan.baidu.com/s/1pKhHHMj 密码：mkr4

1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序。命名为：Mvc4MicrosoftAjaxDemo

技术分享

2：新建控制器：在Controllers文件夹上右键-->添加-->控制器，命名为：HomeController (HomeController .cs)

技术分享

3：在控制器HomeController中新增Action： GetDate()

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Threading;
 5 using System.Web;
 6 using System.Web.Mvc;
 7 
 8 namespace Mvc4MicrosoftAjaxDemo.Controllers
 9 {
10     public class HomeController : Controller
11     {
12         //
13         // GET: /Home/
14 
15         public ActionResult Index()
16         {
17             return View();
18         }
19 
20         public ActionResult GetDate()
21         {
22             //休眠1秒钟，监控前台动作
23             Thread.Sleep(1000);
24             return Content(DateTime.Now.ToString());
25         }
26     }
27 }

HomeController.cs

4:新建视图：在HomeController Action：Index上右键-->添加视图命名：Index(默认和Action名称一致) (Index.cshtml)

技术分享

5：在视图Index中添加以下代码，使用微软提供的Ajax请求脚本，如下所示：

5.1：添加 jquery-1.8.2.min.js 和 jquery.unobtrusive-ajax.min.js的引用

 1 @{
 2     Layout = null;
 3 }
 4 
 5 <!DOCTYPE html>
 6 
 7 <html>
 8 <head>
 9     <meta name="viewport" content="width=device-width" />
10     <title>Index</title>
11     <script src="~/Scripts/jquery-1.8.2.min.js"></script>
12     <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
13 </head>
14 <body>
15     <div>
16         <h1>MVC 4 Microsoft Ajax Demo</h1>
17         @using (Ajax.BeginForm("GetDate", "Home", new AjaxOptions() { Confirm = "你确定要提交吗？", HttpMethod = "post", UpdateTargetId = "result", LoadingElementId = "loading", InsertionMode = InsertionMode.Replace }))
18         {
19             <input type="submit" id="btnAjax" name="btnAjax" value="MicrosoftAjaxGetDate" />
20         }
21         <div id="result"></div>
22         <div id="loading" style="display:none;">
23             <img src="~/Content/ico_loading2.gif" />
24         </div>
25     </div>
26 </body>
27 </html>