Since the feature request has come up so many times here and since we now support the relevant scenario in the new 60914 release of the Toolkit, I've just blogged a little example of dynamically populating the content of a popup control (HoverMenu, ModalPopup, or PopupControl) as it's being displayed. You can find the blog post here:
http://blogs.msdn.com/delay/archive/2006/09/19/762609.aspx
Hope this helps!
Hi David,
Thanks for this post. This does seem handy. However, what if the DataList in your example is programatically binded and we want it inside of an update panel? I modified your example to do this and I get an assertion failed error when I click my button to load the DataList. Any thoughts on how to accomplish this?
Thanks.
1<%@. Page Language="C#" %>2<%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit"3 TagPrefix="atlasToolkit" %>4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"5 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">67<script runat="server">8 [System.Web.Services.WebMethod]9 public string GetContent(string contextKey)10 {11 // Create a random color12 string color = (new Random()).Next(0xffffff).ToString("x6");13 // Use the style specified by the page author14 string style = contextKey;15 // Display the current time16 string time = DateTime.Now.ToLongTimeString();17 // Compose the content to return18 return "<span style='color:#" + color + "; " + style + "'>" + time + "</span> ";19 }2021 protected void Button2_Click(object sender, EventArgs e)22 {23 DataList1.DataSourceID = "XmlDataSource1";24 DataList1.DataBind();25 }26</script>2728<html xmlns="http://www.w3.org/1999/xhtml">29<head id="Head1" runat="server">30 <title>Dynamic ModalPopup Demonstration</title>3132<%-- Style the page so it looks pretty --%>33 <style type="text/css">34 body { font-family:Verdana; font-size:10pt; }35 .background { background-color:Gray; }36 .popup { width:200px; padding:10px; background-color:White;37 border-style:solid; border-color:Black; border-width:2px;38 vertical-align: middle; text-align:center; }39 </style>40</head>41<body>42 <form id="form1" runat="server">4344<%-- Atlas pages need a ScriptManager --%>45 <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />4647<%-- A very simple data source to drive the demonstration --%>48 <asp:XmlDataSource ID="XmlDataSource1" runat="server">49 <Data>50 <items>51 <item style="font-weight:bold" />52 <item style="font-style:italic" />53 <item style="text-decoration:underline" />54 </items>55 </Data>56 </asp:XmlDataSource>57 <%-- A simple list of all the data items available --%>58 <atlas:UpdatePanel ID="UpdatePanel1" runat="server">59 <ContentTemplate>6061 <asp:DataList ID="DataList1" runat="server">6263 <HeaderTemplate>64 How would you like your dynamic content styled?65 </HeaderTemplate>6667 <ItemTemplate>68 • <asp:LinkButton ID="LinkButton" runat="server" Text='<%# Eval("style")%>' />6970<%-- The ModalPopupExtender, popping up Panel1 and dynamically populating Panel2 --%>71 <atlasToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server">72 <atlasToolkit:ModalPopupProperties73 TargetControlID="LinkButton" PopupControlID="Panel1" OkControlID="Button1"74 BackgroundCssClass="background" DynamicControlID="Panel2"75 DynamicContextKey='<%# Eval("style")%>' DynamicServiceMethod="GetContent" />76 </atlasToolkit:ModalPopupExtender>77 </ItemTemplate>7879 </asp:DataList>80 <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" />81 </ContentTemplate>82 </atlas:UpdatePanel>8384<%-- All ModalPopups share the same popup --%>85 <asp:Panel ID="Panel1" runat="server" CssClass="popup" style="display:none;">86 <p>This popup popped at <asp:Label ID="Panel2" runat="server" /> and all was well.</p>87 <p><asp:Button ID="Button1" runat="server" Text="OK" /></p>88 </asp:Panel>8990 </form>91</body>92</html>Can this be done in a Web User Control for example? How?
Cheers
To avoid the asserts in the scenario above, just use the recommended "empty extender in the page body" workaround. Specifically, add the following line below Button2:
<atlasToolkit:ModalPopupExtender ID="PlaceholderModalPopupExtender" runat="server" />
Regarding doing this in a Web User Control, I expect it should work fine. What trouble are you having?
David,
I cannot get it to call the method in the web user control.
I have created a seprate thread:http://forums.asp.net/thread/1404652.aspx
Ziax
FYI: I've posted a new blog entry outlining the steps to update the sample to the new ASP.NET AJAX style used by Beta 1/2:
http://blogs.msdn.com/delay/archive/2006/11/17/dynamic-content-made-easy-redux-how-to-use-the-new-dynamic-population-support-for-toolkit-controls.aspx
First, thanks for the code. I have another question :What if I want to have DataGrid inside Panel1 which value depends on DynamicContextKey from ModalPopup
<asp:Panel ID="Panel1" runat="server" CssClass="popup" style="display:none;"> <p>This popup popped at <asp:Label ID="Panel2" runat="server" /> and all was well.</p> <p><asp:Button ID="Button1" runat="server" Text="OK" /></p><
asp:DataGridID="dgYesNo"runat="server"></asp:DataGrid> </asp:Panel>
You might consider something like this:http://weblogs.asp.net/scottgu/archive/2006/10/22/Tip_2F00_Trick_3A00_-Cool-UI-Templating-Technique-to-use-with-ASP.NET-AJAX-for-non_2D00_UpdatePanel-scenarios.aspx
what if I have an dropdownlist, how can I populate it?
what if I have a dropdownlist, how can I populate it?
No comments:
Post a Comment