.Net页面局部更新引发的思考

 更新时间:2016年06月17日 12:50:43   转载 作者:波谷  
这篇文章主要是由.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>&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不需要写任何异步请求的代码就能实现局部更新,但性能会有一定的影响,并且灵活性、重用性不高。

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" />
  &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("网络繁忙,请刷新页面!");
   }
  });
  }
 }); 

最后回到脏检查:如果把这个改进成可编辑的表格,怎么去监听哪些行被修改,保存的时候不应该提交整个表格数据,而应该提交修改的行数据?

本文代码:下载
 本文地址:http://www.cnblogs.com/liuxiaobo93/p/5593393.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • C#反射的一些应用

    C#反射的一些应用

    初始听说反射是可以动态的调用程序集,并从中来获取相应的方法和属性,感觉比较神奇,,,
    2013-02-02
  • 如何在网站级别动态更改主题

    如何在网站级别动态更改主题

    如何在网站级别动态更改主题...
    2007-04-04
  • asp.net身份验证方式介绍

    asp.net身份验证方式介绍

    asp.net提供了3种认证方式: windows身份验证, Forms验证和Passport验证
    2012-06-06
  • ASP.NET操作Excel备忘录

    ASP.NET操作Excel备忘录

    ASP.NET下操作Excel的一些技巧分析,需要的朋友可以参考下。
    2010-01-01
  • ASP.NET Core 3.0 gRPC拦截器的使用

    ASP.NET Core 3.0 gRPC拦截器的使用

    这篇文章主要介绍了ASP.NET Core 3.0 gRPC拦截器的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • VS2008无法直接查看STL值的解决方法

    VS2008无法直接查看STL值的解决方法

    这篇文章主要为大家详细介绍了VS2008无法直接查看STL值的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 动态加载Js代码到Head标签中的脚本

    动态加载Js代码到Head标签中的脚本

    我遇到了这样的问题,请教google,结果大多数只是介绍那个注册js的几个函数,而这几个函数插入的js都在body里面,幸而在老外那里看到了这个代码,其实比较简单,但够有用
    2009-01-01
  • C#默认以管理员身份运行程序实现代码

    C#默认以管理员身份运行程序实现代码

    权限不够,导致无法修改系统时间,于是我以管理员身份运行了一次,结果测试成功,下面为大家介绍下C#如何默认以管理员身份运行程序
    2014-03-03
  • asp.net DataGrid 中文字符排序的实现代码

    asp.net DataGrid 中文字符排序的实现代码

    在论坛上看到有位朋友希望对中文按拼音进行排序,刚好最近有点空,贴一份原来一个同事写的一个排序类,仅稍微改动了下下,拿出来分享下.
    2009-09-09
  • VS2010中呈现控件时出错的解决方法

    VS2010中呈现控件时出错的解决方法

    如何解决“呈现控件时出错”的问题,这篇文章主要介绍了VS2010中出现"呈现控件时出错"问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论