Asp.net MVC 中Ajax的使用 [分享]

文章转自 http://www.huiyoumi.wang/upload/forum.php?mod=viewthread&tid=75&extra=

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代码：

  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. public ActionResult GetNews(int CategoryID)  
  2.             {  
  3.                 NewsCollectionModel newsCollection = 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=5, cols=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).serialize(),  
  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.                                                     InsertionMode = InsertionMode.InsertAfter                                                  
  6.                                                 })) { %>  
  7.          
  8.             <%= Html.TextArea("Comment", new{rows=5, cols=50}) %>  
  9.             <button type="submit">Add Comment</button>  
  10.                                                   
  11.         <% } %>  
复制代码

第二种和第三种方法在博客园有篇博客中有所讲解，我直接进行了引用，具体地址如下：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的行为的。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yuhangwang/p/4594945.html