澳门正规赌博十大网站-澳门游戏网站
做最好的网站

小牛之路,ACTION学习笔记

3、假如无需用 Unobtrusive JavaScript 呢?

如果无需用的话分部方的形式关闭就能够。

但是要注意一点!那时候,假若你必要用 Ajax 恐怕客户端验证,务必援引MVC3在先版本中的多少个javascript文件:MicrosoftAjax, MicrosoftMvcAjax.js, MicrosoftMvcValidation.js

不然就不能够促成Ajax 和客户端验证了。

 

         本波原版的书文含有一点点JQuery基础的教程,在本波中自己大约了.所以如若你从未JQuery基础,笔者以为你没有须求继续读书下去,建议你仍然先领会一下JQuery相关的从头到尾的经过!由于你们的扶助,笔者筹算把自个儿的博客做的有品质点.前些天学了几许前端的学识,所以MVC4多级博客拖到了今天才宣布了,与原布署晚了几天,首先道个歉.

Unobtrusive Ajax 咋做事

小牛之路,ACTION学习笔记。Unobtrusive Ajax 是怎样专门的工作的吗?

小牛之路,ACTION学习笔记。当调用 Ajax.BeginForm 方法后,通过 AjaxOptions 对象设置的习性将会被转载成 form 成分的特性(标识),这个属性以 data-ajax 起头,如本示例生成的 form 成分:

<form action="/People/GetPeopleData" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#tableBody" id="form0" method="post">  ...

当 GetPeople.cshtml 视图加载成功并展现 Html 页面时,jquery.unobtrusive-ajax.js 库搜索具有 data-ajax 属性值为true的因素,然后依照其余以 data-ajax 开首的属性值,jQuery 库中的函数将明了怎样去实行 Ajax 须求。

映射AjaxOptions属性

下表列出了 AjaxOptions 和 HTML 5 的炫人眼目关系

AjaxOptions HTML attribute
Confirm data-ajax-confirm
HttpMethod data-ajax-method
InsertionMode data-ajax-mode *
LoadingElementDuration data-ajax-loading-duration **
LoadingElementId data-ajax-loading
OnBegin data-ajax-begin
OnComplete data-ajax-complete
OnFailure data-ajax-failure
OnSuccess data-ajax-success
UpdateTargetId data-ajax-update
Url data-ajax-url

除开那一个属性外,还恐怕有三个额外的 data-ajax="true" 属性,代表那是二个 Ajax 方法。

* = data-ajax-mode 唯有在装置 UpdateTargetId 被设置后才使得。

**小牛之路,ACTION学习笔记。 =  data-ajax-loading-duration 唯有在 LoadingElementId 被安装后才使得。

 

  展开这些页面,我们延续写代码

Ajax 回调函数

AjaxOptions 类中的 OnBegin、OnComplete、OnFailure 和 OnSuccess 属性允许大家在 ajax 央求周期的某部状态点定义回调函数。来看具体的用法。

在 GetPeople.cshtml 文件中进入如下4个回调函数:

<script type="text/javascript">       function OnBegin() {           alert("This is the OnBegin Callback");       }      function OnSuccess(data) {           alert("This is the OnSuccessCallback: "   data);       }       function OnFailure(request, error) {           alert("This is the OnFailure Callback:"   error);       }       function OnComplete(request, status) {           alert("This is the OnComplete Callback: "   status);       }   </script>

进而设置 AjaxOptions 对象的4个事件性质:

...
@{      ViewBag.Title = "GetPeople";      AjaxOptions ajaxOpts = new AjaxOptions {          UpdateTargetId = "tableBody",          Url = Url.Action("GetPeopleData"),          OnBegin = "OnBegin",           OnFailure = "OnFailure",           OnSuccess = "OnSuccess",           OnComplete = "OnComplete"      };  }
...

运作程序,弹出七个音信框如下:

图片 1 图片 2 图片 3

那七个事件性质中最常用的正是 OnSuccess 和 OnFailure 三个天性了,如小编辈会时不时在 OnSuccess 回调函数中对回到的 Json 数据实行拍卖。


实在自己个人更赞成于一般性的 Ajax 使用情势。Ajax.BeginForm() 和 Ajax.ActionLink() 用的少,习于旧贯用 Html.BeginForm() 或 Html.ActionLink() 和手写 jQuery ajax 代码来顶替。

