博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ASP.NET MVC4 IN ACTION学习笔记-第六波[Ajax in ASP.NET MVC][2/3]
阅读量:6923 次
发布时间:2019-06-27

本文共 5681 字,大约阅读时间需要 18 分钟。

阅读第六波导航:

image         原著:ASP.NET MVC 4 IN ACTION

         大家好!

         我是茗洋芳竹,首先声明,我不是一个翻译人员,我是个90后程序员.

         本波原文含有一些JQuery基础的教程,在本波中我省略了.所以如果你没有JQuery基础,我认为你没有必要继续阅读下去,建议你还是先了解一下JQuery相关的内容!由于你们的支持,我打算把自己的博客做的有质量点.前几天学了一点前端的知识,所以MVC4系列博客拖到了今天才发布了,与原计划晚了几天,首先道个歉.

         老实说,这篇博客的内容真的很多~

 

7.2     ASP.NET MVC Ajax Helpers

           到目前为止,我们都是看了在客户端如何写JavaScript代码发送数据到服务器和从服务器取回数据。我们现在来看一下使用ASP.NET MVC操作Ajax,我们使用Ajax Helpers.

           一开始,我们会看几个Ajax方法,还有它们和jQuery或者JavaScript库关联的。通过它们也可以实现我们手工写jQuery代码的部分实现的效果。

           这些使用到的helpers,是AjaxHelper类的拓展方法,这个类可以通过Ajax发送和获得数据后,自动地用来生成HTML标签,这些Helpers如下:

(这里英文的不要紧,不要怪我了,因为我觉得翻译过来也不太好理解,还不如写demo理解出来)

在这些技术下,Ajax Helper利用了JavaScript库进行了真实的Ajax请求。这些标签没有和任何一个特定的库进行绑定,而是利用了一个适配器层,这个适配器层知道如何发出Ajax请求。ASP.NET MVC有个能调节Microsoft Ajax和jQuery的适配器,就是这个适配器。它们两个哪个被使用取决于这个应用程序的配置。

当你创建一个新的ASP.NETMVC项目的时候,在最外层的web.config中有下面一行代码

如果设置被启用(true的时候),通过Ajax Helper生成的标签(markup)将会使用和上波文章7.1节位置的代码一样,就可以使用unobtrusive JavaScript这种简单的方法实现Ajax效果。但是设置被禁用(false)的时候,这些Helpers就会使用Microsoft Ajax库替代生成markup。推荐把它设置为true,我们会在7.2.4节中讲到如果设置为false的时候,会发生什么。

NOTE:除了在web.config中设置UnobtrusiveJavaScriptEnabled为true外,你也可以在Global.asax文件的Application_Start中设置HtmlHelper.UnobtrusiveJavaScriptEnabled属性为true作为一个全局的设置,一个替代的思路。

 

 

根据UnobtrusiveJavaScriptEnabled是true还是false,ASP.NET MVC's Ajax helpers 将会生成一个兼容特定的适配器层的markup,这个适配器层知道如何接受这些标签,然后调用合适的JavaScript库去实际工作。

 

 

下面是ASP.NET MVC Ajax helpers和

JavaScript库的关系图

 

 

 

 

 

 

 

 

 

 

7.2.1    Ajax.ActionLink

         接下来我们使用一下ActionLink Ajax Helper,修改Index.cshtml文件代码如下:

          

接下来我们使用一下ActionLink Ajax Helper,Controller我们就不要修改了,我们修改Index.cshtml视图.你可以对比一下,Html的ActionLink和Ajax的ActionLink:
第一个参数-要显示的文本,第二个参数-请求的控制器中的action名字,在Ajax的ActionLink中,有个AjaxOptions参数,这里代码的意思是,将请求成功后的数据,以替换(replace)的方式,把id为privacy的DOM元素中的html代码全部替换掉。
InsertionMode是个枚举,你可以自己试着用一下。
1:  @{
2:      ViewBag.Title = "Index";
3:  }
4:  @section head{
5:      
6:       
7:      }
8:   
9:      @Html.ActionLink("Show the privacy policy",
10:              "PrivacyPolicy", null, new { id = "privacyLink" })
11:  
12:  @Ajax.ActionLink("Show the privacy policy2",
13:                             "PrivacyPolicy", new AjaxOptions {
14:                               InsertionMode = InsertionMode.Replace, UpdateTargetId = "privacy"
15:                             })
16:  

按下F5运行程序,我们可以查看到通过Ajax助手生成的html代码是下面这个样子的,我们看到了熟悉的unobtrusive javascript风格的代码

当页面加载的时候,在jquery-unobtrusive.ajax的脚本将会查找含有data-ajax属性的所有链接,找到后绑定单击事件。同样地,如果浏览器禁用了Javascript,这个link将作为一个正常的link的作用,回到了non-Ajax(无Ajax)行为。

左侧拥抱 HTML5 Data Attributes

7.2.2    Ajax.BeginForm

 

 

   同样地你也可以使用 ASP.NET’s  Ajax.BeginForm helper 也可以实现异步提交表单数据。

  打开这个页面,我们继续写代码

添加代码后代码如下:

@model IEnumerable
 
@{
ViewBag.Title = "Index";
}
@section head{
}
 
 

