在一个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事件。