MVC4 AspNet MVC下的Ajax / 使用微軟提供的Ajax請求腳本 [jquery.unobtrusive-ajax.min.js]

本文轉載自查看原文 2016-03-02 08:08 4060 07 ASP.NET MVC/ ASP.NET MVC

源碼參考：鏈接：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>

Index.cshtml

Unobtrusive Ajax

應當將 JavaScript （或其它腳本）從 Html 中分離出來，就像最初將樣式從 Html 中分離出來一樣道理。簡單來說就是將嵌入在 Html 中的 JavaScript 全部取出來，放在單獨的 js 文件中，

頁面中不要出現任何 onclick、onload

使用 Unobtrusive Ajax 我們最大的收益就是簡單易於維護的代碼（Code is cleaner and easier to maintain）。

基本特點

1.網頁內容和表單使用純 HTML；

2.不借助 JavaScript，表單和超級連接也能正常使用；

3.頁面外觀完全由 CSS 控制，而不是 HTML（不要用 table 來布局）或 JavaScript；

4.任何人都能通過任何設備（考慮不支持JavaScript的設備）訪問；

Unobtrusive Ajax使用方式

1.引用相應的Javascript文件

1 <script src="@Url.Content("~/Scripts/jquery-1.4.1.min.js")" type="text/javascript"></script>
2 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
3 <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
4 <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>