This tutorial will cover the Always Visible Extender and how to add it to a Pane to make it always stay on top of the page behind it and to move with the scrollbars.

For a More Basic Overview of Databases and ASP.NET go Here

Overview

1. Create the Project and Setup for AJAX

2. Add the Panel and the Page Content

3. Add the Extender and Set it up

Create and Application and Setup for AJAX

1. Create a new Empty ASP.NET Web Application

2. Right Click on the Project and Navigate to ->Add -> New Item

3. Select a New Web Form and name it Default.aspx

4. It is good practice to add a Script Manager to all AJAX Applications seeing as you will
always need it so Drag a Script Manager Control onto the Form from the AJAX Section of the Toolbox

5. Next we can Start Adding Content to the Form

Add the Panel and the Page Content

In Order to create a Chart Control we have to have a Page to put it on so let’s start with that

1. First Add a Panel to the Form by dragging it from the General Section of the Toolbox

2. Now we need to setup the Panel go into the Code view and Paste this into the Panel Tag

3. Now we can add Text to the Panel in Code Type Something in between the Opening
and Closing Panel Tags

4. The next step is we need to fill the page with text so that we can witness our Panel
over Content and also witness it working with the scrollbars.

5. At the bottom of this page you can find some filler text for your page to paste under
the Panel Code. *I copied it quite a few times, but just make sure that we have enough content
to create a scroll bar on the side of the page*

6. Now we can add the Extender and View it working

Add the Extender and Set it up

Notice that when you view the chart it has no text or labels on it, it could confuse some people. So let’s put some labels on there for the end user.

1. Go back to the Design view of the Form and Click the Smart Tag on the Panel
and Then click Add Extender.

AJAX3-1AJAX3-2

2. Select the Always Visible Extender from the Menu and then go into the Code View

3. Once in the Code View Past this code into the Extenders Tag

4. Once this is complete Run the Page, Scroll up and Down, and witness the Panel Staying in the Top Right corner.

FILLER CODE

FULL CODE

Conclusion

In This tutorial we learned how to add the Always Visible Extender to a Control on the Form causing it
to always be on top and to scroll with the page. This Extender has many practical Uses, for example implementing
a timer on the Panel with a display could be used to show students how long they have to finish an online Exam.

Download Source Files