Delete Confirmation Box with RowCommand in ASP.Net GridView

In this post, I’ll demonstrate how to use C# to display a Delete Confirmation Box using a RowCommand in an ASP.Net GridView.

The Delete Button will be referenced inside the RowDataBound event handler before having a JavaScript Confirmation Box given to its Client Side OnClick event handler in ASP.Net utilising C#.

As a result, when the RowCommand event fires, ASP.Net will use C# to display the JavaScript Confirmation Box.

HTML Markup

<asp:GridView ID="GridView1" CssClass="Grid" runat="server" OnRowDeleting="OnRowDeleting" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="Item" />
        <asp:BoundField DataField="Price" HeaderText="Price" />
        <asp:CommandField ShowDeleteButton="True" ButtonType="Button" />
    </Columns>
</asp:GridView>

Binding the GridView

A DataTable is used to populate the ASP.Net GridView during the Page Load event, and the DataTable is saved in the ViewState variable.

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
        dt.Rows.Add("Shirt", 450);
        dt.Rows.Add("Jeans", 3200);
        dt.Rows.Add("Trousers", 1900);
        dt.Rows.Add("Tie", 185);
        dt.Rows.Add("Cap", 100);
        dt.Rows.Add("Hat", 120);
        dt.Rows.Add("Scarf", 290);
        dt.Rows.Add("Belt", 150);
        ViewState["dt"] = dt;
        BindGrid();
    }
}
 
protected void BindGrid()
{
    GridView1.DataSource = ViewState["dt"] as DataTable;
    GridView1.DataBind();
}

Applying the JavaScript Delete Confirmation Box to the GridView CommandField Delete Button

During the OnRowDataBound event handler, a loop is run through the GridView Cell’s Button controls. The JavaScript Confirmation Box script is set to the Button’s OnClick property if the CommandName is Delete.

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string item = e.Row.Cells[0].Text;
        foreach (Button button in e.Row.Cells[2].Controls.OfType<Button>())
        {
            if (button.CommandName == "Delete")
            {
                button.Attributes["onclick"] = "if(!confirm('Do you want to delete " + item + "?')){ return false; };";
            }
        }
    }
}

Delete the ASP.Net GridView Row using CommandField and OnRowDeleting event

The OnRowDeleting event handler is launched when the Delete button is clicked. The GridView Row’s Index is found and used to remove the Row from the DataTable inside the OnRowDeleting event handler.
Finally, the GridView is once more filled and the DataTable is saved back to the ViewState.

protected void OnRowDeleting(object sender, GridViewDeleteEventArgs e)
{
    int index = Convert.ToInt32(e.RowIndex);
    DataTable dt = ViewState["dt"] as DataTable;
    dt.Rows[index].Delete();
    ViewState["dt"] = dt;
    BindGrid();
}