Easy Confirmation Message for .NET Controls

Introduction

This article describes adding a confirmation message to your server controls (even those inside your DataGrid) with one line of code (if that)!

Background

I participate quite a bit on Experts-Exchange (ASP.NET), and always come across the question of how to attach a confirmation message to a Delete button, such as "Are you sure you want to delete this item?". While this is not a difficult task, it is a somewhat mundane one, and having to add an OnClick event to each Button in a DataGrid gets to be a bit much. Instead, I decided I wanted JavaScript to work for me and so it shall...

Using the code

The first step is create the JavaScript method that will handle all of this.

function confirmDelete(e) {    
    var targ;

    if (!e) var e = window.event;
    targ = (e.target) ? e.target : e.srcElement;
    if (targ.nodeType == 3) targ = targ.parentNode;

    if (targ.id.toLowerCase().indexOf("delete") >= 0) {        
        return confirm("Do you want to delete this item?");
    }
    routeEvent(e);
}

document.onclick = confirmDelete;

The confirmDelete function is executed each time a click event occurs on the page. We then use some fun logic to get by the discrepancies in browsers to find the element that was clicked on. If that element has the word "delete" in it, then we launch our confirmation box with the message we see above.

The next step is to create a server control that gets affected by the logic above.

<asp:Button RunAt="server" ID="MyDeleteButton1" Text="Delete Record" />

This delete button will pop-up the confirmation box simply because we have included the word "Delete" in the ID. No code was required, amazing! We're done.

Now, imagine this with your DataGrid/GridView control; no need to attach that OnClick attribute in your ItemDataBound event, or for ASP.NET 2.0, the OnClientClick. We just throw the word "Delete" in the ID.

<!-- ASP.NET 1.x -->

<asp:DataGrid RunAt="server" ID="GridView1">
    <Columns>
        ... your other columns ...
        <asp:TemplateColumn>
            <ItemTemplate>
                <asp:LinkButton RunAt="server" 
                       ID="DeleteMe" Text="Remove Row" />
            </ItemTemplate>s
        </asp:TemplateColumn>
    </Columns>
</asp:DataGrid>

<!-- ASP.NET 2.0 -->

<asp:GridView RunAt="server" ID="GridView1">
    <Columns>
        ... your other fields ...
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton RunAt="server" 
                       ID="DeleteMe" Text="Remove Row" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

You could place the confirmDelete function at the top of each page that you want to have this functionality.

<script type="text/javascript">
    ... confirmDelete function ...
</script>

Or even better, would be to place it in your JavaScript external script file. Then, you could throw it in your Master Page setup and have this feature on every page.

Another Method to Consider

If we didn't want to base everything on the ID of the server control, we could customize it to be assigned to the CSS class attribute. Using the code below, we can retrieve all elements that have a specified className.

function getElementsByClassName(ClassName,tagName,parentElement){
    var elements=new Array();
    var d=parentElement ? parentElement : document;
    var allElements;

    if(tagName)
        allElements=d.all && d.all.tags(tagName)
        || d.getElementsByTagName && d.getElementsByTagName(tagName);
    else allElements=d.all || d.getElementsByTagName("*");

    for(var i=0,len=allElements.length; i<len; i++)
        if(allElements[i].className.indexOf(ClassName)>=0)
            elements[elements.length]=allElements[i];

    return elements;
}
function assignConfirm(className) {    
    var elements = getElementsByClassName(className);
    
    if (elements && elements.length > 0) {
        for (i=0; i<elements.length; i++) 
            elements[i].onclick = confirmDelete;
    }
}
function confirmDelete() {
    return confirm("Are you sure you want to delete this item?");
}

Then assignConfirm function will get executed on the page load and assign a new confirmDelete function (a much more simplified one) to the onClick event for each matching element (including server controls in a DataGrid). The only thing left to do is call it.

<body onload="assignConfirm('delete');">

Finally, an example server control that utilizes this alternative method...

<asp:LinkButton RunAt="server" ID="lbRemove" CssClass="delete" Text="Remove Item" />

That's it. Now we're able to assign the same functionality as before, but using CSS classes to control which controls get this feature. It'd be very easy to tweak this method to toggle multiple messages by simply changing the CssClass name and assigning a separate confirmDelete function.