Confirm Before Deleting a Grid Item

When deleting an item from an ASP.NET grid, it would be nice to ask the user to confirm this is what they really meant to do. After all, it is very easy to mouse click somewhere by accident. And, what would even be nicer is if this confirmation takes place on the client (browser) instead of requiring yet another round trip to the server.

Fortunately, this task is very easy to do. As you might expect, the answer is to use JavaScript. In some cases, setting up JavaScript in an ASP.NET page can get a little involved. However, a simple script can be added using the OnClientClick property, which is available with many ASP.NET controls.

Listing 1 shows part of the ASP.NET code for a GridView control. This code includes an ItemTemplate that defines a Delete button and includes some confirmation JavaScript in the OnClientClick property.

<asp:GridView ID="GridView1" runat="server" />
  <Columns>
    <asp:TemplateField>
      <ItemTemplate>
        <asp:LinkButton ID="lnkDelete" runat="server"
          CausesValidation="false" 
          CommandName="DeleteItem"
          Text="Delete" 
          CommandArgument='<%# Bind("ItemID") %>'
          OnClientClick="return confirm('Delete this item?');">
        </asp:LinkButton>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

This simple JavaScript calls confirm(), which returns true if the user selects Yes. The code associated with posting back the form and deleting the item only executes if this script returns true.

So, that’s a very simple technique that is easy to implement and works very well. And, because it uses JavaScript, it doesn’t perform the postback to the server unless the user confirms they really do want to delete the grid item.