1. 程式人生 > >ASP.NET MVC學習之Ajax(完結)

ASP.NET MVC學習之Ajax(完結)

等待 failure lba info 學習 有一個 代碼 orm 修改

網址: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(完結)