做了这些变化之后,我们已经有了一个功能完善的页面,可以允许用户显示每个产品,以及通过简单地点击按钮来删除某个产品。图2显示了在浏览器中访问我们上面所完成的例子的截图。
图2:FormView控件显示一个产品
第二步:在删除按钮的客户端onclick事件中调用confirm(string)方法
在创建FormView之后,最后的步骤是配置这个删除按钮,使得用户点击它的时候,JavaScript的confirm(string)方法会被调用。可以通过使用OnClientClick这个属性来为Button,LinkButton,ImageButton的客户端onclick事件添加客户端脚本,这个属性是ASP.NET 2.0新引入的。因为我们想让confirm(string)方法有返回值,可以简单地设置属性值为:return confirm(‘你确定要删除这个产品吗?')。
修改之后这个删除按钮的声明语法应该如下所述:3给出了这个提示操作的截图。点击这个删除按钮激活确认窗口的显示。如果用户选择取消,回传将被取消,产品也不会被删除。相反,用户选择确定,回传继续,ObjectDataSource的Delete()方法被调用,最后数据库中相应的记录也会被删除。
<asp:LinkButton runat="server" CausesValidation="False" CommandName="Delete" Text="Delete" OnClientClick="return confirm('Are you certain you want to delete this product?');"> </asp:LinkButton>
仅仅只需要这么多!
注意:传入confirm(string) JavaScript方法的字符串用单引号进行标记(而不是双引号)。在JavaScript中,标记字符串可以是单引号也可以是双引号。我们这里使用单引号是为了确保不影响OnClientClick这个属性本身的双引号标记。
图3:当点击删除按钮时候显示一个确认窗口
第三步:在一个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的声明标记应该如下所示:
<asp:GridView runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"> <Columns> <asp:CommandField ShowDeleteButton="True" /> <asp:BoundField DataField="ProductName" HeaderText="Product" SortExpression="ProductName" /> <asp:BoundField DataField="CategoryName" HeaderText="Category" ReadOnly="True" SortExpression="CategoryName" /> <asp:BoundField DataField="SupplierName" HeaderText="Supplier" ReadOnly="True" SortExpression="SupplierName" /> </Columns> </asp:GridView>
这个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("'", @"\'")); } }