Comments

 
    @foreach (var comment in Model)
    {
  • @comment
  • }
     
     
    @using (Ajax.BeginForm("AddComment", new AjaxOptions { UpdateTargetId = "comments", InsertionMode = InsertionMode.InsertAfter }))
    {
    @Html.TextArea("Comment", new { rows = 5, cols = 50 })
    }
     
     
    @*@Html.ActionLink("Show the privacy policy",
    "PrivacyPolicy", null, new { id = "privacyLink" })*@
    @Ajax.ActionLink("Show the privacy policy2",
    "PrivacyPolicy", new AjaxOptions
    {
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "privacy"
    })
     
     

    跟我们在第二章看到的Html.BeginForm一样,这个Ajax.BeginForm,也用using包裹,BeginForm创建一个表单。用}表示结束,等同于<form/>

    我们重载了BeginForm的两个参数-第一个控制器中的action名字,controller不写,就代表当前的view所对应的controller。AjaxOptions对象跟Ajax.ActionLink的一样的

    AjaxHelpersController里面添加代码如下

    static readonly List
    _comments = new List
    ();
     
    public ActionResult Index()
    {
    return View(_comments);
    }
     
    [HttpPost]
    public ActionResult AddComment(string comment)
    {
    _comments.Add(comment);
     
    if (Request.IsAjaxRequest())
    {
    ViewBag.Comment = comment;
    return PartialView();
    }
     
    return RedirectToAction("Index");
    }
     
    public ActionResult PrivacyPolicy()
    {
    if (Request.IsAjaxRequest())
    {
    return PartialView();
    }
     
    return View();
    }

    然后同样的,我们复制一下CustomAjax文件夹的下的AddComment.cshtml到AjaxHelper文件夹下。

    当运行这个页面的时候,原理都一样的,虽然表单被额外的 data-ajax属性修饰了,跟ActionLink很像,下面是截图:

    效果图:

    这样,关于表单的 渐进增强模式(progressive enhancement)已经完成了,以前我们完成的HTML.ActionLink变成了Ajax.ActionLink,现在是表单过渡了。表单有Html.BeginForm变成了Ajax.BeginForm,通过使用了jquery.unobtrusive-ajax 脚本,表单就会以Ajax形式提交了,但是如果客户端禁用了JavaScript,这个表单就会以普通的表单发送post请求。

    7.2.3    Ajax Options

    在几节里面,你看到了ActionLink和BeginForm 的Ajax helper都有AJaxOptions对象,这个对象表明了Ajax的结果怎么被处理。它定义的属性如下:

    如果你以前有jQuery经验,这些好多都能看的懂。

    除了LoadingElementDuration,所有的这些选项在以前的ASP.NET MVC2中都有。但是把这些option放到页面的标签里不一样了。你看到了,在HTML elements里,这些选项(options)都以data-*形式生成,然而在MVC2中,他们是被插入到页面里面的,以一种更unobtrusive的作法完成。

     

    7.2.3    跟以前版本的ASP.NET MVC不同的地方

    虽然Ajax helpers 在MVC1就已经是MVC中的一部分了,现在jQuery是默认的。在以前版本的框架,这些helpers都是使用Microsoft Ajax Library,而且没有采用unobtrusive的方式生成JavaScript。我们可以通过修改web.config节点下的AppSettings下的UnobtrusiveJavaScriptEnabled属性改为false,就可以恢复以前版本框架的行为了

    比如,现在是true,我们把UnobtrusiveJavaScriptEnabled改为false后运行项目:

    现在我们使用Ajax.ActionLink后生成的代码如下:

    把UnobtrusiveJavaScriptEnabled设为false后,没有再采用data-ajax属性了,所有的元数据都被OnClick事件替代了,为了让程序正确运行,所以框架要求你必须引用MicrosoftAjax.js 和 MicrosoftMvcAjax.js ,跟unobtrusive风格的代码比,可读性不强,不直观,它也破坏了 Unobtrusive Javascript原则

    如果你正在把你以前ASP.NET MVC版本的网站升级,你需要保留这些行为,为了提高兼容性,需要把UnobtrusiveJavaScriptEnabled设为false。但是在其他的情形下,把UnobtrusiveJavaScriptEnabled设为true是最好的,因为这样,HTML生成的时候更直观,可读性强,而且微软很看重ajax的这种Unobtrusive写法,并且在更新和研究。

     

    左侧拥抱 博主留言

    为了让读者有更好的阅读体验,打算将每章的内容分开写.让每篇的阅读起来更舒服一点.

    同时我每天可以写一点,同时每天都可以上传一点,而不必一次性写完每章的博客,而一次性发布

    内容过多,那么每次读者学习,查看的时候,下载的也就越多了.考虑到这个,所以本篇博客写到这里..

    晚安,大家!由于源码文件过大,先不发布了,等本章博客全部完成后,一次性发布。

    转载于:https://www.cnblogs.com/AaronYang/archive/2013/05/10/3063778.html

    你可能感兴趣的文章
    互联网创业的准备——数据库:硬盘iops、mysql
    查看>>
    深入了解硬盘
    查看>>
    通过虚拟机VMware来练习安装ESXi
    查看>>
    Mybatis深度整合Mysql的Json字段
    查看>>
    程序清单3.2_print1.c_程序_《C Primer Plus》P37
    查看>>
    文档注释
    查看>>
    自然语言处理之:搭建基于HanLP的开发环境(转)
    查看>>
    linux 系统 UDP 丢包
    查看>>
    AECC 2015绿色版下载|adobe after effects cc 2015绿色版下载 v1
    查看>>
    Ansible之playbook(剧本)介绍与案例分析
    查看>>
    IPFS矿机你需要看懂的五大元素
    查看>>
    截图留存
    查看>>
    web复习day03:request
    查看>>
    LVS负载均衡
    查看>>
    RabbitMQ使用
    查看>>
    电子签名助力电子处方合规高效,实现医院管理全程电子化
    查看>>
    contentType
    查看>>
    Python3网络爬虫(十一):爬虫黑科技之让你的爬虫程序更像人类用户的行为(代理IP池等)...
    查看>>
    好程序员web前端分享CSS元素类型
    查看>>
    成都大数据语言培训:改变人们的生活的大数据趋势
    查看>>