Programming Microsoft Web Forms (Pro Developer)
Now that we have seen Web Parts in use, it makes sense to build a page from the ground up. I added a new page to the WebParts site in Visual Studio, named WebPartsSample.aspx. First, I added a WebPartManager component. Nothing else must be done with this component, although it will be used in code. Next, I added a table, using the Layout/Insert table menu option in Visual Studio Design view. I created a table with two rows and two columns, with a width of 500 pixels.
To use Web Parts, I added a Web Part zone to each of the four cells of the table, which appeared in Visual Studio Design view as shown in Figure 4-10.
To allow previously closed Web Parts to be reopened, I added a PageCatalogPart control to the page. You cannot simply drag a PageCatalogPart control onto the page. You must first add a CatalogZone control, and then you can drag a PageCatalogPart control into the CatalogZone control. The result should be similar to the page shown in Figure 4-11.
To allow editing, you must add an Editor zone to the page. This control can be dragged and dropped onto the page anywhere you like; I dropped it at the bottom of the page.
To each of the Web Part zones, I added a component. It does not matter specifically what you add, but I added a calendar, a check box list, a bulleted list, and a label. When run, the page looks almost like it would have had I not used any Web Parts. The difference is that each Web Part has a title bar by default, with the name Untitled [n], where n is a number from 1 to 4. The title bars also have menus that allow you to close or minimize the Web Parts. Figure 4-12 shows the page running with all Web Parts in the default mode.
Figure 4-13 shows the page running after I minimized the Web Part containing the calendar.
To do anything else with the Web Parts (such as rearrange or restore Web Parts), you must set the DisplayMode property of the WebPartManager component. You can allow users to set the display mode in several ways. You have seen an example using a drop-down list in the Default.aspx page, but the display mode can also be set with check boxes, option buttons, or whatever works for you. In this example, I added an option button list (RadioButtonList in the code) at the top of the form with three items, with both text and values set to "Browse," "Edit," and "Catalog." I set the RepeatColumns property to 3, meaning that the items will be displayed three across, and I left the default RepeatDirection property set to Horizontal. Although it's not required, I set the Browse item as the default selection, so that it will appear with a check mark when the page is first run. I set the AutoPostback property to true, and then I double-clicked the RadioButtonList control so that Visual Studio would create the event handler. I then added code very similar to the code in the SelectionChanged event handler in Default.aspx.
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) { if (this.RadioButtonList1.SelectedValue.ToLower() == "browse") { this.WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode; } else if (this.RadioButtonList1.SelectedValue.ToLower() == "edit") { this.WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode; } else // this.RadioButtonList1.SelectedValue.ToLower() == "catalog" { this.WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode; } }
When you run WebPartsSample.aspx, you should be able to switch from Browse mode to Edit mode, move Web Parts from one zone to another, return to Browse mode, close one of the Web Parts, and then use Catalog mode to add the closed Web Part back into one of the zones. When you look at the page, it is functional, but not very attractive. You can remedy this by clicking the smart tag arrow and selecting Auto Format on the menu. Figure 4-14 shows the page running in Browse mode with all Web Part zones set to the Simple Auto Format scheme.