参考:《Pro ASP.NET MVC 4 4th Edition》


Unobtrusive Ajax in ASP.NET MVC 3

原文:《Unobtrusive Ajax in ASP.NET MVC 3》

 

若是设置被启用(true的时候),通过Ajax Helper生成的竹签(markup)将会使用和上波小说7.1节地方的代码同样,就足以行使unobtrusive JavaScript这种简易的法子达成Ajax效果。可是设置被剥夺(false)的时候,这么些Helpers就能够动用Microsoft Ajax库替代生成markup。推荐把它设置为true,大家会在7.2.4节中讲到假如设置为false的时候,会爆发哪些。

Ajax 加载数据的还要给用户反映

小牛之路,ACTION学习笔记。当加载数据必要花较长期,为了制止假死状态,应当给用户贰个申报消息,如“正在加载...”字样。在 MVC 的 Unobtrusive Ajax 中通过 AjaxOptions 的 LoadingElementId 和 LoadingElementDuration 三个属性可轻巧做到那点。修改 GetPeople.cshtml 如下:

@using MvcApplication1.Models  @model string    @{      ViewBag.Title = "GetPeople";      AjaxOptions ajaxOpts = new AjaxOptions {          UpdateTargetId = "tableBody",          Url = Url.Action("GetPeopleData"),          LoadingElementId = "loading",          LoadingElementDuration = 1000,      };  }  <h2>Get People</h2>  <div id="loading" class="load" style="display:none">      <p>Loading Data...</p>  </div>  ...

不表达,运营程序看效果:

图片 4 

小牛之路,ACTION学习笔记。历史观的变化格局

一下是 MVC 数据证实框架下对于 Model 的描述(那部分不改变)

public class ValidationModel {
    [Required]
    public string FirstName { get; set; }

    [Required, StringLength(60)]
    public string LastName { get; set; }

    [Range(1, 130)]
    public int Age { get; set; }
}

当张开客户端验证后:(具体开启方法和 Unobtrusive Javascript 完全同样,请看第二有的)

<label for="FirstName">FirstName</label>
<input  id="FirstName" name="FirstName" type="text" value="" />


<label for="LastName">LastName</label>
<input  id="LastName" name="LastName" type="text" value="" />


<label for="Age">Age</label>
<input  id="Age" name="Age" type="text" value="" />


