The ASP Column

Using the Internet Explorer WebControls

George Shepherd

Contents

Getting Started
TabStrip, MultiView, and PageView
MultiPage and TabStrip
PageView
Getting Data into the PageViews
What is Rendered
Conclusion

During the lifespan of ASP, there have been many technologies developed for making browser-based user interface development easier. For example, during the early days of classic ASP development, keeping a browser-based UI consistent required many conditional statements into the ASP script. Server-side controls eliminate much of that hassle by pushing the details of managing UI state down into a set of runtime classes.

Web Forms and server-side controls manage their own view states, relieving you of that requirement (see the Cutting Edge column in this issue). There's also built-in designer support for working with server-side controls. In some cases, developing the browser-based UI is as simple as dragging the controls onto the form and wiring up the events to be handled by the page.

This month I'm going to start looking at an auxiliary set of server-side controls: the Microsoft® Internet Explorer WebControls. These controls can really help you dress up your Web site. This suite of controls includes three UI components normally associated with desktop-style applications: a hierarchical tree control (called a TreeView), a toolbar (called ToolBar), and a component similar to a tabbed dialog box (the TabStrip, the MultiPage, and the PageView controls). This month I'll take a look at the TabStrip and the MultiPage control. I'll look a the TreeView and the Toolbar in a future column.

Getting Started

Before going any further, you'll probably want to download a copy of the controls from ASP.NET. To get the whole suite (including the controls and the DHTML behaviors), select "Automatic Install: WebControls Version 1.0 Client DHTML Behaviors and Server Controls" as the downloading option. It's a small download—only 660KB. Once the file called IEWebControls.MSI is on your machine, run it. The installation process adds the assemblies to the global assembly cache.

To make the controls available to Visual Studio®, go to the Tools menu and select Customize Toolbox.

Choose the .NET Framework Components tab and you'll see all the components that are installed on your machine. Take a quick look through the list. You'll see two entries for ToolBar and TreeView. If you examine the namespace for each component, you'll see that there's a ToolBar for Windows Forms and another for Web Forms. For developing Web Forms with the Internet Explorer WebControls, make sure the ToolBar, TreeView, TabStrip, and MultiPage components are all checked. Then they'll appear in the designer toolbox while you're working on a form.

TabStrip, MultiView, and PageView

Tabbed dialog boxes are straightforward to implement within a desktop environment. The entire state of the tabbed dialog box can be held in one place—inside the application. However, Web development is different. When developing a Web-based UI, you're concerned with making the user interface look as much as possible like a desktop user interface even though the UI is coded using a markup language over a connectionless protocol. You would certainly think that tabbed dialog boxes are out of the question. After all, there's a lot of state to keep track of when managing multiple dialog-style interfaces.

The Internet Explorer WebControls make this sort of interface possible through TabStrip, MultiView, and PageView. In mapping the Web components to the components in a standard Windows® UI, TabStrip represents the tabs across the top of the dialogs. The MultiPage control is somewhat akin to the property sheet, collecting separate property pages. In the Internet Explorer WebControls scenario, PageView represents each of the property pages.

MultiPage and TabStrip

In my December 2001 column I compared the DataGrid and the DataList as different ways of generating a user interface based upon a shopping cart-style application. This month I'll use a MultiPage and some PageViews to display the details of the same collection. A DataGrid on the left-hand side of the page shows a list of products (guitars). Pressing a "Select" link in the first column places the current selection's detail in a MultiPage control. The detail categories include information about a particular guitar, information about the seller, and other related information.

Using a TabStrip and a MultiPage is easy: just drag them from the toolbox onto the designer, as Figure 1 shows. When you drag a TabStrip onto the designer, it comes with three tabs by default. To change them or add new tabs, highlight the TabStrip and go to the Properties pane. When you press the button in the Items property, you'll see the dialog shown in Figure 2.

Figure 1 DataGrid

Figure 2** Modifying Tabs in TabStrip **

The dialog box for modifying the Tab properties is straightforward and very similar to the one used for most other controls. Press the Add button to add tabs and tab separators, then set the properties for each element in the tab bar.

Putting a MultiPage onto the Web Form is also easy. The MultiPage also appears in the Visual Studio toolbox—you can just drag it onto the form. Like TabStrip, MultiPage has properties such as the control ID, foreground and background color, and border options.

After you drag one of these controls onto a Web Form, Visual Studio automatically generates the following registration directive at the top of the ASPX page:

<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

The Register directive helps the runtime map the controls declared on the page to a specific assembly and namespace.

