Asp.net MVC 中Ajax的使用

Asp.net MVC 抛弃了Asp.net WebForm那种高度封装的控件,让我们跟底层的HTML有了更多的亲近。可以更自由、更灵活的去控制HTML的结构、样式和行为。而这点对于Ajax 的应有来说,Asp.net MVC确实要比WebForm优秀很多。我对Asp.net MVC更便捷的使用Ajax做了一下探讨,拿出来分享,欢迎拍砖。以下采用三种方式演示ajax的使用,两种都以简单demo展示希望大家多研究、提问和分享经验。

第一、直接写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记录下我自己的看法和注意的事项。

第一、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>

第二、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的行为的。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。