Slider 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 “Slider” control. We will also learn that the Slider control can be manipulated via its properties to display horizontal or vertical as well as allowing you to have incremental steps or a smooth non-step motion.
We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
This article expands on the previous article “DropShadow AJAX control in ASP.NET 2.0 and C#” and adds functionality to the Slider we added to the Panel in that example.
In the previous articles 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 Slider 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.
Here is the AJAX web site for you to add to your bookmarks in your favorite browser:
http://www.asp.net/
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!
Continuing with our example:
We previously added a TextBox called “txtSlider” to the Panel in the previous example. That is the control we are extending with the SliderExtender.
We now need to add another TextBox called “txtValue” which will display the current value of the Slider as you are moving it from side to side.
Please Note:
Both of these Textboxes have a property called AutoPostBack and that property is set to “True”. We need this property so the application will trigger the correct events to help us maintain the current value and to change the colors of the Panel as the bar is moving.
Setting the AutoPostBack to “True” will force the page to automatically reload as well for each Post Back. Because we are developing an AJAX web page we do not want to see any Post Back at all, which warrants one more addition to the previous example. The addition is an AJAX UpdatePanel control. We will move all of the controls within this UpdatePanel to prevent the visual effects of a PostBack.
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
Now that we have added our Textboxes we now need to set the remaining properties on the Slider control that we will be using for this example. We do that by adding the following entries into the Markup.
BoundControlID="txtValue"
TargetControlID="txtSlider"
Minimum="1"
Maximum="5"
Steps="5"
RaiseChangeOnlyOnMouseUp="True" />
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.
Slider Properties
- BehaviorID="txtSlider"
- This is the control that you are extending with the Slider control.
- BoundControlID="txtValue"
- ID of the TextBox or Label that dynamically displays the slider's value.
- TargetControlID="txtSlider"
- This is the control that you are extending with the Slider control.
- Minimum="1"
- This is the minimum value of the Slider control.
- Maximum="5"
- This is the maximum value of the Slider control.
- Steps="5"
- This is the number of discrete values within the Slider’s range.
- RaiseChangeOnlyOnMouseUp="True"
- If this property is set to true, the Slider fires the change event on the extended TextBox only when the left mouse button is released.
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
We need to create the Array of colors that we will be using for each value on the Slider. This is a simple “ArrayList” that has a length of 5. We will be adding this to the “Page_Load” event of the form and for simplicity and illustration purposes we will load it each time there is a PostBack [In a production application you will only want to load this one time and the page load event would not be where you would want this code]. We will also store this “ArrayList” within the Session so we will be able to retrieve at anytime.
{
Session["Colors"] = new ArrayList();
((ArrayList)Session["Colors"]).Add(System.Drawing.Color.Blue);
((ArrayList)Session["Colors"]).Add(System.Drawing.Color.Green);
((ArrayList)Session["Colors"]).Add(System.Drawing.Color.Yellow);
((ArrayList)Session["Colors"]).Add(System.Drawing.Color.Red);
((ArrayList)Session["Colors"]).Add(System.Drawing.Color.Orange);
}
Now that the GUI is in place, and the Markup has been completed we need to add the Event that we will trigger each time we move the Slider to complete our code behind. That event is the “TextChanged” event for the “txtSlider” control.
protected void txtSlider_TextChanged(object sender, EventArgs e)
{
Random r = new Random();
int i = r.Next(5);
Panel1.BackColor = ((System.Drawing.Color)((ArrayList)Session["Colors"])[i]);
}
What our example application will look like
We have now covered all of the pertinent points of using the Slider control within the AJAX Control Toolkit. We are ready to run our example and see how the application works. When you move the Slider within this application the “BackColor” property of the Panel will change colors randomly.
The following screen shot will show what the application will look like.
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
Fig. 1
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 Slider control and explained how we can change the color of the Panel each time we move the Slider.
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
|
|