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 String) As 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
