ListBox ASP.NET Server Control
ListBox ASP.NET Server Control"-->
| only for RuBoard |
ListBox ASP.NET Server Control
The ListBox server control is very similar to the DropDownList , but differs in its display. You can have more than one item at a time shown to the user . The ListBox also enables users to select more than one item at time. For example, if you have a site that delivers news to its users you can allow users to select the type of news they want (for example: sports, world) using the ListBox .
Multiple item selection is a behavior over which you have control. By default the ListBox allows users to select only a single item in the list, but by setting the ListBox.SelectionMode attribute to Multiple multiple item selection is enabled. The following lists the two values you can use for the SelectionMode attribute:
-
Single Single item selection (default)
-
Multiple Multiple item selection
Because the ListBox enables you to display more than one item at a time there is one other attribute you can use to affect how the control is rendered to the client. The Rows attribute controls how many items are displayed to the user in the ListBox . If the amount of items in the Listbox exceeds this value, then scroll bars are rendered for ListBox navigation.
Listing 8.13 demonstrates how to use a ListBox control. There are four different types of ListBox es in this example because I wanted to illustrate how setting the SelectionMode and Rows attributes to different values affect the way the control is rendered.
Listing 8.13 Using the Different Styles of the ListBox Control
[VisualBasic.NET] 01: <script runat="server" language="vb" > 02: 03: public sub Page_Load(sender as Object, e as EventArgs) 04: 05: if (Not IsPostBack) then 06: lb_AddItems() 07: end if 08: 09: end sub 10: 11: public sub lb_AddItems() 12: 13: dim i as integer 14: for i = 0 to 4 15: lb.Items.Add(new ListItem("This is Index - " & i)) 16: lb2.Items.Add(new ListItem("This is Index - " & i)) 17: lb3.Items.Add(new ListItem("This is Index - " & i)) 18: lb4.Items.Add(new ListItem("This is Index - " & i)) 19: next 20: 21: end sub 22: 23: </script> [C#.NET] 01: <script runat="server" language="C#" > 02: 03: void Page_Load(Object source, EventArgs e ) { 04: 05: if (! Page.IsPostBack) { 06: lb_AddItems(); 07: } 08: 09: } 10: 11: void lb_AddItems(){ 12: 13: int i; 14: for (i = 0; i < 5; i++){ 15: lb.Items.Add(new ListItem("This is Index - " + i)); 16: lb2.Items.Add(new ListItem("This is Index - " + i)); 17: lb3.Items.Add(new ListItem("This is Index - " + i)); 18: lb4.Items.Add(new ListItem("This is Index - " + i)); 19: } 20: 21: } 22: 23: </script> [VisualBasic.NET & C#.NET] 24: <html> 25: <body> 26: <form method="post" runat="server"> 27: 28: 5 Rows Multiple Item Selection 29: <br> 30: <asp:ListBox runat="server" rows="5" id="lb" SelectionMode="Multiple" /> 31: 32: <p> 33: 34: 5 Rows Single Item Selection 35: <br> 36: <asp:ListBox runat="server" rows="5" id="lb2" SelectionMode="Single" /> 37: 38: <p> 39: 40: 1 Row Single Line Selection 41: <br> 42: <asp:ListBox runat="server" rows="1" id="lb3" SelectionMode="Single" /> 43: 44: <p> 45: 46: 1 Row Multiple Line Selection 47: <br> 48: <asp:ListBox runat="server" rows="1" id="lb4" SelectionMode="Multiple" /> 49: 50: </form> 51: </body> 52: </html> As previously mentioned there are four types of ListBox controls in Listing 8.13. Each has five items ( ListItems ). In the following paragraphs we'll go through each one and look at which attributes are used and the effect they have on the rendered element.
The first ListBox (line 30) has the Rows attribute set to five and SelectionMode set to Multiple . Because there are only five items a scroll bar is not rendered, and because SelectionMode is Multiple the user can select more than one item from the list. The following HTML is rendered to the client for this ListBox ”a SELECT element just like the DropDownList , but with two new attributes ” size and multiple :
01: <select name="lb" id="lb" size="5" multiple="multiple"> 02: <option value="This is Index - 0">This is Index - 0</option> 03: <option value="This is Index - 1">This is Index - 1</option> 04: <option value="This is Index - 2">This is Index - 2</option> 05: <option value="This is Index - 3">This is Index - 3</option> 06: <option value="This is Index - 4">This is Index - 4</option> 07: </select>
The next ListBox (line 36) also has Rows set to five, but the SelectionMode attribute is set to Single so the user can select only one item from the list. The following HTML is rendered to the client for this ListBox ”because SelectionMode is Single , only the size attribute is rendered:
01: <select name="lb2" id="lb2" size="5"> 02: <option value="This is Index - 0">This is Index - 0</option> 03: <option value="This is Index - 1">This is Index - 1</option> 04: <option value="This is Index - 2">This is Index - 2</option> 05: <option value="This is Index - 3">This is Index - 3</option> 06: <option value="This is Index - 4">This is Index - 4</option> 07: </select>
On line 42 is the next ListBox and it has Rows set to one and SelectionMode set to Single . When this ListBox is rendered you will notice that it's essentially a DropDownList control as seen in Figure 8.6. The following HTML is rendered to the client for this ListBox ”compare this HTML to that of the DropDownList ”they are identical:
01: <select name="lb3" id="lb3" size="1"> 02: <option value="This is Index - 0">This is Index - 0</option> 03: <option value="This is Index - 1">This is Index - 1</option> 04: <option value="This is Index - 2">This is Index - 2</option> 05: <option value="This is Index - 3">This is Index - 3</option> 06: <option value="This is Index - 4">This is Index - 4</option> 07: </select>
Figure 8.6. All four types of Listbox .
The final ListBox , located on line 48, also has Rows set to 1 , but has SelectionMode set to Multiple . This means the user can see only one item at a time, but can choose multiple items from the list. The following HTML is rendered to the client for this ListBox :
01: <select name="lb4" id="lb4" size="1" multiple="multiple"> 02: <option value="This is Index - 0">This is Index - 0</option> 03: <option value="This is Index - 1">This is Index - 1</option> 04: <option value="This is Index - 2">This is Index - 2</option> 05: <option value="This is Index - 3">This is Index - 3</option> 06: <option value="This is Index - 4">This is Index - 4</option> 07: </select>
Size is set to 1 and multiple is set to multiple . Let's take a look at what this page looks like! Figure 8.6 contains the page created in Listing 8.14 -the ListBox controls discussed in the previous paragraphs are shown in order.
Raising and Handling Events and Determining Item Selection
The ListBox supports the same events and attributes of the DropDownList ” AutoPostBack , SelectedIndex , OnSelectedIndexChanged , and SelectedItem . But, because the ListBox supports multiple item selection, you have to do things a little differently to get the selected values.
As previously mentioned, the List controls are made up of ListItem objects ” ListItemCollection . Again, the ListItem object contains the Value , and Text of the item in the control; additionally, it contains a Selected attribute which is either going to be true or false . It will be true if the ListItem is selected and false if not. We use this ListItemCollection to determine which item or items are selected within List controls. Listing 8.14 demonstrates how to loop through a ListBox with multiple item selection enabled.
Listing 8.14 Retrieving All the Selected Items in a ListBox
[VisualBasic.NET] 01: <script runat="server" language="vb"> 02: 03: public sub Page_Load(sender as Object, e as EventArgs) 04: 05: if (Not IsPostBack) then 06: lb_AddItems() 07: end if 08: 09: end sub 10: 11: public sub lb_AddItems() 12: 13: dim i as integer 14: for i = 0 to 4 15: lb.Items.Add(new ListItem("This is Index - " & i)) 16: next 17: 18: end sub 19: 20: public sub lblMulti_OnSelectedIndexChanged(sender as Object, e as EventArgs) 21: 22: dim sb as new StringBuilder() 23: dim i as integer 24: 25: for i = 0 to lb.Items.Count - 1 26: if lb.Items(i).Selected = true then 27: sb.Append(i) 28: sb.Append(". ") 29: sb.Append(lb.Items(i).Text) 30: sb.Append("<br>") 31: end if 32: next 33: 34: lblMulti.Text = sb.ToString() 35: 36: end sub 37: 38: </script> [C#.NET] 01: <script runat="server" language="C#"> 02: 03: void Page_Load(Object source, EventArgs e ) { 04: 05: if (! Page.IsPostBack) { 06: lb_AddItems(); 07: } 08: 09: } 10: 11: void lb_AddItems(){ 12: 13: int i; 14: for (i = 0; i < 5; i++){ 15: lb.Items.Add(new ListItem("This is Index - " + i)); 16: } 17: 18: } 19: 20: void lblMulti_OnSelectedIndexChanged(Object sender, EventArgs e){ 21: 22: StringBuilder sb = new StringBuilder(); 23: int i; 24: 25: for (i = 0; i < lb.Items.Count; i ++){ 26: if (lb.Items[i].Selected == true) { 27: sb.Append(i); 28: sb.Append(". "); 29: sb.Append(lb.Items[i].Text); 30: sb.Append("<br>"); 31: } 32: } 33: 34: lblMulti.Text = sb.ToString(); 35: 36: } 37: 38: </script> [VisualBasic.NET & C#.NET] 39: <html> 40: <body> 41: <form runat="server"> 42: 43: 5 Rows Multiple Item Selection 44: 45: <br> 46: 47: <asp:ListBox runat="server" 48: rows="5" id="lb" 49: SelectionMode="Multiple" 50: AutoPostBack="True" 51: OnSelectedIndexChanged="lblMulti_OnSelectedIndexChanged" 52: /> 53: 54: <br> 55: 56: <asp:Label id="lblMulti" runat="server" /> 57: 58: </form> 59: </body> 60: </html> The ListBox control in Listing 8.14 is located on lines 47 “52. I have Rows set to 5 , AutoPostBack to true , SelectionMode to Multiple , and I have OnSelectedIndexChanged set to lblMulti_OnSelectedIndexChanged ”the SelectedIndexChanged event handler. When this page first renders you'll receive a ListBox with five items in it and no scroll bars. You can select an item(s) by clicking on it. You can also click on an item and, while holding down the right mouse button, dragging the cursor up or down. Finally, you can click on an item while holding the Ctrl button down and then clicking another.
After a selection is made, the page is posted back to the server and the SelectedIndexChanged event is handled by lblMulti_OnSelectedIndexChanged . Within the event handler a for loop is used to loop through the ListItemCollection looking for ListItems with the Selected property of true , concatenated together using a StringBuilder , and finally written to the page using a Label control. Figure 8.7 contains an illustration of this page after the first and last items are selected from the ListBox .
Figure 8.7. The Label control contains a list of selected items.
Binding a ListBox to a Data Source
The ListBox control supports binding just as the DropDownList control does. You set the ListBox.DataSource , DataTextField , and DataValueField and call the DataBind method. Listing 8.15 demonstrates how to bind a ListBox control to a data source that was derived from a database query.
Listing 8.15 Binding the ListBox Control to a Data Source
[VisualBasic.NET] 01: <%@ Import Namespace="System.Data" %> 02: <%@ Import Namespace="System.Data.SqlClient" %> 03: <script runat="server" language="vb" > 04: 05: public sub Page_Load(sender as Object, e as EventArgs) 06: 07: if (not IsPostBack) then 08: lb_DataBind() 09: end if 10: 11: end sub 12: 13: public sub lb_DataBind() 14: 15: dim SqlCon as new SqlConnection("server=localhost; uid=sa;pwd=;database=northwind") 16: dim SqlCmd as new SqlCommand("SELECT ProductName, ProductID FROM Products", SqlCon) 17: 18: SqlCon.Open() 19: lb.DataSource = SqlCmd.ExecuteReader(CommandBehavior.CloseConnection) 20: lb.DataTextField = "ProductName" 21: lb.DataValueField = "ProductID" 22: lb.DataBind() 23: 24: end sub 25: 26: </script> [C#.NET] 01: <%@ Import Namespace="System.Data" %> 02: <%@ Import Namespace="System.Data.SqlClient" %> 03: <script runat="server" language="C#" > 04: 05: void Page_Load(Object sender, EventArgs e) { 06: 07: if (! IsPostBack) { 08: lb_DataBind(); 09: } 10: 11: } 12: 13: void lb_DataBind(){ 14: 15: SqlConnection SqlCon = new SqlConnection("server=localhost; 
uid=sa;pwd=;database=northwind"); 16: SqlCommand SqlCmd = new SqlCommand("SELECT ProductName, ProductID FROM Products", SqlCon); 17: 18: SqlCon.Open(); 19: lb.DataSource = SqlCmd.ExecuteReader(CommandBehavior.CloseConnection); 20: lb.DataTextField = "ProductName"; 21: lb.DataValueField = "ProductID"; 22: lb.DataBind(); 23: 24: } 25: 26: </script> [VisualBasic.NET & C#.NET] 27: : <html> 28: <body> 29: <form runat="server"> 30: 31: <asp:ListBox 32: runat="server" 33: Rows="15" 34: SelectionMode="Multiple" 35: id="lb" /> 36: 37: </form> 38: </body> 39: </html> If you compared the data binding code in Listing 8.16 to the data binding code from Listing 8.13 the only difference you would see is the name of the control which is being bound ” ddl ( DropDownList ) versus lb ( ListBox ). First you construct a valid data source and use it as the ListBox.DataSource . Then set the DataTextField and DataValueField , invoke the DataBind method and you're done.
| only for RuBoard |
EAN: 2147483647
Pages: 170