[轉]Asp.net MVC 中Ajax的使用

             Asp.net MVC 拋棄了Asp.net WebForm那種高度封裝的控件，讓咱們跟底層的HTML有了更多的親近。能夠更自由、更靈活的去控制HTML的結構、樣式和行爲。而這點對於Ajax的應有來講，Asp.net MVC確實要比WebForm優秀不少。我對Asp.net MVC更便捷的使用Ajax作了一下探討，拿出來分享，歡迎拍磚。

第1、直接寫JS代碼實現Ajax：

由於Asp.net 瀏覽器端的代碼能更好的控制，因此咱們徹底能夠在HTML中直接經過JS發出Ajax請求，而在Controller的action中返回XML或者Json，來實現Ajax效果，這種方法是最原始的方法，須要考慮瀏覽器和諸多問題，不推薦使用。

參考代碼以下：

JS代碼：

var xhr;
　　function getXHR()
　　{
　　try {
　　xhr=new ActiveXObject("Msxml2.XMLHTTP");
　　} catch (e) {
　　try {
　　xhr=new ActiveXObject("Microsoft.XMLHTTP");
　　} catch (e) {
　　xhr=false;
　　}
　　}
　　if(!xhr&&typeof XMLHttpRequest!='undefined')
　　{
　　xhr=new XMLHttpRequest();
　　}
　　return xhr;
　　}
　　function openXHR(method,url,callback)
　　{
　　getXHR();
　　xhr.open(method,url);
　　xhr.onreadystatechange=function()
　　{
　　if(xhr.readyState!=4)return;
　　callback(xhr);
　　}
　　xhr.send(null);
　　}
　　function loadXML(method,url,callback)
　　{
　　getXHR();
　　xhr.open(method,url);
　　xhr.setRequestHeader("Content-Type","text/xml");
　　xhr.setRequestHeader("Content-Type","GBK");
　　xhr.onreadystatechange=function()
　　{
　　if(xhr.readyState!=4)return;
　　callback(xhr);
　　}
　　xhr.send(null);
　　}

後臺代碼：

public ActionResult GetNews(int CategoryID)
        {
            NewsCollectionModel newsCollection = new NewsCollectionModel();
            …………
            JsonResult myJsonResult = new JsonResult();
            myJsonResult = newsCollection;
            return myJsonResult;
        }

第二種：使用Jquery進行Ajax調用：

在VS 2010中，IDE全面支持Jquery的智能顯示，在開發中使用Jq來實現JS效果很是的棒，並且能夠節省不少精力和時間。因此在Ajax中使用JQuery進行開發，也是一種不錯的方法。

大概的實現代碼以下：

<% using (Html.BeginForm("AddComment","Comment",FormMethod.Post,new {@class="hijax"})) { %>
    <%= Html.TextArea("Comment", new{rows=5, cols=50}) %>
    <button type="submit">Add Comment</button>
         <span id="indicator" style="display:none"><img src="http://www.cnblogs.com/content/load.gif" alt="loading..." /></span>
<% } %>
在View中引用Jquery：
<script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
添加下面腳本：
<script type="text/javascript">
    //execute when the DOM has been loaded
    $(document).ready(function () {
        //wire up to the form submit event
        $("form.hijax").submit(function (event) {
            event.preventDefault();  //prevent the actual form post
            hijack(this, update_sessions, "html");
        });
    });

    function hijack(form, callback, format) {
        $("#indicator").show();
        $.ajax({
            url: form.action,
            type: form.method,
            dataType: format,
            data: $(form).serialize(),
            completed: $("#indicator").hide(),
            success: callback
        });
    }

    function update_sessions(result) {
        //clear the form
        $("form.hijax")[0].reset();
        $("#comments").append(result);
    }

</script>

第三種方法：使用微軟自帶的Ajax Helper框架來實現.

<% using (Ajax.BeginForm("AddComment", new AjaxOptions
                                            {
                                                HttpMethod = "POST",
                                                UpdateTargetId = "comments",
                                                InsertionMode = InsertionMode.InsertAfter
                                            })) { %>

        <%= Html.TextArea("Comment", new{rows=5, cols=50}) %>
        <button type="submit">Add Comment</button>

    <% } %>

第二種和第三種方法在博客園有篇博客中有所講解，我直接進行了引用，具體地址以下：http://www.cnblogs.com/zhuqil/archive/2010/07/18/1780285.html

主要是對Ajax helper記錄下我本身的見解和注意的事項。

第1、Ajax Helper是微軟提供的一種Ajax框架，爲了使用Ajax Helper必須使用微軟提供的兩個Js框架：

 

<script src="http://www.cnblogs.com/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

第2、Ajax Helper有幾個用法

 

 Ajax.ActionLink()：它將渲染成一個超連接的標籤，相似於Html.ActionLink()。當它被點擊以後，將獲取新的內容並將它插入到HTML頁面中。

Ajax.BeginForm()：它將渲染成一個HTML的Form表單，相似於Html.BeginForm()。當它提交以後，將獲取新的內容並將它插入到HTML頁面中。

Ajax.RouteLink()：Ajax.RouteLink()相似於Ajax.ActionLink()。不過它能夠根據任意的routing參數生成URL,沒必要包含調用的action。使用最多的場景是自定義的IController，裏面沒有action。

Ajax.BeginRouteForm()：一樣Ajax.BeginRouteForm()相似於Ajax.BeginForm()。這個Ajax等同於Html.RouteLink()。

而每一個方法裏面的參數會有所不一樣，具體的用法見：http://msdn.microsoft.com/zh-cn/library/system.web.mvc.ajaxhelper_methods(v=VS.98).aspx

其中一個重要的參數爲：AjaxOption，存在有如下幾個屬性，主要是來規定Ajax的行爲的。

---

	名稱	描述
	Confirm	獲取或設置提交請求以前，顯示在確認窗口中的消息。
	HttpMethod	獲取或設置 HTTP 請求方法（「Get」或「Post」）。
	InsertionMode	獲取或設置指定如何將響應插入目標 DOM 元素的模式。
	LoadingElementDuration	獲取或設置一個值（以毫秒爲單位），該值控制顯示或隱藏加載元素時的動畫持續時間。
	LoadingElementId	獲取或設置加載 Ajax 函數時要顯示的 HTML 元素的 id 特性。
	OnBegin	獲取或設置更新頁面以前，剛好調用的 JavaScript 函數的名稱。
	OnComplete	獲取或設置實例化響應數據以後但更新頁面以前，要調用的 JavaScript 函數。
	OnFailure	獲取或設置頁面更新失敗時，要調用的 JavaScript 函數。
	OnSuccess	獲取或設置成功更新頁面以後，要調用的 JavaScript 函數。
	UpdateTargetId	獲取或設置要使用服務器響應來更新的 DOM 元素的 ID。
	Url	獲取或設置要向其發送請求的 URL。