澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2019-07-07 04:48 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

威尼斯国际娱乐ACTION学习笔记

 

   <Speaker>            <Id>5</Id>            <FirstName>Jeremy</FirstName>            <LastName>Skinner</LastName>            <PictureUrl>/content/jeremy.jpg</PictureUrl>            <Bio>Jeremy Skinner is a C#/ASP.NET software developer in the UK.</Bio>          </Speaker> 

AjaxHelpersController里面加多代码如下

======本波博客来自茗洋芳竹全部,任哪个人未经同意不得转发:

   1:     public ActionResult Details(int id)

   2:          {

   3:              var speaker = _repository.FindSpeaker(id);

   4:              if (Request.IsAjaxRequest()) {

   5:                  return Json(speaker, JsonRequestBehavior.AllowGet);

   6:              }

   7:              return View(speaker);

   8:          }

   9:   

  10:          [ActionName("Details")]

  11:          public ActionResult Details_NonAjax(int id)

  12:          {

  13:              var speaker = _repository.FindSpeaker(id);

  14:              return View(speaker);

  15:          }

           到近期停止,大家都以看了在客户端如何写JavaScript代码发送数据到服务器和从服务器取回数据。大家今日来看一下行使ASP.NET MVC操作Ajax,大家运用Ajax Helpers.

 

再手动创设二个SpeakerRepository宾馆类,因为我们从没利用到数据库,我们抬高的数量都在内部存储器里面,真实的项目都以应用数据库,这里用于演示用的。在model的构造函数中,创制三个SpeakerRepository集结,伊始化数据,代码如下:

按下F5运作程序,大家能够查阅到通过Ajax帮手生成的html代码是上边这些样子的,我们看出了耳闻则诵的unobtrusive javascript风格的代码

Index 视图代码如下

这里代码独有一小点两样,第5行,每一次查看详细情形的时候,先清空原来的数码

为了让读者有越来越好的开卷经验,计划将每章的剧情分别写.让每篇的翻阅起来更舒服一点.

jQuery是个不小的话题,看懂下边几行代码,有利于对下边几个章节的精通.假设你想深入的看下jQuery,有本书叫《jQuery in Action,Second 艾德ition》是Bear Bibeault 和Yehuda Katz写的,可以参见一下

  <script type="text/javascript" src="@Url.Content("~/scripts/jquery.tmpl.js")">  </script> 

   1:  <br style="clear: both;" />

   2:  <script id="speakerTemplate" type="text/x-jquery-tmpl">

   3:      <img src="${PictureUrl}"

   4:          alt="Speaker image" class="speaker-pic" />

   5:      <p class="speaker-bio">

   6:          ${Bio}                             

   7:      </p>

   8:   

   9:   <br style="clear: both;" />

  10:  </script>

7.2     ASP.NET MVC Ajax Helpers

威尼斯国际娱乐 1

Details中的代码如下:

          

接下来我们使用一下ActionLink Ajax Helper,Controller我们就不要修改了,我们修改Index.cshtml视图.你可以对比一下,Html的ActionLink和Ajax的ActionLink:
第一个参数-要显示的文本,第二个参数-请求的控制器中的action名字,在Ajax的ActionLink中,有个AjaxOptions参数,这里代码的意思是,将请求成功后的数据,以替换(replace)的方式,把id为privacy的DOM元素中的html代码全部替换掉。
InsertionMode是个枚举,你可以自己试着用一下。

再正是本身天天能够写一些,同临时候每一日都得以上传一点,而不用一次性写完每章的博客,而二次性宣布

      前面几节都以对Ajax诉求再次回到HTML,即便用这种格局未有任何错误,不过你未曾简化HTML的回来,其实您能够再次回到放肆种格式的数额,例如,纯文本(plain text),XML,JSON。在底下一节我们将动用通过Ajax重临JSON的形式写程序

听他们说UnobtrusiveJavaScriptEnabled是true仍然false,ASP.NET MVC's Ajax helpers 将会转移二个匹配特定的适配器层的markup,那几个适配器层知道哪些接受那些标签,然后调用合适的JavaScript库去实际专门的学业。

按下F5运作项目,效果如下:

前边阅读第六波导航:

7.2.3    Ajax Options

如此那般加了决断后,跟上海体育场合中,被剥夺了javascript效果等同,就不演示了.

威尼斯国际娱乐 2

 

自家掌握的意思就是,unobtrusive本意是低调,也正是简轻松单的写法风格,在此处间接使用了data-ajax,data-ajax-method等自定义法则的html写法,然后引进三个接头这种法规外界的js文件,达成了代码分离的观念。否则的话,javascript与html标签混在一块,以往很难保证,也不显的高级级了。权且先这么敞亮啊

