Rich controls in ASP.NET provide additional functionality for creating rich applications. In this article, we shall explore the following controls. AdRotator control MultiView control Panel control Calendar control AdRotator control The AdRotator control selects from the banner advertisements. They are added in an XML file. The file is known as advertisement file. The control states the file and the window used for linking the file. Syntax for AdRotator control: Code: <asp:AdRotator AdvertismentFile="file1.xml" runat="server" Target="_top" /> The advertisement file consist information about the advertisements to be displayed. The data is saved in a structured format through the formatted tags. Consider a code snippet demonstrating the XML file. Code: <STUDENT> <STUDNAME>John</STUDNAME> <CLASS>12</CLASS> <MARKS>50</MARKS> </STUDENT> The elements used in the advertisement file are mentioned below. Ad: A unique Ad element is added to the file Advertisements: The advertisement file is present in this tag NavigateUrl: The link user follows when the ad is clicked ImageUrl: The image path is shown to the user AlternateText: The text is shown when the picture is not visible Impressions: The number of occurrences of the ad is defined Width: The width of the image is defined Height: The height of the image is defined Keyword: The group of advertisements is defined Properties of the AdRotator control are: DataMember: The name of the list of data specified by the user used for binding in absence of the advertisement file. AdvertisementFile: The path for the advertisement file is defined DataSource: The control where the data is accessed AlternateTextField: The field name where the alternate text is provided Font: The font associated with the banner control is defined Target: The window used for displaying the content of the page NavigateUrlField: The name of the field where the URL for navigation is defined Events of the AdRotator control are: DataBinding: The server control is used for binding with the data source AdCreated: The event is raised when the trip to the server is done, the page is rendered later. Init: The server control is initialized during the page life cycle Load: The server control is loaded to the Page Unload: The server control is unloaded from the memory Consider an example to demonstrate the use of AdRotator control. Create an ASP.NET web application using the Visual Studio application. Add an XML file to the application and type the following code. Code: <?xml version="1.0" encoding="utf-8" ?> <Advertisements> <Ad> <ImageUrl>Koala.jpg</ImageUrl> <NavigateUrl>http://www.msdn.com</NavigateUrl> </Ad> <Ad> <ImageUrl>Chrysanthemum.jpg</ImageUrl> <NavigateUrl>http://www.google.com</NavigateUrl> </Ad> </Advertisements> In the source code page of the application, add the following code. Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:AdRotator ID="Ad1" runat="server" AdvertisementFile="~/XMLFile.xml" /> </div> </form> </body> </html> The following output is displayed when the code is executed. https://www.dropbox.com/sh/kxvy0jkhkdrlq6l/AADFbsrjwDIIcozD9FVMser0a?dl=0 MultiView control The list of View controls forms the multiview control. Every page consists of view control which is used for group management. Only one view is displayed to the user. Syntax for MultiView control Code: <asp:MultiView ID="MultView1" runat="server"> <asp:View ID="view1" runat="server"></asp:View> </asp:MultiView> Properties of multiview control: ID: The unique identifier used for identifying the control on the web page Views: The group of view controls in a multiview control ActiveViewIndex: It is zero based index used for representing the active view. Methods of multiview control: GetActiveView: The active view is accessed by the user SetActiveView: The active view is assigned by the user Events of multiview control: Activate: It is raised by the active view Deactivate: Used by an inactive view ActiveViewChanged: When the view is modified by the user, it is raised Consider the following example to demonstrate the MultiView control. Create an ASP.NET web application and open the source window Add the following code in the source view. Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:MultiView ID="Multi1" runat="server" ActiveViewIndex="1"> <asp:View ID="view1" runat="server"> <br/> <asp:Label ID="Label1" runat="server" Text="Show values" > </asp:Label> </asp:View> <asp:View ID="view2" runat="server"> <asp:Label ID="label2" runat="server" Text="Welcome to View2" > </asp:Label> <asp:BulletedList ID="bullet" runat="server"> <asp:ListItem>C#</asp:ListItem> <asp:ListItem>ASP.NET</asp:ListItem> <asp:ListItem>Java</asp:ListItem> </asp:BulletedList> </asp:View> </asp:MultiView> </div> </form> </body> </html> Panel control The panel control acts storage for all the controls used in the page. The appearance for the controls is managed. Syntax for Panel control Code: <asp:Panel ID="Panel1" runat="server"> <asp:Panel> Properties of Panel control: Direction: The text direction of the control in the panel is defined BackImageUrl: The background image of the post is stated GroupingText: The grouping of the text as a field is defined Wrap: The text wrapping is performed ScrollBars: The scrollbars are assigned within the panel The following example demonstrates the use of panel control in ASP.NET. Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:Panel ID="panel1" runat="server" BackImageUrl="~/Chrysanthemum.jpg" ScrollBars="Both" Wrap="true" Width="400px" Height="400px" > <table> <tr> <td colspan="2"> </td> </tr> <tr> <td>EmpName</td> <td> <asp:TextBox ID="text1" runat="server"></asp:TextBox> </td> </tr> <tr> <td>EmpAge</td> <td> <asp:TextBox ID="text2" runat="server"></asp:TextBox> </td> </tr> <tr> <td> <asp:Button ID="btn1" runat="server" Text="show" /> </td> </tr> </table> </asp:Panel> </div> </form> </body> </html> The output for the above code is: Calendar control Calendar control is used for providing a month display to the user. User can view week, month, days of the week, dates, etc. Syntax for Calendar control Code: <asp:Calendar ID="calendar1" runat="server"> </asp:Calendar> Properties of the calendar control CellPadding: The space between the data and the border of the cell is defined Caption: The caption for the control is defined DayHeaderStyle: The day of the week is displayed using the style properties FirstDayOfWeek: The day of the week is displayed PreMonthText: The text for the previous month navigation control SelectedDates: The collection of DateTime objects for the selected dates SelectMonthText: The text for month element from the selector column TitleFormat: The format for the title section is defined VisibleDate: The date for the month to be displayed is defined TodaysDate: The value for todays date is defined Events for Calendar control DayRender: When the data cell of the control is rendered SelectionChanged: When user selects from the calendar, the event is raised Consider the following example to demonstrate the calendar control. Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:Calendar ID="calendar1" runat="server" BackColor="Aqua" BorderColor="Black" DayStyle-Font-Bold="true" TodayDayStyle-Font-Bold="true" onselectionchanged="calendar1_SelectionChanged"> </asp:Calendar> </div> </form> </body> </html> Add the following code in the code behind file. Code: public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void calendar1_SelectionChanged(object sender, EventArgs e) { string date=" "; date = "Selected Date "+ calendar1.SelectedDate.ToString(); } } The output for the code is: