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

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>
                      

Select all 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
                          }
                      }
                      

Select all 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.
                      }
                      

Select all Open in new window

c. Cancel button click event handler

protected void btnCancel_Click(object sender, EventArgs e)
                      {
                          this.ModalPopupExtender1.Hide();
                      }
                      

Select all 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;
                      }
                      

Select all Open in new window

That's all it takes. Hope you find this article helpful.