Asp.net MVC 中Ajax的使用

Asp.net MVC 拋棄了Asp.net WebForm那種高度封裝的控件，讓咱們跟底層的HTML有了更多的親近。能夠更自由、更靈活的去控制HTML的結構、樣式和行爲。而這點對於Ajax 的應有來講，Asp.net MVC確實要比WebForm優秀不少。我對Asp.net MVC更便捷的使用Ajax作了一下探討，拿出來分享，歡迎拍磚。如下采用三種方式演示ajax的使用，兩種都以簡單demo展現但願你們多研究、提問和分享經驗。

第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的行爲的。