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  ="确认要删除 &#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被禁用后，表单仍能提交，链接也能点开，只不过不再是异步的了。

http://www.cnblogs.com/rufi/archive/2012/03/31/unobtrusive-ajax.html

作者： Leo_wl

出处： http://www.cnblogs.com/Leo_wl/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did49553

更新时间：2022-09-24 阅读：47次