Web Part Zones

There are four kind of zones in web parts

  • Web Part Zone
  • Editor Zone
  • Catalog Zone
  • Connection Zone

Web Part Zone:

It's a basic unit of web parts. By placing different contents in a web part zone we can allow a user to drag and drop contents on a page.

To use different zones place a dropdownlist and add following items in it.

  1. Browse
  2. Display
  3. Edit
  4. Catalog
  5. Connect

Write down following code on onChangeIndex event of this dropdownlist.

    if (cmbOptions.SelectedValue == "Design")
    {
        WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode;
    }
    
    else if (cmbOptions.SelectedValue == "Browse")
    {
        WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
    }
    
    else if (cmbOptions.SelectedValue == "Catalog")
    {
        WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
    }
    
    else if (cmbOptions.SelectedValue == "Edit")
    {
        WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;
    }
    
    else if (cmbOptions.SelectedValue == "Connect")
    {
        WebPartManager1.DisplayMode = WebPartManager.ConnectDisplayMode;
    }

  1. Browse Mode

    Browse mode is default mode of webparts. In browse mode we cannot drag and drop the web parts but we can see two options, minimize and close. Minimizing a web part will still show it, but in minimized state. As you can see in following screenshot. If you select close then it can be restored only in catalog mode and we will see later in this article how to use that.

  2. Design Mode

    In design mode we can drag drop objects between web parts as you can see in following screenshot. There are two web parts named as 'links' and 'Search'.

  3. Edit Mode

    In edit mode we can edit web parts on runtime as well. Editing of a web part is further divided into four types: Appearance, Behavior, Property, Layout. We will see first how to use Appearance and LayoutEditorPart.

    AppearanceEditorPart & LayoutEditorPart:

    Place editor zone on the page. Place AppearanceEditorPart, LayoutEditorPart in editor zone. Run the application and select edit mode from option box. Click edit from the menu available for webparts.

    And you will see following output.

    We can change the title of web parts here. We can see some basic options in edit mode. Chrome type is about border and title style. Chrome state gives us option of minimizing it or not.

    PropertyGridEditorPart:

    By using property editor we can change properties of objects in our web parts. In our example we are going to change CSSClass property of the object. To use this we will follow the same method of editor parts.

    Place editor zone on the page. Place a PropertyGridEditorPart inside editor zone. To use editor zone add a new user control in project. Place a textbox on it. Place this user control in a web part of a web form. In code behind of the user control write down following code.

        string _cssClass = "FrmTxtBox";
        [WebBrowsable(), Personalizable(true)]
        public string CssClass
        {
            get { return _cssClass; }
            set
            {
                TextBox1.CssClass= value;
            }
        }
        
        protected void Page_Load(Object sender, EventArgs e)
        {
            TextBox1.CssClass = CssClass;
        }

    As we can see in above code that we have changed a textboxe's css class by using a property. And we will change this property value in a web parts edit mode.

    WebBrowsable() Attribute:

    It allows a web part to display property in web browser in edit mode.

    Personalizable() Attribute:

    It allows property to be editable.

  4. Catalog Mode

    Catalog mode gives us option to add/remove web parts on runtime. Say for example we have a few modules like weather, news, shopping, horoscope etc. and want to give users an option to show or hide these modules on runtime, we can accomplish this task by catalog mode.

    Catalog zone is further divided into three types: Page, Declarative, Import. Add a Catalog zone on the page. Then add PageCatalogPart, DeclarativeCatalogPart, ImportCatalogPart in catalog zone. We can show web parts with the help of Page catalog which are closed by using 'close' option of web part, as you can see in following screenshot.

    Page catalog displays number of web parts which are closed by using this option. Declarative catalog displays number of elements which are added in design mode in catalog zone. Click on smart tag option of declarative catalog zone and select edit template. Add controls in catalog zone.

    Import Catalog displays number of elements which are selected to import. We can import files having extension '.WebPart'. To export a file as a .WebPart type file aad following line to web.config.

        <webParts enableExport="true"></webParts>

    Then we can follow one of these two methods

    1. Set the ExportMode property of the control to all. If your control is derived from WebPart, you can do this in markup as shown in the following example.

      <aspSample:CustomWebPart id="Sample" runat="server" ExportMode="All" />

    2. Or write following code on page load.

      Dim gwp As GenericWebPart
      gwp = WebUserControl2_1.Parent
      gwp.ExportMode = WebPartExportMode.All

    Now we can add any of these web parts to the page, by selecting control and the zone where we want to add it.

  5. Connect Mode

    This mode allows web parts to communicate with each other. We can make static connections once (in our code) or we can allow users to connect on runtime according to their needs. Connection mode doesn't mean to connect to database but to connect web parts together. Say for example if we have a web part having a grid, displaying some records and we want to filter it on user input. We can put a textbox for user input, in other web part and can send text by using connect mode.