UpdatePanel and ModalPopupExtender control

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » UpdatePanel and ModalPopupExtender control

Previous Next

UpdatePanel and ModalPopupExtender control

Last post 12-27-2007 10:58 AM by submentor. 5 replies.

Sort Posts:

UpdatePanel and ModalPopupExtender control

10-31-2006, 11:17 AM

Contact

Loading...
sweetCoffee
Joined on 09-08-2006, 8:04 AM
Neerpelt, BE
Posts 40

Hello all

For my error messages I'm using a ModalPopupExtender with a red background to show the user has done something wrong.
If for example the user types in a bad username/password combination, it does a postback and after that it shows me the ModalPopup.

This works fine!

But I want to use the UpdatePanel control of course to make it more smooth, nicer and application alike.

When I put the ModalPopupExtender and Panel (both are on my masterpage) in an UpdatePanel like this:

<ajax:UpdatePanel id="myUpdatePanel" runat="server">
<ContentTemplate>

<toolkit:ModalPopupExtender ID="errorModalPopup"
                                    runat="server"
                                    TargetControlID="btnHidden"
                                    PopupControlID="ErrorPanel"
                                    CancelControlID="btnApply"
                                    DropShadow="true"
                                    BackgroundCssClass="ErrorModalPopupClass"
                                    BehaviorID="test2">
</toolkit:ModalPopupExtender>

<asp:Panel ID="ErrorPanel" runat="server" CssClass="ErrorPanelSettingsClass" Style='display:none' DefaultButton='btnApply'>
<asp:Label ID="lblErrorMessage" runat="server"></asp:Label><br />
<asp:ImageButton ID="btnApply" ImageUrl="~/Images/icons/apply.png" runat="server" CssClass="ApplyButton" />
</asp:Panel>

</ContentTemplate>
</ajax:UpdatePanel>

When I now put my Login Control on my Login.aspx page also into an UpdatePanel, it doens't work as expected. When I click the Login button, nothing happens...

Does anybody know how to achieve this? I really like this solution.

thx !

Gerrie

Filed under: UpdatePanel, ASP.NET AJAX Control Toolkit, AjaxControlToolkit, AJAX Control Toolkit, modalPopup updatepanel

Re: UpdatePanel and ModalPopupExtender control

11-13-2006, 5:49 PM

Contact

Loading...
David Anson
Joined on 04-11-2006, 1:39 AM
Microsoft
Posts 1,842

Please try your scenario with the recently available 61106 release of the Toolkit (and ASP.NET AJAX Beta 2). If the problem persists, then please reply with a complete, self-contained sample page that demonstrates the problem so that we can investigate the specific behavior you're seeing. Thank you!

This posting is provided "AS IS" with no warranties, and confers no rights.

Re: UpdatePanel and ModalPopupExtender control

11-14-2006, 1:08 PM

Contact

Loading...
kmobarra
Joined on 08-11-2006, 10:36 PM
Posts 25

David,

I don't know if you finally got the sample you needed or not. But so you know, I do have the latest update to the toolkit. However I can't get the modalpopup and updatepanel to work together properly. And that's not to mention the funny issue of the popup sometimes showing up automatically and without being triggered from the code. I saw others had that problem, too.

Anyways, here is a self-contained test page for you. It is based on some code initially borrowed from Ted Glaza, changed to VB, then AJAX, then simplified and then changed to fit this sample! :)

Any solution or workaround you can provide me with, is highly appreciated. I'm already in a time crunch and don't have the luxury of playing around with these controls. By the way, in real life,my popup control has to be launched from imagebuttons in a DataGrid. All are created on the server-side and I can't change that design easily.

Thanks,

Kathy

@ Page Language="VB" %>

@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

script runat="server">

Protected Sub CommandButton_OnSelect(ByVal sender As Object, ByVal e As CommandEventArgs)

Dim ID As Integer = CInt(e.CommandArgument)

Dim x As System.Xml.XmlNode = Data.GetXmlDocument.SelectSingleNode(String.Format("descendant::item[@id='{0}']", ID))

If Not IsNothing(x) Then

myDynamicLabel.Text =

"The URL is: " & x.Attributes("url").Value

Else

myDynamicLabel.Text =

"Item with ID: " & ID.ToString & " could not be found."

End If

ModalPopupExtender.Show()

End Sub

script>

html xmlns="http://www.w3.org/1999/xhtml" >

