[转]Asp.net MVC 中Ajax的使用

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

第1、直接写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记录下我本身的见解和注意的事项。

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

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

---

	名称	描述
	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。