• Web Server Controls in ASP.NET — PART 4

    Posted on May 2, 2012 by in ASP.NET, Dotnet, VB.NET

    Our little adventure of learning ASP.NET web controls continue with DropDownList & Calendar controls in this article.  As always you will find my articles about more controls at these links:
    Web Server Controls in ASP.NET — PART 1
    Web Server Controls in ASP.NET — PART 2
    Web Server Controls in ASP.NET — PART 3

    Working With Calendar
    The Calendar control displays a month calendar from which user can select dates. The Calendar control supports all the System.Globalization.Calendar types in the System.Globalization namespace. Apart from the Gregorian calendar, this also includes calendars that use different year and month systems, such as the Hjiri calendar. You can specify whether the Calendar control allows you to select a single day, week, or entire month by setting the SelectionMode property.

    <html xmlns="http://www.w3.org/1999/xhtml" >
        <script runat="server">
            Protected Sub DateChanged(ByVal sender As Object, _
                                          ByVal e As EventArgs)
                lblText.Text = "You have chosen:<b>" _
                            + Calendar1.SelectedDate.ToShortDateString + "</b>"
            End Sub
        </script>
    <head runat="server"><title>ASP.NET WEBCONTROLS</title>
        <link type="text/css" rel="Stylesheet" href="../Styles.css" />
    </head>
    <body>
        <h3><font face="Verdana">Calendar Example</font></h3>
    <form id="form1" runat="server">
        <div>
            <asp:Calendar ID="Calendar1" OnSelectionChanged="DateChanged"
    runat="server"/>
            <p><asp:Label ID="lblText" runat="server"/></p>
        </div>
    </form>
    </body>
    </html>
    


    Clicking on any day from the calendar raises OnSelectionChanged event which in turn invokes our DateChanged event handler. We get the selected date by accessing SelectedDate property of the calendar.

    Calendar Date Selection Modes
    Calendar supports four selection modes as described in the following table.

    Mode Description
    Day User can select any single day
    DayWeek User can select a single day, or an entire week
    DayWeekMonth User can select a single day, an entire week, or the entire visible month
    None Data Selection is disabled

    The following sample demonstrates mode selection with a calendar control. There are four options (Day, DayWeek, DayWeekMonth, None)  available in the drop down list. Each option corresponds to each selection mode of Calendar.

    <html xmlns="http://www.w3.org/1999/xhtml" >
        <script runat="server">
            Protected Sub Page_Load(ByVal sender As Object, _
                                    ByVal e As System.EventArgs) Handles Me.Load
                Calendar1.SelectionMode = ddlSelectionMode.SelectedIndex
                If Calendar1.SelectionMode = CalendarSelectionMode.None Then
                    Calendar1.SelectedDates.Clear()
                End If
            End Sub
            Protected Sub DateChanged(ByVal sender As Object, _
                                          ByVal e As EventArgs)
                Select Case Calendar1.SelectedDates.Count
                    Case 0 'None
                        lblText.Text = "No dates are currently selected"
                    Case 1 'Day
                        lblText.Text = "The selected date is " _
                                       & Calendar1.SelectedDate.ToShortDateString
                    Case 7 'Week
                        lblText.Text = "The selection is a week beginning " _
                                       & Calendar1.SelectedDate.ToShortDateString
                    Case Else 'Month
                        lblText.Text = "The selection is a month beginning " _
                                       & Calendar1.SelectedDate.ToShortDateString
                End Select
            End Sub
        </script>
    <head runat="server"><title>ASP.NET WEBCONTROLS</title>
        <link type="text/css" rel="Stylesheet" href="../Styles.css" />
    </head>
    <body>
        <h3><font face="Verdana">Calendar Date Selection Modes</font></h3>
    <form id="form1" runat="server">
        <div>
            Choose a Selection Mode:
            <asp:DropDownList ID="ddlSelectionMode" runat="server"
                            AutoPostBack="true">
                 <asp:ListItem Value="None">None</asp:ListItem>
                 <asp:ListItem Value="Day" Selected="True">Day</asp:ListItem>
                 <asp:ListItem Value="DayWeek">DayWeek</asp:ListItem>
                 <asp:ListItem Value="DayWeekMonth">DayWeekMonth</asp:ListItem>
            </asp:DropDownList>
            <p>
            <asp:Calendar ID="Calendar1" OnSelectionChanged="DateChanged"
    runat="server"
                            Font-Names="Arial" Font-Size="12px"
                            Height="180px" Width="200px"
                            SelectorStyle-BackColor="Gainsboro"
                            TodayDayStyle-BackColor="Gainsboro"
                            DayHeaderStyle-BackColor="Gainsboro"
                            OtherMonthDayStyle-BackColor="Gray"
                            TitleStyle-BackColor="Gray"
                            TitleStyle-Font-Bold="true"
                            TitleStyle-Font-Size="12px"
                            SelectedDayStyle-BackColor="Navy"
                            SelectedDayStyle-Font-Bold="true"
            /></p>
            <p><asp:Label ID="lblText" runat="server"/></p>
        </div>
    </form>
    </body>
    </html>
    

    When the page is initially loaded, the calendra mode is defaulted  to “Day” mode. Clicking on any day from the calendar raises OnSelectionChanged event which in turn invokes our DateChanged event handler. We get the selected date accessing SelectedDate property of the calendar  and write it to the label text.
    Select  the “DayWeek” option from the dropdown and the selection mode of Calendar control would be changed to “DayWeek”. You would also notice the difference in the calendar layout as shown in below snapshot. Now we can select either  a date or a complete week from the calendar. Select any week from the control by clicking on the “>” symbol. In the DateChanged event handler, depending upon the selection mode, we print appropriate date text.


    Select  the “DayWeekMonth” option from the dropdown and the selection mode of Calendar control would be changed to “DayWeekMonth”. Date/Week/Month are available for selection. Select the current month by clicking on the “>>” symbol and OnSelectionChanged will be raised. In the DateChanged event handler, we print appropriate date text.


    Working with DropDownList
    The DropDownList control provides a single-select drop-down list. The following example illustrates using a simple DropDownList control.

    <html xmlns="http://www.w3.org/1999/xhtml" >
        <script runat="server">
            Protected Sub btnSubmit_Click(ByVal sender As Object, _
                                          ByVal e As EventArgs)
                lblText.Text = "You have chosen:<b>" _
                            + DropDownList1.SelectedItem.Text + "</b>"
            End Sub
        </script>
        <head runat="server"><title>ASP.NET WEBCONTROLS</title>
        <link type="text/css" rel="Stylesheet" href="Styles.css" />
        </head>
    <body>
        <h3><font face="Verdana">DropDownList Example</font></h3>
        <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="DropDownList1" Width="100px" runat="server">
                <asp:ListItem>Item 1</asp:ListItem>
                <asp:ListItem>Item 2</asp:ListItem>
                <asp:ListItem>Item 3</asp:ListItem>
                <asp:ListItem>Item 4</asp:ListItem>
            </asp:DropDownList>
            <asp:Button Text="Submit" OnClick="btnSubmit_Click" runat="server" />
            <p>
                 <asp:Label ID="lblText" runat="server" />
            </p>
        </div>
        </form>
    </body>
    </html>
    


    Select “Item 2” from the list and click on “Submit” button. We could get the selected item text or value by accessing SelectedItem property of the listbox.

    Binding DropDownList With Data
    You could bind any object that implements ICollection interface to the listbox. In this example, we are binding a string arraylist to the DropDownList.

    <html xmlns="http://www.w3.org/1999/xhtml" >
        <script runat="server">
            Protected Sub btnSubmit_Click(ByVal sender As Object, _
                                          ByVal e As EventArgs)
                If DropDownList1.SelectedIndex > -1 Then
                    lblText.Text = "You have chosen:<b>" _
                                    + DropDownList1.SelectedItem.Text + "</b>"
                End If
            End Sub
            Protected Sub Page_Load(ByVal sender As Object, _
                                    ByVal e As System.EventArgs) Handles Me.Load
                If Not IsPostBack Then
                    Dim values As ArrayList = New ArrayList()
                    values.Add("IN")
                    values.Add("KS")
                    values.Add("MD")
                    DropDownList1.DataSource = values
                    DropDownList1.DataBind()
                End If
            End Sub
        </script>
        <head runat="server"><title>ASP.NET WEBCONTROLS</title></head>
    <body>
        <h3><font face="Verdana">DropDown DataBinding Example</font></h3>
        <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="DropDownList1" Width="100px" runat="server"/>
            <asp:Button Text="Submit" OnClick="btnSubmit_Click" runat="server" />
            <p><asp:Label ID="lblText" runat="server"/> </p>
        </div>
        </form>
    </body>
    </html>
    


    Select “KS” from the list and click on “Submit” button. We get the selected item text or value by accessing SelectedItem property of the dropdown and write it to the response.

    Be Sociable, Share!
      Post Tagged with ,

    Written by

    Software architect with over 10 years of proven experience in designing & developing n-tier and web based software applications, for Finance, Telecommunication, Manufacturing, Internet and other Commercial industries. He believes that success depends on one's ability to integrate multiple technologies to solve a simple as well as complicated problem.

    View all articles by

    Email : [email protected]

    Leave a Reply