LogoASPAlliance: Articles, reviews, and samples for .NET Developers
Working with AlwaysVisibleControl
by Nidal Arabi
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 30612/ 60


If you ever wanted to fix a specific message on your web page, then you are reading the right article on how to do this using the AJAX Control Toolkit. Being able to convey your message in an elegant manner should always be one of your targets. In this article I will explain the AlwaysVisibleControl.

About the control

Enriching your web page with AJAX has never been easier. It is as simple as adding one control and specifying some properties. Please note that we are only dealing with an extender and we always need a panel to complete the extender. Want to know how? Proceed with ensuring you have the 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 it 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.

Creating Your AlwaysVisibleControl Solution

Follow the easy steps below 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 AlwaysVisibleSample.

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 will create your project with a Default.aspx page and most 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 ScriptManager. (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.  Now you have to fill your page with some text. In order to do so, take Listing 1 and copy and paste it many times inside the div tag within the default.aspx page when in source mode.

Listing 1 - Page content to duplicate inside the div tag

This is just a content of page where we should have some pictures and some talk. 
<br />
Please note that this text is used only to fill the page for demo purposes 
<br />
and you should have real content for this page<br /><br /><br /><br /><br />

12.  After you have filled a page, drag a panel from the standard toolbox and drop it on page.

13.  Please format the panel in source mode as described in Listing 2 while ensuring that it has some content.

Listing 2 - Panel HTML source for floating purpose

<asp:Panel ID="Panel1" runat="server" BackColor="#FF8080" BorderColor="Black" 
    BorderStyle="Solid" ForeColor="Indigo" Height="50px" Width="477px">
This is a message that should always stay visible when the user is scrolling up
and down inside the page and should give a great effect.</asp:Panel>

14.  Place the cursor after the script manager html end tag. From the Toolbox of the Toolkit drag an AlwaysVisibleControl and set the properties as specified in Listing 3. Please note that some of these properties cannot be specified using the normal properties window. The target control ID specifies the control to appear as floating (the panel in our case). The horizontal side tag specifies where to make the panel (right, left, middle). The horizontal offset describes how much the panel should be away from the page corner. The same goes for the vertical tags. The only remaining tag is the scroll effect duration that is specified in second and 0.1 is the default.

Listing 3 - Always Visible control specs

<ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" 
    runat="server" TargetControlID="Panel1" HorizontalSide="Right" 
    HorizontalOffset="10" VerticalOffset="10" VerticalSide="Top" 

I hope you enjoyed AlwaysVisibleControl. Happy AJAXfying and see you in the next article.

©Copyright 1998-2021  |  Page Processed at 2021-11-29 10:24:24 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search