在一個CommandField中為刪除按鈕設定OnClientClick屬性

 

在一個CommandField中為刪除按鈕設定OnClientClick屬性

在模板中直接使用Button，LinkButton，或者ImageButton的時候，可以直接為它的OnClientClick屬性設定確認視窗並返回confirm(string) JavaScript的傳回值。然而，CommandField是在GridView或者DetailsView上內建的一些刪除按鈕，而且它們本身不具有OnClientClick屬性可以設定聲明。相反，我們必須要在處理GridView或者DetailsView，它們適當的DataBound事件的代碼中，引用這個刪除按鈕，然後在那裡設定它的OnClientClick屬性。

 注意：
當我們在適當的DataBound事件處理器中設定刪除按鈕的OnClientClick屬性時候，我們已經有許可權訪問當前繫結資料。這意味著我們可以擴充確認資訊，並包含具體記錄的詳細資料，比如，“你確定要刪除這個Chai產品嗎?“這些定製也可以在模板的資料繫結的文法中實現。

 為了實踐在一個CommandField中設定刪除按鈕的OnClientClick屬性，我們在頁面上添加一個GridView。配置這個GridView使用FormView一樣的ObjectDataSource控制項。同時，限制GridView的BoundFields屬性只包括產品名稱，分類和供應商。最後，在GridView的屬性視窗中勾上Enable Deleting的多選框。這樣會在GridView的ColumnCollection的集合中添加一列CommandField，並且它的ShowDeleteButton屬性會設定成true。

 做了這些改變後，你的GridView的聲明標記應該如下所示：

 

 1<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
 2
 3    DataSourceID="ObjectDataSource1" EnableViewState="False">
 4
 5    <Columns>
 6
 7        <asp:CommandField ShowDeleteButton="True" />
 8
 9        <asp:BoundField DataField="ProductName" HeaderText="Product" SortExpression="ProductName" />
10
11        <asp:BoundField DataField="CategoryName" HeaderText="Category" ReadOnly="True" SortExpression="CategoryName" />
12
13        <asp:BoundField DataField="SupplierName" HeaderText="Supplier" ReadOnly="True" SortExpression="SupplierName" />
14
15    </Columns>
16
17</asp:GridView>
18

 

 
這個CommandField包含一個刪除LinkButton執行個體，並且可以在GridView的RowDataBound事件處理器中被訪問。一旦被引用，我們就可以相應地設定它的OnClientClick屬性。通過下面的代碼來建立一個RowDataBound事件的處理器：

 

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

    if (e.Row.RowType == DataControlRowType.DataRow)

    {

        // reference the Delete LinkButton

        LinkButton db = (LinkButton)e.Row.Cells[0].Controls[0];

 

        // Get information about the product bound to the row

        Northwind.ProductsRow product = (Northwind.ProductsRow) ((System.Data.DataRowView) e.Row.DataItem).Row;

 

        db.OnClientClick = string.Format("return confirm('Are you certain you want to delete the {0} product?');", 

        product.ProductName.Replace("'", @"\'"));

    }

}

 

 

這個事件處理器將在代碼中綁定資料和引用刪除按鈕的時候被調用。總的來說，使用了以下模式：

 

ButtonType obj = (ButtonType) e.Row.Cells[commandFieldIndex].Controls[controlIndex];

 

ButtonType是被CommandField使用的一種按鈕類型，可以是Button，LinkButton，或者ImageButton。預設情況下，CommandField使用LinkButton，但也可以通過CommandField的ButtonType屬性來定製。CommandFieldIndex是CommandField在GridView中Columns集合中的原始索引，而controlIndex是刪除按鈕在CommandField的Controls集合中的索引。controlIndex的值由按鈕在CommandField中和其他按鈕的相對位置決定。例如，如果在CommandField中只有一個刪除按鈕，那麼它的索引就是0。然而，如果在刪除按鈕前面還有一個編輯按鈕，那麼索引值是2。因為在刪除按鈕前面有兩個控制項，一個是編輯按鈕，另一個是LiteralControl，用來隔離編輯按鈕和刪除按鈕。

 在我們的例子中，CommandField使用了LinkButton，在最左端，commandFieldIndex的值是0。因為除了刪除按鈕，沒有其他控制項，所以controlIndex的值也為0。

 在引用了CommandField中的刪除按鈕之後，我們接下來可以獲得GridView當前資料列的一些產品資訊。最後，我們為刪除按鈕設定了OnClientClick屬性的JavaScript值，其中包含了產品的名稱。因為我們用單引號標記了傳入confirm(string)的字串參數，對於產品的名稱我們必須要過濾可能出現在其中的單引號。具體來說，我們可以把產品名稱中含有的單引號轉義成，“\’“。

 做完這些改變之後，點擊GridView中的刪除按鈕，可以顯示一個定製後的確認資訊（見圖4）。如果使用者點擊彈出的確認視窗中的取消，回傳將會被取消，從而阻止了刪除操作發生。

 注意：
我們同樣可以在代碼中對DetailsView的CommandField使用這種技術。然而對於DetailsView，你需要為DataBound事件提供一個處理器，因為它沒有RowDataBound事件。