<script type="text/javascript"> 
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"FirstName","ReplaceValidationMessageContents":true,"ValidationMessageId":"FirstName_validationMessage","ValidationRules":[{"ErrorMessage":"The FirstName field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"LastName","ReplaceValidationMessageContents":true,"ValidationMessageId":"LastName_validationMessage","ValidationRules":[{"ErrorMessage":"The LastName field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field LastName must be a string with a maximum length of 60.","ValidationParameters":{"max":60},"ValidationType":"length"}]},{"FieldName":"Age","ReplaceValidationMessageContents":true,"ValidationMessageId":"Age_validationMessage","ValidationRules":[{"ErrorMessage":"The field Age must be between 1 and 130.","ValidationParameters":{"min":1,"max":130},"ValidationType":"range"},{"ErrorMessage":"The Age field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Age must be a number.","ValidationParameters":{},"ValidationType":"number"}]}],"FormId":"form0","ReplaceValidationSummary":true,"ValidationSummaryId":"validationSummary"});
//]]>
</script>

当 unobtrusive JavaScript 关闭后,你会看出上述代码(和 MVC 2 中同样)。

您会意识在末端多了一段 Javascript 代码,而这里,就是对表单验证的主导。

 

依据UnobtrusiveJavaScriptEnabled是true照旧false,ASP.NET MVC's Ajax helpers 将会生成一个同盟特定的适配器层的markup,这几个适配器层知道哪些接受那几个标签,然后调用合适的JavaScript库去实际职业。

弹出鲜明对话框

应用MVC中的 Unobtrusive Ajax 弹出确定对话框也很便利,设置一下 AjaxOptions.Confirm 属性的值却可,如下:

...  @{      ViewBag.Title = "GetPeople";      AjaxOptions ajaxOpts = new AjaxOptions {          UpdateTargetId = "tableBody",          Url = Url.Action("GetPeopleData"),          LoadingElementId = "loading",          LoadingElementDuration = 1000,          Confirm = "Do you wish to request new data?"       };  }  ...

弹出的对话框如下:

图片 5

关于 AjaxOptions

MVC 中 AjaxHelper 的恢宏方法,提供了一雨后冬笋的 Ajax 方法,比方:ActionLink RouteLink, BeginForm, BeginRouteForm 等。它们的利用形式和 HtmlHelper很像,首要的界别就在于 AjaxHelper 有三个 AjaxOptions 参数。

public class AjaxOptions {
    public string Confirm { get; set; }
    public string HttpMethod { get; set; }
    public InsertionMode InsertionMode { get; set; }
    public int LoadingElementDuration { get; set; }
    public string LoadingElementId { get; set; }
    public string OnBegin { get; set; }
    public string OnComplete { get; set; }
    public string OnFailure { get; set; }
    public string OnSuccess { get; set; }
    public string UpdateTargetId { get; set; }
    public string Url { get; set; }
}

那个属性会告诉 MVC 如何生成你的 Ajax 代码。

 

图片 6 博主留言

一般 Ajax 使用办法

在讲 MVC 中的 Unobtrusive Ajax 在此之前,大家先来看看 MVC 中 Ajax 的不以为奇应用格局,读者能够在阅读后文的时候进行相比较学习。
新建二个MVC应用程序(基本模板),加多叁个名称叫 Home 的 controller,为自动生成的 Index action 增多视图,编辑 Index.cshtml 代码如下:

@{      ViewBag.Title = "Index";  }    <script type="text/javascript">      function test() {          $.ajax({              url: '@Url.Action("GetTestData")',              type: "POST",              success: function (result) {                  $("#lblMsg").text(result.msg);              }          });      }  </script>    <h2 id="lblMsg"></h2>  <input type="button" value="测试" onclick="test();" />

在 HomeController 中加多叁个名称为 Test 的 action,如下:

public JsonResult GetTestData() {      return Json(          new { msg = "Datetime from server:"   DateTime.Now.ToString("HH:mm:ss") }      );  }

运行程序,点击测量检验按键,大家能够见见用 Ajax 从后台取回来的时间:

图片 7

老是点击测验开关时间都会刷新。那么些地方有几许索要提示我们,这几个例子中 $.ajax() 方法应用的是 POST 哀告,如若要运用 GET 须要,Test action 中调用 Json 方法需求安装 JsonRequestBehavior 的值为 AllowGet(暗中同意是 DenyGet),如下:

public JsonResult GetTestData() {      return Json(          new { msg = "Datetime from server:"   DateTime.Now.ToString("HH:mm:ss") },          JsonRequestBehavior.AllowGet      );  }

小牛之路,ACTION学习笔记。此外,改成 GET 要求后,多次点击测量试验开关,时间不会刷新。那是因为 GET 央浼在 ASP.NET 中对此同一的U奥迪Q5L央浼再次来到的是缓存中的数据。

1、援用相应的Javascript文件

<script src="@Url.Content("~/Scripts/jquery-1.4.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

 

那八个文件包蕴在 MVC 3 的 Scripts 文件夹中,直接援用就能够。

值得注意的是:jquery.unobtrusive-ajax.min.js 和 jquery.validate.unobtrusive.min.js 是多少个用来让 jquery 辅助 Unobtrusive JavaScript 的库。

在 jQuery 官网络看不到,打开后意识,原本是微软协调写的。

除此以外,以前用来促成 MVC Ajax 和客户端验证的多少个文本 MicrosoftAjax, MicrosoftMvcAjax.js, MicrosoftMvcValidation.js 无需再援用了。

缘由就是因为,微软在 MVC 3 使用 jQuery 来完毕 Ajax 了,而地方八个javascript 库就一定于是三个 Adapter(适配器)

 

图片 8         原著:ASP.NET MVC 4 IN ACTION

什么是 Unobtrusive Ajax

Unobtrusive Ajax 是在 Web 页面使用 JavaScript 的一种通用形式。那几个术语未有明了的定义,但它有如下基本的尺码(来自维基百科):

  • 行为(JavaScript 代码)与 Web 页面包车型地铁构造(Html 标志)和显现(CSS样式)分离。
  • JavaScript 最好达成,消除JavaScript语言自己存在的观念意识主题材料(如缺乏可扩充性和开辟职员编码风格不一样性)。
  • 消除浏览器包容性难点。

为了深化领会,请观望如下有些 Unobtrusive Ajax 的“结构”部分的一段代码:

...  <form action="/People/GetPeopleData" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#tableBody" id="form0" method="post">  ...

这是 MVC 开启 Unobtrusive JavaScript 后调用 Ajax.BeginForm 方法生成的代码。这段代码和 JavaScript 是一心分开的,Html标签通过有个别符号来告诉 JavaScript 所全体啥等的作为。分离出来的 JavaScript 文件(MVC中引导进的jquery.unobtrusive-ajax.min.js文件)中的代码,未有一句是专门为有些特定的Web页面中的有个别Html成分来编排的,即全数函数都以通用的。那正是 Unobtrusive Ajax 的核激情想。

对立于日常应用 Ajax 的主意,Unobtrusive Ajax 更易于阅读,加强了可扩张性和一致性,而且有益于维护。

ENDING

末尾,还不太领悟 MVC 数据他们表达的相爱的人能够看一下本身的另一篇小说:

深入显出 MVC 数据验证 2.0 [附演示源码]


<a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#privacy" href="/AjaxHelper/PrivacyPolicy">Show the privacy policy2</a>

配置 AjaxOptions

AjaxOptions 类中的属性告诉 MVC 框架怎样生成 Ajax 央求相关的 JavaScript 和 Html 代码。它涵盖如下属性:

图片 9

那几个属性 VS 的智能提示都有很好的表达,这里不贰个多个讲,只选多少个有代表性的说话。

依傍于 Unobtrusive JavaScript 的成形情势

当 unobtrusive 方式展开的时候,代码通透到底的改变了,而且是那么海腴简!

<form
    action="/ajax/callback"
    data-ajax="true"
    data-ajax-loading="#loading"
    data-ajax-mode="replace"
    data-ajax-update="#updateme"
    method="post">

你会意识那几个HTML代码是非常轻易读懂的。

 

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

使用 MVC Unobtrusive Ajax

在 MVC 中采纳 Unobtrusive Ajax ,首先要将其“开启”,需求做四个动作。一个是布局根目录下的 Web.config 文件,在 configuration/appSettings 节点下的 UnobtrusiveJavaScriptEnabled 值设为 true,如下所示:

...   <configuration>       <appSettings>           ...          <add key="UnobtrusiveJavaScriptEnabled" value="true" />       </appSettings>   </configuration>   ... 

UnobtrusiveJavaScriptEnabled 的值在先后创建的时候默感觉true,在开荒的时候偶尔只必要检查一下。第二个动作正是在急需运用 MVC Unobtrusive Ajax 的 View 中引进jquery库和jquery.unobtrusive-ajax.min.js文件,一般更为宽广的是在 /Views/Shared/_Layout.cshtml 中引入,如下:

<!DOCTYPE html>  <html>  <head>      <meta charset="utf-8" />      <meta name="viewport" content="width=device-width" />      <title>@ViewBag.Title</title>      <script src="~/Scripts/jquery-1.8.2.min.js"></script>      <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>  </head>  <body>      @RenderBody()  </body>  </html>

当今我们来做二个采用 Unobtrusive Ajax 的事例,从服务器获取三个简便的用户列表。为此大家须要桑土筹算多少个Model,如下:

namespace MvcApplication1.Models {      public class Person {          public string ID { get; set; }          public string Name { get; set; }          public Role Role { get; set; }      }        public enum Role {          Admin, User, Guest      }  }

本身一般习贯先写后台措施,再写UI。创制多少个名称叫 People 的 controller, 在该 controller 中写好要用的 action,代码如下:

public class PeopleController : Controller {      public class PeopleController : Controller {          private Person[] personData = {               new Person {ID = "ZhangSan", Name = "张三", Role = Role.Admin},               new Person {ID = "LiSi", Name = "李四", Role = Role.User},               new Person {ID = "WangWu", Name = "王五", Role = Role.User},               new Person {ID = "MaLiu", Name = "马六", Role = Role.Guest}          };            public ActionResult Index() {              return View();          }            public PartialViewResult GetPeopleData(string selectedRole = "All") {              IEnumerable<Person> data = personData;              if (selectedRole != "All") {                  Role selected = (Role)Enum.Parse(typeof(Role), selectedRole);                  data = personData.Where(p => p.Role == selected);              }              return PartialView(data);          }            public ActionResult GetPeople(string selectedRole = "All") {              return View((object)selectedRole);          }      }  }

此处增加了 GetPeopleData action方法,依据 selectedRole 获取用户数据并传递给 PartialView 方法。

随着为 GetPeopleData action 创立二个partial view:/Views/People/GetPeopleData.cshtml ,代码如下:

@using MvcApplication1.Models  @model IEnumerable<Person>    @foreach (Person p in Model) {      <tr>          <td>@p.ID</td>          <td>@p.Name</td>          <td>@p.Role</td>      </tr>  }

再次创下立大家的主视图 /Views/People/GetPeople.cshtml,代码如下:

@using MvcApplication1.Models  @model string    @{      ViewBag.Title = "GetPeople";      AjaxOptions ajaxOpts = new AjaxOptions {          UpdateTargetId = "tableBody"      };  }    <h2>Get People</h2>  <table>      <thead><tr><th>First</th><th>Last</th><th>Role</th></tr></thead>      <tbody id="tableBody">          @Html.Action("GetPeopleData", new { selectedRole = Model })      </tbody>  </table>  @using (Ajax.BeginForm("GetPeopleData", ajaxOpts)) {      <div>          @Html.DropDownList("selectedRole", new SelectList(              new[] { "All" }.Concat(Enum.GetNames(typeof(Role)))))          <button type="submit">Submit</button>      </div>  }

第一成立了二个 AjaxOptions 对象,通过它的局地质量(如UpdateTargetId、Url、HttpMethod等)可安装 Ajax 怎样要求。那么些属性可见名思意,如 UpdateTargetId 表示调用 Ajax 央浼后要刷新的因素(通过成分ID来钦定)。然后把要求交给到服务器的表单包蕴在 Ajax.BeginForm() 方法内,通过 submit 成分将该表单数据交由到服务器。

为了运营作效果果美观些,大家在 _Layout.cshtml 文件中为 table 成分增添一些体裁,如下:

...   table, td, th {       border: thin solid black; border-collapse: collapse; padding: 5px;       background-color: lemonchiffon; text-align: left; margin: 10px 0;   }  ...

运营程序,U宝马X3L 定位到 /People/GetPeople,在页面中式点心击提交开关,效果如下:

图片 10 图片 11

Ajax.BeginForm 是因此付出表单的办法向服务器发送 ajax 央浼,MVC中也能够使用 Ajax.ActionLink() 方法生成链接来向服务器发送 ajax 央浼。上面大家在 GetPeople.cshtml 视图中追加这种央浼形式:

<div>       @foreach (string role in Enum.GetNames(typeof(Role))) {           @Ajax.ActionLink(role, "GetPeopleData",  new {selectedRole = role},               new AjaxOptions {UpdateTargetId = "tableBody"}) @:&nbsp;      }   </div>

成效和后边是一致的:

图片 12

Ajax.ActionLink() 和 Ajax.BeginForm() 区别的是,前边叁个只可以通过 Url 参数向服务器传送数据。

Unobtrusive Client Validation in ASP.NET MVC 3

原文:《Unobtrusive Client Validation in ASP.NET MVC 3》

 

虽说Ajax helpers 在MVC1就曾经是MVC中的一有的了,未来jQuery是暗中同意的。在在此在此之前版本的框架,这一个helpers都以行使Microsoft Ajax Library,而且从不使用unobtrusive的艺术生成JavaScript。大家得以经过更换web.config节点下的AppSettings下的UnobtrusiveJavaScriptEnabled属性改为false,就可以回复原先版本框架的作为了

图片 13

比方说,现在是true,我们把UnobtrusiveJavaScriptEnabled改为false后运转品种:

当今我们利用Ajax.ActionLink后转移的代码如下:

图片 14

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

假诺您正在把您此前ASP.NET MVC版本的网址升级,你须求保留这么些作为,为了拉长包容性,需求把UnobtrusiveJavaScriptEnabled设为false。但是在其他的景色下,把UnobtrusiveJavaScriptEnabled设为true是最佳的,因为那样,HTML生成的时候更加直观,可读性强,而且微软很注重ajax的这种Unobtrusive写法,并且在创新和商讨。

Ajax (Asynchronous JavaScript and XML 的缩写),如大家所见,那个定义的显要已经不复是XML部分,而是 Asynchronous 部分,它是在后台从服务器央求数据的一种模型。MVC 框架内置了对 Unobtrusive Ajax 的支撑,它同意我们透过 MVC 的 Help mothod 来定义 Ajax 的性状,而不用在 View 中参杂一大段 JavaScript 代码。

Unobtrusive JavaScript 是什么?

<!--以下是常规Javascript下写出来的Ajax-->
<div id="test">
    <a   onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'GET', updateTargetId: 'test' });">测试</a>
