Working with Dynamic Populate Extender
 
Published: 03 Jan 2008
Abstract
This article examines the usage of Dynamic Populate Extender AJAX control. It walks you through the step-by-step procedure for setting up a simple Dynamic Populate Extender Control. Code Snippets and an example download are included.
by Nidal Arabi
Feedback
Average Rating: 
Views (Total / Last 10 Days): 55390/ 108

Introduction

I always wanted to be able to fill a panel with information gathered from all around the page directly after my end user selected his options and present them into a summary. Dynamic populate extender is a nice controller of a panel that is expected to be filled dynamically at the choices of the user. This article will show an example on how I used the control to provide the user with feedback about the extra preferences that a customer would select on a page. The whole project is attached for your own review. Let us examine my simple Pizza selection screen.

Requirements

In order to be able to work with ASP.NET AJAX Control Toolkit, the following should be available:

·         Microsoft Visual Studio 2005 (any version) or you can also use the free of cost Visual Web Developer Express 2005.

·         Download ASP.NET 2.0 AJAX Extensions and install them on your computer after installing Visual studio 2005.

·         Download ASP.NET AJAX Control Toolkit and install them on your computer after installing Visual Studio 2005 and AJAX Extensions. You can also download the Toolkit directly from CodePlex project site.

·         After the completion of installation, open Visual Studio 2005 or Visual Web Developer and add a tab in the Toolbox named AJAX Toolkit.

·         Right Click in this tab and choose add items. Browse to the sample directory of where you did extract the Toolkit, then to bin directory and choose the file named AjaxControlToolkit.dll.

This is all. You have installed AJAX Control Toolkit and you can start building your controls.

Well, you should be ready by now to begin AJAX Toolkit implementation.

Creating your Dynamic populate sample

Follow these easy steps to create your solution.

1.    Start your Visual Studio 2005 IDE.

2.    Choose Create Web Site from the menu.

3.    In this sample application we will use the Visual Basic language for the sample application.

4.    Name the solution DynamicPopulateSample.

5.    Choose ASP.NET AJAX Control Toolkit Web Site.

6.    Choose File System in the location box.

7.    Click OK to create the project.

8.    Visual Studio 2005 will create your project with a Default.aspx page and likely a readme.txt. Go ahead and get rid of the latter file.

9.    Open Default.aspx page in design view.

10. You noticed that there is a control on the page already called script manager. (Well, AJAX is really a script based implementation of the language JavaScript.) In Short, Script Manager Control manages client script for Microsoft ASP.NET AJAX pages. By default, the Script Manager control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial-page rendering and Web-service calls.

11. Inside the form tag, insert listing 1.

Listing 1: HTML Listing For Creating the checkboxes

<br />
<label for="Chk1"><input id="Chk1" type="checkbox"  name="chkpizza" 
    value="Extra Cheese" onclick="UpdatePizza(3);" />Extra Cheese</label><br />
<label for="Chk2"><input id="Chk2" type="checkbox"  name="chkpizza" value="Olive"  
    onclick="UpdatePizza(3);" />Olive</label><br />
<label for="Chk3"><input id="Chk3" type="checkbox"  name="chkpizza" 
    value="Mushrooms"  onclick="UpdatePizza(3);" />Mushrooms</label><br />
<br />

12. Also, directly after the form tag insert the JavaScript introduced in listing 2.

Listing 2: JavaScript Listing

<script type = "text/javascript"> 
  function UpdatePizza(chkcount)
  {
  var behavior = $find('dp1');
  var value = '';
  for (i = 0; i < chkcount; i++)
  {
    if (document.forms[0].chkpizza[i].checked == true)
      value = ' With ' + document.forms[0].chkpizza[i].value + ',';
  }
  if (behavior)
  {
    behavior.populate(value);
  }
}
 
Sys.Application.add_load(function()
{
  UpdatePizza(3);
}
 
);
</script>

13. Drag a panel below the checkboxes with no text in it.

14. Drag a dynamic populate extender and drop it right after the panel.

15. Formulate the dynamic populate in HTML view as described in listing 3.

Listing 3: HTML formatting of Dynamic Populate Extender

<cc1:DynamicPopulateExtender ID="DynamicPopulateExtender1" runat="server" 
    TargetControlID="Panel1" BehaviorID="dp1" ServiceMethod="GetPizza">
</cc1:DynamicPopulateExtender>

16. Last but not least, copy and insert listing 4 after the title section in the header part.

Listing 4: Web Service listing to update the panel

