Row deletion in a GridView by default does not provide
confirmation before deleting. Using a client-side verification message can
prevent accidental deletions. In this example, we will see how to utilize client-side
script to confirm deletions when using a GridView control.
In ASP.NET 2.0, the Button, LinkButton, and ImageButton controls
have an OnClientClick property. We can use this property to specify the
client-side JavaScript which will get executed when the button is clicked. The
CommandField property of the GridView control unfortunately does not have an OnClientClick
property, but adding a button to the GridView can do the trick for us.
In this example, we will see how to use ASP.NET 2.0's
OnClientClick property for the Button control with the GridView control to show
a confirmation message before the user deletes the row.
Set Up the GridView
We will the use the GridView's TemplateField, containing an
ItemTemplate, which in turn contains a Button control. Such a button, with the
CommandName set to Delete, will cause the GridView to delete the associated row
when pressed. Since our aim is to show a confirmation message before the deletion
of the row, we will also make use of the button's OnClientClick property.
The button control's properties are assigned as follows:
·
OnClientClick to JavaScript confirm message
·
CommandName to Delete
The DataKeyNames property of the GridView control is used to
specify the field or fields that represent the primary key of the data source.
Listing 1 – Display Data Using GridView Control
<asp:GridView ID="GridView1"runat="server"
DataSourceID="SqlDataSource1"
AutoGenerateColumns="False"
DataKeyNames="EmployeeId">
<Columns>
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:Button ID="btnDelete" Text="Delete" runat="server"
OnClientClick="return confirm('Are you sureyou want to delete this record?');"
CommandName="Delete" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="EmployeeId" DataField="EmployeeId" />
<asp:BoundField HeaderText="FirstName" DataField="FirstName" />
<asp:BoundField HeaderText="LastName" DataField="LastName" />
</Columns>
</asp:GridView>Next, we set the SqlDataSource DeleteCommand and its
parameters. EmployeeId is the primary key in the Employees table. This key is
used to delete the row. The GridView needs to find which row has to be deleted,
hence we used @original_EmployeeId and not @EmployeeId. If we don't prefix this
parameter with original_ then there is no way to find that row which has to be
deleted.
Listing 2 – The SqlDataSource
<asp:SqlDataSource ID="SqlDataSource1"runat="server"
ConnectionString="Server=localhost;Database=Northwind;userid=username;password=secret;"
SelectCommand="Select * from Employees"
DeleteCommand="Delete from Employees whereEmployeeId=@original_EmployeeId"
OnDeleted="SqlDataSource1_Deleted">
<DeleteParameters>
<asp:Parameter Type="Int32"Name="EmployeeId"></asp:Parameter>
</DeleteParameters>
</asp:SqlDataSource>
<asp:Label ID="lblShow"runat="server" ForeColor="DarkRed"></asp:Label>
To show a message to the end user after the row has been
deleted we will use the Deleted event of the SqlDataSource control to do this
task for us and also supply and error messages.
Listing 3 - The Deletion Code
Visual Basic .NET
Protected Sub SqlDataSource1_Deleted(ByVal sender AsObject, _
ByVal e AsSystem.Web.UI.WebControls.SqlDataSourceStatusEventArgs)
If e.Exception Is Nothing Then
If e.AffectedRows = 1 Then
lblShow.Text = "Record deletedsuccessfully."
Else
lblShow.Text = "An error occurred duringthe delete operation."
End If
Else
lblShow.Text = "An error occurred whileattempting to delete the row."
e.ExceptionHandled = True
End If
End Sub
C#
protected void SqlDataSource1_Deleted(objectsender,
SqlDataSourceStatusEventArgs e)
{
if (e.Exception == null)
{
if (e.AffectedRows == 1)
{
lblShow.Text = "Record deletedsuccessfully.";
}
else
{
lblShow.Text = "An error occurredduring the delete operation.";
}
}
else
{
lblShow.Text = "An error occurred whileattempting to delete the row.";
e.ExceptionHandled = true;
}
}Screenshots
Figure 1 - GridView Before Deletion
Figure 2 - GridView After Deletion
Downloads
[Download
Sample]
Conclusion
In this article you learned how to integrate a confirmation
message box before deleting a row in a GridView, with a help of an example and
relevant screenshots.
