Asp.net MVC 中Ajax的使用

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

时间: 2024-08-01 23:40:04

Asp.net MVC 中Ajax的使用的相关文章

浅析Asp.net MVC 中Ajax的使用

在ASP.NET MVC beta中我们可以使用Ajax.BeginForm, Ajax.ActionLink来进行Ajax调用,同样我们也可以使用一些支持Ajax 框架如jQuery来简化对ajax的调用. 一.使用System.Web.Mvc.Ajax 1.1 System.Web.Mvc.Ajax.BeginForm 1.2 System.Web.Mvc.Ajax.ActionLink 二.手工打造自己的"非介入式"Javascript" 一.使用System.Web.

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

Asp.net MVC 抛弃了Asp.net WebForm那种高度封装的控件,让我们跟底层的HTML有了更多的亲近.可以更自由.更灵活的去控制HTML的结构.样式和行为.而这点对于Ajax的应有来说,Asp.net MVC确实要比WebForm优秀很多.我对Asp.net MVC更便捷的使用Ajax做了一下探讨,拿出来分享,欢迎拍砖. 第一.直接写JS代码实现Ajax: 因为Asp.net 浏览器端的代码能更好的控制,所以我们完全可以在HTML中直接通过JS发出Ajax请求,而在Control

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做了一下探讨,拿出来分享,欢迎拍砖.以

ASP.NET MVC中使用ASP.NET AJAX异步访问WebService

使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也没什么大的差别. 在ASP.NET应用程序里使用ASP.NET AJAX访问WebService通常都是通过ScriptMananger引入WebService生成客户端代理的方法,同时也可以使用Microsoft Ajax Library来完成.本文将介绍在ASP.NET MVC中使用ASP.NE

在asp.net mvc中使用PartialView返回部分HTML段

问题链接: MVC怎样实现异步调用输出HTML页面 该问题是个常见的 case, 故写篇文章用于提示新人. 在asp.net mvc中返回View时使用的是ViewResult,它继承自ViewResultBase 同一时候它还有个兄弟PartialViewResult 相信聪明的你已经知道了它俩的差别了,没错 一个用于返回总体,还有一个返回局部(部分). 如果我有这样一个需求,输入username,然后返回相关信息.之前的做法可能会是用json格式来返回用户的相关信息,然后到页面去渲染相关 的

Asp.Net MVC中使用ACE模板之Jqgrid

第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究.它本身是基于bootstrap和jqueryui,但更nice,整合之后为后台开发节省了大量时间. 发现虽然不是完美,整体效果还是不错,特此分享给园友.这一节先讲其中的Jqgrid.按照国际惯例,先上两张图. 集成了button,form,treeview以及日历,时间轴.chart等控件,非常丰富.下面是Jqgrid在MVC中的使用. jqgrid的加载,排序,查找都是基于后台方法,不是在内存中完成,但也有一些小坑.下面一一道

Asp.net MVC 中Controller返回值类型ActionResult

内容转自 http://blog.csdn.net/pasic/article/details/7110134 Asp.net MVC中Controller返回值类型 在mvc中所有的controller类都必须使用"Controller"后缀来命名并且对Action也有一定的要求: 必须是一个public方法 必须是实例方法 没有标志NonActionAttribute特性的(NoAction) 不能被重载 必须返回ActionResult类型 如: [csharp] view pl

ASP.NET MVC中加载WebForms用户控件(.ascx)

原文:ASP.NET MVC中加载WebForms用户控件(.ascx) 问题背景 博客园博客中的日历用的是ASP.NET WebForms的日历控件(System.Web.UI.WebControls.Calendar),它会为“上一月”.“下一月”的链接生成"__doPostBack()"的js调用,如下图: 目前发现它会带来两个问题: 1. 不支持IE10: 2. 某些电脑不允许执行__doPostBack. 问题提炼 前提: 我们想以最低的成本解决这个问题,也就是对当前代码尽可

ASP.NET MVC 中的路由

普通的路由 在以前版本的ASP.NET MVC里,这些规则会被定义在RouteConfig.cs文件,也有Routing Assistant扩展可以实现基于特性的路由,不过是收费滴,另外还有一个扩展:http://attributerouting.net/ ,也很不错:理论上ASP.NET MVC 中要实现任意的规则URL 应该是没有问题的. 比如配置的酒店详情页路由 //HOTEL DETAIL routes.MapRoute(name: "HotelDetail", url: &q