ASP.net中的AJAX学习记录六 无刷新的数据编辑(GridView和DetailsView结合实例)

简介:
本篇博客是仿照书中实例,实现 GridView和DetailsView结合无刷新的数据编辑效果,页面效果:当点击GridView1的行或换页时,都会引发 DetailsView1的数据绑定显示至页面,同时当使用DetailsView1编辑、删除、添加时,也会引起GridView1的重新绑定,整体页面实现无刷新。
         页面布局:
        1.新建AJAX窗口,命名为:“ NoRefreshEdit.aspx”。要想实现页面无刷新编辑,就必须使用两个Updatepanel。
        2.在 NoRefreshEdit.aspx页面中加入一个一行二列的表,分别在每个单元格中放入一个Updatepanel。
        3.在Updatepanel1中加入一个表,最好加入一个数据数较多的表,方便你体会换页的刷新效果,我使用的是 tb_info表,按照我习惯的做法,直接将它拖入到Updatepanel1中,自动生成绑定好的GridView1和sqldatasource1.开启GridView1中的选择、分页功能。
        4.在Updatepanel2中放置一个sqldatasource2,将sqldatasource2的连接字符串也绑定到 tb_info表上,开始配置sqldatasource2。单击“高级”按钮,选中生成Insert、Update、Delete语句,单击“where”按钮,将ID绑定为GridView1的 SelectedValue事件触发的id值。
        5.拖放一个DetailsView1放入Updatepanel2中,将DetailsView1的数据源配置为sqldatasource2,启动编辑、删除、插入功能。
        6.将Updatepanel1的UpdateMode属性改为:conditional;将Updatepanel2的UpdateMode属性也改为conditional,同时在Updatepanel2的Triggers中加入两个Async-Postback,ControlID都是GridView1,Eventname分别是 SelectedIndexChangedPageIndexChanged,也就是说,当GridView1选择行和页码改变后,都会发生Updatepanel2的刷新,同时DetailsView1也会显示出来。
         页面布局到此,下面看一下cs代码:
1public partial  class NoRefreshEdit : System.Web.UI.Page 
2{ 
void Page_Load() void Page_Load(object sender, EventArgs e) 
4        { 

6        } 
void DetailsView1_ItemDeleted() void DetailsView1_ItemDeleted(object sender, DetailsViewDeletedEventArgs e) 
8        { 
9                GridView1.DataBind(); 
10                UpdatePanel1.Update(); 
11        } 
void DetailsView1_ItemInserted() void DetailsView1_ItemInserted(object sender, DetailsViewInsertedEventArgs e) 
13        { 
14                GridView1.DataBind(); 
15                UpdatePanel1.Update(); 
16        } 
void DetailsView1_ItemUpdated() void DetailsView1_ItemUpdated(object sender, DetailsViewUpdatedEventArgs e) 
18        { 
19                GridView1.DataBind(); 
20                UpdatePanel1.Update(); 
21        } 
22}
     那什么要编写这两行的代码,原因有二:1.DetailsView1并非是Updatepanel1的Triggers,所以它的任何动作不会刷新Updatepanel1控件,2.即使DetailsView1成为了Updatepanel1的Triggers,它的动作可以导致Updatepanel1的刷新,Updatepanel1刷新时也会因为GridView1控件没有重新绑定sqldatasource1,而持续显示上一次的列表。所以我们要同时让Updatepanel1刷新,也要让GridView1重新绑定。
     当Updatepanel的UpdateMode改为conditional时,除了可以使用Triggers中设定来要求何时刷新外,还可以直接于程序代码中调用其update函数来要求该Updatepanel刷新。
本文转自叶子文文博客51CTO博客,原文链接http://blog.51cto.com/leafwf/185629如需转载请自行联系原作者

叶子文文
相关文章
|
2月前
mvc.net分页查询案例——DLL数据访问层(HouseDLL.cs)
mvc.net分页查询案例——DLL数据访问层(HouseDLL.cs)
|
2月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
29 1
|
2月前
|
JSON 前端开发 JavaScript
Ajax 学习总结
这是一个关于Ajax学习的总结,包括导入Ajax包、异步请求和表单验证。示例展示了如何使用jQuery进行Ajax请求,从后台获取并显示数据,同时提到了Json乱码问题的解决方法和表单数据的前后端交互。还给出了表单验证的简单示例,通过Ajax实时校验用户名。
34 2
|
2月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
39 3
|
2月前
|
开发框架 缓存 前端开发
安装ASP.NET AJAX (一安装)
安装ASP.NET AJAX (一安装)
41 0
|
2月前
|
存储 测试技术 计算机视觉
高维数据惩罚回归方法:主成分回归PCR、岭回归、lasso、弹性网络elastic net分析基因数据
高维数据惩罚回归方法:主成分回归PCR、岭回归、lasso、弹性网络elastic net分析基因数据
|
2月前
|
XML 开发框架 前端开发
Ajax学习(基础知识)
Ajax学习(基础知识)
|
2月前
|
XML 开发框架 .NET
C# .NET面试系列八:ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分:ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET(通用语言运行时): ```c# 定义:.NET 是一个软件开发框架,提供了一个通用的运行时环境,用于在不同的编程语言中执行代码。 作用:它为多语言支持提供了一个统一的平台,允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库(BCL)和其他工具。 ``` C#(C Sharp): ```c# 定义: C# 是一种由微软设计的面向对象的编程语言,专门为.NET 平台开发而创建。 作
228 2
|
2月前
|
SQL 数据库
使用ADO.NET查询和操作数据
使用ADO.NET查询和操作数据