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刷新。