Unobtrusive Javascript有三层含义:一是在HTML代码中不会随意的插入Javsscript代码,只在标签中加一些额外的属性值,然后被引用的脚本文件识别和处理;二是通过脚本文件所增加的功能是一种渐进式的增强,当客户端不支持或禁用了Javsscript时网页所提供的功能仍然能够实现,只是用户体验会降低;三是能够兼容不同的浏览器。

启用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&amp;path=PG.Props&amp;name=%E5%A4%96%E8%A7%82%E7%89%B9%E5%BE%81"
href="/Category/DeletePropertyGroup?categoryId=4-2&amp;path=PG.Props&amp;name=%E5%A4%96%E8%A7%82%E7%89%B9%E5%BE%81">删除</a>

可以看到魔力就在于以data-ajax开头的一些属性中,当Javascript被禁用后,表单仍能提交,链接也能点开,只不过不再是异步的了。

ASP.NET MVC中Unobtrusive Ajax的妙用的更多相关文章

  1. 转:ASP.NET MVC中Unobtrusive Ajax的妙用

    Unobtrusive Javascript有三层含义:一是在HTML代码中不会随意的插入Javsscript代码,只在标签中加一些额外的属性值,然后被引用的脚本文件识别和处理:二是通过脚本文件所增加 ...

  2. Asp.net mvc中的Ajax处理

    在Asp.net MVC中的使用Ajax, 可以使用通用的Jquery提供的ajax方法,也可以使用MVC中的AjaxHelper. 这篇文章不对具体如何使用做详细说明,只对于在使用Ajax中的一些需 ...

  3. ASP.NET MVC之Unobtrusive Ajax(五)

    前言 这一节我们来讲讲Unobtrusive中的Ajax提交,大部分情况下我们是利用JQuery来进行Ajax请求,当然利用JQuery来进行表单Ajax请求也不例外,但是相对于Unobtrusive ...

  4. 自坑实录 - Asp.net MVC中无法使用@Ajax.BeginForm问题解决

    创建空的web项目,通过Nuget引用mvc组件来搭建空的MVC项目时, 在视图页面中无法使用@Ajax.BegForm来进行异步提交数据, 而新建默认的MVC模板项目却能够正常使用@Ajax.Beg ...

  5. 【翻译】了解ASP.NET MVC中的Ajax助手

    原文:Understanding AJAX Helpers in ASP.NET MVC 作者: Shailendra Chauhan works as Software Analyst at rep ...

  6. ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用

    Ajax的全名为:Asynchronous Javascript And XML(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术.Ajax技术首先向Web服务器发送 ...

  7. 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 ...

  8. ASP.NET MVC学习之Ajax(完结)

    一.前言 通过上面的一番学习,大家一定收获不少.但是总归会有一个结束的时候,但是这个结束也意味着新的开始. 如果你是从事ASP.NET开发,并且也使用了第三方控件,那么一定会觉得ASP.NET开发aj ...

  9. ASP.NET MVC中使用ASP.NET AJAX异步访问WebService

    使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也 ...

随机推荐

  1. Visual Studio 2015无法进行Package Restore的原因和解决方案

    这篇文章是记录在我的当前电脑上面,安装Visual Studio 2015 Community Edition出现的无法进行Package Restore的问题,很可能在你的电脑上面无法重现.我的环境 ...

  2. DDD 领域驱动设计-看我如何应对业务需求变化,领域模型调整?

    写在前面 上一篇:DDD 领域驱动设计-看我如何应对业务需求变化,愚蠢的应对? "愚蠢的应对",这个标题是我后来补充上的,博文中除了描述需求变化.愚蠢应对和一些思考,确实没有实质性 ...

  3. ASP.NET MVC Web API Post FromBody(Web API 如何正确 Post)

    问题场景: ASP.NET MVC Web API 定义 Post 方法,HttpClient 使用 JsonConvert.SerializeObject 传参进行调用,比如 Web Api 中定义 ...

  4. Java多线程系列--“JUC锁”02之 互斥锁ReentrantLock

    本章对ReentrantLock包进行基本介绍,这一章主要对ReentrantLock进行概括性的介绍,内容包括:ReentrantLock介绍ReentrantLock函数列表ReentrantLo ...

  5. IntelliJ IDEA上创建maven Spring MVC项目

    IntelliJ IDEA上创建Maven Spring MVC项目 各软件版本 利用maven骨架建立一个webapp 建立相应的目录 配置Maven和SpringMVC 配置Maven的pom.x ...

  6. 1Z0-053 争议题目解析703

    1Z0-053 争议题目解析703 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 703.Given below are RMAN commands to enable backu ...

  7. Nancy之Pipelines三兄弟(Before After OnError)

    一.简单描述 Before:如果返回null,拦截器将主动权转给路由:如果返回Response对象,则路由不起作用. After : 没有返回值,可以在这里修改或替换当前的Response. OnEr ...

  8. QT 中 关键字讲解(emit,signal,slot)

    Qt中的类库有接近一半是从基类QObject上继承下来,信号与反应槽(signals/slot)机制就是用来在QObject类或其子类间通讯的方法.作为一种通用的处理机制,信号与反应槽非常灵活,可以携 ...

  9. C#基础知识一之base关键字

    前言 其实很早就想写关于C#基础,总是自己给自己找借口,或者去网上搜搜看看,现在想想觉得自己有点懒惰...  作为开发人员,基础知识是重中之重的,只有巩固.理解.实践才能提高自身的技能.同时也希望通过 ...

  10. 在CentOS 6.5上安装python2.7

    1.yum groupinstall “Development tools” 2.安装编译Python需要的组件 yum install zlib-devel bzip2-devel openssl- ...