Web Part Zones

InterServer Web Hosting and VPS

Web Part Zones

On this page we'll look at some of the types of Web Part Zones which come with ASP.NET Web Parts.


We've had a brief look already at WebPartZone in the article Web Parts. It acts as a container to host WebPart controls on an ASP.NET page.


The EditorZone Web Parts control acts as a host for EditoPart controls such as the AppearanceEditorPart, BehaviourEditorPart, LayoutEditorPart and the PropertyGridEditorPart. The EditorZone is made visible once the user has entered 'edit' mode, which the user can log in, in order to access the 'edit' option. The EditorZone must not be placed inside a WebPartZone, otherwise you'll get an error 'A Zone may not be placed inside a Part or another Zone.'.


The AppearanceEditorPart allows the user to edit certain appearance properties of the Web Part control. If the user is logged in and is allowed access to the 'Edit' mode, then the EditorZone will become available along with any Editor Parts placed inside. So if we place an AppearanceEditorPart into our EditorZone, when the EditorZone is enabled, then also the AppearanceEditorPart is enabled. However, in order to use the AppearanceEditorZone we have to select 'Edit' from one of our Web Parts by clicking on the top right down arrow menu which appears next to each WebPartZone. Clicking 'Edit' here will make the AppearanceEditorZone appear in inside the EditorZone.

We can set the Title which is displayed above the WebPartZone and the Chrome Type which includes switching the border on and off around the WebPartZone amongst other things.

Here we have an AppearanceEditorPart inside an EditorZone:

<asp:EditorZone ID="EditorZone1" runat="server" style="width: 300px; height: 300px; float: left;">
        <asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" />


The LayoutEditorPart is similar to the AppearanceEditorPart in that it needs to reside in the EditorZone and you'll need to select a WebPartZone by clicking on it's top right down arrow menu and selecting 'Edit'. The LayoutEditorPart gives you options to alter layout/position related propertied. So just as you can drag a control to another WebPartZone, you can also use the LayoutEditorZone to directly control from a dropdown the WebPartZone you want to move this control to. You can also select the Chrome State which is either minimised or normal. Zone Index is also here which related to the index of the control in it's WebPartZone.

Here we have a LayoutEditorPart inside an EditorZone:

<asp:EditorZone ID="EditorZone3" runat="server" style="width: 300px; height: 300px; float: left;">
        <asp:LayoutEditorPart ID="LayoutEditorPart3" runat="server" />


The CatalogZone web part allows the user to add new controls to their page into an existing WebPartZone. So the user can add new features to their personalised intranet home page when ever they want to. Add a CatalogZone to the page by itself enables the 'Catalog' option to become available to users who are logged in, however as the control does not have any additional CataLog Parts added, it will display the message: 'Catalog Zone contains no Catalog Parts.'


The DeclarativeCatalogPart sits inside a CatalogZone web part control and becomes visible once a user has entered the 'Catalog' mode. You can declaratively add web part controls to the DeclarativeCatalogPart so that the user can select from these controls as a catalog from which to select new controls to add. Advanced features include been able to set a user control which contains the list of controls to be added to the catalog, such that this can be shared across pages and sites.

Here we have a DeclarativeCatalogPart inside a CatalogZone. Inside our DeclarativeCatalogPart is 3 controls, 1 ASP.NET Literal control and 2 user controls. We can add each of these 3 controls as a webpart control to place inside any WebPartZone.

<asp:CatalogZone ID="CatelogZone1" runat="server">

        <asp:DeclarativeCatalogPart ID="DeclarativeZonePart1" runat="server">
                <userControls:LatestNews ID="SpaceNewsFeed1" runat="server" Title="Space News Feed" />
                <userControls:DatePicker ID="DatePicker_Birthday" runat="server" Title="Birthday" />
                <asp:Literal ID="MyLiteralWebPart" runat="server" Text="Hello" />



The PageCatalogPart keeps track of webparts which have been deleted from the page by the user, and allows the user to re-add those deleted web parts. The PageCatalogPart also needs to be contained inside a CatalogZone.

<asp:CatalogZone ID="CatalogZone1" runat="server">

        <asp:PageCatalogPart ID="PageCatalogPart1" runat="server">


Sponsored Links
SolarSystem - AngularJS Demo
SolarSystem - Angular JS Demo

Check out my first Angular JS demo hosted in Azure, it helped win my first Angular contract. Put the sound on.