Introduction

Over the past several tutorials we’ve seen how to use our application architecture, ObjectDataSource, and the data Web controls in concert to provide inserting, editing, and deleting capabilities. The deleting interfaces we’ve examined thus far have been composed of a Delete button that, when clicked, causes a postback and invokes the ObjectDataSource’s Delete() method. The Delete() method then invokes the configured method from the Business Logic Layer, which propagates the call down to the Data Access Layer, issuing the actual DELETE statement to the database.

While this user interface enables visitors to delete records through the GridView, DetailsView, or FormView controls, it lacks any sort of confirmation when the user clicks the Delete button. If a user accidentally clicks the Delete button when they meant to click Edit, the record they meant to update will instead be deleted. To help prevent this, in this tutorial we’ll add a client-side confirmation dialog box that appears when the Delete button is clicked.

The JavaScript confirm(string) function displays its string input parameter as the text inside a modal dialog box that comes equipped with two buttons - OK and Cancel (see Figure 1). The confirm(string) function returns a Boolean value depending on what button is clicked (true, if the user clicks OK, and false if they click Cancel).

Figure 1: The JavaScript confirm(string) Method Displays a Modal, Client-Side Messagebox

During a form submission, if a value of false is returned from a client-side event handler then the form submission is cancelled. Using this feature, we can have the Delete button’s client-side onclick event handler return the value of a call to confirm("Are you sure you want to delete this product?"). If the user clicks Cancel, confirm(string) will return false, thereby causing the form submission to cancel. With no postback, the product whose Delete button was clicked won’t be deleted. If, however, the user clicks OK in the confirmation dialog box, the postback will continue unabated and the product will be deleted. Consult Using JavaScript’s confirm() Method to Control Form Submission for more information on this technique.
Adding the necessary client-side script differs slightly if using templates than when using a CommandField. Therefore, in this tutorial we will look at both a FormView and GridView example.

Note: Using client-side confirmation techniques, like the ones discussed in this tutorial, assumes that your users are visiting with browsers that support JavaScript and that they have JavaScript enabled. If either of these assumptions are not true for a particular user, clicking the Delete button will immediately cause a postback (not displaying a confirm messagebox).

Step 1: Creating a FormView That Supports Deletion

Start by adding a FormView to the ConfirmationOnDelete.aspx page in the EditInsertDelete folder, binding it to a new ObjectDataSource that pulls back the product information via the ProductsBLL class’s GetProducts() method. Also configure the ObjectDataSource so that the ProductsBLL class’s DeleteProduct(productID) method is mapped to the ObjectDataSource’s Delete() method; ensure that the INSERT and UPDATE tabs’ drop-down lists are set to (None). Finally, check the Enable Paging checkbox in the FormView’s smart tag.
After these steps, the new ObjectDataSource’s declarative markup will look like the following:

asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DeleteMethod="DeleteProduct" OldValuesParameterFormatString="original_{0}" SelectMethod="GetProducts" TypeName="ProductsBLL">  DeleteParameters>  asp:Parameter Name="productID" Type="Int32" />  /DeleteParameters> /asp:ObjectDataSource>

As in our past examples that did not use optimistic concurrency, take a moment to clear out the ObjectDataSource’s OldValuesParameterFormatString property.
Since it has been bound to an ObjectDataSource control that only supports deleting, the FormView’s ItemTemplate offers only the Delete button, lacking the New and Update buttons. The FormView’s declarative markup, however, includes a superfluous EditItemTemplate and InsertItemTemplate, which can be removed. Take a moment to customize the ItemTemplate so that is shows only a subset of the product data fields. I’ve configured mine to show the product’s name in an

heading above its supplier and category names (along with the Delete button).

asp:FormView ID="FormView1" AllowPaging="True" DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" runat="server">  ItemTemplate>  h3>i>%# Eval("ProductName") %>/i>/h3>  b>Category:/b>  asp:Label ID="CategoryNameLabel" runat="server" Text='%# Eval("CategoryName") %>'>  /asp:Label>br />  b>Supplier:/b>  asp:Label ID="SupplierNameLabel" runat="server" Text='%# Eval("SupplierName") %>'>  /asp:Label>br />  asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete">  /asp:LinkButton>  /ItemTemplate> /asp:FormView>

Calling the confirm(string) Function from the Delete Buttons Client-Side onclick Event

With the FormView created, the final step is to configure the Delete button such that when it’s clicked by the visitor, the JavaScript confirm(string) function is invoked. Adding client-side script to a Button, LinkButton, or ImageButton’s client-side onclick event can be accomplished through the use of the OnClientClick property, which is new to ASP.NET 2.0. Since we want to have the value of the confirm(string) function returned, simply set this property to: return confirm('Are you certain that you want to delete this product?');
After this change the Delete LinkButton’s declarative syntax should look something like:

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

 
That’s all there is to it! Figure 3 shows a screen shot of this confirmation in action. Clicking the Delete button brings up the confirm dialog box. If the user clicks Cancel, the postback is cancelled and the product is not deleted. If, however, the user clicks OK, the postback continues and the ObjectDataSource’s Delete() method is invoked, culminating in the database record being deleted.

Note: The string passed into the confirm(string) JavaScript function is delimited with apostrophes (rather than quotation marks). In JavaScript, strings can be delimited using either character. We use apostrophes here so that the delimiters for the string passed into confirm(string) do not introduce an ambiguity with the delimiters used for the OnClientClick property value.