Rich ASP.NET Controls

Discussion in 'ASP.NET' started by MinalS, Aug 9, 2015.

  1. Rich controls in ASP.NET provide additional functionality for creating rich applications. In this article, we shall explore the following controls.

    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.
    1. Ad: A unique Ad element is added to the file
    2. Advertisements: The advertisement file is present in this tag
    3. NavigateUrl: The link user follows when the ad is clicked
    4. ImageUrl: The image path is shown to the user
    5. AlternateText: The text is shown when the picture is not visible
    6. Impressions: The number of occurrences of the ad is defined
    7. Width: The width of the image is defined
    8. Height: The height of the image is defined
    9. Keyword: The group of advertisements is defined
    Properties of the AdRotator control are:
    1. DataMember: The name of the list of data specified by the user used for binding in absence of the advertisement file.
    2. AdvertisementFile: The path for the advertisement file is defined
    3. DataSource: The control where the data is accessed
    4. AlternateTextField: The field name where the alternate text is provided
    5. Font: The font associated with the banner control is defined
    6. Target: The window used for displaying the content of the page
    7. NavigateUrlField: The name of the field where the URL for navigation is defined
    Events of the AdRotator control are:
    1. DataBinding: The server control is used for binding with the data source
    2. AdCreated: The event is raised when the trip to the server is done, the page is rendered later.
    3. Init: The server control is initialized during the page life cycle
    4. Load: The server control is loaded to the Page
    5. Unload: The server control is unloaded from the memory
    Consider an example to demonstrate the use of AdRotator control.
    1. Create an ASP.NET web application using the Visual Studio application.
    2. 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>
      
    3. 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>
      
    4. The following output is displayed when the code is executed.

      https://www.dropbox.com/sh/kxvy0jkhkdrlq6l/AADFbsrjwDIIcozD9FVMser0a?dl=0

      [​IMG]

    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:
    1. ID: The unique identifier used for identifying the control on the web page
    2. Views: The group of view controls in a multiview control
    3. ActiveViewIndex: It is zero based index used for representing the active view.
    Methods of multiview control:
    1. GetActiveView: The active view is accessed by the user
    2. SetActiveView: The active view is assigned by the user
    Events of multiview control:
    1. Activate: It is raised by the active view
    2. Deactivate: Used by an inactive view
    3. ActiveViewChanged: When the view is modified by the user, it is raised
    Consider the following example to demonstrate the MultiView control.
    1. Create an ASP.NET web application and open the source window
    2. 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:
    1. Direction: The text direction of the control in the panel is defined
    2. BackImageUrl: The background image of the post is stated
    3. GroupingText: The grouping of the text as a field is defined
    4. Wrap: The text wrapping is performed
    5. 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:

    [​IMG]

    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
    1. CellPadding: The space between the data and the border of the cell is defined
    2. Caption: The caption for the control is defined
    3. DayHeaderStyle: The day of the week is displayed using the style properties
    4. FirstDayOfWeek: The day of the week is displayed
    5. PreMonthText: The text for the previous month navigation control
    6. SelectedDates: The collection of DateTime objects for the selected dates
    7. SelectMonthText: The text for month element from the selector column
    8. TitleFormat: The format for the title section is defined
    9. VisibleDate: The date for the month to be displayed is defined
    10. TodaysDate: The value for todays date is defined
    Events for Calendar control
    1. DayRender: When the data cell of the control is rendered
    2. 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:

    [​IMG]
     
    Last edited by a moderator: Jan 21, 2017

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice