Asp.net MVC 中Ajax的使用_H5之家 - 中国HTML5教程资源分享第一站

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

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="" alt="loading..." /></span> <% } %> 在View中引用Jquery： <script src="" 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> <% } %>

第二种和第三种方法在博客园有篇博客中有所讲解，我直接进行了引用，具体地址如下：

主要是对Ajax helper记录下我自己的看法和注意的事项。

第一、Ajax Helper是微软提供的一种Ajax框架，为了使用Ajax Helper必须使用微软提供的两个Js框架：

> <

第二、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()。

而每个方法里面的参数会有所不同，具体的用法见：(v=VS.98).aspx

其中一个重要的参数为：AjaxOption，存在有以下几个属性，主要是来规定Ajax的行为的。

名称描述

公共属性

Confirm 获取或设置提交请求之前，显示在确认窗口中的消息。