A Beginner's Tutorial on ASP.NET Web Parts

• Download source - 247.7 KB

Introduction

This article is a beginner's introduction to Web parts in ASP.NET. We will try to see what exactly are web parts, why they are so useful in web development and how to implement Web parts in our application.

Background

There are many scenarios in our application where we want to either collect/present groups of information to the user. We would like to have the possibility for the user to selectively view any group of information. The user may also have an option of not viewing any group at all. The iGoogle interface is an excellent example of web parts in action. The user can choose to add some information on the page and he can even decide the appearance and location of that web part. Let us try to see if we want to implement similar functionality in ASP.NET then how can we accomplish it using Web parts.

Using the Code

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.

Let us now see how we can add web parts on a page. First we will decide how and where we would like our web parts to appear. Let us decide three locations for webparts. One is in the header section of our site, second in footer section and third in content section of 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 our headerzone.
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).

The label on the header part will be used to display the users name. The text box on the content web part will be used to take the user name input. The drop down list will be used to enable the user to change the appearance of web parts and let them drag and drop these web parts in any of the zones. If we look at the markup of our page:

<form id="form1" runat="server">
    <div>
        <asp:WebPartManager ID="WebPartManager1" runat="server">
        </asp:WebPartManager>
         </div>
        <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"></asp:Label>
            </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>
    </form>

When we run the page, we can see that user can see these web parts, he can choose to minimize them, restore them or even close them. The drop down list shows all the possible views for the web parts on the page. We populated the dropdown with all the possible modes of Webpartmanager on this page and if the user changes the view, we will use the new value to set the view mode of web parts.

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];
    }
}  

There is one small problem though. If the user closes any web part, he will not be able to restore that web part. For providing this functionality, we will use the page catalogwebpart that we added on the page so that the user, when in catalog mode, should be able to change the appearances of web parts and even restore the closed web parts.

The web parts can also use the data on other web part. We can create a ConnectionProvider and a ConnectionConsumer and then use the static connection property of Webpart manager to facilitate this.

Points of Interest

What we have done is very introductory and the idea of the article was to let beginners understand the possibility of having web parts and creating them in ASP.NET. We have not discussed the full details of web parts here. There is a lot more to web parts which once understood can do wonders in web page layout and provide users with customizable user interface.

History

• 28 Feb 2012: A Beginner's tutorial on ASP.NET web parts
• 15 January 2012: Uploaded some good quality images.