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

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

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

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

时间: 2016-06-14

asp.net中gridview的查询、分页、编辑更新、删除的实例代码

1.A,运行效果图 1.B,源代码/App_Data/sql-basic.sql 复制代码 代码如下: use mastergoif exists(select * from sysdatabases where name='db1')begin    drop database db1endgocreate database db1gouse db1go-- ================================-- ylb:1,类别表-- =====================

sql server中批量插入与更新两种解决方案分享(asp.net)

若只是需要大批量插入数据使用bcp是最好的,若同时需要插入.删除.更新建议使用SqlDataAdapter我测试过有很高的效率,一般情况下这两种就满足需求了 bcp方式 复制代码 代码如下: /// <summary> /// 大批量插入数据(2000每批次) /// 已采用整体事物控制 /// </summary> /// <param name="connString">数据库链接字符串</param> /// <param n

页面间隔半秒钟更新时间 Asp.net使用Comet开发http长连接示例分享

好处:1.和AJAX轮询比起来 节省资源,并且延迟小, 2.和webSocket比起来,适用的场景比较广泛. 1.先建立一个Asp.net MVC的空项目 添加一个控制器  (同样的代码在Asp.net WebForm中也是可以使用的) 复制代码 代码如下: public class CometController : Controller    {        public ActionResult Test()        {            Response.Buffer = f

用 Net 命令使局域网文件批量同步更新

现在大家都希望有个同步软件可以达到网络目录或者文件的更新来减少自己的工作量,现在网络上也有很多软件可以达到这个目的,象同步专家之类的,但是这些软件需要安装服务端和客户端,客户端要常驻才能使用,并且占用了一定的资源. 如下这个批处理利用net命令来进行文件和目录的同步更新.优点就是任何机器都可以做服务器和客户机,而且不占用任何资源.当然缺点也有就是写批处理有点烦^^. 我首先写出批处理,然后作详细的解释: 复制代码 代码如下: net use S: computer-01D  attrib -s 

asp.net 删除,更新数据库方法

复制代码 代码如下: '数据更新 Public Sub updateTable(ByVal StrSql As String) objCommand.CommandText = StrSql Try conSql.Open() Trans = conSql.BeginTransaction objCommand.Transaction = Trans objCommand.ExecuteNonQuery() Trans.Commit() Catch ese As Exception MsgBox

c#使用DotNetZip封装类操作zip文件(创建/读取/更新)实例

下载地址在这里:http://dotnetzip.codeplex.com/ 下载到的包里有很多个dll文件,一般引用Ionic.Zip.dll就可以: 然后引用这个命名空间: using Ionic.Zip; 以下是我自己封装的一个类: 复制代码 代码如下: /// <summary>    /// Zip操作基于 DotNetZip 的封装    /// </summary>    public static class ZipUtils    {        /// <

asp.net 用户在线退出更新实现代码

最主要的问题是关闭浏览器的时候如何更新用户在线列表 网上流传的方法是不停的ajax异步发送请求,当不再请求的时候就可以判断用户已经关闭浏览器 复制代码 代码如下: var x=0; function myRefresh() { var httpRequest = new ActiveXObject("microsoft.xmlhttp"); httpRequest.open("GET", "test.aspx", false); httpRequ

asp.net 使用驻留在页面中的Cache缓存常用可定时更新的数据

就是希望让Web应用程序从一开始运行到结束都一直存在,有人就说为什么不用Application呢?其实Cache是可以一段时间内自动更新数据的,而Application就无法做成这样的,另外Application在Web这种高并发的系统中一定要考虑线程安全的问题,Application本身就不是线程安全的,而Cache就是线程安全.所以一般我都会在很多对象中我只从Web开始运行的时候从数据库或文件里获取一次数据,在不同的页面中,都是使用Cache的,而且Cache中的数据可能弄成自动更新的,所以

Asp.net生成Excel文件并下载(更新:解决使用迅雷下载页面而不是文件的问题)

这里采用的是在服务端先生成Excel文件,然后利用文件地址下载的方法. 生成Excel文件的方法,见:[原].Net创建Excel文件(插入数据.修改格式.生成图表)的方法 先试用Response.WriteFile的方法: 复制代码 代码如下: FileInfo fi = new FileInfo(excelFile);//excelFile为文件在服务器上的地址 HttpResponse contextResponse = HttpContext.Current.Response; cont

asp.net生成Excel并导出下载五种实现方法

方法一 通过GridView(简评:方法比较简单,但是只适合生成格式简单的Excel,且无法保留VBA代码),页面无刷新 aspx.cs部分 复制代码 代码如下: using System; using System.Collections; using System.Configuration; using System.Data; using System.Web; using System.Web.Security; using System.Web.UI; using System.We

asp.net导出Excel乱码的原因及解决方法

复制代码 代码如下: protected void Excel_Click(object sender, EventArgs e) { Response.Charset = "UTF-8"; Response.ClearContent(); Response.Clear(); Response.ContentEncoding = System.Text.Encoding.UTF8; Response.HeaderEncoding = System.Text.Encoding.UTF8;

asp.net导出Excel显示中文乱码的解决方法

复制代码 代码如下: protected void btnExcel_Click(object sender, EventArgs e)    {        List<bUFlow.Model.orderhistory> orderlist = dal.GetOrderList2("");        string filename = "3g流量网龄升级计划用户表";        string name1 = filename;       

ASP+模板生成Word、Excel、html的代码第1/2页

大多数都是采用Excel.Application(http://www.blueidea.com/tech/program/2006/3547.asp)组件来生成发现容易出错,而且对于大多数和我一样的菜鸟来说,比较麻烦,考虑到前些天用ASP+模板+adodb.stream生成静态页面的办法,经过多次尝试,终于掌握了一种用ASP+模板生成Excel和word的新的办法,先分享如下: 用模板生成Excel.Word最大优点: Word.Excel文档样式易于控制和调整,以往用Excel.Applic

解决django 多个APP时 static文件的问题

每个APP下都有自己的static文件夹,那如何设置将不会混用呢 以下是实例(我项目里有两个APP(login 和main)) 1.首先在setting 文件修改配置路径 STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, "MGStudio", "static"), os.path.join(BASE_DIR, "main", "static"

Asp.net MVC实现生成Excel并下载功能

本文实例为大家分享了Asp.net MVC实现生成Excel并下载的具体代码,供大家参考,具体内容如下 由于项目上的需求,需要导出指定条件的Excel文件.经过一翻折腾终于实现了. 现在把代码贴出来分享 (直接把我们项目里面的一部份辅助类的代码分享一下) 我们项目使用的是Asp.Net MVC4.0模式. 每个ActionResult必然会返回一个View或Json等(View或Json中的参数都是object类型的) 所以我们需要一个公共类来统一定义操作的"成功或失败"的状态或返回操

php生成excel文件的简单方法

生成excel 当然使用的是 phpExcel这个类库了,可是它太麻烦了,对于只要简单生成来说有点不值得 什么叫简单,把数据库的数据导入到excel就行了, 这个就是简单了 下面看一段代码(代码来自网络) 注意要双引号的字符串 复制代码 代码如下: <?php header("Content-type:application/vnd.ms-excel"); header("Content-Disposition:filename=test.xls"); ech

ASP.NET之Excel下载模板、导入、导出操作

本文介绍了ASP.NET下Excel下载模板.导入.导出操作,供大家参考,具体内容如下 1.下载模板功能 protected void btnDownload_Click(object sender, EventArgs e) { var path = Server.MapPath(("upfiles\\") + "test.xlt"); //upfiles-文件夹 test.xlt-文件 var name = "test.xlt"; try {

Python使用tablib生成excel文件的简单实现方法

本文实例讲述了Python使用tablib生成excel文件的方法.分享给大家供大家参考,具体如下: import tablib headers = ('lie1', 'lie2', 'lie3', 'lie4', 'lie5') mylist = [('23','23','34','23','34'),('sadf','23','sdf','23','fsad')] mylist = tablib.Dataset(*mylist, headers=headers) with open('exc