我们后台传过来二个list,视图中标志了Model,使得视图变成二个强类型视图,大家使用foreach循环,突显显示结果,每一种结果增添超链接,单击展现详细情况。

比如你从前有jQuery经验,这个洋洋都能看的懂。

威尼斯国际娱乐 3

 

ASP.NET MVC4 IN ACTION学习笔记-第六波[Ajax in ASP.NET MVC][1/3]

======本波博客来自茗洋芳竹全体,任哪个人未经同意不得转发:

 

 

作者们采纳暗许的ASP.NET MVC  Internet Application模版来写个例子.我们抬高二个简短的Controller(里面有七个action,Index action,PrivacyPolicy action)

         客户端模版 允许我们无需回到服务器大概经过JavaScript营造elements就足以立时在浏览器中马上生成markup(标签,网页中的成分),大家有三种客户端模版库可供大家选拔,然而大家利用jQuery-tmpl , 二个jQuery写的模版库,微软写的,已经进献到jQuery 项目,开源。

7.2.1    Ajax.ActionLink

         本波原版的书文含有一些JQuery基础的科目,在本波中笔者轻便了.所以固然你未曾JQuery基础,笔者认为你从未必要继续读书下去,提出您如故先驾驭一下JQuery相关的内容!由于你们的帮衬,作者计划把团结的博客做的有品质点.明日学了一点前端的文化,所以MVC4密密麻麻博客拖到了前些天才发表了,与原陈设晚了几天,首先道个歉.

   1:   public ActionResult Details(int id)

   2:          {

   3:              var speaker = _repository.FindSpeaker(id);

   4:              if (Request.IsAjaxRequest()) {

   5:                  return Json(speaker, JsonRequestBehavior.AllowGet);

   6:              }

   7:              return View(speaker);

   8:          }

NOTE:除了在web.config中设置UnobtrusiveJavaScriptEnabled为true外,你也得以在Global.asax文件的Application_Start中装置HtmlHelper.UnobtrusiveJavaScriptEnabled属性为true作为三个大局的设置,贰个代表的思路。

ASP.NET MVC4 IN ACTION学习笔记-第六波[Ajax in ASP.NET MVC][3/3]

威尼斯国际娱乐 4

威尼斯国际娱乐 5         原著:ASP.NET MVC 4 IN ACTION

<h2>Our Commitment to Privacy</h2>

 

Your privacy is important to us. To better protect your privacy we provide this notice explaining our online 

information practices and the choices you can make about the way your information is collected and used. 

To make this notice easy to find, we make it available on our homepage and at every point where personally 

identifiable information may be requested.

咱俩在Filters文件下树立

 

ASP.NET MVC AJAX Helpers(助手类)的使用

 

 


7.3.3 实现 这一个例子

威尼斯国际娱乐 6

 

在最上部双重援用 贰个jquery库


 

   1:   public ActionResult Details(int id)

   2:     {

   3:              var speaker = _repository.FindSpeaker(id);

   4:              return Json(speaker, JsonRequestBehavior.AllowGet);

   5:      }

 

CustomAjax/Index.cshtml代码如下

威尼斯国际娱乐,在我们的极度的例证中,大家不会重回敏感的数量,所以让JSON以GET恳求访谈纯属安全。

         老实说,那篇博客的剧情真的比比较多~

按下F5周转项目,测量检验演示如下:

笔者们先创造一个空的Speakers.js,用于写js代码

7.2.3    跟原先版本的ASP.NET MVC不一致的地点

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

代码如下:

data-*品质,举例data-ajax和data-ajax-update都是名牌的HTML5的品质(Attribute),它提供了选取额外的元数据(  metadata)来达成注脚(annotate)HTML element成分。固然您在那边您提供了Ajax哀告的有关音信,不过你在此间能够在客户端,写你协和就要访谈的元数据(metadata)

点击查阅jQuery ajax - serialize() 方法的上书

此地,大家选拔了Id从饭店里获取 Speaker的消息,通过Controller的JSON方法能够将二个指标体系化成JSON。这一个措施重返三个JSONResult,JSONResult是兑现ActionResult的,当发轫把一个对象系列化成一个JSON的时候,它会把结果写入 result stream(结果流)里面,就能够再次来到音信了。

与此同一时候自个儿天天能够写一些,同一时间每日都得以上传一点,而不要求叁遍性写完每章的博客,而三次性发布

 

在Index action中增添如下代码,重临全数的Speaker新闻,加多对应的Index view

设若设置被启用(true的时候),通过Ajax Helper生成的价签(markup)将会选择和上波小说7.1节职责的代码同样,就能够动用unobtrusive JavaScript这种轻易的方式落成Ajax效果。不过设置被剥夺(false)的时候,这一个Helpers就能够选择Microsoft Ajax库代替生成markup。推荐把它设置为true,大家会在7.2.4节中讲到要是设置为false的时候,会时有爆发什么样。

