The Parts of Web Parts

The Parts of Web Parts

When you first start to work with Web Parts, the number of controls available is somewhat daunting. Figure 4-4 shows the Web Parts available in the Microsoft Visual Studio Toolbox.

Figure 4-4: Web Parts in the Visual Studio Toolbox

To fully understand how Web Parts work, you must first understand the individual elements of Web Parts. Table 4-1 describes most of the Web Parts components, as well as how they might be used.

Table 4-1: Web Parts Components

Component	Description	Use
WebPartManager	The central class in the Web Part control set. This is a non-visual control that will never appear to the user.	Always required for Web Parts to work.
ProxyWebPartManager	The class used when the WebPartManager component is on the Master page in use by the page in question.	Used when you have the WebPartManager component on a Master page.
WebPartZone	The central class in the Web Parts control set for hosting Web Parts.	Always used. A place for the user to drag and drop controls onto the form.
CatalogZone	The central class in the Web Parts control set for hosting CatalogPart controls in the control set for hosting Web Parts. The next three types are CatalogPart-type controls.	Used to give users the ability to view a catalog of available Web Parts in Visual Studio Design view.
DeclarativeCatalogPart	A CatalogZone component that allows developers to add a set of server controls declaratively on a page.	Commonly used to make controls available by simply adding markup for controls inside the DeclarativeCatalogPart zone.
PageCatalogPart	A CatalogZone component that allows users to re-activate controls previously closed.	Used only if the page allows controls to be closed.
ImportCatalogPart	A component that allows users to import a description file that describes the settings on a Web Part control or server control that they want to add to a Web page.	Used when the user has exported the description from a control that supports the Export verb from the Web Part Verb menu.
EditorZone	A component that allows users to modify Web pages according to their preferences. The following three controls in this table must be contained in the EditorZone component.	Used to contain components to allow users to edit the appearance, behavior, and layout of Web Part properties.
AppearanceEditorPart	A component that allows users to edit several user interface properties of an associated Web Part.	Used to allow a user to edit the appearance of a Web Part.
BehaviorEditorPart	A component that allows users to edit several properties to affect the behavior of the associated Web Part.	Used to change the visibility of verbs such as close, minimize, and restore.
LayoutEditorPart	A component that allows users to edit several properties to affect the layout of the associated Web Part.	Used to change the location of a Web Part.

Note 

If you are going to allow users to close Web Parts, it is critical to have a PageCatalogPart component on the page to allow users to retrieve the Web Parts they have closed.

When designing with Web Parts, you will first drag and drop a variety of Web Part related controls onto the form. A WebPartManager control must be the first control dragged onto the form. You will also want to drag at least one WebPartZone control onto the form; adding at least two WebPartZone controls makes the most sense, because you will want to give users the ability to alter the look of the page. You will also want to provide some way for users to change modes. The default mode is Browse. You will almost always want to allow Edit mode, so that users can move Web Parts from zone to zone, and Catalog mode, to allow users to make closed Web Parts visible again.

Now that you have a basic introduction to these controls, it makes sense to look at the markup and code of a simple example, as shown in Listing 4-1, later in this section. Of course, in the world of Web Parts, even a simple example can be a little involved.

Listing 4-1: Markup for Simple Web Part Example

<%@ Page Language="C#" AutoEventWireup="true"         CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title>Default Web Parts Page</title> </head> <body>     <form  runat="server">         <div>             <asp:WebPartManager  runat="server">             </asp:WebPartManager>             Mode: <asp:DropDownList  runat="server"                   AutoPostBack="True"                   OnSelectedIndexChanged=                   "DropDownList1_SelectedIndexChanged">                 <asp:ListItem Selected="True">Browse</asp:ListItem>                 <asp:ListItem>Design</asp:ListItem>                 <asp:ListItem>Catalog</asp:ListItem>             </asp:DropDownList>         </div>         <asp:WebPartZone  runat="server"             BorderColor="#CCCCCC" Font-Names="Verdana"             Padding="6">             <PartChromeStyle BackColor="#F7F6F3" BorderColor="#E2DED6"                 Font-Names="Verdana" ForeColor="White" />             <MenuLabelHoverStyle ForeColor="#E2DED6" />             <EmptyZoneTextStyle Font-Size="0.8em" />             <MenuLabelStyle ForeColor="White" />             <MenuVerbHoverStyle BackColor="#F7F6F3"                 BorderColor="#CCCCCC" BorderStyle="Solid"                 BorderWidth="1px" ForeColor="#333333" />             <HeaderStyle Font-Size="0.7em" ForeColor="#CCCCCC"                 HorizontalAlign="Center" />             <ZoneTemplate>                 <asp:Label  runat="server"                      Text="Label"></asp:Label>                 <asp:Label  runat="server"                      Text="Label"></asp:Label>             </ZoneTemplate>             <MenuVerbStyle BorderColor="#5D7B9D" BorderStyle="Solid"                 BorderWidth="1px" ForeColor="White" />             <PartStyle Font-Size="0.8em" ForeColor="#333333" />             <TitleBarVerbStyle Font-Size="0.6em" Font-Underline="False"                 ForeColor="White" />             <MenuPopupStyle BackColor="#5D7B9D" BorderColor="#CCCCCC"                 BorderWidth="1px" Font-Names="Verdana"                 Font-Size="0.6em" />             <PartTitleStyle BackColor="#5D7B9D" Font-Bold="True"                 Font-Size="0.8em" ForeColor="White" />         </asp:WebPartZone>         &nbsp;&nbsp;         <asp:WebPartZone  runat="server"             BorderColor="#CCCCCC" Font-Names="Verdana"             Padding="6">             <PartChromeStyle BackColor="#E3EAEB" BorderColor="#C5BBAF"                 Font-Names="Verdana" ForeColor="#333333" />             <MenuLabelHoverStyle ForeColor="Yellow" />             <EmptyZoneTextStyle Font-Size="0.8em" />             <MenuLabelStyle ForeColor="#333333" />             <MenuVerbHoverStyle BackColor="#E3EAEB" BorderColor="#CCCCCC"                 BorderStyle="Solid"                 BorderWidth="1px" ForeColor="#333333" />             <HeaderStyle Font-Size="0.7em" ForeColor="#CCCCCC"                 HorizontalAlign="Center" />             <MenuVerbStyle BorderColor="#1C5E55" BorderStyle="Solid"                 BorderWidth="1px" ForeColor="White" />             <PartStyle Font-Size="0.8em" ForeColor="#333333" />             <TitleBarVerbStyle Font-Size="0.6em" Font-Underline="False"                 ForeColor="White" />             <MenuPopupStyle BackColor="#1C5E55" BorderColor="#CCCCCC"                 BorderWidth="1px" Font-Names="Verdana"                 Font-Size="0.6em" />             <PartTitleStyle BackColor="#1C5E55" Font-Bold="True"                 Font-Size="0.8em" ForeColor="White" />         </asp:WebPartZone>         <asp:CatalogZone  runat="server">             <ZoneTemplate>                 <asp:PageCatalogPart                      runat="server" />             </ZoneTemplate>         </asp:CatalogZone>         &nbsp;     </form> </body> </html>