Using Webparts in ASP.NET 2.0

Introduction to Web Parts in ASP.Net 2.0


It would not be wrong to say that web parts are going to be the future of web-based management systems. Web parts give you the option of dragging and dropping objects on a page, plus changing titles, border styles, and properties of objects at runtime. Before the introduction of web parts, it used to be a hectic task because you had to write a lot of JavaScript and to save the state of contents in a database.

There are two basic things in web parts:

  • Web part manager
  • Web part zones

Web Part Manager

Web part manager is a manager for web parts behind the scene. You normally doesn’t do a lot of things with web part manager either in code or in design mode.

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, you can allow a user to drag and drop contents on a page.

To use different zonesm place a drop-down list and add following items in it.

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

Write the following code on the onChangeIndex event of this drop-down list.

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 the default mode of web parts. In browse mode, you cannot drag and drop the web parts but you can see two options, minimize and close. Minimizing a web part will still show it, but in a minimized state.

If you select close, it can be restored only in catalog mode. You will see later in this article how to use that.

2. Design mode

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

3. Edit mode

In edit mode, you can edit web parts at runtime as well. Editing a web part is further divided into four types: Appearance, Behavior, Property, and Layout. You will see first how to use the Appearance and LayoutEditor parts.

AppearanceEditorPart & LayoutEditorPart

  1. Place editor zone on the page.
  2. Place AppearanceEditorPart and LayoutEditorPart in theeditor zone.
  3. Run the application and select edit mode from the option box.
  4. Click edit from the menu available for web parts.

You will see following output.

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


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

  1. Place the editor zone on the page.
  2. Place a PropertyGridEditorPart inside the editor zone.
  3. To use the editor zone, add a new user control in the project.
  4. Place a textbox on it.
  5. Place this user control in a web part of a web form.
  6. In the code behind of the user control, write the following code:
  7. string _cssClass = "FrmTxtBox";
    [WebBrowsable(), Personalizable(true)]
    public string CssClass
       get { return _cssClass; }
          TextBox1.CssClass= value;
    protected void Page_Load(Object sender, EventArgs e)
       TextBox1.CssClass = CssClass;

As you can see in the code above, you have changed a textbox’s CSS class by using a property. You will change this property value in a web parts edit mode.

WebBrowsable() Attribute

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

Personalizable() Attribute

It allows a property to be editable.

Now, run this page. Suppose you choose edit mode from the options combo. You will see the following edit button in the options menu of the web part.

When you select the edit link from the webpart menu, you will have the CssClass property in edit mode.

As you can see, this textbox has FrmTxtBox named class applied to it by default. It is defined in a stylesheet with attributes of the border color in black.

To apply a different class named CustomClass1, I have created this class in the stylesheet. This class has no border color defined in it.

After changing the CssClass name, press the OK button. You will see a textbox with the default border style.

So, in this way, you change the properties of objects using web parts.

4: Catalog mode

Catalog mode gives you the option to add/remove web parts at runtime. Say, for example, you have a few modules such as weather, news, shopping, horoscope, and so forth and want to give users an option to show or hide these modules at runtime. You can accomplish this task by using catalog mode.

Catalog zone is further divided into three types: Page, Declarative, and Import.

Add a Catalog zone on the page. Then, add PageCatalogPart, DeclarativeCatalogPart, and ImportCatalogPart in the catalog zone. YouWe can show web parts with the help of the Page catalog that is closed by usingthe “close” option of the web part. You can see this in the following screenshot.

Page catalog displays the number of web parts that are closed by using this option.

Declarative catalog displays the number of elements that are added in design mode in catalog zone. Click on the smart tag option of the declarative catalog zone and select edit template. Add controls in the catalog zone.

Import Catalog displays the number of elements that are selected to import. You can import files that have the “.WebPart” extension. To export a file as a .WebPart type file, add the following line to web.config.

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

Then, you 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.
  2. <aspSample:CustomWebPart id="Sample" runat="server"
                             ExportMode="All" />
  3. Or, you can write the following code on page load.
  4. Dim gwp As GenericWebPart
    gwp = WebUserControl2_1.Parent
    gwp.ExportMode = WebPartExportMode.All

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

More by Author

Must Read