DropShadow AJAX control in ASP.NET 2.0 and C#

Introduction

In this article I will explain how you can easily create an AJAX enabled web site within Visual Studio 2005 utilizing C# and how to utilize the AJAX framework to add a simple control from the list of controls available in the AJAX Control Toolkit.
The AJAX control we will be working with in this article will be the “DropShadow” control. We will also learn that the DropShadow control can easily be manipulated via its properties so it can have the look and feel of the controls that took painstakingly long to design when we had to drop our label controls on top of other colored label controls to get the shadow effect.

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

In the previous article we learned the following about AJAX and what you can do with it?
“ASP.NET AJAX is a free framework for quickly creating efficient and interactive Web applications that work across all popular browsers.”

ASP.NET AJAX:

• Create interfaces with AJAX components that can be reused.
• Upgrade your existing pages with AJAX controls.
• AJAX comes with support for all modern browsers
• AJAX comes as part of Visual Studio 2008 and does not need to be downloaded and installed as in Visual Studio 2005.

What we will learn in this article:

• How to Create an AJAX enabled Web Site
• How to utilize the DropShadow control

Please Note:
AJAX functionality is integrated in ASP.NET 3.5 and does not require any additional downloads. If you are using ASP.NET 3.5 certain portions of this article may not apply to you.

Getting Started with our AJAX Application
Before we begin coding we will need to download the AJAX framework and install it onto our system in order to have the framework available for us to create our first AJAX web project.
In a previous article titled “Getting Started with AJAX, ASP.NET 2.0 and C#“ we went through the steps involved to install AJAX and how to AJAX enable Visual Studio. We explained where to go to find out about AJAX and that you could download step by step tutorials that will guide you through using every control within the AJAX Control Toolkit.

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

Here is the AJAX web site for you to add to your bookmarks in your favorite browser:
http://www.asp.net/

Configure Visual Studio 2005

• The first step in our process is to create a new web site from the ASP.NET AJAX web site template by opening the "File" menu, and clicking "New Web Site...", and selecting the "ASP.NET AJAX-Enabled Web Site" under "Visual Studio Installed Templates".

Fig. 1

[Click to see full-size]

• You will be presented with the following “Default.aspx.cs” generated file. You will notice that there is a reference to a control called ScriptManager and that there is a ScriptManager control on the form called “ScriptManager1”. This is a required control for the AJAX framework and when it is needed this control will always be generated and added to your form as you create your projects or as you drop AJAX controls onto your form.

• The next step is to add the Panel that we will be using for the DropShadow effect. This is also the “TargetControlID” of the DropShadow control. Meaning that we are extending the Panel control with the DropShadow functionality.

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

• The next step is to add the controls and text to the panel, in our example we are going to simply drop another AJAX control called a SliderExtender [Slider Bar]. In order to use the SliderExtender we will need to first add a TextBox control so we can use that as the TargetControlID of the SliderExtender. What this means is that we will be extending the TextBox control with the SliderExtender as explained above, but before we can do that we will need to add the TextBox to our form.

• The next step is to setup the SliderExtender to extend the TextBox we added in the previous step. We do that by selecting the SliderExtender control from the AJAX Controls tab in your toolbox and dropping it on the form. Then we will set the TargetControlID to “TextBox1”. You will not visually see the Slider until you run your application, setting the TargetControlID does not change the appearance of the TextBox in your development environment, only when you actually load the form will you be able to see the Slider.

Please Note:

We will not be adding any logic to this SliderBar control; we are just adding it for aesthetic purposes so we do not have an empty DropShadow panel. However, in our next article we will be working with this control and extending the functionality of this SliderBar and the DropShadow control.

• The next step is to set the remaining properties we will be using for this example. We do that by adding the following entries into the Markup.

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

The properties in the above code example do not reflect the entire list of properties available for this control. These are the properties that we are using for this example to give you an insight on how to use this control.

DropShadow Properties

• Set to true to set rounded corners on the target and the shadow. Default is false.

• Whether the drop shadow should track the position of the panel it is attached to. Use this if the panel is absolutely positioned or will otherwise move.

• This is the control that you are extending with the DropShadow control.

What our example application will look like
We have now covered all of the pertinent points of using the DropShadow control within the AJAX Control Toolkit. We are ready to run our example and see how the application works. The following screen shot will show what the application will look like.

Fig. 2

What we have Learned

We have learned that we can easily create an AJAX enabled web site and that we can add AJAX controls to it very easily. In our example we added the DropShadow control and explained how we can now display a professional looking Panel for our application.

We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

References

I use this site frequently and so should you, go to www.asp.net. Their reference material was very helpful when it came to researching this article.

Attachments