Most of the web portals these days allow you to transmit information from various sources and organize them as you want. They provide you a personal page on their website and provide you a great scope of personalization on their websites. The great degree of personalization, on such web portals or websites can be provided with the help of web parts, which are the standalone parts of a web page. They are very loosely coupled with the database and the Active Directory. ASP.NET 2.0 allows you to build flexible web parts on your web portals that do not keep you tied to a particular database solution. This articles discusses about the web parts, some important web part controls, and the display modes of the web parts. The article further explains the building of web parts page with the help of an example application.

Introduction:

Most of the web portals these days allow you to transmit information from various sources and organize them as you want. They provide you a personal page on their website and provide you a great scope of personalization on their websites.

The great degree of personalization, on such web portals or websites can be provided with the help of web parts, which are the standalone parts of a web page. They are very loosely coupled with the database and the Active Directory. ASP.NET 2.0 allows you to build flexible web parts on your web portals that do not keep you tied to a particular database solution.

This articles discusses about the web parts, some important web part controls, and the display modes of the web parts. The article further explains the building of web parts page with the help of an example application.

Understanding Web Parts and Web Part Controls:

Web parts can be observed as the number of smaller Windows inside a Window that can contain all the functionality of a separate webpage Window. For example a web part can contain images, text, caption bar, minimize; maximize; and close buttons, user controls, and custom controls. The web parts are server side controls that are derived from the Panel class. They are different from frames because they cannot be opened individually by using a URL.

The typical examples of websites that use web parts are MySpace.Com and MyMSN.com as shown in the Figure 1.

Notice the different sections on the web page. Each section is an independent unit that can be hidden, closed, moved, or customized. The users can hide parts in which they have no interest and move parts to best locations that interest them more. They can also save these settings.



The web page that contains web parts is known as Web Part page. To create a Web part page, you need to use WebPartManager Control and WebPartZone Control. A web part page can have only one instance of WebPartManager Control that manages all the web parts on a web page and is always added first on a web part page. The WebPartManager Control is invisible at run time. The WebPartZone Control enables you to add one or more web parts to your web page and design their layout.

Besides these controls, you can also use EditorZone or CatalogZone controls. The EditorZone is used to allow users invoke edit command on a web part and make changes to Web Part properties and CatalogZone can be used to allow end users to add new Web Parts at run time.

Display Modes of a Web Control:

A web control has four display modes that allow users to manage it.

View: This is a standard display mode for end users. This mode allow end users to maximize, minimize, or close a control but not delete a control
Design: This is a display mode that is used by the developers to enable personalization of the control. This mode allows developers to place standard controls into WebPartZone control to make them web parts.
Edit: This mode enables users to personalize the properties of a Web Part. It also allows users to delete dynamically added Web Parts.
Catalog: This mode is used to store web parts and enables the end user to add or remove them at run time.

Creating a Web Part Page:

To understand how the web parts work, we will create a simple web part page that will contain a few web part controls. To start creating a web Part page, follow the steps given below:
1. Create a new website.
2. Use the default.aspx page or add a new web page and then switch to the Design mode of the web page.
3. Drag and drop the WebPartManager control from the WebParts tab of the toolbox, as shown in Figure 2.



4. Add a table to the web page, which has three columns and one row, so that the left, right and the main sections of the web page can be created.

5. Drag and drop a WebPartZone control, in each column. This is done so that the layout of the web parts can be managed.

Note:

Each control that is added to a WebPartZone control is treated as a web part.

6. Right-click each WebPartZone control and set its properties. Modify the ID property and provide the name of the HeaderText as the name that you want to display on each section, as shown in Figure 3:



For example set the HeaderText property as Side Bar, Main Zone, and Right Navigation for all the three WebPartZone controls, as shown in Figure 4.

7. Add a Label control to the Main Zone WebPartZone control and add text “Welcome to My Home Page”.
8. Add a Tree View control to the Side Bar WebPartZone control and set its nodes by clicking Edit nodes menu item that appears as soon as the Tree view control is added.
9. Add an Image control to the Right Navigation WebPartZone control and set the Image URL of the image by right-clicking the Image control and accessing its Properties window.
10. Add a Calendar control to the Main Zone below the Label control in the Main Zone WebPartZone control.



Alternatively, you can copy and paste the code below to your default.aspx (or the web page that you have added to your project) file.



11. Execute the code.

The Web page appears as shown in Figure 5.

Notice that each web part consists of a small triangle. If you click on that triangle then a menu with Minimize and Close options appear. You can use these menu items to minimize and close that web part from the web page.


 

Conclusion:

This article provides a brief overview of web parts. The article further explains some important web part controls and the display modes of the web part controls. The article finally explains the creation of a web part page with the help of an example application.