【ASP.NET MVC 学习笔记】- 15 Unobtrusive Ajax
本文参考：http://www.cnblogs.com/willick/p/3418517.html
1、Unobtrusive Ajax允许我们通过 MVC 的 Help mothod 来定义 Ajax 的特性，而不用在 View 中参杂一大段 JavaScript 代码。
2、在MVC中使用普通Ajax的示例：
- 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：
public JsonResult GetTestData()
{
return Json(new { msg = "Datetime from server：" + DateTime.Now.ToString("HH:mm:ss") });
}
运行程序，点击测试按钮，我们可以看到用 Ajax 从后台取回来的时间：
每次点击测试按钮时间都会刷新。这个地方有一点需要提醒大家，这个例子中 $.ajax() 方法使用的是 POST 请求，如果要使用 GET 请求，Test action 中调用 Json 方法需要设置 JsonRequestBehavior 的值为 AllowGet（默认是 DenyGet）。改成 GET 请求后，多次点击测试按钮，时间不会刷新。这是因为 GET 请求在 ASP.NET 中对于相同的URL请求返回的是缓存中的数据。如下：
public JsonResult GetTestData()
{
return Json(new { msg = "Datetime from server：" + DateTime.Now.ToString("HH:mm:ss") }, JsonRequestBehavior.AllowGet);
}
3、Unobtrusive Ajax 是在 Web 页面使用 JavaScript 的一种通用方式。这个术语没有明确的定义，但它有如下基本的原则：
- 行为（JavaScript 代码）与 Web 页面的结构（Html 标记）和表现（CSS样式）分离。
- JavaScript 最佳实现，解决JavaScript语言本身存在的传统问题（如缺乏可扩展性和开发人员编码风格不一致性）。
- 解决浏览器兼容性问题。
MVC 开启 Unobtrusive JavaScript 后调用 Ajax.BeginForm 方法生成的代码示例：
<form action="/People/GetPeopleData" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#tableBody" id="form0" method="post">
这段代码和 JavaScript 是完全分离的，Html标签通过一些标记来告诉 JavaScript 所具有什么样的行为。分离出来的 JavaScript 文件（MVC中指引入的jquery.unobtrusive-ajax.min.js文件）中的代码，没有一句是专门为某个特定的Web页面中的某个Html元素来编写的，即所有函数都是通用的。这就是 Unobtrusive Ajax 的核心思想。
相对于普通使用 Ajax 的方式，Unobtrusive Ajax 更容易阅读，增强了可扩展性和一致性，而且方便维护。
4、在 MVC 中使用 Unobtrusive Ajax ，首先要将其“开启”，需要做两个动作。一个是配置根目录下的 Web.config 文件，在 configuration/appSettings 节点下的 UnobtrusiveJavaScriptEnabled 值设为 true，如下所示：
<configuration>
<appSettings><add key="UnobtrusiveJavaScriptEnabled" value="true" /> //默认是开启的
</appSettings>
</configuration>
第二个动作就是在需要使用 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>
使用示例：
//1、创建Model对象
public class Person
{
public string ID { get; set; }
public string Name { get; set; }
public Role Role { get; set; }
} public enum Role
{
Admin, User, Guest
} //2、创建Controller、Action
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);
}
}
} //3、创建Partial View 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>
} //4、创建主View 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>
}
Ajax.BeginForm 是通过提交表单的方式向服务器发送 ajax 请求，MVC中也可以使用 Ajax.ActionLink() 方法生成链接来向服务器发送 ajax 请求。示例：
<div>
@foreach (string role in Enum.GetNames(typeof(Role)))
{
@Ajax.ActionLink(role, "GetPeopleData", new {selectedRole = role}, new AjaxOptions {UpdateTargetId = "tableBody"}) @:
}
</div>
效果图：
当调用 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 请求。
5、AjaxOptions 类中的属性告诉 MVC 框架如何生成 Ajax 请求相关的 JavaScript 和 Html 代码。它包含如下属性：
6、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，服务器将返回原来整个的页面。虽然局部未能刷新，但不会让用户觉得网站做得很糟糕。
7、当加载数据需要花较长时间，为了避免假死状态，应当给用户一个反馈信息，如“正在加载...”字样。在 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>
8、使用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?"
};
}
9、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"
};
}
【ASP.NET MVC 学习笔记】- 15 Unobtrusive Ajax的更多相关文章
- ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则
ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...
- ASP.NET MVC 学习笔记-2.Razor语法 ASP.NET MVC 学习笔记-1.ASP.NET MVC 基础 反射的具体应用 策略模式的具体应用 责任链模式的具体应用 ServiceStack.Redis订阅发布服务的调用 C#读取XML文件的基类实现
ASP.NET MVC 学习笔记-2.Razor语法 1. 表达式 表达式必须跟在“@”符号之后, 2. 代码块 代码块必须位于“@{}”中,并且每行代码必须以“: ...
- ASP.NET MVC学习笔记-----Filter2
ASP.NET MVC学习笔记-----Filter(2) 接上篇ASP.NET MVC学习笔记-----Filter(1) Action Filter Action Filter可以基于任何目的使用 ...
- ASP.NET MVC学习笔记-----Filter
ASP.NET MVC学习笔记-----Filter(1) Filter类型 接口 MVC的默认实现 Description Authorization IAuthorizationFilter Au ...
- ASP.NET MVC学习笔记-----Filter(2)
接上篇ASP.NET MVC学习笔记-----Filter(1) Action Filter Action Filter可以基于任何目的使用,它需要实现IActionFilter接口: public ...
- 【ASP.NET MVC 学习笔记】- 18 Bundle（捆绑）
本文参考:http://www.cnblogs.com/willick/p/3438272.html 1.捆绑(Bundle),一个在 View 和 Layout 中用于组织优化浏览器请求的 CSS ...
- ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用
Ajax的全名为:Asynchronous Javascript And XML(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术.Ajax技术首先向Web服务器发送 ...
- ASP.NET MVC 学习笔记（1）
从头开始系统地学习ASP.NET MVC 为什么要学习ASP.NET MVC?原因很多,可以先来看一下最早的ASP.NET WebForm的一些缺点: 传说中面试经常要问到的ASP.NET WebFo ...
- 【转】ASP.NET MVC学习笔记-Controller的ActionResult
1. 返回ViewResult public ActionResult Index() { ViewData["Message"] = "Welcome ...
随机推荐
- 201521145048《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 Q1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- 练习使用markdown
我的随笔 写随笔的原因 1 完全是为了练习使用markdown编辑器 2 我是个爱学习的宝宝 3 学习能力问题? 随笔内容 弄懂markdown语法 随便谢谢心情 个人心情 冷漠 不想说话 神经 个人 ...
- 初试 Vue.js
1.为什么我会想要来弄弄vue这个前端框架呢? 答:前段时间被小程序刷屏了,然后就去弄了一下小程序,嗯挺简单的:头脑一发热后就想到vue2也发布一段时间了,何不也来尝尝vue2.0的味道,最后发现它们 ...
- node 当中的 cnpm和npm 的区别和使用
在安装nodejs之后会有npm命令 打开命令符输入之后 输入node -v(记得-v前空格)查看版本信息 如果显示出来了就说明安装成功 然后 npm 可以安装node插件 cnpm使用的是淘宝网 ...
- 全面了解Android热修复技术
WeTest 导读 本文探讨了Android热修复技术的发展脉络,现状及其未来. 热修复技术概述 热修复技术在近年来飞速发展,尤其是在InstantRun方案推出之后,各种热修复技术竞相涌现.国内大部 ...
- 基于NIO和BIO的两种服务器对比
基于BIO的服务器,服务端可能要同时保持几百万个HTTP连接,而这些连接并不是每时每刻都在传输数据,所以这种情况不适合使用BIO的服务器:而且需要保证共享资源的同步与安全,这个实现起来相对复杂.这时候 ...
- 浅析Spring MVC工作机制
1.如何使用Spring MVC? 在web.xml中配置一个DispatcherServlet DispatchServlet初始化的时候会去寻找一个在应用程序的WEB-INF目录下的配置文件,命名 ...
- 在JavaScript中使用json.js：Ajax项目之GET请求（同步）
1.用php编写一个提供数据的响应程序(phpdata.php) <?php $arr=array(1,2,3,4); //将数组编码为JSON格式的数据 $jsonarr=json_encod ...
- C++ Primer Plus 6 第一章
一.机器语言.汇编语言.C\C++.高级语言 机器语言:机器真正识别,能在机器上运行的语言. 汇编语言:低级语言,直接操作硬件,如直接访问cpu寄存器和内存单元.不具有移植性.因为不同的平台对应的硬件 ...
- 关于 HashMap 随笔
hashMap 的一些认识: 基于哈希表的Map接口的非同步实现,定义了键映射到值的规则 此实现提供所有可选的映射操作,并允许使用null值和null键 根据hash算法,确定key-value的存贮 ...