</div>

<!--以下是Unobtrusive Javascript下写出来的Ajax-->
<div id="test">
    <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#test"  >测试</a>
</div>

 

如上的代码分别是 MVC 3 在“关闭”和“开启” Unobtrusive JavaScript 后变卦的 Ajax.ActionLink。

那 Unobtrusive JavaScript到 底是怎么着呢?轻易地以来,便是一种代码分离的思考,把作为层和展现层分离开。

 

现实的能够查阅维基百科下对Unobtrusive JavaScript的解释。

 

         大家好!

AjaxOptions.Url 属性

在地方的示范中,大家在 Ajax.BeginForm() 方中钦赐了 action 名称参数,MVC 帮大家转移了Ajax央浼的Url ( action="/People/GetPeopleData" )。那样做存在贰个难题,当浏览器禁用JavaScript的时候,点击提交按键页面将发出新的乞请(非Ajax供给 /People/GetPeopleData),那样服务器再次来到的多军长平昔沟通掉原本的页面。化解这几个问题能够动用 AjaxOptions.Url 属性,原因是 AjaxOptions.Url 属性会扭转此外一个特意用来 ajax 需要的Url。如下大家对 /Views/People/GetPeople.cshtml 实行轻松的改换:

...  @{      ViewBag.Title = "GetPeople";      AjaxOptions ajaxOpts = new AjaxOptions {          UpdateTargetId = "tableBody",          Url = Url.Action("GetPeopleData")      };  }  ...  @using (Ajax.BeginForm(ajaxOpts)) {      ...  }