<script runat="server">
  <System.Web.Services.WebMethod()> _
  <System.Web.Script.Services.ScriptMethod()> _
  Public Shared Function GetPizza(ByVal contextKey As StringAs String
    Return String.Format("<span style='font-family:courier new;font-
     weight:bold;'>{0}</span>", "You Selected Pizza " + contextKey)
  End Function
</script>

17. Your code should be working, go and experiment with the solution

Explanation

The code presented here combines JavaScript with the use of web services. I think it deserves more clarification.

Listing 1 is really simple for anyone who has used html. It is simply creating a group of checks using the same name properties with different ID's. The trick here is the onclick event attached to the check box. Once a checkbox is clicked, the JavaScript function UpdatePizza gets called with a number of checkboxes to check.

Listing 2 shows the real JavaScript that reads all check boxes and formulates them into one string by concatenating the values of the checkboxes. However, there is an additional line to find the dynamic populate extender and call its populate method (dp1). You note that listing 3 specified that the behaviorid is dp1 (voila, the link).

Listing 3 brings about the whole picture. The targetcontrolid specified the panel that is going to be filled when the job is finished. Behaviorid is already explained. The option is the service method that is used to handle the dynamic call. GetPizza is the one called when the populate event is called from the JavaScript.

GetPizza webservice simply creates an HTML format filling for the panel using a sentence and a value passed from the java function.

Downloads

Conclusion

Dynamic populate extender is very useful when you intended to put a whole page alone and avoid using the update panel. It allows you as a developer to create a whole panel from scratch using simply checkboxes or even radio buttons.

Hope you enjoyed the article. Happy Ajaxfying and see you in the next article.



User Comments

Title: dfghfdh   
Name: fh
Date: 2012-12-15 6:47:03 AM
Comment:
fhf
Title: yth   
Name: gh
Date: 2012-11-26 4:59:37 AM
Comment:
trh
Title: tfdhgb   
Name: gfhnbg
Date: 2012-11-23 8:36:16 AM
Comment:
gfhnjgng
Title: dynamic   
Name: rakesh
Date: 2012-11-22 3:59:44 AM
Comment:
commment
Title: filtered textbox extender   
Name: hollman
Date: 2012-10-20 8:49:12 AM
Comment:
good
Title: tgg   
Name: fh
Date: 2012-10-15 8:14:18 AM
Comment:
ch
Title: Testing web   
Name: test
Date: 2012-09-22 8:13:50 AM
Comment:
I am currently facing the need to dynamically generate a long detailed report with data retrieved from a database in an ASPNET 3.5 project in which I already use the AJAX Control Toolkit intensively. The data is provided by an ASPNET web service. The generated report is static and meant to be printed. My problem is that the data retrieval process takes about 10-15 seconds because of the database query execution time. I have the need to make the report page appear faster. I was wondering if it's possible for the report page to appear immediately with blank data and for the dynamic data to be written in the page as they arrive. In the page the data is contained in html tables with Label server controls in them and everything is inside an UpdatePanel. The report is made of different sections for each of which I have build a separate web method to provide the data. I have tried the asynchronous calls to the web service that provides the data, handling the task completion event for each of the methods, but the page doesn't load until all the data has arrived.
What solutions would you suggest?
Title: Testing   
Name: abc
Date: 2012-09-17 1:03:24 AM
Comment:
hahaha
Title: asa   
Name: dew
Date: 2012-09-04 6:21:21 AM
Comment:
xsaxaxa
Title: u   
Name: uu
Date: 2012-08-20 9:25:31 AM
Comment:
uuu
Title: asdfasf   
Name: asdfasdf
Date: 2012-07-24 4:18:31 PM
Comment:
asdfasdf
Title: cdc x   
Name: c x
Date: 2012-05-22 3:08:54 AM
Comment:
c xc
Title: dynamic populate   
Name: XYZ
Date: 2010-06-24 2:27:38 AM
Comment:
This article doesn't give proper code. For example, TargetcontrolId="Pannel1", it doesn't have this control at all, if we copy this code as it is available to our page, then how our page will create pannel control?. Don't publish irrelevant article from now onwards.... I Hope u got my point..
Title: asynchronously populate table   
Name: erion
Date: 2009-11-05 6:28:57 AM
Comment:
Hello, thank you for the article. I am currently facing the need to dynamically generate a long detailed report with data retrieved from a database in an ASPNET 3.5 project in which I already use the AJAX Control Toolkit intensively. The data is provided by an ASPNET web service. The generated report is static and meant to be printed. My problem is that the data retrieval process takes about 10-15 seconds because of the database query execution time. I have the need to make the report page appear faster. I was wondering if it's possible for the report page to appear immediately with blank data and for the dynamic data to be written in the page as they arrive. In the page the data is contained in html tables with Label server controls in them and everything is inside an UpdatePanel. The report is made of different sections for each of which I have build a separate web method to provide the data. I have tried the asynchronous calls to the web service that provides the data, handling the task completion event for each of the methods, but the page doesn't load until all the data has arrived.
What solutions would you suggest?
Title: Working with Dynamic Populate Extender   
Name: John McDonald
Date: 2008-12-12 7:22:20 PM
Comment:
Would you post a sample screen shot?






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-08-25 3:02:34 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search