[How Do I:] Use the ASP.NET AJAX DynamicPopulate Extender?http://asp.netWed, 06 May 2009 02:09:12 GMTumbracoComments for [How Do I:] Use the ASP.NET AJAX DynamicPopulate Extender?enComment Posted by ajaykaushikhttp://asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-dynamicpopulate-extenderMon, 12 May 2008 11:53:41 GMT00000000-0000-0000-00000000871Hi,

I have been dynamic populate extender and its working in IE. But when i run it in Firefox it doesn't work. I get "Web Service call failed: 500" error. In IE its been working. I have used mostly the code available in tutorial only change is that i had to specify behaviorid to get it working.

Rest is pretty similar to Tutorial code.

Here is the code that i am using

<script type="text/javascript" language="javascript">

           function showSellerName(value){

               if (value != ''){

                   var behavior = $find('dp1');

                   if(behavior){

                       behavior.populate(value);

                   }

               }

           }

</script>

<asp:TextBox ID="txtSellerId" runat="server" MaxLength="12" Width="100px" onfocusout="showSellerName(this.value)"></asp:TextBox>

<ajaxToolkit:DynamicPopulateExtender ID="dp1" runat="server" ServiceMethod="GetSponsorName" TargetControlID="pnlSponsorName" PopulateTriggerControlID="txtSellerId" CacheDynamicResults="true" BehaviorID="dp1" UpdatingCssClass="dynamicPopulate_Updating" >

               </ajaxToolkit:DynamicPopulateExtender>

Please advise me what should i do to get it working in firefox as well.

Thanks.

]]>Comment Posted by rjv_rnjnhttp://asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-dynamicpopulate-extenderTue, 22 Jul 2008 13:51:16 GMT00000000-0000-0000-00000000872A sample code for achieving this in a drop-down list would be nice. As the value required to bind the drop down is a data table and not a string (in almost all cases). Currently when I wire the javascript method with the OnSelectedIndexChanged method of drop down list the web service method doesn't fire up (actually it doesn't compile at all). Any help would be great.

Thanks.

]]>Comment Posted by fstevebhttp://asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-dynamicpopulate-extenderTue, 05 Aug 2008 14:36:24 GMT00000000-0000-0000-00000000878I have been trying to use the ajaxToolkit:ModalPopupExtender to popup a modal window showing info when a link in a datagrid is clicked.

           <asp:GridView ID="gvs" runat="server"

               <Columns>

               <asp:TemplateField>

                <ItemTemplate>

                   <asp:LinkButton ID="LinkButton" runat="server" Text="Comments" />

                   <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"

                       TargetControlID="LinkButton" PopupControlID="Panel2" OkControlID="Button1"

                       BackgroundCssClass="modalBackground" DynamicControlID="lblComments"

                       DynamicContextKey='<%# Eval("Comments") %>' DynamicServiceMethod="GetContent" />

                 </ItemTemplate>

                 <HeaderTemplate>Comments</HeaderTemplate>

               </asp:TemplateField>

               </Columns>

           </asp:GridView>

       </div>

           <br />

  <%-- All ModalPopups share the same popup --%>

   <asp:Panel ID="Panel2" runat="server" CssClass="popup" style="display:none;">

     

Comments: <asp:Label ID="lblComments" runat="server" />

     

<asp:Button ID="Button1" runat="server" Text="OK" />

   </asp:Panel>

I placed the method in the codebehind which looks like this.

   [System.Web.Services.WebMethod, System.Web.Script.Services.ScriptMethod]

   public string GetContent(string contextKey)

   {

       // Create a random color

       string color = (new Random()).Next(0xffffff).ToString("x6");

       // Use the style specified by the page author

       string style = contextKey;

       // Display the current time

       string time = DateTime.Now.ToLongTimeString();

       // Compose the content to return

       return "<span style='color:#" + color + "; '>" + time + ": " + contextKey + "</span> ";

   }

When I click on the link I get the modal popup but the message is "Comments: Web Service call failed: 500"

Any idea why I am not able to call the webmethod?

]]>Comment Posted by cv_vikramhttp://asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-dynamicpopulate-extenderWed, 06 Aug 2008 13:24:40 GMT00000000-0000-0000-00000000879It is simple and good.

]]>Comment Posted by Roc1http://asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-dynamicpopulate-extenderFri, 15 Aug 2008 10:50:26 GMT00000000-0000-0000-00000000880>rjv_rnjn : On July 22, 2008 1:51 PM said:

>A sample code for achieving this in a drop-down list  >would be nice.

Markup:

-----------------------------------------

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit, Version=3.0.20229.20843, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"

Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<head id="Head1" runat="server">

   <title>Untitled Page</title>

   <style type="text/css">

       .dynamicPopulate_Normal

       {

       border: 1px inset #000080;

       padding: 2px;

       text-align: center;

       height: 1.5em;

       margin: 5px;

       width: 400px;

       }

       .dynamicPopulate_Updating

       {

       background-image:url(images/loading.gif);

       background-repeat:no-repeat;

       border: 1px inset #000080;

       text-align:center;

       height:1.5em;

       margin:5px;

       width:400px;

       }

   </style>

   <script type="text/javascript">

       function updateSelection(value) {

           var behavior = $find('DynamicPopulateExtender1');

           if (behavior) {

               behavior.populate(value);

           }

       }

   </script>

</head>

<body>

   <form id="form1" runat="server">

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

   Select your favorite vegetable:

   <asp:DropDownList ID="ddlVegetables" runat="server">

       <asp:ListItem>Spinach</asp:ListItem>

       <asp:ListItem>Cucumber</asp:ListItem>

       <asp:ListItem>Tomato</asp:ListItem>

       <asp:ListItem>Eggplant</asp:ListItem>

   </asp:DropDownList>

   <br />

   <asp:Panel ID="Panel1" runat="server" CssClass="dynamicPopulate_Normal">

   </asp:Panel>

   <ajaxToolkit:dynamicpopulateextender id="DynamicPopulateExtender1" runat="server"

       targetcontrolid="Panel1" servicemethod="Refresh" updatingcssclass="dynamicPopulate_Updating">

       </ajaxToolkit:dynamicpopulateextender>

   </form>

</body>

</html>

Code-Behind:

--------------------------------------------

using System;

public partial class _Default : System.Web.UI.Page

{

   protected void Page_Load(object sender, EventArgs e)

   {

       ddlVegetables.Attributes.Add("OnChange", "updateSelection(this.value);");

   }

   [System.Web.Services.WebMethod()]

   [System.Web.Script.Services.ScriptMethod()]

   public static string Refresh(string contextKey)

   {

       System.Threading.Thread.Sleep(1000);

       var text = string.Format("You selected: {0}", contextKey);

       return string.Format("<span style='font-family:courier new;font-weight:bold;'>{0}</span>", text);

   }

}

]]>Comment Posted by NewDayshttp://asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-dynamicpopulate-extenderThu, 28 Aug 2008 13:21:31 GMT00000000-0000-0000-00000000873I am trying to update the imageurl that the Image2 control looks at.  I keep getting inner html problems...meaning I didn't write the dynamic page that keeps popping up.  Please help.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a rel="nofollow" target="_new" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">">www.w3.org/.../xhtml1-transitional.dtd"></a>

<script runat="server">

   [System.Web.Services.WebMethod()]

   [System.Web.Script.Services.ScriptMethod()]

   public static string GetDynamicContent(string contextKey)

{

       System.Threading.Thread.Sleep(500);

       string img_hdr = "ImageUrl = ";

       string img_lctn = "";

       string final = "";

       if (contextKey == "y")

       {

           img_lctn = "~/Indicator Light/yellow.bmp";

       }

       else if (contextKey=="g")

       {

          img_lctn = "~/Indicator Light/green.bmp";

       }

       else if (contextKey == "b")

       {

           img_lctn = "~/Indicator Light/blue.bmp";

       }

       else

       {

           img_lctn = "~/Indicator Light/red.bmp";

       }

       final = img_hdr + img_lctn;

       return final;

}

   protected void cmdHome_Click(object sender, EventArgs e)

   {

       MultiView1.ActiveViewIndex = 0;

   }

   protected void cmdEval_Click(object sender, EventArgs e)

   {

       MultiView1.ActiveViewIndex = 1;

   }

   protected void cmdPyramids_Click(object sender, EventArgs e)

   {

       MultiView1.ActiveViewIndex = 2;

   }

</script>

<html xmlns="<a rel="nofollow" target="_new" href="http://www.w3.org/1999/xhtml">">www.w3.org/.../xhtml"></a>

<head runat="server">

   <title></title>

   <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

</head>

