转：ASP.NET MVC中Unobtrusive Ajax的妙用

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被禁用后，表单仍能提交，链接也能点开，只不过不再是异步的了。