Post
Ask Question

Working with WebParts Page, WebPart Zones & WebParts

Introduction:

This tutorial considered to be the second part of the first tutorial Creating a Simple WebPart Page and use WebServer controls as WebParts. Here we will see how can we remove and add WebParts during run time, adding personalizable properties to your WebParts and modifying there values also in run time.

WebPart Zones:

There are 4 types of WebPart Zones. Zones is used to host (anchor or dock) WebParts. In the previous tutorial we had a look at WebPartZone. At this tutorial we will have a look at the other another two WebPart Zones, CatalogZone & EditorZone.

Modification to old project:

In the new project,  have cut the XmlDataSource control -xdsRSS- and the DataList Control -dlstRss- to a newly created UserControl named UCtrlRSSReader.ascx. The same I did for SqlDataSource control -sdsTitles- and the GridView Control -gvTitles- which were saved on the UserControl UCtrlTitles.ascx.

Working with the CatalogZone:

Open the pervious project and apply the following modifications:

  1. Add another column to the table, so the table will contain 4 columns now.

  2. Drag and drop CatalogZone Control from control from the Toolbox (under the WebParts tab) into the new column cell, rename it to wpczCatalog and set its Auto format to Colorful.

    CalatogZoneAutoFormat.JPG 

  3. Drag and drop PageCatalogPart Control into the CatalogZone Control wpczCataog, rename it wpcPageCatalog.

    PageCatalogPart.JPG

  4. Drag and drop DeclarativeCatalogPart Control into the CatalogZone Control wpczCataog, rename it wpcDeclarativeCatalog.

  5. From DeclarativeCatalogPart Tasks smart tag, Select Edit Template.

  6. Then drag and drop UCtrlRSSReader from your solution explorer into the WebPartsTemplate area of wpcDeclarativeCatalog control, and click End Template Editing in the smart tag.

    DeclarativeCatalogPart.JPG 

  7. Switch to Source view and add Title attribute to your UserControl you have just dropped, set its value to "RSS Reader". Be careful to edit the correct control:


    11.JPG


    DeclarativeCatalogPartComplete.JPG 

  8. Drag and drop a DropDownList into your Web From but out of the table area, rename it to cmbWebPartPageMenu. Then add the following items to it.

    Normal View
    Design View
    Edit View
    Manage WebParts

    DropDownListMenuCode.JPG 

  9. Set the AutoPostBack property of the DropDownList Control to true. and double click on it to implement it default event SelectedIndexChanged:

    protected void cmbWebPartPageMenu_SelectedIndexChanged(object sender, EventArgs e)
    {
    switch (cmbWebPartPageMenu.SelectedIndex)
    {
    case 0:
    wpManager.DisplayMode = WebPartManager.BrowseDisplayMode;
    break;
    case 1:
    wpManager.DisplayMode = WebPartManager.DesignDisplayMode;
    break;
    case 2:
    wpManager.DisplayMode = WebPartManager.EditDisplayMode;
    break;
    case 3:
    wpManager.DisplayMode = WebPartManager.CatalogDisplayMode;
    break;
    case 4:
    wpManager.DisplayMode = WebPartManager.ConnectDisplayMode;
    break;
    default:
    wpManager.DisplayMode = WebPartManager.BrowseDisplayMode;
    break;
    }
    }

  10. Now run your page, select Manage WebParts option and note the changes on the page.

    CatalogZone-runtime01.JPG

    Click on Declarative Catalog link and notice the the deference.

    For any WebPart on the the page, click on its menu at the top right corner, and select Close. Notice the changes on the Catalog Zone. you will fine the Page Catalog is increased. Click on Page Catalog link and notice the change on the zone. You can add any WebPart listed to your page, by checking the checkbox of the WebPart, selecting the WebPart Zone and then click Add.

Hope by now you understand the deference between DeclarativeCatalogPart and PageCatalogPart. As DeclarativeCatalogPart contains WebParts that is possible to be added to the page and you defined them during design time. But they may not exists physically on the page. While PageCatalogPart contains all WebParts hosted on the Page.

Now let's work with the EditorZone Control.

Working with the EditorZone and add personalizable properties to WebParts:

  1. As we did while working with CatalogZone Control, drag and drop EditorZone Control into the 4th column just underneath the CatalogZone control, rename it to wpezEditor. Also set the Auto Format to Colorful.

  2. Drag and drop PropertyGridEditorPart & AppearanceEditorPart into the EditorZone control. rename the controls to wpPropertyGrid & wpAppearanceEditor.

  3. Open your UCtrlTitles.ascx control and switch to Code-Behind. We want to make one of the columns of the GridView inside that control to be optional for view. We will configure the Price Column for this.

  4. Declare a class level Boolean variable and name it _showPriceColumn as the following.

    private bool _showPriceColumn = false;

  5. Create a property for this variable. Mark the property with the following attributes:

    Personalizable() to be able to personalize the property for the WebPart.
    WebBrowsable() to be able to edit its value while in editing mode.
    WebDisplayName("Show Price Column") to display friendly name on the property grid wpPropertyGrid.

    [Personalizable(), WebBrowsable(), WebDisplayName("Show Price Column")]
    public bool ShowPriceColumn
    {
    get { return _showPriceColumn; }
    set { _showPriceColumn = value; }
    }
  6. Now override the OnPreRender Method of your control as the following:

    protected override void OnPreRender(EventArgs e)
    {
    base.OnPreRender(e);
    gvTitles.Columns[2].Visible = ShowPriceColumn;
    }
  7. Save your work and test the project. From the drop down list option, select Edit View. Then for your Titles or Books WebPart, select Edit from the top right corner menu or it. Notice that the Appearance and Property Grids Displayed. Also notice that the price column is not visible.

    WebPartsEditView.JPG 

  8. Check the Show Price Column checkbox in the property grid. and click apply, Notice that the Price Column on the GridView is now visible.

Give yourself 10 min to examine the whole solution running.

Conclusion:

In this simple tutorial, we had a look at CatalogZone & EditorZone and the related built-in WebParts to each of them. We didn't examine the BehaviorEditorPart but you can read about in MSDN. Also ConnectionsZone and creating connections between WebParts, we didn't touch this subject as well. But hopefully in the next part we will explain how to use ConnectionsZone and build connections between two WebParts.

Read Part III: WebParts Communication: How WebParts on a page communicate with each other

Reference:

You can also find useful information in the following article also published on c-sharpcorner.com:


Similar Articles