書名：決戰.NET
作者名：黃忠成
本章字數： 8字
更新時間： 2018-12-27 16:56:03

第5章ASP.NET AJAX實戰篇

5.1 無刷新的數據編輯

有了UpdatePanel控件的強力支持，要結合GridView及DetailsView控件做出無刷新的數據編輯網頁就成了小菜一碟。請照著以下步驟做。

1. 新增一個Web Site，命名為AdvAjaxDemo。

2. 新增一個網頁，命名為NoRefreshEdit.aspx。

3. 在頁面中放入一個ScriptManager控件。

4. 在網頁源碼中鍵入程序5-1的程序代碼。

5. 切換回設計頁面，在Table的第一個Cell中放入一個UpdatePanel控件，命名為UpdatePanel1，UpdateMode設為Conditional。

6. 在UpdatePanel1控件中放入一個SqlDataSoruce控件，命名為SqlDataSource1，配置其聯結至Northwind數據庫的Customers數據表，選取CustomerID、CompanyName、ContactName、ContactTitle字段。

7. 在UpdatePanel1控件中放入一個GridView控件，命名為GridView1，將DataSourceID設為SqlDataSource1，勾選“Enable Paging”及“Enable Selecting”等選項。

8. 在Table的第二個Cell中放入一個UpdatePanel控件，命名為UpdatePanel2，UpdateMode設為Conditional。

9. 在UpdatePanel2控件中放入一個SqlDataSource控件，命名為SqlDataSource2，配置其聯結至Northwind數據庫的Customers數據表，選取所有字段，并啟用編輯功能。

10. 添加WHERE條件式至SqlDataSource2控件，如圖5-1所示。

圖5-1

11. 完成SqlDataSource2 控件的配置，點擊SelectQuery屬性修改參數值來源，如圖5-2 所示。

圖5-2

12. 放一個DetailsView控件至UpdatePanel2控件中，命名為DetailsView1，將DataSourceID設為SqlDataSource2，將Enable Inserting、Enable Editing、Enable Deleteing等選項打勾。

13. 點擊UpdatePanel2控件的Triggers屬性，添加一個Trigger，ControlID為GridView1、EventName為SelectedIndexChanged。

14. 在UpdatePanel2控件的Triggers屬性再添加一個Trigger，ControlID為GridView1、EventName為PageIndexChanged。

15. 整個完整的.aspx程序代碼見程序5-2。

程序5-1

    Samples\5\AdvAjaxDemo\NoRefreshEdit.aspx
    <%@ Page Language="C#" AutoEventWireup="true"
      CodeFile="NoRefreshEdit.aspx.cs"
      Inherits="NoRefreshEdit" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <table>
            <tr>
            <td valign=top>
            </td>
            <td valign=top>
            </td>
            </tr>
            </table>
        </div>
        </form>
    </body>
    </html>

運行程序后，一個無刷新的數據編輯頁面就呈現在你眼前，如圖5-3所示。

圖5-3

不過這個網頁有個問題，當你編輯了某筆數據后，會立即發現所編輯的數據并未立即反饋到GridView上，如圖5-4所示。

圖5-4

事實上，數據庫中的數據確實已經更新完成，只要切換GridView控件的頁次，或者重載網頁，便可看到更新后的數據。讀者們可能會以為，產生這種現象的癥結點在于DetailsView將數據更新后，UpdatePanel1控件并未被刷新，所以只要將DetailsView設定為UpdatePanel1的Trigger即可解決此問題，但事實并非如此簡單，即使將DetailsView的ItemDeleted、ItemInserted、ItemUpdated設為UpdatePanel1控件的Trigger也不能解決此問題，那問題出在哪？又該如何解決呢？問題有兩個，第一DetailsView控件并非UpdatePanel1的Trigger，所以它的任何動作都不會刷新UpdatePanel1控件。第二即使DetailsView控件成為UpdatePanel1控件的Trigger，它的動作可以導致UpdatePanel1控件刷新，UpdatePanel1控件于刷新時也會因為GridView1控件沒有重新綁定SqlDataSource1，而持續顯示上一次的列表。明白這兩個問題的起源后，便可整理出一個解法：① DetailsView控件的新增、修改、刪除動作必須要能同時刷新UpdatePanel1，② DetailsView的新增、修改、刪除動作于刷新UpdatePanel1時，必須強制GridView1重新綁定SqlDataSource1，由數據庫中取得最新數據。實際操作的方式就是在DetailsView的ItemDeleted、ItemUpdated、ItemInserted事件中，對GridView1下達DataBind指令，接著通過UpdatePanel1的Update函數來要求UpdatePanel1刷新。

程序5-2

    Samples\5\AdvAjaxDemo\NoRefreshEdit.aspx.cs
    protected void DetailsView1_ItemUpdated(object sender,
      DetailsViewUpdatedEventArgs e)
    {
          GridView1.DataBind();
          UpdatePanel1.Update();
    }
    protected void DetailsView1_ItemDeleted(object sender,
        DetailsViewDeletedEventArgs e)
    {
        GridView1.DataBind();
        UpdatePanel1.Update();
    }
    protected void DetailsView1_ItemInserted(object sender,
        DetailsViewInsertedEventArgs e)
    {
        GridView1.DataBind();
        UpdatePanel1.Update();
    }

當UpdatePanel控件的UpdateMode屬性為Conditional時，除了可通過Triggers中的設定來要求其何時刷新外，設計師也可以直接于程序代碼中調用其Update函數來要求該UpdatePanel刷新。完成后重新運行程序，一切就能正常運作了。

官术网_书友最值得收藏!

決戰.NET

第5章ASP.NET AJAX實戰篇

5.1 無刷新的數據編輯