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

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

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

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

<asp:updatepanel id="updatepanel1" runat="server">
  <contenttemplate>
   <div style="margin: 8px 0px;">
   <asp:textbox id="tbkey" runat="server" cssclass="form-control"></asp:textbox> <asp:button id="btnquery" runat="server" text="查询" cssclass="btn-box btn-submit-box" onclick="btnquery_click" />
   </div>
   <table class="data-table">
   <tr>
    <th>id</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>住址</th>
    <th>入职日期</th>
    <th>部门</th>
    <th>薪水</th>
   </tr>
   <asp:repeater id="repeateremp" runat="server">
    <itemtemplate>
    <tr>
     <td><%#eval("id") %></td>
     <td><%#eval("name") %></td>
     <td><%#eval("age") %></td>
     <td><%#eval("address") %></td>
     <td><%#eval("joindate") %></td>
     <td><%#eval("department") %></td>
     <td><%#eval("salary") %></td>
    </tr>
    </itemtemplate>
   </asp:repeater>
   </table>
  </contenttemplate>
  </asp:updatepanel> 

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

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

p>

使用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 += "<tr class='row'><td>" + data.res[i].id + "</td><td>" + data.res[i].name + "</td><td>" + data.res[i].age + "</td><td>" + data.res[i].address + "</td><td>" + data.res[i].joindate + "</td><td>" + data.res[i].department + "</td><td>" + data.res[i].salary + "</td></tr>"
   }
   if (html == "")
    html += "<tr class='row'><td colspan='7'>没有任何记录，请改进查询条件</td></tr>";
   $("#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
 如：查询

 <div ms-controller="avalonctrl">
  <div style="margin: 8px 0px;">
  <input type="text" class="form-control" ms-duplex="key" />
   
  <input type="button" value="查询" ms-click="query" class="btn-box btn-submit-box" />
  </div>
  <table class="data-table">
  <tr>
   <th>id</th>
   <th>姓名</th>
   <th>年龄</th>
   <th>住址</th>
   <th>入职日期</th>
   <th>部门</th>
   <th>薪水</th>
  </tr>
  <tr ms-repeat-emp="emps">
   <td>{{emp.id}}</td>
   <td>{{emp.name}}</td>
   <td>{{emp.age}}</td>
   <td>{{emp.address}}</td>
   <td>{{emp.joindate}}</td>
   <td>{{emp.department}}</td>
   <td>{{emp.salary}}</td>
  </tr>
  </table>
 </div> 

   

 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("网络繁忙，请刷新页面！");
   }
  });
  }
 }); 

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

本文代码：下载
 本文地址：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。