那边,使用preventDefault方法组织超链接的暗中同意行为.然后获得它的href地址,然后使用load方法,加载那个html片段,把那个部分放在id为privacy的DOM元素中,也等于<div id="privacy"></div>中,这里的load方法是实在的Ajax需要.

威尼斯国际娱乐 7

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

 

在那边用那个行为能够免止 JSON hijacking(威吓,是一种跨站点的本子的form)

在这几个本领下,Ajax Helper利用了JavaScript库进行了诚实的Ajax央浼。这个标签未有和其它叁个特定的库进行绑定,而是选取了多个适配器层,那么些适配器层知道哪些发生Ajax央浼。ASP.NET MVC有个能调解Microsoft Ajax和jQuery的适配器,正是以此适配器。它们三个哪个被使用取决于那一个应用程序的铺排。

在ASP.NET MVC中回到View时使用的是ViewResult,它一而再自ViewResultBase 同有时间它还会有个兄弟PartialViewResult

光展现一个FirstName是未有用的,接下去大家在页面中加多更加的多的竹签,来体现说话者的详细音信,还应该有照片。

 

7.1     Ajax with Jquery

       为了成功这几个,我们能够二个最简便易行的格局,修改SpeakersController中的 Details action

   1:  @{

   2:      ViewBag.Title = "Index";

   3:  }

   4:  @section head{

   5:      <script type="text/javascript"  src="@Url.Content("~/scripts/AjaxDemo.js")"></script>

   6:       <script type="text/javascript" src="@Url.Content("~/scripts/jquery.unobtrusive-ajax.js")"></script>

   7:      }

   8:   

   9:      @Html.ActionLink("Show the privacy policy",

  10:              "PrivacyPolicy", null, new { id = "privacyLink" })

  11:  <br />

  12:  @Ajax.ActionLink("Show the privacy policy2", 

  13:                             "PrivacyPolicy", new AjaxOptions {

  14:                               InsertionMode = InsertionMode.Replace, UpdateTargetId = "privacy" 

  15:                             })

  16:  <div id="privacy"></div>

那 Unobtrusive JavaScript到 底是什么吧?不难地以来,正是一种代码分离的牵挂,把作为层和呈现层分离开。

   1:  $(document).ready(function () {

   2:      $("ul.speakers a").click(function (e) {

   3:          e.preventDefault();

   4:          $("#indicator").show();

   5:          var url = $(this).attr('href');

   6:          $.getJSON(url, null, function (speaker) {

   7:              $("#indicator").hide();

   8:              alert(speaker.FirstName);

   9:          });

  10:      });

  11:  });

ASP.NET MVC4 IN ACTION学习笔记-第六波[Ajax in ASP.NET MVC][3/3]

用JSON格局响应(Response),客户端模版template的利用

 

就算如此Ajax helpers 在MVC1就已经是MVC中的一片段了,今后jQuery是私下认可的。在原先版本的框架,这几个helpers都是使用Microsoft Ajax Library,何况未有利用unobtrusive的艺术生成JavaScript。我们得以由此改造web.config节点下的AppSettings下的UnobtrusiveJavaScriptEnabled属性改为false,就能够复苏原先版本框架的表现了

威尼斯国际娱乐 8

比方,以往是true,我们把UnobtrusiveJavaScriptEnabled改为false后运营项目:

近些日子大家运用Ajax.ActionLink后改动的代码如下:

威尼斯国际娱乐 9

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

若是你正在把你从前ASP.NET MVC版本的网站晋级,你必要保留那个作为,为了提升包容性,须求把UnobtrusiveJavaScriptEnabled设为false。但是在别的的地方下,把UnobtrusiveJavaScriptEnabled设为true是最佳的,因为那样,HTML生成的时候更加直观,可读性强,并且微软很讲究ajax的这种Unobtrusive写法,何况在更新和斟酌。

         老实说,那篇博客的剧情真的非常多~

为了援引jQuery-tmpl,我们可以从 下载,然后把她们放手我们项目标scripts文件夹里面。也许大家能够间接援用来自   Microsoft’s  CDN  的 http:// ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js,一旦引用好了,咱们就足以在view中添加模版了

 

鉴于默许的MVC中尚无引进jQuery文件,大家在母版页中引进

 

威尼斯国际娱乐 10

  $('#commentForm').submit(function (event) {

        event.preventDefault();

        var data = $(this).serialize();

        var url = $(this).attr('action');

 

        $.post(url, data, function (response) {   //发送异步Ajax请求,就在这里

            $('#comments').append(response);

        });

    });

 

 

