asked on

ModalPopupExtender Reuse

How can a ModalPopupExtender custom messagebox be reused within an aspx page? I have several panels that require separate update buttons (separate message text and command parameters) all within one page. I want to be able to use the same control for all panels.

Can this be done? The ModalPopupExtender and panel are within an updatepanel.

Rhino1272

Not sure what you are doing on the popup so...

I created a quick sample form with 3 textboxes, 3 buttons, 3 ConfirmButtonExtenders, and 3 ModalPopupExtenders each in their own separate panel. I also have the modal panel outside of the other three panels. All of this is in one update panel. All three use only one popup panel. This appears to work just fine. Please let me know if this is not what you wanted. I have inlcuded both the web code and code behind in the snippet so you can test. I have also included the classes from the css that I am using.

WEB CODE:
 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TrayTest2.aspx.vb" Inherits="Testing_TrayTest2" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Panel runat="server">
                <asp:TextBox runat="server" id="textbox1">
                </asp:TextBox>
                <asp:Button runat="server" Text="Button" id="button5" />
                <cc1:ConfirmButtonExtender ID="button5_ConfirmButtonExtender" runat="server" ConfirmText="" DisplayModalPopupID="button5_ModalPopupExtender" Enabled="True" TargetControlID="button5">
                </cc1:ConfirmButtonExtender>
                <cc1:ModalPopupExtender ID="button5_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" OkControlID="btnOK" TargetControlID="button5" CancelControlID="btnCancel" PopupControlID="ModalPopup">
                </cc1:ModalPopupExtender>
            </asp:Panel>
            <asp:Panel runat="server">
                <asp:TextBox runat="server" id="textbox2">
                </asp:TextBox>
                <asp:Button runat="server" Text="Button" id="button4" />
                <cc1:ConfirmButtonExtender ID="button4_ConfirmButtonExtender" runat="server" ConfirmText="" DisplayModalPopupID="button4_ModalPopupExtender" Enabled="True" TargetControlID="button4">
                </cc1:ConfirmButtonExtender>
                <cc1:ModalPopupExtender ID="button4_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" OkControlID="btnOK" TargetControlID="button4" CancelControlID="btnCancel" PopupControlID="ModalPopup">
                </cc1:ModalPopupExtender>
            </asp:Panel>
            <asp:Panel runat="server">
                <asp:TextBox runat="server" id="textbox3">
                </asp:TextBox>
                <asp:Button runat="server" Text="Button" id="button1" />
                <cc1:ConfirmButtonExtender ID="button1_ConfirmButtonExtender" runat="server" ConfirmText="" DisplayModalPopupID="button1_ModalPopupExtender" Enabled="True" TargetControlID="button1">
                </cc1:ConfirmButtonExtender>
                <cc1:ModalPopupExtender ID="button1_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" OkControlID="btnOK" TargetControlID="button1" CancelControlID="btnCancel" PopupControlID="ModalPopup">
                </cc1:ModalPopupExtender>
            </asp:Panel>
            <asp:Panel ID="ModalPopup" runat="server" CssClass="modalPopup" Style="display: none" Width="250px">
                <p>
                    All of your changes will be lost if you proceed. Are you sure you wish to cancel?</p>
                <div align="center">
                    <asp:Button ID="btnOK" runat="server" Text="OK" CausesValidation="false" />
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" />
                </div>
            </asp:Panel>
        </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
 
 
CODE BEHIND:
 
 
Partial Class Testing_TrayTest2
    Inherits System.Web.UI.Page
 
    Protected Sub button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles button1.Click
        textbox3.Text = "Clicked 3rd button"
    End Sub
 
    Protected Sub button4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles button4.Click
        textbox2.Text = "Clicked 2nd button"
    End Sub
 
    Protected Sub button5_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles button5.Click
        textbox1.Text = "Clicked 1st button"
    End Sub
End Class
 
 
CSS CLASSES:
 
/*-- Modal Dialogs --*/
.modalBackground
{
	background-color: Gray;
	filter:alpha(opacity=70);
	opacity:0.7;
}
 
.modalPopup
{
	background-color:#ffffdd;
	border-width:3px;
	border-style:solid;
	border-color:Gray;
	padding:3px;
	width:250px;
}

Open in new window

Rhino1272

After reading your question again, I think you may want to use the same extender for all three buttons? I do not think this can be done unless you extend the modal control yourself. My example uses three modal extenders but only one panel.

ChiBella

ASKER

Yes, I am trying to use the same extender for all three buttons.

I think I can do this...but I'm stuck on how to pass a javascript parameter from a button to the label(s) I want displayed within the popup and the command argument and name I want to pass to the server depending upon which button is pressed.

javascript:
function ShowModalPopup() 
{
 
var mpe = $find('ModalPopupExtender1'); 
  if (mpe) {
    mpe.show();
  }
}
.....
one of the buttons calling the javascript
.....
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
  <asp:Button ID="btnASave" cssClass="centerButton" runat="server" Text="Button A Text" OnClientClick="ShowModalPopup(buttonA parameter?)"  />
</ContentTemplate>
  
  </asp:UpdatePanel>
 
 
 
 
.....
Single Modalpopup outside of the panels containing the buttons that call the javascript function
.....
<asp:UpdatePanel ID="UpdatePanelPopSave" runat="server" UpdateMode="Conditional">
     <ContentTemplate>  
            <asp:Label ID="lblPopTest" runat="server" Text="Start"></asp:Label>
     <%-- <asp:Button    ID="btnPopSave" runat="server"  Text="Open MessageBox" />--%>
         <asp:LinkButton ID="btnPopSave" runat="server" style="display: none;" ></asp:LinkButton>
        <cc1:ModalPopupExtender  ID="ModalPopupExtender1" runat="server" 
             TargetControlID="btnPopSave"
             PopupControlID="PanelPopSave"
             BackgroundCssClass="modalBackground"
             DropShadow="true"
             CancelControlID="CancelButton"
             BehaviorID="ModalPopupExtender1" >
        </cc1:ModalPopupExtender>    
 
   <asp:Panel ID="PanelPopSave" runat="server" CssClass="modalPopup" Style="display: none" Width="350px">
   <p class="modalPopupTitle">
       <asp:Label ID="lblPopupTitleAddress" runat="server" ></asp:Label> Button Specific Text Here Save Options</p>
  <input id="RadioSavePop" name="Radio" runat="server" type="radio" />
   <label  for="RadioSavePop">Save Only!</label><br />
   <input id="RadioSaveProm" name="Radio" runat="server" type="radio" />
   <label  for="RadioSaveProm"Need Button Specific Text here!</label><br />
   <br />
   <div align="center">
      <asp:Button ID="Ok" runat="server" Text="OK" OnClick="Save" CommandArgument = "BUTTONX" CommandName="BUTTONXUpdate"  />
      <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
   </div>
   </asp:Panel>
 </ContentTemplate>
 </asp:UpdatePanel>

Open in new window

ASKER CERTIFIED SOLUTION

ChiBella

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial