ASP.NET MVC學習之Ajax（完結）
網址：https://www.cnblogs.com/yaozhenfa/p/asp_net_mvc_ajax.html
一.前言
通過上面的一番學習，大家一定收獲不少。但是總歸會有一個結束的時候，但是這個結束也意味著新的開始。
如果你是從事ASP.NET開發，並且也使用了第三方控件，那麽一定會覺得ASP.NET開發ajax十分的簡單，而ASP.NET MVC學習到現在頁面都是刷新的，所以這節就是ASP.NET MVC的最後一節，通過這節的學習我們將能夠實現通過ajax提交表單，下面我們開始繼續學習。
二.準備工作
1、首先確保引用了以下js庫在_Layout中：
2、新建一個HomeController，然後在其中寫入如下代碼：
1 namespace MvcStudy.Controllers
2 {
3 public class HomeController : Controller
4 {
5 public ActionResult Index()
6 {
7 return View();
8 }
9
10 [HttpPost]
11 public ActionResult Index([Bind(Prefix="name")]String reg)
12 {
13 return PartialView("Result", reg);
14 }
15 }
16 }
3、在Views下新建一個Home文件夾，並在其中新建一個Index視圖，同時在Views/Shared中新建一個Result視圖，到此為止準備工作完成了。
三.利用Ajax提交表單
首先我們打開剛才新建的Index視圖，然後在其中寫入如下代碼：
1 @{
2 ViewBag.Title = "Index";
3 AjaxOptions option = new AjaxOptions
4 {
5 UpdateTargetId = "targetdiv"
6 };
7 }
8
9 @using (Ajax.BeginForm(option))
10 {
11 <div id="targetdiv">
12 </div>
13 @Html.TextBox("name")
14 <div>
15 <input type="submit" value="註冊" />
16 </div>
17 }
其中AjaxOptions同來設置ajax相關的參數，而Ajax.BeginForm則表示該表單采用ajax方式提交，其中AjaxOptions中的UpdateTargetId表示完成ajax請求之後內容的輸出的容器。
打開Views/Shared下的Result視圖，寫入：
1 @{
2 String text = (string)Model;
3 }
4
5 @text
作為簡單的示例，筆者直接輸出了Model。
然後我們就可以F5運行，在文本框中輸入值，最後可以發現頁面並沒有刷新。但是內容卻從指定的div中呈現了，這裏的原理很簡單，ASP.NET MVC就是利用jquery中的ajax來將表單中的參數提交給指定的動作，然後由這個動作直接返回一段html代碼，最後在從指定的id的容器中輸出。
四.實現加載中效果
如今很多網站都會在進行ajax請求過程中呈現一段表示加載中的標記，而ASP.NET MVC中的ajax也提供給我們這個功能，下面我們就修改Index視圖：
1 @{
2 ViewBag.Title = "Index";
3 AjaxOptions option = new AjaxOptions
4 {
5 UpdateTargetId = "targetdiv",
6 LoadingElementId = "wait",
7 LoadingElementDuration = 1000
8 };
9 }
10
11 <div id="wait" style="display:none" >
12 耐心等待會...
13 </div>
14 @using (Ajax.BeginForm(option))
15 {
16 <div id="targetdiv">
17 </div>
18 @Html.TextBox("name")
19 <div>
20 <input type="submit" value="註冊" />
21 </div>
22 }
我們通過LoadingElementId來設置加載的標簽而LoadingElementDuration則表示動畫持續的時間，這裏我們寫了一個div用來呈現，並且該div的display要設置為none，這樣我們重新打開頁面再提交一次，就可以看到加載中的效果了。
五.Ajax鏈接
很多時候並不總是需要提交表單來實現ajax，也有很多僅僅只是通過點擊按鈕的方式來進行ajax請求，下面我們就利用Ajax.ActionLink來實現，我們只要在Index視圖中的下面填上如下代碼：
1 @Ajax.ActionLink("點我","Index",new {name= "oh no"},new AjaxOptions{
2 UpdateTargetId = "targetdiv",
3 Confirm = "確定嗎？",
4 HttpMethod = "Post"
5 });
這裏就不介紹了，因為和Html.ActionLink的用法十分類似，唯一的區別就是多了一個AjaxOptions參數，我們刷新頁面。點擊這個鏈接就可以看到效果了，如果你想問按鈕在哪呢，這個問題似乎沒有可問性，不是有萬能的CSS嗎？
六.Ajax回調
對於部分喜愛寫javascript的讀者來說，上面這些無疑是災難。這樣你的javascript水平如何體現呢，其實ASP.NET MVC自帶的依然有很多問題，所以這個時候我們可以監聽它的過程，從而可以更好的完成功能，下面我們監聽它的所有事件，我們仍然是修改Index視圖的代碼：
1 @Ajax.ActionLink("點我","Index",new {name= "oh no"},new AjaxOptions{
2 UpdateTargetId = "targetdiv",
3 Confirm = "確定嗎？",
4 HttpMethod = "Post",
5 OnBegin = "onbegin",
6 OnComplete = "oncomplete",
7 OnFailure = "onfailure",
8 OnSuccess = "onsuccess"
9 });
10
11 <script type="text/javascript">
12 function onbegin() {
13 console.log("開始啦");
14 }
15
16 function oncomplete(request, status) {
17 console.log("完成了，好下班了");
18 }
19
20 function onfailure(request, error) {
21 console.log("報錯了，要加班了");
22 }
23
24 function onsuccess(data) {
25 console.log("改好了，走人嘍");
26 }
27 </script>
這裏我們監聽了所有的事件，下面我們可以看到正確調用下的輸出：
當然個人認為ASP.NET MVC的ajax還是有點雞肋，用個backbone.js框架加上ASP.NET Web API基本上直接秒殺了，當然對於簡單的頁面用用自帶的還是蠻快捷的。
ASP.NET MVC學習之Ajax（完結）