.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("网络繁忙,请刷新页面!"); } }); } });
最后回到脏检查:如果把这个改进成可编辑的表格,怎么去监听哪些行被修改,保存的时候不应该提交整个表格数据,而应该提交修改的行数据?
本文代码:下载
本文地址:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
.Net页面局部更新引发的思考
-
Vue.set() this.$set()引发的视图更新思考及注意事项
-
小米路由器引发的网站建设404页面思考
-
创建基于ASP.NET core 3.1 的RazorPagesMovie项目(三)-已搭建基架的Razor页面解释和更新
-
Vue.set() this.$set()引发的视图更新思考及注意事项
-
Vue.set() this.$set()引发的视图更新思考
-
angular实现页面打印局部功能的思考与方法
-
有关.NET参数传递的方式引发的思考
-
小米路由器引发的网站建设404页面思考
-
创建基于ASP.NET core 3.1 的RazorPagesMovie项目(三)-已搭建基架的Razor页面解释和更新