Nowadays web sites are more sophisticated than ever. Not only sites has good look and feel but often present a customized look and feel according to user’s choice and individual preferences. Furthermore you can customize most of these sites’ appearance and the display information. In this article, we will look into the ASP.Net controls for web parts which allow creating this kind of web pages.

Introduction:

Nowadays web sites are more sophisticated than ever. Not only sites has good look and feel but often present a customized look and feel according to user’s choice and individual preferences.

Furthermore you can customize most of these sites’ appearance and the display information. For example, the MSN web site. In these kinds of personalized sites, you can select information of your choice, specify where the information should be placed on the page by dragging items on the page. When you return to the page later, it keeps your preferences stored. These pages define content areas where user can add or remove information items. Mostly portal pages define multiple content areas:  a main area in the center for displaying the most important information, a navigational area in the left or right section and other optional areas for small items. You can include the header and footer area with master pages.
In this article, we will look into the ASP.Net controls for web parts which allow creating this kind of web pages.

The Web Parts Architecture:

The functional component of web parts architecture is divided into overall page management and zone management. Different web parts come under different zone and its management and coordinated together. And different functional areas of a page are often handled as a group of controls.

Web parts are nested within zones, which are managed by a WebPartManager which talks to the application data store. So, the WebPartManager manages each WebZone which in turn manages each individual WebPart.  Any page using at least one WebPart needs an instance of WebPartManager. The WebPartManager is responsible for managing and coordinating the zones and controls within the zones. Within each zone, the ZoneTemplate contains all web parts. If a regular ASP.Net control is in a ZoneTemplate, ASP.Net will wrap it as a web part.

The Built-in Zones:

ASP.Net has four Built-in zones, which are:

• WebPartZone: this class provides the basic functionality for managing the server-side controls within zones and responsible for hosting both web part controls and server-side controls.
• CatalogZone: this zone hosts the CatalogPart controls. The catalog web parts work as catalogs of controls, from which the end user can select to personalize his page; it control the visibility of the parts on a page. The CatalogZone control shows and hides its content based upon the catalog display mode.
• EditorZone:  this control provides the way through which end user may modify and personalize web according to their preferences. This zone also saves and loads the personalized settings of the users when they again log on.
• ConnectionZone: the ConnectionZone  manages the functionalities providing connection and communication between the web parts.

The Built-in Web Parts:

ASP.Net provides some built-in WebPart controls which fit in different functional categories. Some are for editing, some for managing catalogs etc.; each specific kind of web part fits within a specific zone. Let us look at some of these web parts available in the tool box:

• DeclarativeCatalogPart: In a portal kind web page, it is often required to add parts dynamically or declaratively on the page. Adding parts dynamically means adding them using the AddWebPart( ) method of the WebPartManager. Whereas, the DeclarativeCatalogPart manages server-side controls added declaratively to a catalog on a web page.
• PageCatalogPart: This web part allows end users to customize the site by opening and closing controls. PageCatalogPart represents a page catalog for holding controls that were previously added to a page and now closed. By managing the controls in a PageCatalogPart, the user can add the control back to the page.
• ImportCatalogPart: The ImportCatalogPart enables users to import a web part description from XML data.
• AppearanceEditorPart: This is used to edit the appearance properties of an associated web part.
• BehaviorEditorPart: The BehaviorWebPart supports editing the behavior of a web part.
• LayoutEditorPart:  The LayoutEditorPart is for editing the layout properties and associated web part.
• PropertyGridEditorPart: This allows the user to edit custom properties of web part controls.

A Simple Project:

Let us get a feel as to how to use WebPart controls in a page:

1. Create a web page, and in the default page add a WebPartManager, from the toolbox.
2. Drag a WebPartZone onto the page. Set the ID, HeaderText, HeaderStyle font Fore color and to give it a look of your choice. Also set the AutoFormat to a good style.
3. Add some Hyperlinks to the WebPartZone

At this stage your project looks like:


 

4. Next add a DropDownList to the page, which will allow the user to choose the display mode for the web part. ASP.Net 2.0 web parts support five display modes:

• BrowseDisplayMode: The normal mode. No personalization or editing is available.
• DesignDisplayMode: This mode allows drag-and-drop layout personalization.
• EditDisplayMode: This mode allows Customization of web part properties and permits a user to delete a web part that has been added dynamically.
• ConnectDisplayMode: This mode allows a user to connect web parts at runtime
• CatalogDisplayMode: This mode allows a user to add web parts into a WebPartZone at runtime.

5. Add the following code to your project; it updates the _Default class to switching modes.

public partial class _Default : System.Web.UI.Page
{
    WebPartManager _wpm;
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    void Page_Init(object sender, EventArgs e)
    {
        Page.InitComplete += new EventHandler(InitializationComplete);


    }
    public void InitializationComplete(object sender, System.EventArgs e)
    {
        _wpm = WebPartManager.GetCurrentWebPartManager(Page);
        String browseModeName = WebPartManager.BrowseDisplayMode.Name;
        foreach (WebPartDisplayMode m in _wpm.SupportedDisplayModes)
        {
            String modename = m.Name;
            if (m.IsEnabled(_wpm))
            {
                ListItem item = new ListItem(modename, modename);
                DropDownList1.Items.Add(item);
            }
        }
    }
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        String selectedmode = DropDownList1.SelectedValue;
        WebPartDisplayMode mode = _wpm.SupportedDisplayModes[selectedmode];
        if (mode != null)
            _wpm.DisplayMode = mode;
    }

    void Page_PreRender(object sender, EventArgs e)
    {
        ListItemCollection items = this.DropDownList1.Items;
        int selected = items.IndexOf(items.FindByText(_wpm.DisplayMode.Name));
        DropDownList1.SelectedIndex = selected;
    }
}

6. Run the site:
 


7. Add some more functionality, like an EditorZone and an AppearanceEditorPart; and find out the differences made. It adds an Edit option in the drop down list.

8. Add a CatalogZone and drop a DeclarativeCatalogPart and add a TextBox control in the DeclarativeCatalogPart. It allows the user to add a text box in the web parts zone.

Conclusion:

We have discussed the basic of using web parts in a page in this introductory article. You can download the sample projects, study them and create something more innovative and useful. You can also create your own customized web part; involve data driven programming and write real complex programs. In future, we would try to carry the discussion on more complex notes which will be nearer to reality.

[Download Sample]