.Net页面部分更新激发的思索【C#.Net教程】,.Net，页面局部

最近在修正之前做的模块，增加一个新功用。整顿了下才发明重用率很低，大部分的东西照样须要从新写。功用里用到了部分更新，一切整顿一下一起来完成部分更新的解决方案及革新。

我打仗的项目开辟大多是以Asp.net WebForm开辟的，自然会用到UpdatePanel，优点就是开辟快、轻易，固然发作的题目也是一大堆。然后是Ajax和平常处置惩罚顺序合营完成异步要求更新。末了就是应用第三方绑定插件优化Ajax要求。

一、UpdatePanel

将须要更新的模块放入UpdatePanel的ContentTemplate中，区域内的回发将不会革新全部页面。而且响应的内容也仅仅是UpdatePanel内里更新的内容

如：查询

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
   <p 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" />
   </p>
   <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

如：查询

<p ms-controller="avalonCtrl">
  <p 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" />
  </p>
  <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>
 </p>

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("收集忙碌，请革新页面！");
   }
  });
  }
 });

末了回到脏搜检：如果把这个革新成可编辑的表格，怎样去监听哪些行被修正，保留的时刻不应当提交全部表格数据，而应当提交修正的行数据？