Using ASP.NET Extenders Part II

Posted on December 10, 2008
Filed Under Development, Programming, microsoft | Comments Off

If you've enjoyed reading this post then please subscribe to my Full Text RSS Feed.

In Part I of ASP.NET AJAX Extenders, I talked about ASP.NET AJAX and how ASP.NET AJAX extenders fit into the picture. ASP.NET AJAX extenders are controls that enhance Web UI server controls using AJAX to create an interactive web experience. I also elaborated the point of interactive web experience by showing the CalendarExtender example.

In Part II of ASP.NET AJAX Extenders, I will continue by showing the PopUpExtender example. Below is an example of a PopUpExtender. In the PopUpExtender example, you will see the web page Ajaxified when the magnify image is clicked. The PopUpExtender will return details about the row item. This is achieved by a Web Service that we will examine further in the code-behind of the ASP.NET page. Before we do that, we will first learn how to add a PopUpExtender control to an ASP.NET page.

How to add the PopUpExtender control.

In the Visual Studio design mode, click on the Toolbox to see a list of AJAX controls available. The PopUExtender control is one of the controls in the list below.

Drag the PopupExtender control onto the ASP.NET page in design mode. You have to also add a Panel control onto the same ASP.NET page. Let’s examine the page.

The PopUpExtender properties:

DynamicServiceMethod=”GetDynamicContent”
This assigns the Web Service method that will be called when you click on the magnify image. GetDynamicMethod will contain code that will fetch the data from a database and display it in the yellow panel in browser like the first screenshot above.

DynamicContentKey=Databinder.Eval(Container, “DataItem.name_day”)

This is the key value that will be used by GetDynamicContent to fetch the data from the database.

DynamicControlID=”Panel1″

This tells the PopUpExtender control which is the control ID to use when data is fetched. In this example it is Panel1.

TargetControlID=”Image1″

This sets the magnify image as the TargetControlID. When you click on the TargetControlID in the user interface, it fires the DynamicServiceMethod.

PopupControlID=”Panel1″

The returned data is sent to Panel1.

Position=”Right”

Position to display the returned data in Panel1. You can set either to the left or right. See the first screenshot for example.

Let’s examine the code-behind

Now that we have gone through the design source, we will examine the code-behind for GetDynamicContent.

The code-behind of GetDynamicContent uses System.Web.Services to fetch the data. The contextKey value is passed into GetDynamicContent and data is fetched and we use StringBuilder to build the string that will be returned back to the PopUpExtender control. Essentially you can code anything you want in GetDynamicContent. What I have shown here is just an example. This concludes Part II of Using ASP.NET Extenders.

Other related Ajax: Beginning AJAX with Visual Studio 2005