最近在修改以前做的模塊，添加一個新功能。整理了下才發(fā)現(xiàn)重用率很低，大部分的東西還是需要重新寫。功能里用到了局部更新，所有整理一下一路來實現(xiàn)局部更新的解決方案及改進。
我接觸的項目開發(fā)大多是以Asp.net WebForm開發(fā)的，自然會用到UpdatePanel，好處就是開發(fā)快、方便，當然產(chǎn)生的問題也是一大堆。然后是Ajax和一般處理程序配合實現(xiàn)異步請求更新。最后就是利用第三方綁定插件優(yōu)化Ajax請求。
一、UpdatePanel
將需要更新的模塊放入UpdatePanel的ContentTemplate中，區(qū)域內(nèi)的回發(fā)將不會刷新整個頁面。并且響應(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>nbsp;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不需要寫任何異步請求的代碼就能實現(xiàn)局部更新，但性能會有一定的影響，并且靈活性、重用性不高。
2.Ajxa和一般處理程序
首先新建一個一般處理程序，接收查詢參數(shù)，返回查詢后的員工信息，默認返回所有的信息。
如：查詢
p>
使用Ajax查詢靈活性高，但html代碼的拼接有點煩，當然有很多種方法可以改善。下面繼續(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'>沒有任何記錄，請改進查詢條件/td>/tr>";
$("#ajaxtable").append(html);
}
else {
alert(data.info);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("網(wǎng)絡(luò)繁忙，請刷新頁面！");
}
});
}
三、Avalonjs改善代碼拼接
Angularjs用得也比較多，但是太龐大了，所有找到一個比較適合一般開發(fā)的Avalonjs。
我之前在博問里問過這樣一個問題：有沒有jquery數(shù)據(jù)雙向綁定插件，有臟檢查的。只是和大家探討，我見過一個DataSet js插件，所有的數(shù)據(jù)以json的形式綁定的DataSet，DataSet本身實現(xiàn)臟檢查，其余控件都綁定相應(yīng)的DataSet的某個屬性。只要某個綁定控件值發(fā)生改變，就可以從DataSet中獲取僅僅改變的數(shù)據(jù)（而不是整個json）。回答的幾乎是Angularjs。其與的也都是基本的雙向綁定，所以臟檢查還是要自己實現(xiàn)。
使用Avalonjs首先引入js文件，然后定義controller
如：查詢
div ms-controller="avalonCtrl">
div style="margin: 8px 0px;">
input type="text" class="form-control" ms-duplex="key" />
nbsp;
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ò)繁忙，請刷新頁面！");
}
});
}
});
最后回到臟檢查：如果把這個改進成可編輯的表格，怎么去監(jiān)聽哪些行被修改，保存的時候不應(yīng)該提交整個表格數(shù)據(jù)，而應(yīng)該提交修改的行數(shù)據(jù)？
本文代碼：下載
本文地址：http://www.cnblogs.com/liuxiaobo93/p/5593393.html
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- 用 Net 命令使局域網(wǎng)文件批量同步更新
- asp.net 刪除，更新數(shù)據(jù)庫方法
- asp.net 使用駐留在頁面中的Cache緩存常用可定時更新的數(shù)據(jù)
- asp.net 用戶在線退出更新實現(xiàn)代碼
- Asp.net生成Excel文件并下載（更新：解決使用迅雷下載頁面而不是文件的問題）
- sql server中批量插入與更新兩種解決方案分享(asp.net)
- asp.net中g(shù)ridview的查詢、分頁、編輯更新、刪除的實例代碼
- c#使用DotNetZip封裝類操作zip文件(創(chuàng)建/讀取/更新)實例
- 頁面間隔半秒鐘更新時間 Asp.net使用Comet開發(fā)http長連接示例分享