运维后大家看来的是和原先大同小异的结果,表达在遵从上未有区分。但它生成的 form 属性却不雷同:

<form id="form0" action="/People/GetPeople" method="post" data-ajax-url="/People/GetPeopleData" data-ajax-update="#tableBody" data-ajax-mode="replace" data-ajax="true">   ...

它生成了七个 Url,分别为 action 属性 和 data-ajax-url 属性的值,前边贰个是 Ajax.BeginForm() 方法依据如今 controller 和 action 名称改变的,前者是 AjaxOptions 的 Url 属性生成的。当浏览器未有禁用JavaScript 时,Unobtrusive Ajax JS库会获取 data-ajax-url 属性的值作为 Url 发生 ajax 央浼。当浏览器禁止使用了 JavaScript 时,自然 action 属性的值决定了象征提交的 Url,服务器将回来原本一切的页面。即便有的未能刷新,但不会让用户认为网站做得很倒霉。

桥接 HTML 和 jQuery : 适配器

写三个客户端验证有七个步骤:1、为 jQuery 验证编写验证法规,2、在 HTML 代码中增加属性,并且采纳适配器转变为相应的 jQuery 验证准则。(这些在非 MVC 中也适用)

您能够调用 jQuery.validator.unobtrusive.adapters. 来编排适配准则。

