<%@ Page Language="C#" MasterPageFile="~/aspnet/section.master" %> <%@ Register TagPrefix=Acme Namespace=Acme %> <%@ Register TagPrefix="Acme" TagName="SourceRef" Src="~/util/SrcRef.ascx"%>

Introducing Web Part Controls

The Web Part Control Set includes the following controls:

Web Parts are ASP.NET server controls that can be used and personalized with the Web Part Control Set. Any ASP.NET server control or user control can behave as a web part.

Web Part Zones provide a way to organize parts into regions on the page. Zones are container controls that provide layout for parts, and add common, consistent UI elements such as a Verb Menu and border to each part.

The WebPartManager control manages the pages personalization state, and co-ordinates communication between parts and zones. Every page that uses the Web Part Control Set must have a WebPartManager control on it.

The following code shows a web part zone with a single part. The parts in a zone are contained in the zone's ZoneTemplate.

<asp:WebPartZone ID="WebPartZone1" Runat="server">
  <ZoneTemplate>
    <asp:Calendar Runat="server" ID="Calendar1"/>
  </ZoneTemplate>
</asp:WebPartZone>

This example shows a simple page that uses web parts. It includes a WebPartManager control, a WebPartPageMenu control, and two web part zones. One of the zones contains an ASP.NET Calendar control.

Log in to the page.
Select "Design" from the menu's DropDownList.
Move Web Parts to different WebPartZones.
Close the browser, and run the sample again. You will see your personalized changes have been applied.

Web parts pages can also contain web parts that are not visible by default. The user can add these parts to the page through a web part catalog. A web part catalog allows you to define optional content not visible by default on the page.

To provide a catalog on the page, you need to add a special zone control, called the CatalogZone, to your page. In this zone, you can add catalog parts that provide different kinds of controls. This example shows a page with a CatalogZone containing a PageCatalogPart, which provides a catalog of all closed web parts defined on the page.

Log in to the page.
Click the dropdown arrow on the control's verbs Menu then click the Close verb on the calendar to close the Web Part.
Select "Catalog" from the menu's DropDownList.
Check the checkbox next to the part named "Untitled", and click the Add button. The calendar will be added back to the first zone.

In addition to allowing users to personalize the layout and visibility of web parts on a page, you can also let users edit properties of each web part. Every part has a set of default properties that can be personalized. Each control can also provide additional properties to be personalized.

To allow editing of control properties, you need to add a special zone control, called the EditorZone, to the page. To this zone, you can add one or more editor parts. The following editor parts are provided:

The AppearanceEditorPart control allows users to edit the visual appearance of a web part.
The BehaviorEditorPart control allows users to edit behavior properties of a web part.
The LayoutEditorPart control allows users to edit the layout of a web part.
The PropertyGridEditorPart control displays a property grid that allows users to edit custom personalizable properties for a web part.

You can also create your own custom editor parts by inheriting from the EditorPart base class.

This example shows a page with an EditorZone containing an AppearanceEditorPart.

Log in to the page.
Select "Edit" from the menu's DropDownList.The editor will now be visible.
Click the Edit Verb on the calendar's Verbs Menu to edit the Web Part.
Edit the title in the editor, and click OK. The title of the calendar will now be updated.