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分别是SelectedIndexChanged和PageIndexChanged，也就是说，当GridView1选择行和页码改变后，都会发生Updatepanel2的刷新，同时DetailsView1也会显示出来。

         页面布局到此，下面看一下cs代码：

 1public partial class NoRefreshEdit : System.Web.UI.Page
 2{
 3    protected void Page_Load(object sender, EventArgs e)
 4    {
 5
 6    }
 7    protected void DetailsView1_ItemDeleted(object sender, DetailsViewDeletedEventArgs e)
 8    {
 9        GridView1.DataBind();
10        UpdatePanel1.Update();
11    }
12    protected void DetailsView1_ItemInserted(object sender, DetailsViewInsertedEventArgs e)
13    {
14        GridView1.DataBind();
15        UpdatePanel1.Update();
16    }
17    protected void DetailsView1_ItemUpdated(object sender, DetailsViewUpdatedEventArgs e)
18    {
19        GridView1.DataBind();
20        UpdatePanel1.Update();
21    }
22}
23

     那什么要编写这两行的代码，原因有二：1.DetailsView1并非是Updatepanel1的Triggers，所以它的任何动作不会刷新Updatepanel1控件，2.即使DetailsView1成为了Updatepanel1的Triggers，它的动作可以导致Updatepanel1的刷新，Updatepanel1刷新时也会因为GridView1控件没有重新绑定sqldatasource1，而持续显示上一次的列表。所以我们要同时让Updatepanel1刷新，也要让GridView1重新绑定。

     当Updatepanel的UpdateMode改为conditional时，除了可以使用Triggers中设定来要求何时刷新外，还可以直接于程序代码中调用其update函数来要求该Updatepanel刷新。

ASP.net中的AJAX学习记录六 无刷新的数据编辑（GridView和DetailsView结合实例）（转）,古老的榕树,5-wow.com