I am new to this forum, but I am hoping someone can help me with a problem I am having. I created a User Control called Dialog which contains a ModalPopupExtender along with some html markup, labels, and buttons. If I add one instance of the Dialog control
to a page, things work fine. However, when I attempt to add another instance the first instance will work as expected, but the second instance does not. See my example code below.
Scenario 1
- Click button "One" which brings up d1
- Click either "Button 1" or "Button 2" to close d1 popup
- Click button "Two" - I expect d2 popup to display, but the result is d1 popup comes up
Scenario 2
- Click button "Two" - I expect d2 popup to display, but the labels and button texts are empty
I'm stumped and have no idea how to debug this. I would very much appreciate any advice, suggestions, or even an alternate approach(es). Thanks!
Partial Class Test
Inherits System.Web.UI.Page
Protected Sub btn1_Click(sender As Object, e As System.EventArgs) Handles btn1.Click
With d1
.DialogTitle = "Dialog 1"
.DialogText = "Testing dialog box 1"
.DialogButton1Text = "Button 1"
.DialogButton2Text = "Button 2"
.ShowDialog()
End With
End Sub
Protected Sub btn2_Click(sender As Object, e As System.EventArgs) Handles btn2.Click
With d2
.DialogTitle = "Dialog 2"
.DialogText = "Testing dialog box 2"
.DialogButton1Text = "Button 3"
.DialogButton2Text = "Button 4"
.ShowDialog()
End With
End Sub
End Class
Partial Class Dialog
Inherits System.Web.UI.UserControl
Public Event DialogButton1Clicked As EventHandler
Public Event DialogButton2Clicked As EventHandler
Public Event dialogButton3Clicked As EventHandler
Public Property DialogTitle As String
Get
Return lblDialogTitle.Text
End Get
Set(value As String)
lblDialogTitle.Text = value
End Set
End Property
Public Property DialogText As String
Get
Return lblDialogText.Text
End Get
Set(value As String)
lblDialogText.Text = value
End Set
End Property
Public Property DialogButton1Text As String
Get
Return btnDialog1.Text
End Get
Set(value As String)
btnDialog1.Text = value
End Set
End Property
Public Property DialogButton2Text As String
Get
Return btnDialog2.Text
End Get
Set(value As String)
btnDialog2.Text = value
End Set
End Property
Public Property DialogButton3Text As String
Get
Return btnDialog3.Text
End Get
Set(value As String)
btnDialog3.Text = value
End Set
End Property
Protected Sub btnDialog1_Click(sender As Object, e As System.EventArgs) Handles btnDialog1.Click
RaiseEvent DialogButton1Clicked(sender, e)
End Sub
Protected Sub btnDialog2_Click(sender As Object, e As System.EventArgs) Handles btnDialog2.Click
RaiseEvent DialogButton2Clicked(sender, e)
End Sub
Protected Sub btnDialog3_Click(sender As Object, e As System.EventArgs) Handles btnDialog3.Click
RaiseEvent dialogButton3Clicked(sender, e)
End Sub
Public Sub ShowDialog()
modalDialog.Show()
End Sub
Public Sub HideDialog()
modalDialog.Hide()
End Sub
End Class
Anno D.
Member
1 Points
3 Posts
Problem with multiple instances of User Control containing ModalPopupExtender on a page
Dec 05, 2012 09:07 PM|LINK
Hello,
I am new to this forum, but I am hoping someone can help me with a problem I am having. I created a User Control called Dialog which contains a ModalPopupExtender along with some html markup, labels, and buttons. If I add one instance of the Dialog control to a page, things work fine. However, when I attempt to add another instance the first instance will work as expected, but the second instance does not. See my example code below.
Scenario 1
- Click button "One" which brings up d1
- Click either "Button 1" or "Button 2" to close d1 popup
- Click button "Two" - I expect d2 popup to display, but the result is d1 popup comes up
Scenario 2
- Click button "Two" - I expect d2 popup to display, but the labels and button texts are empty
I'm stumped and have no idea how to debug this. I would very much appreciate any advice, suggestions, or even an alternate approach(es). Thanks!
Test.aspx
<%@ Register Src="~/UserControls/Dialog.ascx" TagName="Dialog" TagPrefix="uc" %> <!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> <style type="text/css"> .modal_popup_small { border-width: 1px; border-style: solid; background-color: #edf7fc; position: absolute; width: 400px; height: auto; padding: 7px; z-index: 30; } </style> </head> <body> <form id="form1" runat="server"> <div> <ajx:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </ajx:ToolkitScriptManager> <uc:Dialog ID="d1" runat="server" /> <uc:Dialog ID="d2" runat="server" /> <asp:Button ID="btn1" runat="server" Text="One" /> <asp:Button ID="btn2" runat="server" Text="Two" /> </div> </form> </body> </html>Test.aspx.vb
Partial Class Test Inherits System.Web.UI.Page Protected Sub btn1_Click(sender As Object, e As System.EventArgs) Handles btn1.Click With d1 .DialogTitle = "Dialog 1" .DialogText = "Testing dialog box 1" .DialogButton1Text = "Button 1" .DialogButton2Text = "Button 2" .ShowDialog() End With End Sub Protected Sub btn2_Click(sender As Object, e As System.EventArgs) Handles btn2.Click With d2 .DialogTitle = "Dialog 2" .DialogText = "Testing dialog box 2" .DialogButton1Text = "Button 3" .DialogButton2Text = "Button 4" .ShowDialog() End With End Sub End ClassDialog.acx
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Dialog.ascx.vb" Inherits="Dialog" %> <ajx:ModalPopupExtender ID="modalDialog" runat="server" TargetControlID="lblDialogText" PopupControlID="divDialog"> </ajx:ModalPopupExtender> <div id="divDialog" style="display: none;"> <div class="modal_popup_small" style="padding: 0px;"> <div style="display: block; background-color: #34282C; color: #a3e2ef; padding: 2px; font-weight: bold; font-size: 12pt;"> <asp:Label ID="lblDialogTitle" runat="server" Text=""></asp:Label></div> <div style="padding: 7px;"> <asp:Label ID="lblDialogText" runat="server" Text="" style="text-align: justify;"></asp:Label><br /><br /> <div style="text-align: center;"> <asp:Button ID="btnDialog1" runat="server" Text="" CssClass="button" /> <asp:Button ID="btnDialog2" runat="server" Text="" CssClass="button" /> <asp:Button ID="btnDialog3" runat="server" Text="" CssClass="button" Visible="false" /> </div> </div> </div> </div>Dialog.ascx.vb
Partial Class Dialog Inherits System.Web.UI.UserControl Public Event DialogButton1Clicked As EventHandler Public Event DialogButton2Clicked As EventHandler Public Event dialogButton3Clicked As EventHandler Public Property DialogTitle As String Get Return lblDialogTitle.Text End Get Set(value As String) lblDialogTitle.Text = value End Set End Property Public Property DialogText As String Get Return lblDialogText.Text End Get Set(value As String) lblDialogText.Text = value End Set End Property Public Property DialogButton1Text As String Get Return btnDialog1.Text End Get Set(value As String) btnDialog1.Text = value End Set End Property Public Property DialogButton2Text As String Get Return btnDialog2.Text End Get Set(value As String) btnDialog2.Text = value End Set End Property Public Property DialogButton3Text As String Get Return btnDialog3.Text End Get Set(value As String) btnDialog3.Text = value End Set End Property Protected Sub btnDialog1_Click(sender As Object, e As System.EventArgs) Handles btnDialog1.Click RaiseEvent DialogButton1Clicked(sender, e) End Sub Protected Sub btnDialog2_Click(sender As Object, e As System.EventArgs) Handles btnDialog2.Click RaiseEvent DialogButton2Clicked(sender, e) End Sub Protected Sub btnDialog3_Click(sender As Object, e As System.EventArgs) Handles btnDialog3.Click RaiseEvent dialogButton3Clicked(sender, e) End Sub Public Sub ShowDialog() modalDialog.Show() End Sub Public Sub HideDialog() modalDialog.Hide() End Sub End ClassDecker Dong ...
All-Star
118619 Points
18779 Posts
Re: Problem with multiple instances of User Control containing ModalPopupExtender on a page
Dec 07, 2012 07:11 AM|LINK
Hi,
Your problem seems very interesting, which takes me a period of long time to cope with.
Your 1st situation is because your generated Html codes have the same div's Id, so at a time you can never popup the dialog2.
Solution is to add runat=server:
As for your 2nd situation, I don't think that's a problem——because when you click the button, the whole page will be submitted. See this torturial:
http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx
Anno D.
Member
1 Points
3 Posts
Re: Problem with multiple instances of User Control containing ModalPopupExtender on a page
Dec 07, 2012 04:47 PM|LINK
Awesome, that worked!
Such a simple fix, but I never would have thought it. Thank you very much for taking the time to help me solve my problem! I really appreciate it.
Happy Holidays!