<body>

   <form id="form1" runat="server">

   <asp:scriptmanager ID="Scriptmanager1" runat="server" />

   <script type="text/javascript">

           function updateDateKey(value) {

               var behavior = $find('Image2_DynamicPopulateExtender');

               if (behavior) {

                   behavior.populate(value);

               }

           }

           Sys.Application.add_load(function(){updateDateKey('r');});

   </script>

                               style="z-index: 1; left: 700px; top: 124px; position: absolute; height: 378px; width: 405px">

                               <asp:Panel ID="Panel10" runat="server" style="position: relative; top: 55px; left: 8px; height: 313px; width: 344px">

                                   <asp:Image ID="Image2" runat="server" Height="46px" Width="49px" CssClass="dynamicPopulate_Normal"

                                       ImageUrl="~/Indicator Light/red.bmp" />

                                   <cc1:DynamicPopulateExtender ID="Image2_DynamicPopulateExtender" runat="server"

                                       Enabled="True" PopulateTriggerControlID=""  ServiceMethod="GetDynamicContent"

                                       TargetControlID="Image2" UpdatingCssClass="dynamicPopulate_Updating">

                                   </cc1:DynamicPopulateExtender>

<%--                                    <asp:RadioButtonList ID="RadioButtonList1" runat="server"

                                       style="position: absolute; top: 7px; left: 124px; height: 82px; width: 214px"

                                       onselectedindexchanged="RadioButtonList1_SelectedIndexChang ed"

                                       AutoPostBack="True">

                                       <asp:ListItem>Not meeting current obligations</asp:ListItem>

                                       <asp:ListItem>Turning away new work</asp:ListItem>

                                       <asp:ListItem>Able to accept new work</asp:ListItem>

                                       <asp:ListItem>Excess capacity</asp:ListItem>

                                   </asp:RadioButtonList>--%>

                                   <asp:Label ID="Label13" runat="server" Text=""></asp:Label>

       <div>

           <label for="r0">

               <input id="r0" checked="checked" name="rbFormat" onclick="updateDateKey(this.value);"

                   type="radio" value='r' />R)Not meeting current obligations</label><br />

           <label for="r1">

               <input id="r1" name="rbFormat" onclick="updateDateKey(this.value);" type="radio"

                   value='y' />Y)Turning away new work</label><br />

           <label for="r2">

               <input id="r2" name="rbFormat" onclick="updateDateKey(this.value);" type="radio"

                   value='g' />G)Ready to accept future work</label><br />

           <label for="r3">

               <input id="r3" name="rbFormat" onclick="updateDateKey(this.value);" type="radio"

                   value='b' />B)Excess acity</label><br />

       </div>

                               </asp:Panel>

Sorry about the poor indenting'I have been playing with the functionality and not the appearance.

]]>Comment Posted by ak_friendzhttp://asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-dynamicpopulate-extenderSun, 05 Oct 2008 12:22:12 GMT00000000-0000-0000-00000000874Simple and easy to implement....

]]>Comment Posted by som nath shuklahttp://asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-dynamicpopulate-extenderMon, 27 Oct 2008 08:00:01 GMT00000000-0000-0000-00000000875I am using the same dropdown and dynamic extender control. Every thing is fine when i am using mouse to change the selection in Dropdownlist. But when i use Tab and up/down key change the selection of dropdownlist. Dynamic extender event is not firing.

Plz reply ASAP.

]]>Comment Posted by djibril_chimere_DIAWhttp://asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-dynamicpopulate-extenderTue, 30 Dec 2008 04:49:48 GMT00000000-0000-0000-00000000876Thanks! Jërëjëf!

]]>Comment Posted by bgates1970http://asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-dynamicpopulate-extenderFri, 16 Jan 2009 16:28:44 GMT00000000-0000-0000-00000000877Any ideas on how to use this inside a repeater control?  For example, i have a repeater control that shows a list of products.  when a user clicks on the link button i want to display underneath the link some dynamic text.

I can get it to work great with a Modal Popup but I need a hovermenu to display underneath instead.

]]>Comment Posted by haithemarahttp://asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-dynamicpopulate-extenderWed, 06 May 2009 02:09:12 GMT00000000-0000-0000-00000000881Nice video . Thank you Joe.

I do have a question.

The definition of the GetHtml function is different in both the populateExtenderControl and the service call. In other words, in the control you specify that the ServiceMethod="GetHtml" with no parameters and in the service call you specify that public static string GetHtml(string contextKey) accept a parameter. Hence, i have to assume that control default behavior is to accept the contextkey, but this property is ommitted.

Can you please explain this ?

thank you.

]]>