ASP.NET MVC學習之Ajax（完結）

一.前言

通過上面的一番學習，大家一定收獲不少。但是總歸會有一個結束的時候，但是這個結束也意味着新的開始。

如果你是從事ASP.NET開發，並且也使用了第三方控件，那么一定會覺得ASP.NET開發ajax十分的簡單，而ASP.NET MVC學習到現在頁面都是刷新的，所以這節就是ASP.NET MVC的最后一節，通過這節的學習我們將能夠實現通過ajax提交表單，下面我們開始繼續學習。

 

二.准備工作

1、首先確保引用了以下js庫在_Layout中：

 

2、新建一個HomeController，然后在其中寫入如下代碼：

namespace MvcStudy.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index([Bind(Prefix="name")]String reg)
        {
            return PartialView("Result", reg);
        }
    }
}

 

3、在Views下新建一個Home文件夾，並在其中新建一個Index視圖，同時在Views/Shared中新建一個Result視圖，到此為止准備工作完成了。

 

 

三.利用Ajax提交表單

首先我們打開剛才新建的Index視圖，然后在其中寫入如下代碼：

@{
    ViewBag.Title = "Index";
    AjaxOptions option = new AjaxOptions
    {
        UpdateTargetId = "targetdiv"
    };
}

@using (Ajax.BeginForm(option))
{
    <div id="targetdiv">
    </div>
    @Html.TextBox("name")
    <div>
        <input type="submit" value="注冊" />
    </div>
}

其中AjaxOptions同來設置ajax相關的參數，而Ajax.BeginForm則表示該表單采用ajax方式提交，其中AjaxOptions中的UpdateTargetId表示完成ajax請求之后內容的輸出的容器。

 

打開Views/Shared下的Result視圖，寫入：

@{
    String text = (string)Model;
}

@text

 

 

作為簡單的示例，筆者直接輸出了Model。

然后我們就可以F5運行，在文本框中輸入值，最后可以發現頁面並沒有刷新。但是內容卻從指定的div中呈現了，這里的原理很簡單，ASP.NET MVC就是利用jquery中的ajax來將表單中的參數提交給指定的動作，然后由這個動作直接返回一段html代碼，最后在從指定的id的容器中輸出。

 

 

四.實現加載中效果

如今很多網站都會在進行ajax請求過程中呈現一段表示加載中的標記，而ASP.NET MVC中的ajax也提供給我們這個功能，下面我們就修改Index視圖：

@{
    ViewBag.Title = "Index";
    AjaxOptions option = new AjaxOptions
    {
        UpdateTargetId = "targetdiv",
        LoadingElementId = "wait",
        LoadingElementDuration = 1000
    };
}

<div id="wait" style="display:none" >
    耐心等待會...
</div>
@using (Ajax.BeginForm(option))
{
    <div id="targetdiv">
    </div>
    @Html.TextBox("name")
    <div>
        <input type="submit" value="注冊" />
    </div>
}

 

我們通過LoadingElementId來設置加載的標簽而LoadingElementDuration則表示動畫持續的時間，這里我們寫了一個div用來呈現，並且該div的display要設置為none，這樣我們重新打開頁面再提交一次，就可以看到加載中的效果了。

 

 

五.Ajax鏈接

很多時候並不總是需要提交表單來實現ajax，也有很多僅僅只是通過點擊按鈕的方式來進行ajax請求，下面我們就利用Ajax.ActionLink來實現，我們只要在Index視圖中的下面填上如下代碼：

@Ajax.ActionLink("點我","Index",new {name= "oh no"},new AjaxOptions{
    UpdateTargetId = "targetdiv",
    Confirm = "確定嗎？",
    HttpMethod = "Post"
});

這里就不介紹了，因為和Html.ActionLink的用法十分類似，唯一的區別就是多了一個AjaxOptions參數，我們刷新頁面。點擊這個鏈接就可以看到效果了，如果你想問按鈕在哪呢，這個問題似乎沒有可問性，不是有萬能的CSS嗎？

 

 

六.Ajax回調

對於部分喜愛寫javascript的讀者來說，上面這些無疑是災難。這樣你的javascript水平如何體現呢，其實ASP.NET MVC自帶的依然有很多問題，所以這個時候我們可以監聽它的過程，從而可以更好的完成功能，下面我們監聽它的所有事件，我們仍然是修改Index視圖的代碼：

@Ajax.ActionLink("點我","Index",new {name= "oh no"},new AjaxOptions{
    UpdateTargetId = "targetdiv",
    Confirm = "確定嗎？",
    HttpMethod = "Post",
    OnBegin = "onbegin",
    OnComplete = "oncomplete",
    OnFailure = "onfailure",
    OnSuccess = "onsuccess"
});

<script type="text/javascript">
    function onbegin() {
        console.log("開始啦");
    }

    function oncomplete(request, status) {
        console.log("完成了，好下班了");
    }

    function onfailure(request, error) {
        console.log("報錯了，要加班了");
    }

    function onsuccess(data) {
        console.log("改好了，走人嘍");
    }
</script>

 

 

這里我們監聽了所有的事件，下面我們可以看到正確調用下的輸出：

 

當然個人認為ASP.NET MVC的ajax還是有點雞肋，用個backbone.js框架加上ASP.NET Web API基本上直接秒殺了，當然對於簡單的頁面用用自帶的還是蠻快捷的。

 

七.ASP.NET MVC系列所有鏈接

ASP.NET MVC學習之路由篇（1）

ASP.NET MVC學習之路由篇（2）

ASP.NET MVC學習之路由篇（3）

ASP.NET MVC學習之過濾器篇（1）

ASP.NET MVC學習之過濾器篇（2）

ASP.NET MVC學習之控制器篇擴展性

ASP.NET MVC學習之視圖（1）

ASP.NET MVC學習之視圖篇（2）

ASP.NET MVC學習之模型模板篇

ASP.NET MVC學習之模型綁定（1）

ASP.NET MVC學習之模型綁定（2）

ASP.NET MVC學習之模型驗證篇