Among the properties for a TabStrip is the TargetID, which points to the MultiPage associated with the TabStrip. When you have a TabStrip and a MultiPage on the Web Form, associating the TabStrip TargetID with the name of the MultiPage control enables the user to click on a tab to show the separate PageViews within a MultiPage.

PageView

Placing TabStrips and MultiPages on a Web Form involves dragging and dropping from the toolbox. Putting different PageViews in the MultiPage is a different matter. If you look at Figure 1 you'll see that the MultiPage on the form says "To add PageViews to this MultiPage, please switch to HTML view." PageViews need to be typed by hand. Figure 3 shows the ASPX code for both the MultiPage and PageViews.

Figure 3 Adding PageViews to a MultiPage

<iewc:multipage id="MultiPageProductInfo" style="Z-INDEX: 101; LEFT: 468px; POSITION: absolute; TOP: 93px" runat="server" BorderWidth="1px" BorderColor="Black" Height="365px" Width="407px"> <iewc:PageView id="ProductInformationPage"> <h3>Product Information</h3> <table> <tr> <td valign="top" align="left"> <asp:Label Runat="server" text="GuitarName:" Font-Bold /> <asp:Label runat="Server" ID="LabelGuitarName" text="Hamer Artist" /><br> <asp:Label Runat="server" text="Pickups: " Font-Bold /> <asp:Label Runat="server" ID="LabelPickups" text="2 Seymour Duncans" /><br> <asp:Label Runat="server" text="Scale: " Font-Bold /> <asp:Label Runat="server" ID="LabelScale" text="24 3/4 in." /><br> <asp:Label Runat="server" text="Price: " Font-Bold /> <asp:Label Runat="server" ID="LabelPrice" text="444.55" /> </td> </tr> <td> <asp:Image Runat="server" ImageUrl="images\HamerArtist.jpg" id="ProductImage" /> </td> <tr> </tr> </table> </iewc:PageView> <iewc:PageView id="SellerInformationPage"> <h3>Seller Information</h3> <table> <tr> <td valign="top" align="left"> <asp:Label Runat="server" text="Seller Name:" Font-Bold ID="Label1" /> <asp:Label runat="Server" ID="LabelSellerName" /> <br> <asp:Label Runat="server" text="Address:" Font-Bold /> <asp:Label Runat="server" ID="LabelSellerAddress" /> <br> <asp:Label Runat="server" text="Comment:" Font-Bold ID="Label5" /> <asp:Label Runat="server" ID="LabelSellerComment" /> </td> </tr> <td> <asp:Image Runat="server" ImageUrl="" id="SellerImage" /> </td> <tr> </tr> </table> </iewc:PageView> <iewc:PageView id="RelatedInformationPage"> <h3>Related Information</h3> <asp:Label Runat="server" text="Other items for sale" ID="Label2"></asp:Label> <br> <asp:Label Runat="server" ID="LabelRelatedItem1"></asp:Label> <br> <asp:Label Runat="server" ID="LabelRelatedItem2"></asp:Label> <br> <asp:Label Runat="server" ID="LabelRelatedItem3"></asp:Label> <br> </iewc:PageView> </iewc:multipage>

Figure 3 lists a MultiPage added by the designer. Sandwiched between the MultiPage opening and closing tags are three separate PageViews. You can think of PageViews as convenient frames for holding server-side controls (or plain HTML) elements. The MultiPage in this example shows three PageViews: product information, seller information, and a list of related links. Each element within the PageViews has a distinct ID. You'll need each of those IDs when putting data into the PageViews.

Getting Data into the PageViews

The collection is represented in a database as a DataTable. The table for this example has the schema shown in Figure 4. The ProductName and the ProductNumber appear in the DataGrid along with the selection link. The Web Form's job is to display all the other fields in the PageViews within the MultiView. That requires some code-behind. Figure 5 shows a method named ShowSelectedItemsInfo that populates the elements within each of the PageViews.

Figure 5 Updating Each Element within PageViews

