Page view counter

How Do I: Use the ASP.NET AJAX DynamicPopulate Extender?

Watch a demonstration of using the ASP.NET AJAX DynamicPopulate extender to dynamically populate an area of a web page with the results of an asynchronous call to a web method.

Presented by Joe Stagner

Duration: 11 minutes, 19 seconds

Date: 31 January 2007

Watch the video   |   Download the video   |   Get VB code  or  C# code

Comments : 8

Leave a Comment

ajaykaushik : On May 12, 2008 11:53 AM said:

Hi,

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.

rjv_rnjn : On July 22, 2008 1:51 PM said:

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

fsteveb : On August 05, 2008 2:36 PM said:

I 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;">

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

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

   </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?

cv_vikram : On August 06, 2008 1:24 PM said:

It is simple and good.

Roc1 : On August 15, 2008 10:50 AM said:

>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);

   }

}

NewDays : On August 28, 2008 1:21 PM said:

I 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" "www.w3.org/.../xhtml1-transitional.dtd">

<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="www.w3.org/.../xhtml">

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

ak_friendz : On October 05, 2008 12:22 PM said:

Simple and easy to implement....

som nath shukla : On October 27, 2008 8:00 AM said:

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

Leave a Comment

You must be logged in to leave a comment. Click here to log in.

Microsoft Communities