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?
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.
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">
<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;"
<asp:Label ID="lblPopupHeader" runat="server" Text="Confirmation" Style="background-color: Blue;
color: #ffffff; font-size: 14px;"></asp:Label><br />
<asp:Label ID="lblConfirmationMessage" runat="server" Text="This file already exists, are you sure you want to OverWrite it?"></asp:Label><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" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" Enabled="False" TargetControlID="lblDummy"
PopupControlID="pnlConfirmation" BackgroundCssClass="ModalPopupBack" DropShadow="true">
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
this.ModalPopupExtender1.Enabled = true;
else //if file does not exist
//Continue to save the file
b. Overwrite button click event handler
protected void btnOverwrite_Click(object sender, EventArgs e)
//Save the file to overwrite the old one.
c. Cancel button click event handler
3. CSS style
protected void btnCancel_Click(object sender, EventArgs e)
Here is the style for the ModalPopu used in this article
border:outset 2px #000;
That's all it takes. Hope you find this article helpful.