这里有八个主意能协助您注册三种很正规的适配器。(addBool, addSingleVal, and addMin马克斯)

实际的点子我们能够看一下原稿,因为 jquery.validate.unobtrusive.min.js 已经把那些适配法则都写好了,所以不加以演讲了,即使想打听原理的话能够去看一下~

 

 

本文目录:

重视于 Unobtrusive JavaScript 的变迁格局

张开 Unobtrusive Javascript 后,代码完全改观了

<label for="FirstName">FirstName</label>
<input  data-val="true" data-val-required="The FirstName field is required." id="FirstName" name="FirstName" type="text" value="" />


<label for="LastName">LastName</label>
<input  data-val="true" data-val-length="The field LastName must be a string with a maximum length of 60." data-val-length-max="60" data-val-required="The LastName field is required." id="LastName" name="LastName" type="text" value="" />


<label for="Age">Age</label>
<input  data-val="true" data-val-number="The field Age must be a number." data-val-range="The field Age must be between 1 and 130." data-val-range-max="130" data-val-range-min="1" data-val-required="The Age field is required." id="Age" name="Age" type="text" value="" />

中间最大的退换便是底下的 Javascript 代码消失了,转而成为 HTML 5 的各样品质。

 

 

Ajax 回调

历史观 Ajax 和 unobtrusive JavaScript 的严重性差别就在于 Ajax 的回调。当全体的回调函数都被定义在 Ajax 库中之后,你的代码就能形成这种理想化的品格。

