<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

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

Published on
16,465 Points
10,365 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

Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

Join & Write a Comment

Did you know PowerShell can save you time with SaaS platforms? Simply leverage RESTfulAPIs to build your own PowerShell modules. These will kill repetitive tickets and tabs, using the command Invoke-RestMethod. Tune into this webinar to learn how…
Key to your CPU's ability to stay cool is to use the right amount of thermal paste and apply it correctly. In other words you want as much thermal conductivity between CPU and the cooling block. Use a quality thermal paste and apply it in a manner…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month