.Net頁(yè)面局部更新引發(fā)的思考

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:37:15

.Net頁(yè)面局部更新引發(fā)的思考

.Net頁(yè)面局部更新引發(fā)的思考:最近在修改以前做的模塊，添加一個(gè)新功能。整理了下才發(fā)現(xiàn)重用率很低，大部分的東西還是需要重新寫。功能里用到了局部更新，所有整理一下一路來實(shí)現(xiàn)局部更新的解決方案及改進(jìn)。我接觸的項(xiàng)目開發(fā)大多是以Asp.net WebForm開發(fā)的，自然會(huì)用到UpdatePa

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀.Net頁(yè)面局部更新引發(fā)的思考:最近在修改以前做的模塊，添加一個(gè)新功能。整理了下才發(fā)現(xiàn)重用率很低，大部分的東西還是需要重新寫。功能里用到了局部更新，所有整理一下一路來實(shí)現(xiàn)局部更新的解決方案及改進(jìn)。我接觸的項(xiàng)目開發(fā)大多是以Asp.net WebForm開發(fā)的，自然會(huì)用到UpdatePa

最近在修改以前做的模塊，添加一個(gè)新功能。整理了下才發(fā)現(xiàn)重用率很低，大部分的東西還是需要重新寫。功能里用到了局部更新，所有整理一下一路來實(shí)現(xiàn)局部更新的解決方案及改進(jìn)。

我接觸的項(xiàng)目開發(fā)大多是以Asp.net WebForm開發(fā)的，自然會(huì)用到UpdatePanel，好處就是開發(fā)快、方便，當(dāng)然產(chǎn)生的問題也是一大堆。然后是Ajax和一般處理程序配合實(shí)現(xiàn)異步請(qǐng)求更新。最后就是利用第三方綁定插件優(yōu)化Ajax請(qǐng)求。

一、UpdatePanel
將需要更新的模塊放入U(xiǎn)pdatePanel的ContentTemplate中，區(qū)域內(nèi)的回發(fā)將不會(huì)刷新整個(gè)頁(yè)面。并且響應(yīng)的內(nèi)容也僅僅是UpdatePanel里面更新的內(nèi)容
如：查詢

<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不需要寫任何異步請(qǐng)求的代碼就能實(shí)現(xiàn)局部更新，但性能會(huì)有一定的影響，并且靈活性、重用性不高。

2.Ajxa和一般處理程序
首先新建一個(gè)一般處理程序，接收查詢參數(shù)，返回查詢后的員工信息，默認(rèn)返回所有的信息。
如：查詢

使用Ajax查詢靈活性高，但html代碼的拼接有點(diǎn)煩，當(dāng)然有很多種方法可以改善。下面繼續(xù)介紹。

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'>沒有任何記錄，請(qǐng)改進(jìn)查詢條件</td></tr>";
 $("#ajaxtable").append(html);
 }
 else {
 alert(data.info);
 }
 },
 error: function (XMLHttpRequest, textStatus, errorThrown) {
 alert("網(wǎng)絡(luò)繁忙，請(qǐng)刷新頁(yè)面！");
 }
 });
 }

三、Avalonjs改善代碼拼接
Angularjs用得也比較多，但是太龐大了，所有找到一個(gè)比較適合一般開發(fā)的Avalonjs。
我之前在博問里問過這樣一個(gè)問題：有沒有jquery數(shù)據(jù)雙向綁定插件，有臟檢查的。只是和大家探討，我見過一個(gè)DataSet js插件，所有的數(shù)據(jù)以json的形式綁定的DataSet，DataSet本身實(shí)現(xiàn)臟檢查，其余控件都綁定相應(yīng)的DataSet的某個(gè)屬性。只要某個(gè)綁定控件值發(fā)生改變，就可以從DataSet中獲取僅僅改變的數(shù)據(jù)（而不是整個(gè)json）。回答的幾乎是Angularjs。其與的也都是基本的雙向綁定，所以臟檢查還是要自己實(shí)現(xiàn)。
使用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("網(wǎng)絡(luò)繁忙，請(qǐng)刷新頁(yè)面！");
 }
 });
 }
 });

最后回到臟檢查：如果把這個(gè)改進(jìn)成可編輯的表格，怎么去監(jiān)聽哪些行被修改，保存的時(shí)候不應(yīng)該提交整個(gè)表格數(shù)據(jù)，而應(yīng)該提交修改的行數(shù)據(jù)？