head runat="server">

<title>Untitled Page</title>

/*Modal Popup*/

.modalBackground

{

background-color:Gray;

filter:alpha(opacity=70);

opacity:0.7;

}

.modalPopup

{

background-color:#FFF8C6;

border-width:3px;

border-style:solid;

border-color:Gray;

padding:3px;

width:350px;

}

</style>

head>

body>

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering=true />

<p>

Some nonsense text to show the postback. blah di blah.

kjdhfjkh ksdhhsdfhj haunnsdju urfh kjhdjkf kjhdflgkh hr ujseopop';ui;j m[plio;l hjyryawre ghvnb mdfb jyutet ihe lijj huhiut hiuhvnmx mnbuyteruy gwerbmbnhfghtf jhel/krtjk ih banvdhtsfr cvnhfhtfd wklieth bnhdchzgf dejhfgkuhgr jwhg

lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f

</p>

<p>

Some nonsense text to show the postback. blah di blah.

kjdhfjkh ksdhhsdfhj hak kkfguhe mndfgkjh dkjg hzsnmbrtulk typi ,bngf aytwr eb mbhjvu ;orijnjm BFMhbmhdfbv ghvme hjmhg fbmbmnb mnbz

unnsdju urfh lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f

</p>

<p>

Some nonsense text to show the postback. blah di blah.

kjdhfjkh ksdhhsdfhj haunnsdju urfh lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f

</p>

<asp:XmlDataSource ID="Data" runat="server">

<Data>

<items>

</items>

</Data>

</asp:XmlDataSource>

<asp:DataList ID="List" runat="server" DataSourceID="Data">

<HeaderTemplate>Microsoft Web Development Technologies:</HeaderTemplate>

<asp:LinkButton ID="CommandButton" runat="server" Text='<%# Eval("name") %>'

CommandName="Select" CommandArgument='<%# Eval("id") %>'

OnCommand="CommandButton_OnSelect" />

</ItemTemplate>

</asp:DataList>

<!-- If you start the UpdatePanel here, you need some ControlID for the trigger.

Try CommandButton and you get an error that it doesn't exit.

Try List and the popup doesn't show.

What else?!

You can set it to something totally unrelated, like btnTest for the popup to work

or you can remove the UpdatePanel altogether, since it's no good anyways...

-->

<asp:UpdatePanel ID="UPPnl" runat="Server" UpdateMode="Conditional">

<asp:Panel ID="Panel1" runat="server" width=630 CssClass="modalPopup" style="display:none">

<asp:Label ID="myDynamicLabel" runat="server"></asp:Label>

<asp:Button CssClass="command" ID="Cancel" runat="server" Text="Cancel" CausesValidation="False" />

</asp:Panel>

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="btnTest" />

</Triggers>

</asp:UpdatePanel>

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="btnTest" PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="Cancel" CancelControlID="Cancel" />

<br />

<asp:Button ID="btnTest" runat="server" Text="Don't Click Me!"/>

</form>

body>

html>

Re: UpdatePanel and ModalPopupExtender control

11-14-2006, 1:08 PM

Contact

Loading...
kmobarra
Joined on 08-11-2006, 10:36 PM
Posts 25

David,

Anyways, here is a self-contained test page for you. It is based on some code initially borrowed from Ted Glaza, changed to VB, then AJAX, then simplified and then changed to fit this sample! :)

Thanks,

Kathy

@ Page Language="VB" %>

@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

script runat="server">

Protected Sub CommandButton_OnSelect(ByVal sender As Object, ByVal e As CommandEventArgs)

Dim ID As Integer = CInt(e.CommandArgument)

Dim x As System.Xml.XmlNode = Data.GetXmlDocument.SelectSingleNode(String.Format("descendant::item[@id='{0}']", ID))

If Not IsNothing(x) Then

myDynamicLabel.Text =

"The URL is: " & x.Attributes("url").Value

Else

myDynamicLabel.Text =

"Item with ID: " & ID.ToString & " could not be found."

End If

ModalPopupExtender.Show()

End Sub

script>

html xmlns="http://www.w3.org/1999/xhtml" >

head runat="server">

<title>Untitled Page</title>

/*Modal Popup*/

.modalBackground

{

background-color:Gray;

filter:alpha(opacity=70);

opacity:0.7;

}

.modalPopup

