Asp.net MVC 中Ajax的使用

来源:java认证发布时间:2012-11-12 12:48:13java认证视频

        Asp.net MVC 抛弃了Asp.net WebForm那种高度封装的控件,让我们跟底层的HTML有了更多的亲近。可以更自由、更灵活的去控制HTML的结构、样式和行为。而这点对于Ajax的应有来说,Asp.net MVC确实要比WebForm优秀很多。我对Asp.net MVC更便捷的使用Ajax做了一下探讨,拿出来分享,欢迎拍砖。

第一、直接写JS代码实现Ajax:
        因为Asp.net 浏览器端的代码能更好的控制,所以我们完全可以在HTML中直接通过JS发出Ajax请求,而在Controller的action中返回XML或者Json,来实现Ajax效果,这种方法是最原始的方法,需要考虑浏览器和诸多问题,不推荐使用。

参考代码如下:
JS代码:

  1. var xhr;  
  2.   function getXHR()  
  3.   {  
  4.   try {  
  5.   xhr=new ActiveXObject("Msxml2.XMLHTTP");  
  6.   } catch (e) {  
  7.   try {  
  8.   xhr=new ActiveXObject("Microsoft.XMLHTTP");  
  9.   } catch (e) {  
  10.   xhr=false;  
  11.   }  
  12.   }  
  13.   if(!xhr&&typeof XMLHttpRequest!='undefined')  
  14.   {  
  15.   xhr=new XMLHttpRequest();  
  16.   }  
  17.   return xhr;  
  18.   }  
  19.   function openXHR(method,url,callback)  
  20.   {  
  21.   getXHR();  
  22.   xhr.open(method,url);  
  23.   xhr.onreadystatechange=function()  
  24.   {  
  25.   if(xhr.readyState!=4)return;  
  26.   callback(xhr);  
  27.   }  
  28.   xhr.send(null);  
  29.   }  
  30.   function loadXML(method,url,callback)  
  31.   {  
  32.   getXHR();  
  33.   xhr.open(method,url);  
  34.   xhr.setRequestHeader("Content-Type","text/xml");  
  35.   xhr.setRequestHeader("Content-Type","GBK");  
  36.   xhr.onreadystatechange=function()  
  37.   {  
  38.   if(xhr.readyState!=4)return;  
  39.   callback(xhr);  
  40.   }  
  41.   xhr.send(null);  
  42.   }  

后台代码:

  1. pubpc ActionResult GetNews(int CategoryID)  
  2.         {  
  3.             NewsCollectionModel newnewsCollection = new NewsCollectionModel();  
  4.             …………  
  5.             JsonResult myJsonResult = new JsonResult();  
  6.             myJsonResult = newsCollection;  
  7.             return myJsonResult;  
  8.         }  

第二种:使用Jquery进行Ajax调用:
在VS 2010中,IDE全面支持Jquery的智能显示,在开发中使用Jq来实现JS效果非常的棒,而且可以节省很多精力和时间。所以在Ajax中使用JQuery进行开发,也是一种不错的方法。
大概的实现代码如下:

  1. <% using (Html.BeginForm("AddComment","Comment",FormMethod.Post,new {@class="hijax"})) { %>      
  2.     <%= Html.TextArea("Comment", new{rows=5cols=50}) %>  
  3.     <button type="submit">Add Comment</button>  
  4.          <span id="indicator" style="display:none"><img src="http://www.cnblogs.com/content/load.gif" alt="loading..." /></span>                                   
  5. <% } %>  
  6. 在View中引用Jquery:  
  7. <script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
  8. 添加下面脚本:  
  9. <script type="text/javascript">  
  10.     //execute when the DOM has been loaded  
  11.     $(document).ready(function () {  
  12.         //wire up to the form submit event  
  13.         $("form.hijax").submit(function (event) {  
  14.             event.preventDefault();  //prevent the actual form post  
  15.             hijack(this, update_sessions, "html");  
  16.         });  
  17.     });  
  18.   
  19.     function hijack(form, callback, format) {  
  20.         $("#indicator").show();  
  21.         $.ajax({  
  22.             url: form.action,  
  23.             type: form.method,  
  24.             dataType: format,  
  25.             data: $(form).seriapze(),  
  26.             completed: $("#indicator").hide(),  
  27.             success: callback  
  28.         });  
  29.     }  
  30.   
  31.     function update_sessions(result) {  
  32.         //clear the form  
  33.         $("form.hijax")[0].reset();  
  34.         $("#comments").append(result);  
  35.     }  
  36.   
  37. </script>  


第三种方法:使用微软自带的Ajax Helper框架来实现.

  1. <% using (Ajax.BeginForm("AddComment", new AjaxOptions  
  2.                                             {  
  3.                                                 HttpMethod = "POST",   
  4.                                                 UpdateTargetId = "comments",  
  5.                                                 InsertionModeInsertionMode = InsertionMode.InsertAfter                                                  
  6.                                             })) { %>  
  7.       
  8.         <%= Html.TextArea("Comment", new{rows=5cols=50}) %>  
  9.         <button type="submit">Add Comment</button>  
  10.                                               
  11.     <% } %>  

主要是对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/pbrary/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。

TAG: AjaxajaxAJAXJava教程java教程JAVA教程

视频学习

我考网版权与免责声明

① 凡本网注明稿件来源为"原创"的所有文字、图片和音视频稿件,版权均属本网所有。任何媒体、网站或个人转载、链接转贴或以其他方式复制发表时必须注明"稿件来源:我考网",违者本网将依法追究责任;

② 本网部分稿件来源于网络,任何单位或个人认为我考网发布的内容可能涉嫌侵犯其合法权益,应该及时向我考网书面反馈,并提供身份证明、权属证明及详细侵权情况证明,我考网在收到上述法律文件后,将会尽快移除被控侵权内容。

最近更新

社区交流

考试问答