JavaScript Editor JavaScript Editor     JavaScript Debugger

Previous Section Next Section

Main Page

Adding Items to List Boxes at Run Time

As with any Web server control based on the ListControl class, you can use the Items collection's Add method to add items to list boxes at run time. The Items collection is a collection of ListItem objects (see "Using the ListItem Class" in Chapter 16), so you can pass either a ListItem object to the Add method, or the text you want to give to the new item. To see how this works, take a look at the AddItems example on the CD-ROM. You can see this example at work in Figure 17.9-when you click the "Add a new item" button, a new item is added to the list box.

Click To expand
Figure 17.9: The AddItems example.

In this example, there's more going on than just using the Items collection's Add method, however-we'll have to keep track of the number of items added to the list box between round trips to the server to be able to increment the caption of newly added items (for example, from "Item 1" to "Item 2"). To do that, I'll use an HTML hidden control (see "Saving Program Data across Server Round Trips" in Chapter 14 for more details).

In the AddItems example, I've given the new hidden control the ID Hidden1 in the Properties window. To make sure the hidden control's data is sent back to the server, and is accessible to your Visual Basic code, you must make it a server control, so right-click it and select the "Run As Server Control". Finally, assign its value property the value 0 in the Properties window. The data in this control, Hidden1.Value, will be stored in the Web page and sent back to the server, so I can store the number of items I've added to the list box and set the caption of new items like this:

   Private Sub Button1_Click(ByVal sender As System.Object, _
       ByVal e As System.EventArgs) Handles Button1.Click
       Hidden1.Value += 1
       ListBox1.Items.Add("Item " & Hidden1.Value)
   End Sub

That's all there is to it. I also can add code to the list box's SelectedIndexChanged event handler like this:

   Private Sub ListBox1_SelectedIndexChanged(ByVal sender As _
       System.Object, ByVal e As System.EventArgs) Handles _
       ListBox1.SelectedIndexChanged
       TextBox1.Text = "You selected " & ListBox1.SelectedItem.Text
   End Sub

You can see the results in Figure 17.9. For reference, here is WebForm1.aspx from the AddItems example:

<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="AddItems.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>AddItems example</title>
<meta content="Microsoft Visual Studio.NET 7.0" name=GENERATOR>
<meta content="Visual Basic 7.0" name=CODE_LANGUAGE>
<meta content=JavaScript name=vs_defaultClientScript>
<meta content=
    http://schemas.microsoft.com/intellisense/ie5 name=vs_targetSchema>
  </HEAD>
<body MS_POSITIONING="GridLayout">
<form id=Form1 method=post runat="server">
<asp:listbox id=ListBox1 style="Z-INDEX: 101; LEFT: 158px; POSITION:
absolute; TOP: 56px" runat="server" Width="154px" Height="112px"
AutoPostBack="True"></asp:listbox>
<INPUT id=Hidden1 style="Z-INDEX: 104; LEFT: 159px; POSITION:
absolute; TOP: 250px" type=hidden value=0 runat="server">
<asp:button id=Button1 style="Z-INDEX: 103; LEFT: 188px; POSITION:
absolute; TOP: 174px" runat="server" Width="103px" Height="24px"
Text="Add a new item">
</asp:button>
<asp:textbox id=TextBox1 style="Z-INDEX: 102; LEFT: 160px;
POSITION: absolute; TOP: 217px" runat="server"></asp:textbox>
</form>

  </body>
</HTML>

And here is WebForm1.aspx.vb from this example:

Public Class WebForm1
    Inherits System.Web.UI.Page
    Protected WithEvents ListBox1 As System.Web.UI.WebControls.ListBox
    Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox
    Protected WithEvents Hidden1 As _
        System.Web.UI.HtmlControls.HtmlInputHidden
    Protected WithEvents Button1 As System.Web.UI.WebControls.Button

#Region " Web Form Designer Generated Code "
    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> _
        Private Sub InitializeComponent()

    End Sub

    Private Sub Page_Init(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

    Private Sub Page_Load(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Load
    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles Button1.Click
        Hidden1.Value += 1
        ListBox1.Items.Add("Item " & Hidden1.Value)
    End Sub

    Private Sub ListBox1_SelectedIndexChanged(ByVal sender As _
        System.Object, ByVal e As System.EventArgs) Handles _
        ListBox1.SelectedIndexChanged
        TextBox1.Text = "You selected " & ListBox1.SelectedItem.Text
    End Sub
End Class
Previous Section Next Section




JavaScript Editor Free JavaScript Editor     JavaScript Editor