{

background-color:#FFF8C6;

border-width:3px;

border-style:solid;

border-color:Gray;

padding:3px;

width:350px;

}

</style>

head>

body>

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering=true />

<p>

Some nonsense text to show the postback. blah di blah.

lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f

</p>

<p>

Some nonsense text to show the postback. blah di blah.

kjdhfjkh ksdhhsdfhj hak kkfguhe mndfgkjh dkjg hzsnmbrtulk typi ,bngf aytwr eb mbhjvu ;orijnjm BFMhbmhdfbv ghvme hjmhg fbmbmnb mnbz

unnsdju urfh lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f

</p>

<p>

Some nonsense text to show the postback. blah di blah.

kjdhfjkh ksdhhsdfhj haunnsdju urfh lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f

</p>

<asp:XmlDataSource ID="Data" runat="server">

<Data>

<items>

</items>

</Data>

</asp:XmlDataSource>

<asp:DataList ID="List" runat="server" DataSourceID="Data">

<HeaderTemplate>Microsoft Web Development Technologies:</HeaderTemplate>

<asp:LinkButton ID="CommandButton" runat="server" Text='<%# Eval("name") %>'

CommandName="Select" CommandArgument='<%# Eval("id") %>'

OnCommand="CommandButton_OnSelect" />

</ItemTemplate>

</asp:DataList>

<!-- If you start the UpdatePanel here, you need some ControlID for the trigger.

Try CommandButton and you get an error that it doesn't exit.

Try List and the popup doesn't show.

What else?!

You can set it to something totally unrelated, like btnTest for the popup to work

or you can remove the UpdatePanel altogether, since it's no good anyways...

-->

<asp:UpdatePanel ID="UPPnl" runat="Server" UpdateMode="Conditional">

<asp:Panel ID="Panel1" runat="server" width=630 CssClass="modalPopup" style="display:none">

<asp:Label ID="myDynamicLabel" runat="server"></asp:Label>

<asp:Button CssClass="command" ID="Cancel" runat="server" Text="Cancel" CausesValidation="False" />

</asp:Panel>

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="btnTest" />

</Triggers>

</asp:UpdatePanel>

<br />

<asp:Button ID="btnTest" runat="server" Text="Don't Click Me!"/>

</form>

body>

html>

Re: UpdatePanel and ModalPopupExtender control

11-15-2006, 9:00 PM

Contact

Loading...
David Anson
Joined on 04-11-2006, 1:39 AM
Microsoft
Posts 1,842

Kathy,

You seem to be trying to do dynamic population. If so, then I'd recommend the approach I blog here: http://blogs.msdn.com/delay/archive/2006/09/19/762609.aspx.

Alternatively, if you're willing to have slightly larger pages, the below is your sample transformed into a solution that doesn't use postbacks and therefore doesn't need UpdatePanels:

<%@ Page Language="VB" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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>Untitled Page</title>
    <style type="text/css"> 
