<

Display confirmation from code behind before continuing a process in ASP.NET (part one)

Published on
16,308 Points
10,208 Views
1 Endorsement
Last Modified:
Approved
I noticed that many developers asked this question or similar: After a user clicks a button on a page, my application performs some check, then prompts user for confirmation, then based on user's response, my application will either continue the process or cancel the process. How can I accomplish this?

Some people may suggest to add OnClientClick = "javascript: return confirm('Are you sure?');" to the submit button, however, this makes the confirmation pop up before the application performs the check in the code behind.

To better understand the question, consider this scenario:

Your application enables user to upload files to your server. When user clicks the Upload button, your application will first check if the same file already exists. If no, just simply saves the file.  If yes, then asks user if  the file on the server needs to be overwritten. Based on the user's response, your application will either save/overwrite the file, or cancel the process so user can choose a different file.

There are two ways I usually use to accomplish this task: the easiest way is to use AJAX ModalPopupExtender, the other way is to use JavaScript only. In this article, I will show how to use AJAX ModalPopupExtender to accomplish the above task. Then in the next part, I will conver how to accomplish the same task with only JavsScript and some CSS tricks.

Without any further ado, let's get started.

1. ASPX page
Create an ASPX page with the following controls:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Label ID="lblDummy" runat="server" EnableViewState="false" Style="display: none;"></asp:Label>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" /><br />
        <asp:Panel ID="pnlConfirmation" runat="server" Width="300px" Style="display: none;"
            CssClass="ModalPopupFront">
            <asp:Label ID="lblPopupHeader" runat="server" Text="Confirmation" Style="background-color: Blue;
                color: #ffffff; font-size: 14px;"></asp:Label><br />
            <br />
            <asp:Label ID="lblConfirmationMessage" runat="server" Text="This file already exists, are you sure you want to OverWrite it?"></asp:Label><br />
            <br />
            <asp:Button ID="btnOverwrite" runat="server" Text="Overwrite" OnClick="btnOverwrite_Click" />
            <asp:Button ID="btnCancel" runat="server" Text="Don't Overwrite" OnClick="btnCancel_Click" />
        </asp:Panel>
        <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" Enabled="False" TargetControlID="lblDummy"
            PopupControlID="pnlConfirmation" BackgroundCssClass="ModalPopupBack" DropShadow="true">
        </cc1:ModalPopupExtender>
    </ContentTemplate>
</asp:UpdatePanel>

Open in new window


The important part of the above code is the first label named "lblDummy". It is hidden because of the display style and it is assigned to the ModalPopupExtender's TargetControlID. Why we don't use the Upload button as the TargetControlID? Because if we do, then the popup will show up and prevent the page from posting back, and then we cannot check if the file exists. Instead, I use the hidden "dummy" label as TargetControlID, then display the ModalPopup in code behind.

2. Code behind functions
a. Upload button click event handler
protected void btnUpload_Click(object sender, EventArgs e)
{
    //replace the following line with the actual file check
    bool fileExists = true;
    //if file already exists
    if (fileExists)
    {
        this.ModalPopupExtender1.Enabled = true;
        this.ModalPopupExtender1.Show();
    }
    else //if file does not exist
    {
        //Continue to save the file
    }
}

Open in new window


b. Overwrite button click event handler
protected void btnOverwrite_Click(object sender, EventArgs e)
{
    //Save the file to overwrite the old one.
}

Open in new window


c. Cancel button click event handler
protected void btnCancel_Click(object sender, EventArgs e)
{
    this.ModalPopupExtender1.Hide();
}

Open in new window


3. CSS style
Here is the style for the ModalPopu used in this article
.ModalPopupBack
{
	background-color:#666;
}
.ModalPopupFront
{
	background-color:#fff;
	border:outset 2px #000;
	padding-left:2px;
	padding-right:2px;
	padding-top:4px;
	padding-bottom:4px;
	line-height: 18px;
}

Open in new window


That's all it takes. Hope you find this article helpful.
1
Comment
0 Comments

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Join & Write a Comment

In this video I will demonstrate how to set up Nine, which I now consider the best alternative email app to Touchdown.
Basic Overview of office 365 user portal

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month