In ASP.NET terminology, Web parts are components that have some predefined functionality and they can be embedded in any web page. User can change the appearance and data related parameters of all web parts independently.

Advantages of Web Parts

  • Web Parts facilitate personalization of page content. They let the users to move or hide the Web Parts and add new Web Parts changing the page layout.
  • Web Parts let the user to export or import Web Parts settings for use in other pages.
  • Web Parts can work in unison with ASP.NET role-based web access model. Each Web Part can be configured to be visible or hidden for any role.
  • Web Parts can share data with each other.

Before starting the code, let us look at few of the controls and terminologies that are useful in implementing web parts.

  • WebPartsManager: This is a non visual control that has to be added on every page that needs to have web parts embedded in them. This control will facilitate the management of different web parts on a page.
  • CatalogPart: This control is for managing the UI elements of all the web part available on a page. This control manages the web parts for the whole website.
  • PageCatalogPart: This control provides the same functionality as the CatalogPart but it does it for an individual page rather than for the complete web site.
  • EditorPart: This control lets the user customize the properties of web parts.
  • WebPartZOne: This control is like a container for web parts. Any web part can be added to WebPartZoneonly.
  • EditorZone: This control is like a container for EditorParts. Any EditorPart can be added onEditorZone only.
  • CatalogZone: This control is like a container for CatalogParts. Any CatalogPart can be added onCatalogZone only.

Also let’s take a quick look at the different modes the web parts can have before going in details.

Web Parts Modes

  • Normal mode: The user cannot edit or move sections of page.
  • Edit Mode: End user can edit Web Parts on the page including Web Parts title, color or even setting custom properties.
  • Design Mode: End user can rearrange the order of the pages Web Parts in a WebPartZone.
  • Catalog Mode: End user can add new Web Parts or add deleted Web Parts in any WebPartZone on the page.
  1. Let us add a WebPartsManager and three WebPartZones on the page.
  2. Once we have the three web part zones added on the page, we will add a label web part on ourheaderzone.
  3. Add calendar, a textbox and a drop down on our content zone.
  4. Add a copyright message on the footer zone.
  5. Let’s add a page catalogpart on the page too (we will see why this is useful).

WebParts article image