文章转自 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代码：
- 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的行为的。