Simple (non-JS) GridView Delete Confirmation

Introduction

A common requirement in non-trivial data editing forms is to request confirmation of pending deletions. However, the default behaviour of the .NET GridView control on deletion is to commit the deletion without soliciting any further feedback from the user. This behaviour does tend to make GridView-based data editing forms prone to accidental deletion ("I swear pressed the 'Edit' link...").

Background

Numerous solutions to the above problem have been documented. The approach discussed here is a simple server-side solution which doesn't require the use of Javascript popups.

An example screenshot of the approach in action is shown below, with the third record (TaskID 4) displaying the Confirm link following the use of the Delete link.

Using the code

The server-side Deletion confirmation approach involves: (i) the use of explicit Command links for Edit and Delete, and (ii) implementation of the gridview_RowDeleting event handler.

i) Command Links

Rather than using a GridView CommandField for rendering the Edit and Delete Command links, templated LinkButtons are used instead; one LinkButton for Edit (with a CommandName of 'Edit') and another LinkButton for Delete (with a CommandName of 'Delete'). The use of explicit controls here allows us to manipulate the Command links server-side on post-back. Note that the remainder of the GridView mark-up has been omitted from the sample provided below.

  

// rather than use a CommandField, i.e... 

<asp:CommandField ShowEditButton="true" ShowDeleteButton="true" />



// ...explicitly list each command as a LinkButton in a Template Field instead 

<asp:TemplateField>
  <ItemTemplate>
    <asp:LinkButton ID="lnkEdit" runat="server" CommandName="Edit" Text="Edit" />    
    <asp:LinkButton ID="lnkDelete" runat="server" CommandName="Delete" Text="Delete" />
  </ItemTemplate>
  <EditItemTemplate>
    <asp:LinkButton ID="lnkUpdate" runat="server" CommandName="Update" Text="Update" />
    <asp:LinkButton ID="lnkCancel" runat="server" CommandName="Cancel" Text="Cancel" />
  </EditItemTemplate>
</asp:TemplateField>

ii) GridView RowDeleting Event Handler

The RowDeleting event handler needs to accomplish two tasks:

1) Show a Confirm link (plus an associated Cancel link) if the Delete Command link has been pressed (i.e., on first transit of a GridView item through the RowDeleting event handler).

2) Delete the GridView item if the Confirm Command link has been pressed (i.e., on second transit of a GridView item through the RowDeleting event handler).

The approach used here is a bit lazy, but avoids complicating the solution with additional complexity for what is a fairly straightforward process, which goes something like this:

• The 'Delete' CommandName of the Delete Command link initiates row deletion on the GridView. The first event fired in the row deletion pipeline is the RowDeleting event. By handling this event we have the opportunity to control the outcome of the deletion process (e.g, by cancelling the event), plus we can also update the GridView content as desired.
• Actual deletion of a GridView item requires the item to transit the RowDeleting handlertwice. On first transit the text of the Delete Command link (i.e., the LinkButton with the ID of "lnkDelete") is updated from 'Delete' to 'Confirm', and further processing along the GridView item deletion pipeline is cancelled by setting the Cancel property of the incoming GridViewDeleteEventArgs argument to true. On second transit of the GridView item through the RowDeleting handler we effectively recognise that the row deletion event was fired by a Confirm link by the simple fact that the text of the DeleteCommand link is not 'Delete' (but rather 'Confirm'). In this case the deletion proceeds as normal.
• To provide a means of cancelling the deletion, the otherwise redundant Edit Command link is re-employed as a Cancel Command link by: (i) Changing it's text to 'Cancel', and (ii) changing it's CommandName to 'Cancel'.

protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
    // Grab reference to the Delete Command link.
    LinkButton lnk = 
      (LinkButton)GridView1.Rows[e.RowIndex].FindControl("lnkDelete");

    // If the Command link text is 'Delete', display a 'Confirm' link.
    if (lnk.Text == "Delete")
    {
      lnk.Text = "Confirm";
      e.Cancel = true;  // Don't want to delete just yet.  Need confirmation first.

      LinkButton lnk2 =
        (LinkButton)GridView1.Rows[e.RowIndex].FindControl("lnkEdit");
      lnk2.Text = "Cancel";
      lnk2.CommandName = "Cancel";
    }

    // Otherwise, the Delete command will process to completion as normal.
}

Further Embellishments

The above solution provides a workable approach to implementing Delete Confirm functionality in a GridView. One possible embellishment to make the solution a little more user-friendly would be to change the CssClass of the pending deletion row to make it a bit more obvious that (i) something important is about to happen, and (ii) further action is required by the user.