• Web Server Controls in ASP.NET — PART 3

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

    I have discussed about HTML Label, TextBox, Button, CheckBox, CheckBoxList, RadioButton, RadioButtonList & AdRotator in my previous blogs Web Server Controls in ASP.NET — PART 1 & Web Server Controls in ASP.NET — PART 2. I am going to cover ListBox & Panel controls in this article.

    Working with ListBox
    The ListBox control provides a single selection or multiple selection list. To enable multiple selection, set the SelectionMode property to Multiple. The following sample illusrates using a simple ListBox 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>" + ListBox1.SelectedItem.Text
    + "</b>"
            End Sub
        </script>
        <head runat="server"><title>ASP.NET WEBCONTROLS</title></head>
    <body>
        <h3><font face="Verdana">ListBox Example</font></h3>
        <form id="form1" runat="server">
        <div>
            <asp:ListBox ID="ListBox1" 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:ListBox>
            <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 ListBox 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 listbox.

    <html xmlns="http://www.w3.org/1999/xhtml" >
        <script runat="server">
            Protected Sub btnSubmit_Click(ByVal sender As Object, _
                                          ByVal e As EventArgs)
                If ListBox1.SelectedIndex > -1 Then
                    lblText.Text = "You have chosen:<b>" +
    ListBox1.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")
                    ListBox1.DataSource = values
                    ListBox1.DataBind()
                End If
            End Sub
        </script>
        <head runat="server"><title>ASP.NET WEBCONTROLS</title></head>
    <body>
        <h3><font face="Verdana">ListBox DataBinding Example</font></h3>
        <form id="form1" runat="server">
        <div>
            <asp:ListBox ID="ListBox1" 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 listbox and write it to the response.

    Working with Panel
    The Panel control is a container for other properties. It is especially useful when you want to generate controls programmatically or hide or show a group of controls, as shown in the following example.

    <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
                Dim numTexts As Integer, numLabels As Integer
                Dim index As Integer
                'Show/Hide Panel Contents
                If chkHide.Checked Then
                    Panel1.Visible = False
                Else
                    Panel1.Visible = True
                End If
                'Generate Label Controls
                numLabels = Convert.ToInt32(DropDownList1.SelectedItem.Value)
                Dim lbl As Label
                For index = 1 To numLabels
                    lbl = New Label
                    lbl.Text = "Label " & index
                    lbl.ID = "Label" & index
                    Panel1.Controls.Add(lbl)
                    Panel1.Controls.Add(New LiteralControl("<br>"))
                Next
                'Generate TextBox Controls
                numTexts = Convert.ToInt32(DropDownList2.SelectedItem.Value)
                Dim txtBox As TextBox
                For index = 1 To numTexts
                    txtBox = New TextBox
                    txtBox.Text = "TextBox " & index
                    txtBox.ID = "TextBox" & index
                    Panel1.Controls.Add(txtBox)
                    Panel1.Controls.Add(New LiteralControl("<br>"))
                Next
            End Sub
        </script>
    <head runat="server"><title>ASP.NET WEBCONTROLS</title></head>
    <body>
        <h3><font face="Verdana">Panel Control Example</font></h3>
        <form id="form1" runat="server">
        <div>
            <asp:Panel ID="Panel1" runat="server" BackColor="#F7F7E9"
                            Height="200px" Width="300px">
                Panel1: Here is some static content <br />
            </asp:Panel>
            <p>Generate Labels:
            <asp:DropDownList ID="DropDownList1" Width="100px" runat="server">
                <asp:ListItem Value="0">0</asp:ListItem>
                <asp:ListItem Value="1">1</asp:ListItem>
                <asp:ListItem Value="2">2</asp:ListItem>
            </asp:DropDownList>
            </p>
            <p>Generate TextBoxes:
            <asp:DropDownList ID="DropDownList2" Width="100px" runat="server">
                <asp:ListItem Value="0">0</asp:ListItem>
                <asp:ListItem Value="1">1</asp:ListItem>
                <asp:ListItem Value="2">2</asp:ListItem>
            </asp:DropDownList>
            </p>
            <p><asp:CheckBox ID="chkHide" runat="server" Text="Hide Panel" /></p>
            <asp:Button Text="Refresh Panel" runat="server" />
        </div>
        </form>
    </body>
    </html>
    

    Select “2” from “Generate Labels” drop down and “1” from “Generate TextBoxes” dropdown and click on “Refresh Panel”. In the Page_Load function of the page, depending on the selection of the user, we dynamically create labels/textboxes and add them to the panel.

    Select “Hide Panel” checkbox and hit on “Refresh Panel” again.  In the Page_load function, we hide/unhide panel depending upon the “Hide PanelChecked selection.

    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