26.11 Using the Mobile ASP.NET ObjectList Control

26.11 Using the Mobile ASP.NET ObjectList Control

You want to display data from a database using a control similar to the DataGrid control.

Technique

Mobile Web Forms do not contain a DataGrid control because a lot of the DataGrid 's functionality assumes a feature-rich browser is viewing the content. Instead, a new control named ObjectList allows you to display formatted data from a database. Assuming you have a Mobile Web Application project created and an initial form displayed in the Web Form Designer, drag and drop an ObjectList control from the toolbox to the form. Next , drag and drop a database table located in the Server Explorer from a data connection. This example uses the Northwind SQL database, and the table is the Products table.

Just as the Windows Form designer did when you created a Windows Form application, and the Web Form designer did when you created an ASP.NET application, dragging and dropping a table from the Server Explorer creates a connection and data adapter object. For the Products table, it corresponds to a SqlConnection and SqlDataAdapter object. The next step is to generate a typed DataSet . Select the SqlDataAdapter object located in the bottom tray area of the Web Form designer, and click on the Generate Dataset verb located in the Property Browser. This step creates a typed DataSet object that you will databind the ObjectList control to.

To databind the ObjectList , select the control and specify the DataSet object to bind to using the DataSource property. Next, select the table within the DataSet that you want the ObjectList to display by setting the DataMember property. The last step is to write the code within your page handler as you did with ASP.NET projects ”to fill the DataSet using the SqlDataAdapter and then to databind the ObjectList by calling the DataBind method, as shown in the following code:

 private void Page_Load(object sender, System.EventArgs e) {     if( !Page.IsPostBack )     {         sqlDataAdapter1.Fill( productsDS1 );         this.DataBind();     } } 

At this point you can view the mobile Web form in a browser. By default, the ObjectList creates a single column whose header is the name of the primary-key column and a list of the values for that primary key using links. Clicking one of the links displays all the data for that specific record on a single page, with a link at the bottom to return to the master view. The next step is to change the default behavior so a list of product names appears rather than the ProductID column. Right-click on the ObjectList within the Web Form designer and select the Property Builder menu item. Select the General property page and move the PropertyName item from the list of Available Fields to the list of Selected Fields. Doing so overrides the default behavior of the ObjectList so only items within the Selected Fields list appear. Additionally, the first item in the list is rendered as a link to navigate to the detail page. When you run the mobile Web application now, you see a list of product names instead of their associated ID values, and clicking a product name displays more information for that product.

The last item to discuss as it relates to the ObjectList is the ability to edit items. For this example, you create a custom command that deletes an item from the ObjectList and subsequently from the SQL database. This procedure also uses the Property Builder dialog. Once the Property Builder dialog appears, click on the Commands property page. Next, click on the Create New Command button and give the command the name Delete . If the corresponding Text field is left blank, the text displayed will be the same as that of the command name.

The next step is to create an event handler for the Delete command. Select the ObjectList within the designer and add an event handler for the ItemCommand event using the Property Browser event view. Any items you add using the Property Builder will use the event handler you just created. To distinguish between the different commands, you can access the CommandName property passed in through the ObjectListCommandEventArgs object. For this example, the CommandName is Delete . Therefore, whenever the Delete command is selected, perform the normal steps for database updates by filling the DataSet to get the current data, find the corresponding row to delete, remove it, and then update the database using the data adapter and rebind the form controls. To determine the currently selected row in the ObjectList being manipulated, you can use an indexer into the ListItem collection of the event argument object. The index corresponds to the column within the table. In the example that follows , an index of corresponds to the ProductID field of the Products table, which you then use to find the corresponding row in the table by using the FindByProductID method generated in the typed DataSet object. When the application runs, you can click on a product name to view its detailed information. The bottom of the detail page contains a link named Delete and a link named Back . Clicking on the Delete link removes that product from the database as shown in Listing 26.9.

Listing 26.9 Responding to ObjectList Command Events

 private void ObjectList1_ItemCommand(object sender,     System.Web.UI.MobileControls.ObjectListCommandEventArgs e) {     if( e.CommandName == "Delete" )     {         // get the current dataset         sqlDataAdapter1.Fill( productsDS1, "Products");         // find the correct row to delete         ProductsDS.ProductsRow row =             productsDS1.Products.FindByProductID( Int32.Parse(e.ListItem[0]) );         // delete the row         productsDS1.Products.RemoveProductsRow(row);         // update the database and databind         sqlDataAdapter1.Update( productsDS1, "Products");         DataBind();     } } 

Comments

The DataGrid is a powerful control, which unfortunately is a little too powerful to display on mobile Web browsers. The ObjectList uses a master/detail list to allow you to navigate through the data of a database table using simple text rendering and hyperlinks for navigation. Although not covered here, the ObjectList has a few other features worth mentioning. Pagination is supported by the ObjectList . You access the Property Builder and set the number of items to display, which is normally to display all items and the number of items to display per page. Additionally, you can customize the details page further by specifying your own fields in the Fields property page of the Property Builder. You have to make sure you uncheck the check box that automatically creates fields for you before adding your own. Each field that you add displays a value from the column in the database using the DataField selection box. You can also create a format string if, for instance, you want to display a certain field with a currency format. Finally, the Title field is the text that displays to the user to identify what the field denotes, such as Product Name or Product Price.