ASP.NET Web Parts

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 WebPartZone only.
• EditorZone: This control is like a container for EditorParts. Any EditorPart can be added on EditorZone only.
• CatalogZone: This control is like a container for CatalogParts. Any CatalogPart can be added on CatalogZone 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.

The basic tutorial of web parts is as below:
HTML CODE :

<asp:WebPartManager ID="WebPartManager1" runat="server">
    </asp:WebPartManager>
    <asp:WebPartZone ID="WebPartZoneHeader" runat="server" Height="1px" Width="865px"
        HeaderText="Welcome">
        <ZoneTemplate>
            <asp:Label ID="welcomeWebPart" runat="server" Text="User" title="Welcome" Width="199px" />
        </ZoneTemplate>
    </asp:WebPartZone>
    <asp:WebPartZone ID="WebPartZoneContent" runat="server" Height="1px" Width="865px"
        HeaderText="Pick a Day">
        <ZoneTemplate>
            <asp:TextBox ID="TextBoxName" runat="server" Title="Enter your name">
            </asp:TextBox>
            <asp:DropDownList ID="DropDownList1" runat="server" Title="Change Display modes"
                AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
            </asp:DropDownList>
            <asp:Calendar ID="CalendarWebPArt" runat="server" title="Pick a day"></asp:Calendar>
        </ZoneTemplate>
    </asp:WebPartZone>
    <asp:CatalogZone ID="CatalogZone1" runat="server">
        <ZoneTemplate>
            <asp:PageCatalogPart ID="PageCatalogPart1" runat="server" />
        </ZoneTemplate>
    </asp:CatalogZone>
    <asp:WebPartZone ID="WebPartZoneFooter" runat="server" Height="35px" Width="865px"
        HeaderText="Copyright">
        <ZoneTemplate>
            <asp:Label ID="footerWebPart" runat="server" Text="This is a test website." title="Copyright info"></asp:Label>
        </ZoneTemplate>
    </asp:WebPartZone>

CODE BEHIND :

protected void Page_Load(object sender, EventArgs e)
{
    welcomeWebPart.Text = TextBoxName.Text;
    if (IsPostBack == false)
    {
        foreach (WebPartDisplayMode mode in WebPartManager1.SupportedDisplayModes)
        {
            DropDownList1.Items.Add(mode.Name);
        }

        DropDownList1.SelectedValue = WebPartManager1.DisplayMode.ToString();
    }
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (WebPartManager1.SupportedDisplayModes[DropDownList1.SelectedValue] != null)
    {
        WebPartManager1.DisplayMode = WebPartManager1.SupportedDisplayModes
            [DropDownList1.SelectedValue];
    }
}