当您在 MVC 3 中动用 unobtrusive Ajax 的时候,八个宗旨的回调函数会被因设为 jQuery.Ajax 的函数。

 

OnBegin => “beforeSend”

OnComplete => “complete”

OnFailure => “error”

OnSuccess = > “success”

 

你能够给他们传递一个函数名,或一段无名函数作为管理函数。

万一你的管理函数是一个函数名,并且参数列表符合Ajax标准,那么 jQuery.Ajax 便会把值传递给那一个函数并施行。

若是是无名函数的话,进程完全同样。

 

Ajax 回调函数的参数列表:

xhr : XMLHttpRequest 对象

status : 仅限 OnBegin

error : 仅限 OnFailure

data : 仅限 OnSuccess

 

按下F5运营程序,大家得以查阅到通过Ajax帮手生成的html代码是下面这几个样子的,我们看看了耳熟能详的unobtrusive javascript风格的代码

质量是什么变迁的

当表单中的一项在后端代码中有数量印证的时候,MVC 会以往 它的性质中加多  data-val="true",并且讲全体准绳以 data-val-rulename="message" 的花样,加在属性上。

假如想利用暗许的客户端验证新闻,你假诺把属性值留空,那么客户端验证会自动生成形如 data-val-rulename-paramname="paramvalue" 的属性。

 

下面是ASP.NET MVC Ajax helpers和

价值观的成形格局

当 unobtrusive 情势被关闭的时候,MVC 会把代码写在您的 <a> 标签也许<form> 标签中,并且靠 MicrosoftAjax.js 和 MicrosoftMvcAjax.js 来实施相应的代码。

<form
    action="/ajax/callback"
    id="form0"
    method="post"
    onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));"
    onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'loading', updateTargetId: 'updateme' });">

MVC1 和 MVC2 中就是如此做的。

 

7.2.1    Ajax.ActionLink

2、开启 Unobtrusive JavaScript

MVC3中的Web.Config文件中私下认可多了五个布局项

图片 15

这里是一个大局设置,你能够打开可能关闭。

 

其它,你也得以在其余叁个 Action 或 Controller 中施行以下代码,灵活地展费用配,来拍卖部分特殊的 Action 或 Controller。

HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;

 

图片 16

Unobtrusive JavaScriptin ASP.NET MVC 3

Unobtrusive JavaScript 的好处总之,不过怎么在MVC3应用Unobtrusive JavaScript呢?

 

          

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

         我是茗洋芳竹,首先证明,笔者不是贰个翻译人士,作者是个90后程序猿.

倘让你从前有jQuery经验,那个洋洋都能看的懂。

           一从头,大家会看多少个Ajax方法,还恐怕有它们和jQuery或然JavaScript库关联的。通过它们也可以兑现大家手工写jQuery代码的一部分落成的魔法。

 

虽说那些自定义属性是HTML5详实指南的一某些,不过它们在不帮忙(比如IE6)HTML的浏览器上尚未其他难点,能够符合规律的干活。

 

当运维那些页面包车型大巴时候,原理都一模一样的,固然表单被额外的 data-ajax属性修饰了,跟ActionLink很像,下边是截图:

   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>

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

data-*品质,例如data-ajax和data-ajax-update都以名牌的HTML5的习性(Attribute),它提供了选拔额外的元数据(  metadata)来落实申明(annotate)HTML element成分。就算您在此处您提供了Ajax央浼的连锁音信,不过你在这里能够在客户端,写你自身就要访问的元数据(metadata)

(这里英文的没什么,不要怪笔者了,因为作者以为翻译过来也不太好了然,还不比写demo领悟出来)

本文由澳门正规赌博十大网站发布于澳门游戏网站,转载请注明出处:小牛之路,ACTION学习笔记