阻止submit开关提交的暗中认可行为,然后serialize方法,连串化表单中的数据,然后拿走表单要付出的地点,即表单的action属性,然后post格局发送一个Ajax央浼,央求成功后,再次来到的多寡也就在response这一个参数中,我们最终把response的从头到尾的经过扩充到列表中去.

   1:  using System;

   2:  using System.Collections.Generic;

   3:  using System.Linq;

   4:  using System.Web;

   5:   

   6:  namespace AjaxExamples.Models

   7:  {

   8:      public class SpeakerRepository

   9:      {

  10:          private static readonly List<Speaker> _speakers = new List<Speaker>();

  11:   

  12:          static SpeakerRepository()

  13:          {

  14:              _speakers = new List<Speaker> {

  15:   

  16:                 new Speaker

  17:                  {

  18:                      Id = 1,

  19:                      FirstName = "Jimmy",

  20:                      LastName = "Bogard",

  21:                      PictureUrl = "/content/jimmy.png",

  22:                      Bio = "Jimmy is a Principal Consultant at Headspring Systems in Austin, TX.",

  23:                  },

  24:                  new Speaker

  25:                  {

  26:                      Id = 2,

  27:                      FirstName = "Jeffrey",

  28:                      LastName = "Palermo",

  29:                      PictureUrl = "/content/jeffrey.jpg",

  30:                      Bio = "Jeffrey Palermo is a Microsoft MVP and Chief Technology Officer of Headspring Systems in Austin, TX.",

  31:                  },

  32:                  new Speaker

  33:                  {

  34:                      Id = 3,

  35:                      FirstName = "Eric",

  36:                      LastName = "Hexter",

  37:                      PictureUrl = "/content/eric.jpg",

  38:                      Bio = "Eric Hexter is an Enterprise Architect at Dell in Austin, TX.",

  39:                  },

  40:                  new Speaker

  41:                  {

  42:                     Id = 4,

  43:                     FirstName = "Matt",

  44:                     LastName = "Hinze",

  45:                     PictureUrl = "/content/matt.jpg",

  46:                     Bio = "Matt Hinze is a Principal Consultant at Headspring Systems in Austin, TX.",

  47:                  },

  48:   

  49:                 new Speaker

  50:                  {

  51:                      Id = 5,

  52:                      FirstName = "Jeremy",

  53:                      LastName = "Skinner",

  54:                      PictureUrl = "/content/jeremy.jpg",

  55:                      Bio = "Jeremy Skinner is a C#/ASP.NET software developer in the UK.",

  56:                  }

  57:              };

  58:   

  59:   

  60:          }

  61:   

  62:   

  63:   

  64:      }

  65:  }

(这里阿拉伯语的没什么,不要怪笔者了,因为本身感到翻译过来也不太好掌握,还比不上写demo明白出来)

修改AjaxHelperController中的PrivacyPolicy action

7.3 Ajax再次回到JSON 和 客户端模版的应用

         本波原来的作品含有一点JQuery基础的科目,在本波中自己回顾了.所以假设您从未JQuery基础,作者觉着你不需求继续阅读下去,提议您要么先领悟一下JQuery相关的从头到尾的经过!由于你们的支撑,小编策画把温馨的博客做的有品质点.今天学了好几前端的学问,所以MVC4体系博客拖到了明天才发表了,与原布署晚了几天,首先道个歉.

威尼斯国际娱乐 11 投砾引珠

         我是茗洋芳竹,首先申明,作者不是三个翻译职员,笔者是个90后程序猿.

累加代码后代码如下:

 

   1:  @model AjaxExamples.Models.Speaker

   2:   

   3:  @section head {

   4:      <link rel="Stylesheet" type="text/css" href="@Url.Content("~/content/speakers.css")" />

   5:  }

   6:  <h2>Speaker Details: @Model.FullName</h2>

   7:   

   8:  <p class="speaker">

   9:      <img src="@Model.PictureUrl"                          

  10:                    alt="@Model.FullName" />

  11:      @Model.Bio

  12:  </p>

  13:   

  14:  <br style="clear: both" />

  15:  @Html.ActionLink("Back to speakers", "index")

当页面加载的时候,在jquery-unobtrusive.ajax的剧本将会找寻含有data-ajax属性的保有链接,找到后绑定单击事件。一样地,如若浏览器禁止使用了Javascript,这么些link将作为叁个健康的link的功用,回到了non-Ajax(无Ajax)行为。

假设小编有二个供给,输入用户名,然后回来相关音信,在此之前的做法大概会是用json格式来回到用户的相关音信,然后到页面去渲染相关的HTML,假使发生的相干HTML比相当的大的话,笔者要么提出你沿用从前的方案(再次来到json),因为传输的数量少,响应快一些。反之,PartialViewResult 则是重返部分HTML 的不错选用。

         读者约定:

翻阅第六波导航:

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:威尼斯国际娱乐ACTION学习笔记

关键词: 澳门威利斯人