Post
Ask Question

User Confirmation before Deleting Items in ASP.Net 2.0

This brief article describes the use of the OnClientClick property of button controls in ASP.Net 2.0, in order to get a user confirmation before deleting items from a GridView control.

 

The same approach can be extended/modified to provide client-side user interaction such as alerts, confirmations or other client-side action, when any server-side button control is clicked in the ASP.Net 2.0 web page.

 

The solution is very straightforward and involves setting the OnClientClick property to a string containing the javascript code to be executed on the client, when the button control on the page is clicked. Additionally, server-side code can be executed in response to the Button click.

 

The example below, illustrates a confirmation message box used to retrieve the user's confirmation for row deletes. The Delete Column is setup by adding a template column in the Gridview. The template column contains a Button control, with the CommandName property set to "Delete" and the user confirmation functionality is provided by setting the OnClientClick property of the user control. The Delete action is setup declaratively by specifying the DeleteCommand for the SQLDataSource.

 

If the user clicks on the Cancel button of the confirmation box, then the delete action is cancelled. The row is deleted from the database, if the OK button is clicked.

 

Image: User confirmation before Deleting Items in ASP.Net 2.0

 

deleteconfirm1.JPG

 

Backend: The sample ties in to a SQL Server Express database named Contacts with a table named ContactPhone. The table used in the sample has the following definition.

 

Column Name

Type

ContactID

Int, Identity(1, 1), Primary Key

FName

Varchar(255)

LName

Varchar(255)

ContactPhone

Varchar(50)

 

Code Listing: DeleteConfirm.aspx: User confirmation before Deleting Items in ASP.Net 2.0

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DeleteConfirm.aspx.cs" Inherits="DeleteConfirm" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Contacts Listing</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<strong><span style="font-size: small; font-family: Arial; text-decoration: underline">

Contacts Listing </span></strong>

<br />

<br />

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ContactID"

DataSourceID="SqlDataSource1" EmptyDataText="There are no data records to display." style="font-size: small; font-family: Arial" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical">

<Columns>

<asp:BoundField DataField="ContactID" HeaderText="ContactID" ReadOnly="True" SortExpression="ContactID" Visible="False" />

<asp:BoundField DataField="FName" HeaderText="First Name" SortExpression="FName" />

<asp:BoundField DataField="LName" HeaderText="Last Name" SortExpression="LName" />

<asp:BoundField DataField="ContactPhone" HeaderText="Phone" SortExpression="ContactPhone" />

<asp:TemplateField>

<ItemTemplate>

<asp:LinkButton runat="server" ID="btnDelete" CommandName="Delete"

OnClientClick="return confirm('Are you sure you want to delete this Contact Record?');" Text="Delete" ></asp:LinkButton>

</ItemTemplate></asp:TemplateField>

</Columns>

<FooterStyle BackColor="#CCCC99" />

<RowStyle BackColor="#F7F7DE" />

<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />

<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />

<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />

<AlternatingRowStyle BackColor="White" />

</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ContactsConnectionString1 %>"

DeleteCommand="DELETE FROM [ContactPhone] WHERE [ContactID] = @ContactID" InsertCommand="INSERT INTO [ContactPhone] ([FName], [LName], [ContactPhone]) VALUES (@FName, @LName, @ContactPhone)"

ProviderName="<%$ ConnectionStrings:ContactsConnectionString1.ProviderName %>"

SelectCommand="SELECT [ContactID], [FName], [LName], [ContactPhone] FROM [ContactPhone]"

UpdateCommand="UPDATE [ContactPhone] SET [FName] = @FName, [LName] = @LName, [ContactPhone] = @ContactPhone WHERE [ContactID] = @ContactID">

<InsertParameters>

<asp:Parameter Name="FName" Type="String" />

<asp:Parameter Name="LName" Type="String" />

<asp:Parameter Name="ContactPhone" Type="String" />

</InsertParameters>

<UpdateParameters>

<asp:Parameter Name="FName" Type="String" />

<asp:Parameter Name="LName" Type="String" />

<asp:Parameter Name="ContactPhone" Type="String" />

<asp:Parameter Name="ContactID" Type="Int32" />

</UpdateParameters>

<DeleteParameters>

<asp:Parameter Name="ContactID" Type="Int32" />

</DeleteParameters>

</asp:SqlDataSource>

&nbsp;

<br />

</div>

</form>

</body>

</html>

 

Conclusion: ASP.Net 2.0 allows setting client-side functions for Button controls through the use of the OnClientClick property and additionally, the event can be handled on server-side depending on the user response. This technique is useful for those cases which have a value addition with user indication or involvement, prior to proceeding with some server side action. This results in reduction of the impact of erroneous clicks and increases the user satisfaction and comfort level. 

 

Disclaimer: This article is for purely educational purposes and is a compilation of notes, material and my understanding on this subject. Any resemblance to other material is an un-intentional coincidence and should not be misconstrued as malicious, slanderous, or any anything else hereof. 


Similar Articles