Using Rich Server Controls with C#
Introduction:
In the last article we saw some of the simple controls. Those included validation controls, TextBox, Label and other simple controls. Microsoft.net framework provides the developer with more advanced controls. Among those are the Calendar, AdRotator and the Xml Control. In this Tutorial we will see how we can make use of the rich controls provided by the framework.
Calendar Control:
Calendar control as it sounds like is used to pick a date from a visual calendar. By using the calendar control the developer can easily pick a date which can later be used by other operations. Lets see how we can place a simple calendar control on a page. In the toolbox which normally appears on the left hand side of the Visual Studio.NET 2003 window you can find the Calendar control. Just drag and drop the control on the form. After you drop the calendar your display will look like this:
As you see above the calendar control appears with no colors. Although it will work as expected but sometimes we need to make things pretty. If you want to apply a certain style quickly on the calendar control just right click on it and select Auto Format. Here you can choose different styles. Once you have chosen the style that you like apply it.
Now our calendar control looks pretty :).
Lets see how we can get the selected date from the calendar control. Whenever you click a mouse on the date in the calendar control the Selection_Changed event is fired. Hence if we want to change something on the calendar date click event we have to place it in the Selection_Changed method.
private void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{
Response.Write(Calendar1.SelectedDate.ToShortDateString());
}
So, now when we click on the date in the calendar it displays the selected date as you can see in the image below. There are countless number of methods available for the calendar control. Please also keep in mind that whenever you select a date from the Calendar control the post back happens which sends all the data to the server and wait for the return. If you like the post back to not happen than you can use JavaScript calendars or the DHTML Calendars.
Lets see what else we can do with the calendar control. Lets make a calendar control that will allow us to select dates depending on the whole week.
For this example we will add System.Text namespace since it contains the string builder class. Remember that whenever you do concatenation always use the stringbuilder class since it does not create a new string each time you concatenate.
The line:
string newstring = oldstring + "world";
will create a new object in the memory and will waste the precious resources which we don’t want.
For this example to work we have to set certain properties of the calendar control. First of all right click on the calendar and set the NextPrevFormat property to ShortMonth, SelectionMode property to DayWeekMonth, SelectMonthText property to Month, and SelectWeekText property to Week.
After doing all these changes your calendar will have the month link and the week link on it. Now you can also select all the days in the week and all the days in a month with a single click.
Below is the code to Select all the days in a week/month. This code is also available in the project files.
private void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{
StringBuilder sbMessage = new StringBuilder();
sbMessage.Append("The Selected date(s)
");
for(int i = 0; i
sbMessage.Append(Calendar1.SelectedDates[i].ToShortDateString() + "
");
Response.Write(sbMessage.ToString());
}
So now you see that the Calendar control provided by the .NET Framework is very rich in features.
Ad Rotator Control:
The Ad Rotator control is used to display ads on your website. The ads will also change randomly or at a sequence that you define. Ad Rotator control uses an xml file to store the information about ads. Lets first see how we can make the xml file and what tags does it contain.
The Advertisement Tag is the root tag in which advertisements are stored in the individual Ad tags.
AlternateText: This tag specifies that if the image does not appear for some reason what text to display at that time.
ImageUrl: This tag specifies the url of the image.
Impressions: Indicates that how often the advertisement has to be displayed.
Keyword: Specifies the group to which the ad belongs.
NavigateUrl: Specifies the url when the user clicks on the ad.
Now that you have created the XML file which contains all the information about the ads. Next add the Ad Rotator control on the page. The Ad Rotator control can be found in the toolbox with other controls.
After adding the Ad Rotator control just set the property "Advertisement File" to the xml file that you just made and that’s it. Run the application and you will see the ads being displayed.
The Xml Control:
The Xml Control is used to display XML on the page. Drag the Xml control on the form. Set the DocumentSource property of the Xml control to an XML file and the TransformSource property of the Xml control to an XSLT file for the XML source file. That’s all you have to do just run the project and you will see that your xml file is being displayed on the page which adopts the style you described in the XSLT file.
