zoukankan      html  css  js  c++  java
  • 方法代码ASP.NET MVC如何使用Ajax的辅助方法

    查了好多资料,发明还是不全,干脆自己整理吧,少至保证在我的做法正确的,以免误导读者,也是给自己做个记录吧!

        媒介:面前我们已简略的分析过了MVC如何Jquery,因为我们如果应用Ajax的话必须要懂得Jquery,这篇博客我们将大致懂得一下ASP.NET MVC如何应用Ajax的帮助方法,此博客是我的读书条记,如果那里写的好不,还请各位朋友提出来,我们同共学习。
    1.准备作工
      (1)在MVC刚开始学习的时候,我们就须要分析ASP.NET MVC框架中的HTML的帮助方法,但是这类文章在现已很多了,而且个人感觉很简略,所以没有写条记,我在这里就不分析了。
      (2)ASP.NET MVC框架中的HTML帮助方法,我们可以应用HTML帮助方法创立表单和指向控制器作操的链接,在ASP.NET MVC框架中还含包一组Ajax帮助方法,它们也可以用来创立表单和指向控制器作操的接连,但不同的是它们是异步停止的,当应用这些帮助方法时,不必编写任何本脚代码来实现序程的异步性。
      (3)在台后,这些Ajax帮助方法赖依非侵入式MVC的Jquery展扩,如果应用这些帮助方法,就须要引入本脚件文jquery.unobtrusive-ajax.js,至于怎么用引我在上篇博客已说过了,这里就不贴出代码了。

        2.Ajax的ActionLink方法
      (1)在Razor视图中,AJAX帮助方法可以通过Ajax性属拜访,和HTML帮助方法似类,Ajax性属上的大部分Ajax帮助方法都是展扩方法(除了AjaxHelper类型以外)。
    (2)Ajax性属的ActionLink方法可以创立一个拥有异步行为的锚签标。在现我们可以在微软布发的MVC3.0的MusicStore目项面上停止修改,谁如果没有这个目项的话可以加地下的群,然后再群同享面里我同享了这个目项。在视图”Views/Home/Index.cshtml”中添加面下的代码。

     <div id="dailydeal">
      @Ajax.ActionLink("点击我", "DailyDeal", new AjaxOptions
      {
    UpdateTargetId="dailydeal",
    InsertionMode = InsertionMode.Replace,
      HttpMethod="Get"
      })
    </div>

        
    (3)ActionLink方法的第一个参数指定了接连文本,第二个参数是要异步用调的作操的名称,似类于同名的HTML帮助方法。对于HTML帮助方法和Ajax帮助方法,明显不同的是AjaxOptions参数,该参数指定了发送请乞降理处服务器回返结果的方法,参数中还包含用来理处错误,示显载加素元,示显确认对话框等的选项。为了到得服务器的响应,须要在控制器HomeController上添加一个DailyDeal作操,代码如下:

        
         public ActionResult DailyDeal()
    {
      var album = GetDailyDeal();
      return PartialView("_DailyDeal", album);
      }
      private Album GetDailyDeal()
      {
      return storeDB.Albums.OrderBy(a => a.Price).First();
      }

        (4)Ajax作操接连的目标作操的回返值是纯文本或HTML。面下的Razor代码就在目项的Views/Home件文夹下的_DailyDeal.cshtml件文中。

      注解:Ajax.ActionLink成生的内容够能得获服务器的响应,并可以直接将新内容移植到页面中,这时为什么呢?面下我们就分析一下异步作操接连的作工理原。
    3.HTML5性特
      (1)如果我们查看ActionLink方法染渲的标记,我们会看到如下代码:
    <a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-update="#dailydeal" href="/Home/DailyDeal">点击我</a>
    (2)非侵入式JavaScript的明显特点就是在HTML中不含包任何JavaScript代码,也就是说在HTML中看不到本脚代码,如果仔细看的话就会发明ActionLink中指定的有所设置被码编成了HTML素元的性特,并且这些码编的大多数性特都有data-缀前,平日称之为data-性特。
      (3)HTML 5标准为私有应用序程保留了data-性特,换句话说,web浏览器不会实验释解data-性特的内容,因此可以心放的把自己的数据交给它,这些数据不会影响页面的示显或者染渲。
      (4)向应用序程中添加jquery.unobtrusive-ajax件文的的目是查找特定的data-性特,然后纵操素元使其表现出不同的行为。
      (5)有所的ASP.NET MVC AJAX性特都应用data-性特。
    4.Ajax表单
      (1)面下我们实现另外一种情况,要在音乐店商的页首为用户添加一个查找艺术家的功能,因为须要用户的输入,所以必须在页面面上放一个form签标,但这不是一个通普的签标,而是一个异步表单。面下这段代码我们看一下:

        每日一道理
    喜欢海,不管湛蓝或是光灿,不管平静或是波涛汹涌,那起伏荡漾的,那丝丝的波动;喜欢听海的声音,不管是浪击礁石,或是浪涛翻滚,那轻柔的,那澎湃的;喜欢看海,不管心情是舒畅的或是沉闷的,不管天气是晴朗的或是阴沉的,那舒心的,那松弛的……

      @using (Ajax.BeginForm("ArtistSearch", "Home", new AjaxOptions
      {
      InsertionMode = InsertionMode.Replace,
      HttpMethod = "GET",
      OnFailure = "searchFailed",
      LoadingElementId = "ajax-loader",
      UpdateTargetId = "searchresults",
      }))
      {
      <input type="text" name="q" />
      <input type="submit" value="Search" />
      <img id="ajax-loader" src="@Url.Content("~/Content/Images/ajax-loader.gif")" style="display:none" />
      }

        (2)再要染渲的表单中,当用户单击提交按钮时,浏览器就会向控制器HomeController的ArtistSearch作操发送异步GET请求,意注面上的代码已指定了LoadingElementId作为其中的一个选项,当执行异步请求时,客户端框架会动自的示显这个素元,平日情况下,在这个素元外部会现出一个拥有动画效果的调微框,来告诉用户台后正在停止一些理处,此外,还有一个OnFailure选项,这些选项包含很多参数,可以设置它们以获捕来自Ajax请求的各种客户端事件,如OnBegin,OnComplete,OnSuccess和OnFailure等,可以给这些参数予赋一个JavaScript数函的名称,当事件触发时,用调该数函,面上的代码就为OnFailure指定了一个JavaScript数函,代码如下:
      <script type="text/javascript">
    function searchFailed() {
    $("#searchresults").html("对不起,查询有问题");
    }
    </script>
    (3)如果服务器代码回返一个错误,就意味着AJAX帮助方法都执行失败了,此时,你可能想获捕OnFailure事件,如果用户单击”search”按钮而页面没有反应,我们可能就会觉得迷惑,跟面前代码所做的一样,可以示显一个错误提示信息,少至让他们道知我们已努力了。
      (4)帮助方法BeginForm的输出似类于帮助方法ActionLink,最后,当用户单击提交按钮提交表单的时候,服务器会接受到一个Ajax请求,并可能以意任格式的内容作出响应,当客户端收到来自服务器端的响应时,非侵入式本脚就会将响应的内容放入Dom中。
      (5)对于这个例子,控制器作操须要查询数据库并且染渲一个分部视图,此外,作操还要回返纯文本,但同时又想把艺术家放到一个列表中,因此,在HomeControler中写入如下的方法代码:

        
      public ActionResult ArtistSearch(string q)
      {
      var artists = GetArtists(q);
      return PartialView(artists);
      }
     
      private List<Artist> GetArtists(string q)
      {
      return storeDB.Artists.Where(a => a.Name.Contains(q)).ToList();
      }

        制复代码

        (6)该分部视图用利模型构建列表,它位于目项的Views/Home件文夹下的视图ArtistSearch.cshtml。

        
      @model IEnumerable<MvcMusicStore.Models.Artist>
      @{
      Layout = null;
      }
      <!DOCTYPE html>
      <html>
      <head>
      <title>ArtistSearch</title>
      </head>
      <body>
      <div id="searchresults">
      <ul>
      @foreach (var item in Model)
      {
      <li>@item.Name</li>
      }
    </ul>
      </div>
      </body>
      </html>

        5.web.config件文里的AJAX设置
      (1)默许情况下,非侵入式JavaScript和客户端验证在ASP.NET MVC应用序程中是用启的,然后,我们可以通过web.config件文中的设置变改这些行为,如果打开新应用序程根目录下的web.config件文,就会看到面下的appSettings配置节点:
      <appSettings>
    <add key="webpages:Version" value="1.0.0.0"/>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
    </appSettings>
    (2)如果想在个整应用序程中禁用这两个性特中的意任性特,只须要将响应性特的value值修改成false便可,另外,还可以逐视图是的控制这些设置,HTML帮助方法EnableClientValidation和EnableUnobtrusiveJavaScript在一个详细视图中重写了这些配置设置。
    (3)由于现有的自定义本脚都是赖依与Microsoft AJAX库而不是Jquery库,因此禁用这些性特的要主原因是维护应用序程的向后兼容性。

    文章结束给大家分享下程序员的一些笑话语录: 与女友分手两月有余,精神萎靡,面带菜色。家人介绍一女孩,昨日与其相亲。女孩果然漂亮,一向吝啬的我决定破例请她吃晚饭。
    选了一个蛮贵的西餐厅,点了比较贵的菜。女孩眉开眼笑,与我谈得很投机。聊着聊着,她说:“我给你讲个笑话吧。”“ok”
      “一只螳螂要给一只雌蝴蝶介绍对象,见面时发现对方是只雄蜘蛛。见面后螳螂问蝴蝶‘如何?’,‘他长的太难看了’,‘别看人家长的丑,人家还有网站呢’。”
      “呵呵………”我笑。忽然她问:“你有网站吗?”  

  • 相关阅读:
    HDOJ 2095 find your present (2)
    HDOJ 2186 悼念512汶川大地震遇难同胞——一定要记住我爱你
    九度 1337 寻找最长合法括号序列
    九度 1357 疯狂地Jobdu序列
    HDOJ 1280 前m大的数
    九度 1343 城际公路网
    九度 1347 孤岛连通工程
    HDOJ 2151 Worm
    九度 1342 寻找最长合法括号序列II
    九度 1346 会员积分排序
  • 原文地址:https://www.cnblogs.com/jiangu66/p/3067529.html
Copyright © 2011-2022 走看看