updatepanel broker: messages

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

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

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 initiallyborrowedfrom 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

@.PageLanguage="VB" %>

@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

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

scriptrunat="server">ProtectedSub CommandButton_OnSelect(ByVal senderAsObject,ByVal eAs CommandEventArgs)Dim IDAsInteger =CInt(e.CommandArgument)Dim xAs System.Xml.XmlNode = Data.GetXmlDocument.SelectSingleNode(String.Format("descendant::item[@.id='{0}']", ID))IfNot IsNothing(x)Then

myDynamicLabel.Text =

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

myDynamicLabel.Text =

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

ModalPopupExtender.Show()

EndSub

script>

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

headrunat="server"><title>Untitled Page</title><styletype="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><formid="form1"runat="server"><asp:ScriptManagerID="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:XmlDataSourceID="Data"runat="server"><Data><items><itemid="1"name="ASP.NET"url="http://msdn.microsoft.com"/><itemid="2"name="AJAX"url="http://ajax.asp.net"/><itemid="3"name="AJAX Control Toolkit"url="http://ajax.asp.net/ajaxtoolkit"/></items></Data></asp:XmlDataSource>

<asp:DataListID="List"runat="server"DataSourceID="Data"><HeaderTemplate>Microsoft Web Development Technologies:</HeaderTemplate><ItemTemplate><asp:LinkButtonID="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:UpdatePanelID="UPPnl"runat="Server"UpdateMode="Conditional"><ContentTemplate><asp:PanelID="Panel1"runat="server"width=630CssClass="modalPopup"style="display:none">

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

<asp:ButtonCssClass="command"ID="Cancel"runat="server"Text="Cancel"CausesValidation="False"/></asp:Panel></ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="btnTest"/></Triggers></asp:UpdatePanel>

<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender"runat="server"TargetControlID="btnTest"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="Cancel"CancelControlID="Cancel"/><br/><br/><asp:ButtonID="btnTest"runat="server"Text="Don't Click Me!"/></form>

body>

html>

David,

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

Thanks,

Kathy

@.PageLanguage="VB" %>

@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

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

myDynamicLabel.Text =

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

myDynamicLabel.Text =

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

ModalPopupExtender.Show()

EndSub

script>

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

headrunat="server"><title>Untitled Page</title><styletype="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><formid="form1"runat="server"><asp:ScriptManagerID="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

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:UpdatePanelID="UPPnl"runat="Server"UpdateMode="Conditional"><ContentTemplate><asp:PanelID="Panel1"runat="server"width=630CssClass="modalPopup"style="display:none">

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

body>

html>

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>

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 voidSeleccionar_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..

//The event of my control user... trigger the modal pop up...
modalConfirmar.Show();
//BLA BLA BLA...

}

Smile

Wednesday, March 21, 2012

UpdatePanel and ModalPopupExtender control

updatepanel broker

Blog Archive

About Me