In this article I will explain with an example, how to implement delete functionality with JavaScript Confirmation Box in ASP.Net DetailsView using C# and VB.Net.
Database
I have made use of the following table Customers with the schema as follows.
![Bind (Populate) ASP.Net DropDownList using DataTable (DataSet) in C# and VB.Net]()
I have already inserted few records in the table.
![Bind (Populate) ASP.Net DropDownList using DataTable (DataSet) in C# and VB.Net]()
Note: You can download the database table SQL by clicking the download link below.
HTML Markup
The following HTML Markup consists of an ASP.Net DetailsView control with three BoundField columns and a CommandField column for performing the Delete operation.
The DetailsView is specified with OnPageIndexChanging, OnItemCreated and OnItemDeleting event handlers.
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="false" AllowPaging="true"
OnPageIndexChanging="OnPageIndexChanging" OnItemCreated="OnItemCreated" OnItemDeleting = "OnItemDeleting">
<Fields>
<asp:BoundField DataField="CustomerId" HeaderText="Customer Id" HeaderStyle-CssClass="header" />
<asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-CssClass="header" />
<asp:BoundField DataField="Country" HeaderText="Country" HeaderStyle-CssClass="header" />
<asp:CommandField ShowDeleteButton="True" ButtonType="Button" />
</Fields>
</asp:DetailsView>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Populating DetailsView
Inside the Page Load event of the page, the DetailsView is populated with records from the Customers table.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindDetailsView();
}
}
private void BindDetailsView()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT CustomerId, Name, Country FROM Customers", con))
{
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
DetailsView1.DataSource = dt;
DetailsView1.DataBind();
}
}
}
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.BindDetailsView()
End If
End Sub
Private Sub BindDetailsView()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("SELECT CustomerId, Name, Country FROM Customers", con)
Using sda As New SqlDataAdapter(cmd)
Using dt As New DataTable()
sda.Fill(dt)
DetailsView1.DataSource = dt
DetailsView1.DataBind()
End Using
End Using
End Using
End Using
End Sub
Adding JavaScript Confirmation Box to the CommandField Delete Button inside DetailsView
The following event handler is executed when each Item of the DetailsView is created. The reference of the Delete Button is determined and the JavaScript code for displaying the Confirmation Box is set to its HTML OnClick attribute.
C#
protected void OnItemCreated(object sender, EventArgs e)
{
int commandRowIndex = DetailsView1.Rows.Count - 1;
if (commandRowIndex != -1)
{
DetailsViewRow row = DetailsView1.Rows[commandRowIndex];
Button btnDelete = row.Controls[0].Controls.OfType<Button>().Where(b => b.CommandName == "Delete").FirstOrDefault();
btnDelete.Attributes["onclick"] = "if(!confirm('Do you want to delete this Customer?')){ return false; };";
}
}
VB.Net
Protected Sub OnItemCreated(sender As Object, e As EventArgs)
Dim commandRowIndex As Integer = DetailsView1.Rows.Count - 1
If commandRowIndex <> -1 Then
Dim row As DetailsViewRow = DetailsView1.Rows(commandRowIndex)
Dim btnDelete As Button = row.Controls(0).Controls.OfType(Of Button)().Where(Function(b) b.CommandName = "Delete").FirstOrDefault()
btnDelete.Attributes("onclick") = "if(!confirm('Do you want to delete this Customer?')){ return false; };"
End If
End Sub
Implementing Delete functionality in DetailsView
The following event handler is executed when Delete Command Button is clicked. First the reference of the DetailsViewRow is fetched and then the CustomerId of the record is determined.
Then using the CustomerId value the record is deleted from the database and the BindDetailsView function is called which repopulates the DetailsView control with the updated data.
C#
protected void OnItemDeleting(object sender, DetailsViewDeleteEventArgs e)
{
int customerId = int.Parse(DetailsView1.Rows[0].Cells[1].Text);
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("DELETE FROM Customers WHERE CustomerId = @CustomerId", con))
{
cmd.Parameters.AddWithValue("@CustomerId", customerId);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
this.BindDetailsView();
}
VB.Net
Protected Sub OnItemDeleting(sender As Object, e As DetailsViewDeleteEventArgs)
Dim customerId As Integer = Integer.Parse(DetailsView1.Rows(0).Cells(1).Text)
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("DELETE FROM Customers WHERE CustomerId = @CustomerId", con)
cmd.Parameters.AddWithValue("@CustomerId", customerId)
con.Open()
cmd.ExecuteNonQuery()
con.Close()
End Using
End Using
Me.BindDetailsView()
End Sub
Implementing Paging in DetailsView
The following event handler is executed when a page is changed inside the DetailsView.
The value of the PageIndex of the Page which was clicked is present inside the NewPageIndex property of the DetailsViewPageEventArgs object and it is set to the PageIndex property of the DetailsView and the DetailsView is again populated by calling the BindDetailsView function.
C#
protected void OnPageIndexChanging(object sender, DetailsViewPageEventArgs e)
{
DetailsView1.PageIndex = e.NewPageIndex;
this.BindDetailsView();
}
VB.Net
Protected Sub OnPageIndexChanging(sender As Object, e As DetailsViewPageEventArgs)
DetailsView1.PageIndex = e.NewPageIndex
Me.BindDetailsView()
End Sub
Screenshot
![Implement Delete with Confirmation in ASP.Net DetailsView control]()
Demo
Downloads
