2.0 of Scott Mitchell's ASP. NET data Tutorial: Add client confirmation for data deletion

Original Text | download the encoding example in this tutorial | download the PDF version of this tutorial

Introduction

As we can see in summary: adding the delete function for DataList can be completed by editing and deleting data in DataList:

1. Add Button, LinkButton, or ImageButton to ItemTemplate.
2. Set the Delete button'sCommandNameSet to "Delete"
3. Call the appropriate BLL delete method in DeleteCommand event processing (and re-bind the data so that the deleted items are no longer displayed in DataList ).

For the user, the above process is to click the delete button of an item to cause postback. Then, delete the selected item and remove it from DataList. A confirmation step is missing when you click the delete button. If a user wants to click the edit button and accidentally click Delete, the record he wants to update will be deleted. To prevent such a situation, we can add a client for confirmation when the delete button is clicked.

JavaScrip confirm (string) function displays the input parameter string as text in a dialog box that contains two buttons-OK and Cancel-, as shown in figure 1. The confirm (string) function returns a Boolean Value Based on the clicked button (true if clicked OK, false if clicked Cancel ).

Figure 1: client dialog box

When a form is submitted, if the client event processing returns a false value, the browser will cancel the submission. With this feature, we can let the client onclick event of the delete button handle the returned callConfirm ("Are you certain that you want to delete this product? . If you click Cancel, confirm (string) returns false, so that the submission is canceled. No postback is caused, so the product clicked to delete the button will not be deleted. If you click the OK button, postback will continue to remember and the product will be deleted. For more information, see Using JavaScript'sconfirm()Method to Control Form Submission

In this chapter, we will learn how to add such client confirmation to the delete button of DataList.

Note: confirm with the client. As discussed in this chapter, assume that your user uses a browser that supports js and has enabled js support. If you do not have a record, clicking the delete button immediately triggers postback (the confirmation dialog box is not displayed) and deletes the record.

Step 1: Create a DataList containing the delete button

Before learning how to add a client for confirmation, we need a DataList record that can be deleted. Open the ConfirmationOnDelete. aspx page in the EditDeleteDataList folder, drag a DataList, and set the ID to Products. Create an ObjectDataSource named ProductsDataSource from the smart tag. Use GetProducts () of the ProductsBLL class to configure it. See figure 2. Because we will directly call BLL for deletion in DeleteCommand event processing, select "(None)" in the INSERT, UPDATE, and DELETE labels, as shown in figure 3.

Figure 2: ConfigurationProductsDataSource

Figure 3: Select "(None)" in the INSERT, UPDATE, and DELETE labels )"

After completing these configurations, Visual Studio generates the default ItemTemplate for DataList. Each data field is displayed as a Label. Modify ItemTemplate to display only the product name, category, and supplier. Add a Delete button and set the CommandName attribute to "Delete ". After these modifications, the Declaration Code of DataList and ObjectDataSource should look as follows:

ASP. NET
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26	<asp:DataList ID="Products" runat="server" DataKeyField="ProductID" DataSourceID="ProductsDataSource"> <ItemTemplate>

Figure 4 shows the page. Because no DeleteCommand event has been created for processing, clicking the delete button only causes postback and does not affect other tasks.

Figure 4: display the Name, Supplier, Category, and Delete Button of each Product

Step 2: Add DeleteCommand Event Handler

When you click the delete button, postback is triggered, and ItemCommand and DeleteCommand are triggered. The ItemCommand event is triggered when the Command event is triggered in each DataList. The DeleteCommand event is triggered because the CommandName of the button that causes the Command event is set to "Delete.

To delete a record with the deleted button, we need:

• CreateDeleteCommandEvent Processing
• ObtainProductID
• CallProductBLLClassDeleteProductMethod
• Rebind data to DataList

The related code is as follows. For more information about the code, see edit and delete data in DataList.

C #
1 2 3 4 5 6 7 8 9 10 11 12	protected void Products_DeleteCommand(object source, DataListCommandEventArgs e) { // Read in the ProductID from the DataKeys collection int productID = Convert.ToInt32(Products.DataKeys[e.Item.ItemIndex]); // Delete the data ProductsBLL productsAPI = new ProductsBLL(); productsAPI.DeleteProduct(productID); // Rebind the data to the DataList Products.DataBind(); }

Step 3: Add client confirmation for the delete button

After the DeleteCommand event is processed, the final task is to add a client confirmation for the delete button. This can be done by declaration language or encoding. The simplest method is to use the ButtonOnClientClickProperty to specify the declarative language for confirmation. However, if the confirmed information or logic can be determined at runtime, We can reference the Delete button in ItemDataBound event processing and program it to set its OnClientClick attribute.

We will discuss the two methods below. The first is the language declaration method. You only need to set the OnClientClick attribute of the Button to return confirm (message). For example, you can specify the confirmation information as "Are you certain that you want to delete this product ?", You can modify the Declaration language of the delete button as follows.

ASP. NET
1 2	<asp:Button runat="server" ID="DeleteButton" CommandName="Delete" Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this product?');" />

Click Delete to display a confirmation dialog box, as shown in Figure 5. Postback occurs only when the user clicks OK and the product is deleted.

Figure 5: Click Delete Button to display a client dialog box

 

Note: if there is a separator in the string passed to the confirm function, we need to use "\" for escape. That is to say, if your string is "You're sure you want to do this ?" You need to write return confirm ('you \' re sure You want to do this? ');.

The static confirmation dialog box is displayed in a good way. If you need to customize the validation information one by one, you need to set this attribute through programming. The ItemDataBound event of DataList is triggered after each record is bound to DataList. We need to reference the delete button and program it to set its OnClientlick Attribute Based on the data of the item bound to DataList. The following code explains how to include the product name in the validation information.

C #

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

protected void Products_ItemDataBound(object sender, DataListItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { // Reference the data bound to the DataListItem Northwind.ProductsRow product = (Northwind.ProductsRow)((System.Data.DataRowView)e.Item.DataItem).Row; // Reference the Delete button Button db = (Button)e.Item.FindControl("DeleteButton"); // Assign the Delete button's OnClientClick property db.OnClientClick = string.Format("return confirm('Are you sure that you want to delete" + " the product {0}?');", product.ProductName.Replace("'", @"\'")); } }

The ItemDataBound event is triggered when all rows are bound to DataList-including header, footer, and separator items-so we must first ensure that item or alternating item is very important. Then we get the DataItem attribute of DataListItem, which contains a reference of a ProductsRow instance. Finally, use the FindControl ("controlID") to reference the delete button and assign a value to the confirmation information. Note that all separators in the product name are escaped.

Then, browse the page. Click the delete button to confirm that the information contains the product name. Figure 6 shows the output when the delete button of Chai Tea is clicked.

Figure 6: The confirmation dialog box contains the Name of the Product.

Summary

JavaScriptconfirm(string)A function is usually used to control the process of form submission. When executed, this function displays a client mode dialog box, which contains two buttons, OK and Cancel. If you click OK, confirm (String) Function returns true. If you click Cancel, false is returned. This function is used together with the process of canceling the submission when the browser returns false for any event processing during the submission process. It can be used to display a confirmation dialog box when deleting the record.

Confirm (String) Function can be associated with the client onclick event of the Button through the OnClientClick attribute of the Button control. When processing the delete button in DataList, this attribute can be set through declaration language or programming. As we can see in this chapter.

Happy programming!