public class WebForm1 : System.Web.UI.Page { protected PageView ProductInformationPage; protected PageView SellerInformationPage; protected PageView RelatedInformationPage; public void ShowSelectedItemsInfo(DataRow dr) { // Show Product Page PageView pvProductInfo = this.ProductInformationPage; Label GuitarName = (Label)pvProductInfo.FindControl("LabelGuitarName"); GuitarName.Text = dr["ProductName"].ToString(); Label Pickups = (Label)pvProductInfo.FindControl("LabelPickups"); Pickups.Text = dr["Pickups"].ToString(); System.Web.UI.WebControls.Image ProductImage = (System.Web.UI.WebControls.Image) pvProductInfo.FindControl("ProductImage"); ProductImage.ImageUrl = dr["Image"].ToString(); Label Scale = (Label)pvProductInfo.FindControl("LabelScale"); Scale.Text = dr["Scale"].ToString(); Label Price = (Label)pvProductInfo.FindControl("LabelPrice"); Price.Text = "$" + dr["Price"].ToString(); // Show Seller Page PageView pvSellerInfo = SellerInformationPage; Label SellerName = (Label)pvSellerInfo.FindControl("LabelSellerName"); SellerName.Text = dr["SellerName"].ToString(); Label SellerAddress = (Label) pvSellerInfo.FindControl("LabelSellerAddress"); SellerAddress.Text = dr["SellerAddress"].ToString(); Label SellerComment = (Label) pvSellerInfo.FindControl("LabelSellerComment"); SellerComment.Text = dr["SellerComment"].ToString(); System.Web.UI.WebControls.Image SellerImage = (System.Web.UI.WebControls.Image) pvSellerInfo.FindControl("SellerImage"); SellerImage.ImageUrl = dr["SellerImage"].ToString(); // Show Related Info Page PageView pvRelatedInfo = RelatedInformationPage; Label LabelRelatedItem1 = (Label) pvSellerInfo.FindControl("LabelRelatedItem1"); LabelRelatedItem1.Text = dr["RelatedItem1"].ToString(); Label LabelRelatedItem2 = (Label) pvSellerInfo.FindControl("LabelRelatedItem2"); LabelRelatedItem2.Text = dr["RelatedItem2"].ToString(); Label LabelRelatedItem3 = (Label) pvSellerInfo.FindControl("LabelRelatedItem3"); LabelRelatedItem3.Text = dr["RelatedItem3"].ToString(); } }

Figure 4 DataTable Schema

Each of the PageViews declared in the ASPX page is listed as a member of the WebForm1 class ("WebForm1" was assigned by the wizard). To set the properties for a specific element within the PageView, use the FindControl method. The code that is listed in Figure 5 uses FindControl to get each element within each PageView. The data source for setting up the PageViews is a DataRow, presumably retrieved from a database by using a SQL command. (The actual data source is less important—this example happens to build a table in memory.)

ShowSelectedItemsInfo should be called the first time the page loads as well as on subsequent reposts caused by the user selecting a product. Figure 6 shows the code necessary for filling the PageViews during the page load event and a postback. The first row of the table is used when the page loads, and the selected item is used when responding to one of the selection links. After selecting a product, the user browses the PageViews by clicking on the various tabs to show the information. Figure 7 shows the state of the Web page after selecting one of the tables.

Figure 6 Filling PageViews

private void Page_Load(object sender, System.EventArgs e) { // ProductDataGrid and ProductDataTable are class members ProductDataTable = GetDataSource(); ProductDataGrid.DataSource = ProductDataTable; this.DataBind(); if(!this.IsPostBack) { DataRow dr = ProductDataTable.Rows[0]; ShowSelectedItemsInfo(dr); } } protected void Grid_OnItemCommand(Object sender, DataGridCommandEventArgs e) { //TableRow tr = (TableRow)e.Item.Cells; int nDataSetIndex = e.Item.DataSetIndex; DataTable dt = (DataTable)ProductDataGrid.DataSource; DataRow dr = dt.Rows[nDataSetIndex]; ShowSelectedItemsInfo(dr); }

Figure 7** Selecting a Tab **

What is Rendered

Besides helping you with the process of creating rich browser-based UIs, these controls are made flexible by the markup code they return to the browser. When the control detects that an uplevel browser made the last request, the controls emit Dynamic HTML (DHTML). DHTML uses the browser's inner object model and client-side script to make the pages within a MultiPage respond to the TabStrip without making a round-trip back to the server. The Internet Explorer WebControls consider Internet Explorer 5.5 and higher to be uplevel browsers. If the browser is a downlevel browser (that is, anything else other than Internet Explorer 5.5 and higher), then the controls render HTML 3.2 markup language.

Conclusion

This month I showed how to use the TabStrip, MultiPage, and PageView controls for creating a multiple-page tabbed user interface element very similar to those found in standard Windows-based applications. In a future column I'll look at the two other controls in the package: TreeView and ToolBar.

Send your questions and comments for George to  asp-net@microsoft.com.

George Shepherdwrites .NET development tools with SyncFusion (https://www.syncfusion.com) and teaches at Developmentor. He is the author of a number of programming books, including Programming with Microsoft Visual C++.NET (Microsoft Press, 2002), and Applied .NET (Addison-Wesley, 2001). George may be reached at georges@syncfusion.com or georges@develop.com.