.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>

使本文来源gao@daima#com搞(%代@#码网@用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("网络繁忙，请刷新页面！");  }  }); }

喜欢 (0)赏

[搞代码]

分享 (0)