.Net页面局部更新引发的思考

黄舟

发布时间：2017-02-22 10:38:42

1560人浏览过

来源于php中文网

原创

最近在修改以前做的模块，添加一个新功能。整理了下才发现重用率很低，大部分的东西还是需要重新写。功能里用到了局部更新，所有整理一下一路来实现局部更新的解决方案及改进。

我接触的项目开发大多是以asp.net webform开发的，自然会用到updatepanel，好处就是开发快、方便，当然产生的问题也是一大堆。然后是ajax和一般处理程序配合实现异步请求更新。最后就是利用第三方绑定插件优化ajax请求。

一、updatepanel

将需要更新的模块放入updatepanel的contenttemplate中，区域内的回发将不会刷新整个页面。并且响应的内容也仅仅是updatepanel里面更新的内容

如：查询

.Net页面局部更新引发的思考


  
   
    
   
   
    
    
   
    ID
    姓名
    年龄
    住址
    入职日期
    部门
    薪水
   
   
     <%#Eval("ID") %>
     <%#Eval("Name") %>
     <%#Eval("Age") %>
     <%#Eval("Address") %>
     <%#Eval("JoinDate") %>
     <%#Eval("Department") %>
     <%#Eval("Salary") %>

ID	姓名	年龄	住址	入职日期	部门	薪水
<%#Eval("ID") %>	<%#Eval("Name") %>	<%#Eval("Age") %>	<%#Eval("Address") %>	<%#Eval("JoinDate") %>	<%#Eval("Department") %>	<%#Eval("Salary") %>

使用UpdatePanel不需要写任何异步请求的代码就能实现局部更新，但性能会有一定的影响，并且灵活性、重用性不高。

2.Ajxa和一般处理程序

首先新建一个一般处理程序，接收查询参数，返回查询后的员工信息，默认返回所有的信息。

如：查询

p>
.Net页面局部更新引发的思考

使用Ajax查询灵活性高，但html代码的拼接有点烦，当然有很多种方法可以改善。下面继续介绍。

function ajaxquery() {
  $.ajax({
  url: "/DataService/getEmployee.ashx",
  type: "GET",
  cache: false,
  data: { key: $("#ajaxkey").val() },
  dataType: "json",
  success: function (data, textStatus) {
   if (data.code == "ok") {
   $("#ajaxtable tr.row").remove();
   var html = "";
   for (var i = 0; i < data.res.length; i++) {
    html += "" + data.res[i].ID + "" + data.res[i].Name + "" + data.res[i].Age + "" + data.res[i].Address + "" + data.res[i].JoinDate + "" + data.res[i].Department + "" + data.res[i].Salary + ""
   }
   if (html == "")
    html += "没有任何记录，请改进查询条件";
   $("#ajaxtable").append(html);
   }
   else {
   alert(data.info);
   }
  },
  error: function (XMLHttpRequest, textStatus, errorThrown) {
   alert("网络繁忙，请刷新页面！");
  }
  });
 }

三、Avalonjs改善代码拼接

Angularjs用得也比较多，但是太庞大了，所有找到一个比较适合一般开发的Avalonjs。

我之前在博问里问过这样一个问题：有没有jquery数据双向绑定插件，有脏检查的。只是和大家探讨，我见过一个DataSet js插件，所有的数据以json的形式绑定的DataSet，DataSet本身实现脏检查，其余控件都绑定相应的DataSet的某个属性。只要某个绑定控件值发生改变，就可以从DataSet中获取仅仅改变的数据（而不是整个json）。回答的几乎是Angularjs。其与的也都是基本的双向绑定，所以脏检查还是要自己实现。

使用Avalonjs首先引入js文件，然后定义controller

如：查询

.Net页面局部更新引发的思考


  

  
   
  
  
  
  
   ID
   姓名
   年龄
   住址
   入职日期
   部门
   薪水
  
  
   {{emp.ID}}
   {{emp.Name}}
   {{emp.Age}}
   {{emp.Address}}
   {{emp.JoinDate}}
   {{emp.Department}}
   {{emp.Salary}}

ID	姓名	年龄	住址	入职日期	部门	薪水
{{emp.ID}}	{{emp.Name}}	{{emp.Age}}	{{emp.Address}}	{{emp.JoinDate}}	{{emp.Department}}	{{emp.Salary}}

麻雀企业网站管理系统3.0

主要功能：1、新闻信息：可分多类（内部新闻，外部新闻等）2、产品展示：可分多类（分类一，分类二等）3、网站公告：网站公告添加多数据显示。4、动态添加公司介绍，联系方式等并可以扩展。5、网站留言：前台发布留言后台验证后显示6、新闻信息和产品展示动态添加meta标签：keywords，description ，同时url重写htm页面更好的被搜索引擎收入。后台用户名密码admin

下载

var vm = avalon.define({
  $id: "avalonCtrl",
  emps: [],
  key: "",
  query: function () {
  $.ajax({
   url: "/DataService/getEmployee.ashx",
   type: "GET",
   cache: false,
   data: { key: vm.key },
   dataType: "json",
   success: function (data, textStatus) {
   if (data.code == "ok") {
    vm.emps = data.res;
   }
   else {
    alert(data.info);
   }
   },
   error: function (XMLHttpRequest, textStatus, errorThrown) {
   alert("网络繁忙，请刷新页面！");
   }
  });
  }
 });

最后回到脏检查：如果把这个改进成可编辑的表格，怎么去监听哪些行被修改，保存的时候不应该提交整个表格数据，而应该提交修改的行数据？

.Net页面局部更新引发的思考