| The ObjectList control allows you to bypass a lot of work you would otherwise have to do yourself. Once you've set the appropriate properties and have bound the control to some data source, the control can display both a table and a details view of your data. You supply the fields to be displayed in the table view as well as the exact information and formatting you want to use in details view, and the control does its work. In this example, the goal is to display customer IDs and phone numbers in the table view and list complete information in the details view. This requires nothing more than setting a few properties. Follow these steps to add the fourth form to your page: -
Click to the right of frmCity and then double-click the Form control in the Toolbox window. -
Set the ID property of this new form to frmCustomers. -
Add an ObjectList control to frmCustomers and set its ID property to olstCustomers. You'll come back later and set the various properties of this somewhat-complex control. Setting Up Fields in the ObjectList Control Follow these steps to manage how the ObjectList control does its work: -
Select the ObjectList control, olstCustomers, and set its AutoGenerateFields property to False. (If you allow the control to generate its own list of fields to display in its details view, you can't manage any properties of the data, such as its formatting, or the headings for the fields.) -
Set the LabelField property to CustomerID. This property indicates which field you want to use as the title in the table view. -
Set the TableFields property to CustomerID. -
Now the tricky part: Select the Fields property and click the builder button (…). In the Field Name list, add one entry for each of the fields you want displayed in the details view and then fill in the rest of the properties as shown in Table 25.4. (Note that you're not setting the DataFormatString or Visible property of any of the fields, although you could.) Table 25.4. Use These Settings for the Fields Property of the ObjectList Control | Field Name | Data Field | Title | | CustomerID | CustomerID | Customer ID | | Address | Address | Address | | City | City | City | | Region | Region | Region | | Country | Country | Country | | PostalCode | PostalCode | Postal Code | | Phone | Phone | Phone | | ContactName | ContactName | Contact Name | Filling the ObjectList Control with Data Follow these steps to fill the ObjectList control with data (you should be intimately familiar with this code by now, because it's similar to much of the code you've seen throughout this book): -
Add the following procedure to your page's class: Private Sub FillCustomers(ByVal City As String) Dim ds As DataSet Dim strConn As String Dim strSQL As String strConn = DataHandler.ConnectStringBuild("sa", "") strSQL = String.Format( _ "SELECT CustomerID, Address, ContactName, " & _ "City, Region, PostalCode, Country, Phone " & _ "FROM Customers " & _ "WHERE City = '{0}'" & _ "ORDER By CustomerID", City) ds = DataHandler.GetDataSet(strSQL, strConn) With olstCustomers .DataSource = ds .DataBind() End With End Sub -
Select cmdCustomers and its Click event from the drop-down lists at the top of the code module. -
Modify the cmdCustomers_Click procedure so that it looks like this: Private Sub cmdCustomers_Click( _ ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles cmdCustomers.Click If slstCity.SelectedIndex >= 0 Then lblValidate.Text = String.Empty FillCustomers(slstCity.Selection.Text) ActiveForm = frmCustomers Else lblValidate.Text = "Please select a city first" End If End Sub Because it only makes sense to fill the ObjectList control if you've specified a city, the code that calls FillCustomers needs to verify that you've selected a city first. You can't use a RequiredFieldValidator control here, because that control won't validate a SelectionList control. Therefore, you need to take matters into your own hands. The preceding code first checks to make sure one of the radio buttons has been selected in the SelectionList control. If it has, the code calls the FillCustomers procedure, passing in the city name selected from the SelectionList control.  | Run the project once again, enter a password, and then select a country. Finally, select a city, and you should see a list of customers in that city. Select a customer, and you should see detailed information about the customer. |
Adding a Custom Command The ObjectList control also allows you to add custom commands (in addition to the default Back link) to its details view. In this case, you're going to add a link (More Info) that calculates the total number of orders for the selected customer and displays this information on a new form. You specify the CommandName and Text properties, and the control does the rest you can check to see which command the user has clicked from the ItemCommand event handler. Follow these steps to add the custom command: -
Add a new Form control to your mobile Web page. -
Set the ID property of this new form to frmOrders. -
Add a Label control to this new form. Set the ID property to lblOrders and delete the default value for the control's Text property. -
Back on the previous form, select the ObjectList control's Commands property. Click the builder button (…) to display the olstCustomers Properties dialog box. -
Click Create New Command and set the Command Name text to Orders and the Text property to More Info. -
Press F7 to load the code window and add this procedure to the page's class. The CountOrders procedure uses a Command object, calling its ExecuteScalar method, to retrieve the total number of orders for the specified customer: Private Sub CountOrders(ByVal CustomerID As String) Dim strSQL As String Dim strConn As String Dim intCount As Integer strConn = DataHandler.ConnectStringBuild("sa", "") strSQL = String.Format( _ "SELECT COUNT(*) FROM Orders " & _ "WHERE CustomerID = '{0}'", CustomerID) intCount = CInt( _ DataHandler.ExecuteScalar(strSQL, strConn)) lblOrders.Text = String.Format( _ "Customer {0} has placed {1} {2}.", _ CustomerID, intCount, _ IIf(intCount = 1, "order", "orders")) End Sub -
Press Shift+F7 to return to design view. Double-click the ObjectList control, loading the code module with the ItemCommand event procedure created for you. Modify the procedure so that it looks like this, calling the CountOrders procedure: Private Sub olstCustomers_ItemCommand( _ ByVal source As System.Object, _ ByVal e As System.Web.UI. _ MobileControls.ObjectListCommandEventArgs) _ Handles olstCustomers.ItemCommand If e.CommandName = "Orders" Then CountOrders(e.ListItem.Item("CustomerID")) ActiveForm = frmOrders End If End Sub NOTE In the ItemCommand event procedure, the code uses a Select Case construct to check the CommandName property of the parameter to the procedure. Because your control might include multiple custom commands, you should always check the command name before executing any code. In this case, the code counts the orders and navigates to the final form on the page. -
Test your page. Verify that you can browse from one form to another and that selecting a customer in the table view of the ObjectList control displays details for that customer. Selecting the More Info link should display the total number of orders for the selected customer. As you can see, with very little effort, you've created a full-featured mobile Web application, using the Microsoft Mobile Internet Toolkit! |
