- Techniques for Creating Reusable Content
- Building a ComboBox User Control
- Using the ComboBox Control
- Populating the ComboBox Control
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Using the ComboBox Control
The first example of using the ComboBox control contains three instances and applies three different styles to them so that you can see the possibilities (see Figure 5.10). You can find this page in the samples that you can download for this book (see http://www.daveandal.net/books/6744/), or you can just run it online on our server (also see http://www.daveandal.net/books/6744/). There is a [view source] link at the bottom of the page that you can use to see the source code and the source of the .ascx user control.
)
Figure
5.10 The ComboBox user control demonstration page in
action.
The page contains a Register directive for the ComboBox control:
<%@Register TagPrefix="ahh" TagName="ComboBox" Src="ascx\combo.ascx" %>
As shown in Listing 5.27, three instances of the ComboBox control are then declared within the <form> section of the page. However, because the constituent controls reside within a <div> element or a <table> element (depending on the mode specified), you have to use another <table> element to place a caption next to them. Listing 5.27 shows the attributes you specify for each one to apply the CSS style class (defined elsewhere in the page) and the other properties you set declaratively.
Listing 5.27—The Declaration of the ComboBox Controls in the Sample Page
<form runat="server">
<hr />
<table border="0"><tr><td align="right" valign="top">
Simple Combo List Box:</td><td>
<ahh:ComboBox id="cboTest1" IsDropDownCombo="False" runat="server" />
</td></tr></table>
<hr />
<table border="0"><tr><td align="right" valign="top">
Styled Drop-down Combo Box:</td><td>
<ahh:ComboBox id="cboTest2" CssClass="bluegray"
IsDropDownCombo="True" runat="server" />
</td></tr></table>
<hr />
<table border="0"><tr><td align="right" valign="top">
Wide and More Rows Drop-down<br />Combo Box with Larger Font:</td><td>
<ahh:ComboBox id="cboTest3" CssClass="reverse" Width="300"
Rows="10" IsDropDownCombo="True" runat="server" />
</td></tr></table>
<hr />
<b>Select Combo Box and specify action to apply</b>:<p />
<asp:RadioButtonList id="optCbo" RepeatLayout="Flow"
RepeatDirection="Horizontal" RepeatColumns="3" runat="server" >
<asp:ListItem Value="cboTest1" Text="Simple " />
<asp:ListItem Value="cboTest2" Text="Styled " />
<asp:ListItem Value="cboTest3" Text="Wide and More Rows" />
</asp:RadioButtonList>
<p />
<asp:Button Text=" " OnClick="ShowMembers" runat="server" />
Display the syntax by calling the ShowMembers method
<p />
...
... other controls here to set properties ...
...
<asp:Label id="lblResult" EnableViewState="False" runat="server" />
</form>
The sample page also contains a RadioButtonList control that is used to specify which of the three ComboBox controls you want to apply the property settings to dynamically and a series of controls to specify the action to carry out on the selected ComboBox control. They are not all shown in Listing 5.27 to avoid unnecessary duplication. Notice that the Value properties of the items in the RadioButtonList control are the IDs of the three ComboBox controls.
Populating the ComboBox Controls from an ArrayList Instance
The Page_Load event handler is shown in Listing 5.28. If the current request is not a postback, you set the radio button to the first option and then create an ArrayList instance containing the values to be displayed in the ComboBox control list. By using data binding, you can apply this to all three of the ComboBox controls, just as you would any other list control—but with one exception. The user control in this example automatically calls the DataBind method when it loads (after the current Page_Load event has occurred for the hosting page), so you don't do it here. You can also take advantage of the DataTextFormatString property exposed by the ComboBox control to specify how the values are formatted in the third instance. This gives the effect you see in Figure 5.10 (for example, Animal 'buffalo').
Listing 5.28—The Page_Load Event Handler in the Sample Page
Sub Page_Load()
If Not Page.IsPostback Then
' executed when page is first loaded
' select first combobox in radiobutton list
optCbo.SelectedIndex = 0
' create ArrayList to populate comboboxes
Dim aVals As New ArrayList()
aVals.Add("aardvark")
aVals.Add("baboon")
aVals.Add("buffalo")
aVals.Add("cheetah")
aVals.Add("frog")
aVals.Add("giraffe")
aVals.Add("lion")
aVals.Add("lynx")
' assign to DataSource of comboboxes
cboTest1.DataSource = aVals
cboTest2.DataSource = aVals
cboTest3.DataSource = aVals
' set display format string for third combobox
cboTest3.DataTextFormatString = "Animal '{0}'"
End If
End Sub
Displaying the Members of the ComboBox User Control
When the user clicks the Show Members button, the routine named ShowMembers in the hosting page is executed. In it, you first have to get a reference to the ComboBox control currently selected in the RadioButtonList control. Then you call the ShowMembers method of this ComboBox control to get back a string, and you display that in a Label control in the page (see Listing 5.29). To see the result of this, refer to Figure 5.9.
Listing 5.29—Calling the ShowMembers Method
Sub ShowMembers(oSender As Object, oArgs As EventArgs) ' get a reference to the selected comboxbox control Dim oCtrl As Object = Page.FindControl(optCbo.SelectedValue) ' call ShowMembers method of combobox control lblResult.Text = oCtrl.ShowMembers() End Sub
Displaying Details of the Selected Item
The sample page contains a button that displays details of the item currently selected in the ComboBox control. Figure 5.11 shows the output that this generates in the page, and you can see the values for the SelectedIndex, SelectedValue, and SelectedItem properties, plus the items in the list, as obtained by iterating through the Items collection.
)
Figure
5.11 The output of the ShowMembers method of the ComboBox
control, as displayed in a Web page.
Listing 5.30 shows the code that executes when this button in the hosting page is clicked. After the code gets a reference to the currently selected ComboBox control, a StringBuilder instance is used to create the string that is displayed in a Label control. Again, the process of extracting the values from the ComboBox control is exactly the same as you would use with any other Web Forms list control.
Listing 5.30—The ShowSelected Routine That Calls the ShowMembers Method
Sub ShowSelected(oSender As Object, oArgs As EventArgs)
' get a reference to the selected comboxbox control
Dim oCtrl As Object = Page.FindControl(optCbo.SelectedValue)
' use a StringBuilder to hold string for display
Dim sResult As New StringBuilder("<b>Property Values:</b><br />")
' collect details of current selection from combobox
sResult.Append("SelectedIndex: " & oCtrl.SelectedIndex & "<br />")
sResult.Append("SelectedValue: " & oCtrl.SelectedValue & "<br />")
sResult.Append("SelectedItem.Text: " & oCtrl.SelectedItem.Text & "<p />")
' collect all items in the combobox list
sResult.Append("<b>ListItems Collection:</b><br />")
For Each iItem as ListItem In oCtrl.Items
sResult.Append(iItem.Text & "<br />")
Next
' display results in the page
lblResult.Text = sResult.ToString()
End Sub
Setting the Properties of the ComboBox User Control
The remaining buttons in the sample page set various properties of the selected ComboBox control, including SelectedIndex, SelectedValue, Width, and Rows. They validate the values first to make sure they are of the correct data types and within range. Then, after obtaining a reference to the current ComboBox control, as in the previous examples, they apply the property setting(s) to it. This chapter doesn't list all the code for these routines because it is extremely repetitive, but you can see it by using the [view source] link at the bottom of the page at http://www.daveandal.net/books/6744/.