This tutorial will demonstrate how to dynamically modify the CSS Using AJAX UpdatePanel. C#
In this tutorial we will demonstrate how to add AJAX style visual updates using CSS and the AJAX UpdatePanel. This way the user will be able to select a color from the DropDownList then; it will change in a label below with the date and time without changing the rest of the page. Here is a snapshot of what it will look like:
To start, open Visual Studio 2008. File > New > Web site > ASP.NET Web site and name it DynCss or whatever you want.
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.
Since it’s an AJAX application we will need to locate the AJAX Extension tab from the toolbox and drag over a ScriptManager. Beneath that type this in or something similar: “Pick a color and watch it change in the Label below”.
Now, directly beneath that text you just entered drag-and-drop in a DropDownList from the standard tab of the Toolbox. Add to it an AutoPostBack and set its property to true, so that when a choice gets made we post back to the server. Also, we want to add an OnSelectedIndexChanged and set its property to ddlDropDownList_SelectedIndexChanged.
We now need to add some list items (any colors that you want, because we will create the CSS shortly).
|
|
Next, we need to add an UpdatePanel control and inside that, a ContentTemplate. Then we will add a label control inside of the ContentTemplate, which will hold the date and time.
Next, add a triggers collection for our UpdatePanel. The trigger will be a DropDownList that will contain all of our choices of colors. We will make our ControlID equal to DropDownList and our EventName to SelectedIndexChanged.
|
EventName="SelectedIndexChanged" /> |
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.
Now we need to assign CSS classes to our application. You can see that we have a body tag to center align the body. Then we have all the background colors changed to the corresponding classes.
Switch to your code behind. Within the Page_Load event add the following code snip:
| protected void Page_Load(object sender, EventArgs e) { lblLabel.Text = System.DateTime.Now.ToString(); } |
The trigger event for the UpdatePanel will be the SelectedItemChanged event for the DropDownList. We need to get the text from the value so we will create if/else statement.
| protected void ddlDropDownList_SelectedIndexChanged(object sender, EventArgs e) { if ((ddlDropDownList.SelectedValue == "orange")) { lblLabel.CssClass = "Orange"; } else if ((ddlDropDownList.SelectedValue == "brown")) { lblLabel.CssClass = "Brown"; } else if ((ddlDropDownList.SelectedValue == "green")) { lblLabel.CssClass = "Green"; } else if ((ddlDropDownList.SelectedValue == "silver")) { lblLabel.CssClass = "Silver"; } else { lblLabel.CssClass = "Default"; } } |
Save and Run. You should be able to make a selection and watch the color change dynamically without an entire page postback. It is that easy to dynamically select Css classes that get applied to the ASP.NET controls that live on your Web page.
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.
|
|