/*Modal Popup*/
.modalBackground
{ 
background-color:Gray; 
filter:alpha(opacity=70); 
opacity:0.7; 
}
.modalPopup
{ 
background-color:#FFF8C6; 
border-width:3px; 
border-style:solid; 
border-color:Gray; 
padding:3px; 
width:350px; 
} 
</style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
        <p>
            Some nonsense text to show the postback. blah di blah. kjdhfjkh ksdhhsdfhj haunnsdju
            urfh kjhdjkf kjhdflgkh hr ujseopop';ui;j m[plio;l hjyryawre ghvnb mdfb jyutet ihe
            lijj huhiut hiuhvnmx mnbuyteruy gwerbmbnhfghtf jhel/krtjk ih banvdhtsfr cvnhfhtfd
            wklieth bnhdchzgf dejhfgkuhgr jwhg lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf
            jkhgdsf uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f
        </p>
        <p>
            Some nonsense text to show the postback. blah di blah. kjdhfjkh ksdhhsdfhj hak kkfguhe
            mndfgkjh dkjg hzsnmbrtulk typi ,bngf aytwr eb mbhjvu ;orijnjm BFMhbmhdfbv ghvme
            hjmhg fbmbmnb mnbz unnsdju urfh lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf
            uytser bvioy yhsejehyj mjnbcvjytyue rvkiuyd h j vihbrtkj f
        </p>
        <p>
            Some nonsense text to show the postback. blah di blah. kjdhfjkh ksdhhsdfhj haunnsdju
            urfh lusyfiuysdkj jutyujefg jgdfjhg hjdgfhjg dkjf jkhgdsf uytser bvioy yhsejehyj
            mjnbcvjytyue rvkiuyd h j vihbrtkj f
        </p>
        <asp:XmlDataSource ID="Data" runat="server">
            <Data> 
                <items> 
                    <item id="1" name="ASP.NET" url="http://msdn.microsoft.com" /> 
                    <item id="2" name="AJAX" url="http://ajax.asp.net" /> 
                    <item id="3" name="AJAX Control Toolkit" url="http://ajax.asp.net/ajaxtoolkit" /> 
                </items> 
            </Data>
        </asp:XmlDataSource>
                <asp:DataList ID="List" runat="server" DataSourceID="Data">
                    <HeaderTemplate>
                        Microsoft Web Development Technologies:</HeaderTemplate>
                    <ItemTemplate>
                        <asp:LinkButton ID="CommandButton" runat="server" Text='<%# Eval("name") %>' CommandName="Select"
                            CommandArgument='<%# Eval("id") %>'/>
                        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="CommandButton"
                            PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true"
                            OkControlID="Cancel" CancelControlID="Cancel" />
                        <asp:Panel ID="Panel1" runat="server" Width="630" CssClass="modalPopup" Style="display: none">
                            <asp:Label ID="myDynamicLabel" runat="server" Text='<%# Eval("url") %>'></asp:Label>
                            <asp:Button CssClass="command" ID="Cancel" runat="server" Text="Cancel" CausesValidation="False" />
                        </asp:Panel>
                    </ItemTemplate>
                </asp:DataList>
    </form>
</body>
</html>

This posting is provided "AS IS" with no warranties, and confers no rights.

Re: UpdatePanel and ModalPopupExtender control

12-27-2007, 10:58 AM

Contact

Loading...
submentor
Joined on 12-27-2007, 10:40 AM
Lima - Perú
Posts 2

Sorry, for my bad english. Maybe this is the solution for some...

This is a part of a code of ASCX user control in C# and works

.....

<asp:UpdatePanel ID="updDatos" runat="server" UpdateMode="Conditional">
<ContentTemplate>

<%--CONTROL USER (Not important).... --%>
   <delta:filtro ID="Filtro" runat="server" />

   <br />

<asp:Button runat="server" ID="btnBuscar" OnClick="btnBuscar_Click" Text="Buscar" />

<%--1. CONTROL USER --%>
   <delta:resultado ID="Resultado" runat="server" OnSeleccionar="Seleccionar_Click"/>

<%--2. Button invisible .... --%>
   <div style="display:none">
       <asp:LinkButton ID="btnPrevio" runat="server" Text="Any text... " />
   </div>

   <asp:Panel ID="pnlConfirma" runat="server" CssClass="modalPopup" Style="display: none">
       <asp:Panel ID="Panel3" runat="server" Style="cursor: move; background-color: #DDDDDD;
           border: solid 1px Gray; color: Black">
           <div>
               <p>
                   De aca arrastro...</p>
           </div>
       </asp:Panel>
       <asp:Label ID="lblConfirmacion" runat="server" />
       <br />
       <asp:Button ID="btnOk" runat="server" Text="Ok" />
       <asp:Button ID="btnCancelar" runat="server" Text="Cancelar" />
   </asp:Panel>

   <ajax:ModalPopupExtender ID="modalConfirmar" runat="server" BackgroundCssClass="modalBackground"
       CancelControlID="btnCancelar" DropShadow="true" OkControlID="btnOK" PopupControlID="pnlConfirma"
       PopupDragHandleControlID="Panel3" TargetControlID="btnPrevio">
   </ajax:ModalPopupExtender>

</ContentTemplate>
<Triggers>

<%--3. Trigger of my control user --%>
<asp:AsyncPostBackTrigger ControlID="Resultado" EventName="Seleccionar" />

<%--4. IMPORTANT: Trigger of Invisible Button --%>
<asp:AsyncPostBackTrigger ControlID="btnPrevio" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

............................................................................

in code:

     protected void Seleccionar_Click (object sender, EventArgs e) {

        //BLA BLA BLA...

//personalize my modal pop up, previously... (bad english Stick out tongue )
lblConfirmacion.Text ="Personalizar el control..."; //Text personalized..