转:ASP.NET MVC中Unobtrusive Ajax的妙用
2013-12-11 17:54
369 查看
Unobtrusive Javascript有三层含义:一是在HTML代码中不会随意的插入Javsscript代码,只在标签中加一些额外的属性值,然后被引用的脚本文件识别和处理;二是通过脚本文件所增加的功能是一种渐进式的增强,当客户端不支持或禁用了Javsscript时网页所提供的功能仍然能够实现,只是用户体验会降低;三是能够兼容不同的浏览器。
启用Unobtrusive Javascript的步骤:
1.在web.config文件中加入
2.在网页中加入
使用Unobtrusive Ajax主要有两个用途:做客户端的输入验证和异步的表单提交。客户端验证基本上是自动的,不用做特别的处理。下面用一个例子重点说一下提交表单。
数据模型是这样的:每个类别有很多属性,属性可以分组,属性组可以嵌套。然后在网页创建和编辑属性组,示意图如下:
这是我半年前写的代码:
完全使用jQuery获取控件值和提交,可读性和可维护性不是很好。现在改用Ajax.BeginForm之后,很大地简化了编程:
对于不使用的表单的,直接点链接的可以用Ajax.ActionLink:
最终运行后生成的代码如下:
可以看到魔力就在于以data-ajax开头的一些属性中,当Javascript被禁用后,表单仍能提交,链接也能点开,只不过不再是异步的了。
启用Unobtrusive Javascript的步骤:
1.在web.config文件中加入
<configuration> <appSettings> <add key="ClientValidationEnabled" value="true"/> <add key="UnobtrusiveJavaScriptEnabled" value="true"/> </appSettings>
2.在网页中加入
<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.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>
使用Unobtrusive Ajax主要有两个用途:做客户端的输入验证和异步的表单提交。客户端验证基本上是自动的,不用做特别的处理。下面用一个例子重点说一下提交表单。
数据模型是这样的:每个类别有很多属性,属性可以分组,属性组可以嵌套。然后在网页创建和编辑属性组,示意图如下:
这是我半年前写的代码:
$(this).find(".CreatePropertyGroup").click(function () { $(".InputGroupName").hide(); var id = $(this).next().val(); var td = $(this).parent().parent(); $.post("/Category/CreatePropertyGroup", { parentId: id, name: $(this).prev().val() }, function () { td.load("/Category/PropertyGroup", { "id": id, "resultType": "html" }, loadGroupReady); }); });
$(this).find(".CreateProperty").click(function () { $(".InputPropertyName").hide(); var id = $(this).next().val(); var name = $(this).parent().find(".PropertyName").val(); var type = $(this).parent().find("#PropertyDataType").val(); var unit = $(this).parent().find(".PropertyUnit").val(); var range = $(this).parent().find(".ValueRange").val(); var td = $(this).parent().parent(); $.post("/Category/CreateProperty", { groupId: id, name: name, type: type, unit: unit, range: range }, function () { td.load("/Category/PropertyGroup", { "id": id, "resultType": "html" }, loadGroupReady); }); });
完全使用jQuery获取控件值和提交,可读性和可维护性不是很好。现在改用Ajax.BeginForm之后,很大地简化了编程:
<div class="InputGroupName" style="display: none"> @using (Ajax.BeginForm(new AjaxOptions { Url = Url.Action("CreatePropertyGroup"), UpdateTargetId = "PropertyGroup" })) { <span>属性组名称:</span> <input name="name" class="GroupName" type="text" /> <input type="hidden" name="categoryId" value="@categoryId" /> <input type="hidden" name="path" value="@path" /> <input type="submit" value="确定" /> } </div>
对于不使用的表单的,直接点链接的可以用Ajax.ActionLink:
<td> @Ajax.ActionLink("删除", "DeletePropertyGroup", new { categoryId = categoryId, path = path, name = property.Name }, new AjaxOptions { HttpMethod = "Post", Url = Url.Action("DeletePropertyGroup", new { categoryId = categoryId, path = path, name = property.Name }), Confirm = "确认要删除 '" + property.Name + "' 及其所有属性吗?", UpdateTargetId = "PropertyGroup" }) </td>
最终运行后生成的代码如下:
<form action="/Category/EditCategory/4-2-2" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#PropertyGroup" data-ajax-url="/Category/CreatePropertyGroup" id="form5" method="post"> <span>属性组名称:</span> <input name="name" class="GroupName" type="text" /> <input type="hidden" name="categoryId" value="4-2" /> <input type="hidden" name="path" value="PG.Props.1.Props" /> <input type="submit" value="确定" /> </form>
<a data-ajax="true" data-ajax-confirm="确认要删除 '外观特征' 及其所有属性吗?" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#PropertyGroup" data-ajax-url="/Category/DeletePropertyGroup?categoryId=4-2&path=PG.Props&name=%E5%A4%96%E8%A7%82%E7%89%B9%E5%BE%81" href="/Category/DeletePropertyGroup?categoryId=4-2&path=PG.Props&name=%E5%A4%96%E8%A7%82%E7%89%B9%E5%BE%81">删除</a>
可以看到魔力就在于以data-ajax开头的一些属性中,当Javascript被禁用后,表单仍能提交,链接也能点开,只不过不再是异步的了。
相关文章推荐
- ASP.NET MVC中Unobtrusive Ajax的妙用
- ASP.NET MVC中Unobtrusive Ajax的妙用
- ASP.NET MVC中Unobtrusive Ajax的妙用
- Unobtrusive Ajax in Asp.net MVC
- Asp.net MVC 3 中 Unobtrusive javascript 与Ajax
- MVC4 AspNet MVC下的Ajax / 使用微软提供的Ajax请求脚本 [jquery.unobtrusive-ajax.min.js]
- [ASP.NET MVC 小牛之路]14 - Unobtrusive Ajax
- 方法代码ASP.NET MVC如何使用Ajax的辅助方法
- [翻译]ASP.NET MVC 3 开发的20个秘诀(十三)[20 Recipes for Programming MVC 3]:实现Ajax增强用户体验
- ajax传递给asp.net mvc 后台数组参数方式
- Asp.Net Mvc Ajax偏方
- 将ASP.NET MVC中的form提交改为ajax提交
- ASP.NET MVC + jQuery + Newtonsoft.Json 快樂的AJAX
- asp .net mvc ajax 传值到后台,并放回JSon值解析
- asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js)
- ASP.NET MVC框架开发系列课程(8):AJAX
- Asp.Net MVC Ajax
- Asp.net MVC中 model 验证方式 ajax +jquery
- 本周ASP.NET英文技术文章推荐[03/02 - 03/15]:ASP.NET AJAX、LinqDataSource、ListView、MVC、JavaScript、智能感知、Ext、CAPTCHA
- ASP.NET MVC 音乐商店 - 8. 使用 Ajax 更新的购物车