Scott Mitchell 的ASP.NET 2.0数据教程之二十二：为删除数据添加客户端确认

在ASP.NET 2.0中操作数据：：为删除数据添加客户端确认
英文原版 | 本教程的代码(C#) | 翻译目录 | 原文目录

导言

在前面一些教程中，我们已经看到如何使用应用程序框架，ObjectDataSource，以及那些提供增、改、删功能的数据Web控件。在我们已经实现的删除数据的界面中，包含一个删除按钮，当点击它的时候，会导致数据回传以及调用ObjectDataSource的Delete()方法。然后Delete()方法会调用对应业务逻辑层中的方法，再进入数据访问层，直至调用最终操作数据库的DELETE语句。

虽然这个界面已经能够让用户通过GridView，DetailsView，或者FormView控件来删除记录，但是在用户点击删除按钮的时候，它缺少一些提示信息。如果用户本想点击编辑按钮，但是不小心点击了删除按钮，那么原本会更新的记录将会被删除。为了避免此类事情发生，在这篇教程里面，我们将为点击删除按钮的时候，添加一个能在客户端显示提醒的窗口。

JavaScript的confirm(string)方法将在一个模式窗口中显示那些作为string参数传进来的文本，这个窗口将会显示两个按钮－确定(OK)和取消(Cancel)。（见图1）confirm(string)方法将根据点击不同的按钮来返回一个布尔类型值。（返回true，如果点击了确定(OK)，返回false如果点击了取消(Cancel)）

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DeleteMethod="DeleteProduct"
2
3 OldValuesParameterFormatString="original_{0}" SelectMethod="GetProducts" TypeName="ProductsBLL">
4
5 <DeleteParameters>
6
7 <asp:Parameter Name="productID" Type="Int32" />
8
9 </DeleteParameters>
10
11</asp:ObjectDataSource>
12

因为在我们前面的例子中没有使用到optimistic concurrency，可以把OldValuesParameterFormatString属性删掉。

因为这个FormView已经被绑定到一个仅仅支持删除的ObjectDataSource控件，在ItemTemplate中我们只要提供删除按钮，而不需要新建和更新按钮。而在FormView的声明标记中，可以删掉我们不再需要的EditItemTemplate以及InsertItemTemplate。稍微花点时间定制一下ItemTemplate以便只显示一组产品属性。我已经定制好了，用<h3>样式显示产品的名字作为标题，接下来是供应商和分类的名字（以及删除按钮）。

1<asp:FormView ID="FormView1" runat="server" AllowPaging="True" DataKeyNames="ProductID"
2
3 DataSourceID="ObjectDataSource1" EnableViewState="False">
4
5 <ItemTemplate>
6
7 <h3><i><%# Eval("ProductName") %></i></h3>
8
9 <b>Category:</b>
10
11 <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>'>
12
13 </asp:Label><br />
14
15 <b>Supplier:</b>
16
17 <asp:Label ID="SupplierNameLabel" runat="server" Text='<%# Eval("SupplierName") %>'>
18
19 </asp:Label><br />
20
21 <asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" CommandName="Delete"
22
23 Text="Delete">
24
25 </asp:LinkButton>
26
27 </ItemTemplate>
28
29</asp:FormView>
30
31

做了这些变化之后，我们已经有了一个功能完善的页面，可以允许用户显示每个产品，以及通过简单地点击按钮来删除某个产品。图2显示了在浏览器中访问我们上面所完成的例子的截图。

<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete" OnClientClick="return confirm('Are you certain that you want to delete this product?');">

</asp:LinkButton>

仅仅只需要这么多！图3给出了这个提示操作的截图。点击这个删除按钮激活确认窗口的显示。如果用户选择取消，回传将被取消，产品也不会被删除。相反，用户选择确定，回传继续，ObjectDataSource的Delete()方法被调用，最后数据库中相应的记录也会被删除。

注意：
传入confirm(string) JavaScript方法的字符串用单引号进行标记（而不是双引号）。在JavaScript中，标记字符串可以是单引号也可以是双引号。我们这里使用单引号是为了确保不影响OnClientClick这个属性本身的双引号标记。

<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)

这个事件处理器将在代码中绑定数据和引用删除按钮的时候被调用。总的来说，使用了以下模式：

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事件。

ButtonType obj = (ButtonType) e.Row.FindControl("controlID");

controlID是按钮ID的属性值，虽然这种办法仍然需要硬编码类型的转换，但是不再需要索引，可以改变界面而不再出现运行错误。

总结

JavaScript的confirm(stirng)方法在表单递交过程中是一个经常使用的技术。当执行的时候，这个方法会显示一个模式的，客户端的窗口，包含两个按钮，一个OK（确定）一个Cancel（取消）。如果用户点击了OK（确定），confirm(string)方法会返回true，否则返回false。这种功能，以及在表单递交的事件处理器中返回false会导致浏览器取消表单提交的功能，可以用来在删除一条记录的时候的显示一个确认窗口。

通过设置按钮控件的OnClientClick属性，可以使得这个confirm(string)方法和按钮控件的客户端onclick事件处理器相结合。当在模版中使用删除按钮的时候－或者在一个FormView的模版中，又或者一个TemplateField在DetailsView或GridView中－正如我们在教程中看到的一样，我们可以显示声明访问它或者在代码中访问它。

祝编程快乐!

作者简介

Scott Mitchell，著有六本ASP/ASP.NET方面的书，是4GuysFromRolla.com的创始人，自1998年以来一直应用 微软Web技术。Scott是个独立的技术咨询顾问，培训师，作家，最近完成了将由Sams出版社出版的新作，24小时内精通ASP.NET 2.0。他的联系电邮为mitchell@4guysfromrolla.com，也可以通过他的博客http://ScottOnWriting.NET与他联系。