• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NETMVC中UnobtrusiveAjax的妙用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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="确认要删除 &#39;外观特征&#39; 及其所有属性吗?" 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被禁用后,表单仍能提交,链接也能点开,只不过不再是异步的了。








 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ASP.net获取当前页面的文件名,参数,域名等方法发布时间:2022-07-10
下一篇:
在Asp.netMVC2中解决页面提交数据并发问题发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap