Introduction to Web Parts...

Date: October 31, 2004

Web parts are a new feature to the 2.0 .NET framework. Web parts are reusable pieces of code that are logically grouped together into one unit. These web parts can then be shown, hidden, moved around, and redesigned all by the user. Through the personalization provider, the setup that the user last left the application is retained within the site.

The simplest part of web parts to understand is the actual WebPart control. Just by dragging and dropping any control into a "zone", this control is now a web part. Web parts have additional properties that are exposed by the WebPart class or IWebPart interface, but functionally, this control is a web part. Each web part is encapsulated within a zone.

A WebPartZone is an area that the web part can belong in. Web Parts can be shifted between zones, or removed from a zone entirely. There are special kinds of zones, such as the EditorZone and the CatalogZone. The EditorZone only allows web parts that inherit from the EditorPart class; this is similar to the CatalogZone which only allows the CatalogPart classes within it. As such, these special parts (discussed later and in additional articles) cannot exist in a WebPartZone. The zone control also has “verbs” associated with it. Verbs are predefined or custom actions that perform some action against web parts within the zone.

The close verb actually will close the web part, seemingly never to return. To get this back, a CatalogPart control is needed, which contains a listing of closed web parts. The Minimize and Restore button compact and expand the controls as needed. Other verbs are available, such as the Export, Connect, Delete and Edit verb. Verbs will be discussed in another article; however, it is important to note that in the attached sample, the verb examples are the Close and Minimize buttons. These are predefined verbs that are available out-of-the-box.

Before we get too far ahead of ourselves, this article needs to discuss the WebPartManager and WebPartPageMenu controls first. These controls are easy to use and usually aren't touched in the code-behind or inline code; however, they are the most crucial. Web parts require the existence of a WebPartManager control. This control must be first in an ASP.NET web form, above all other web parts, zones, or any other custom/specialized web part control. The WebPartManager has no user interface in the application, but it is very crucial because it manages a lot of the interactions that occur between web parts.

The WebPartPageMenu control is the key to personalization. This control is a drop-down menu that has several options to choose from. Each option has a different task in personalizing the application. As more and more web parts are used in the page, more options are available in this control. For example, editor part and catalog part controls add two more drop-down options that invoke their functionality. In addition, if a web part has custom verbs associated with it, another option in the drop-down list allows the user to invoke those custom actions.

You won't see it in this article, but it is important in what it does. EditorPart controls edit the settings of web parts at runtime. A user interface appears (when invoked by the WebPartPageMenu control) that has fields to edit the chrome style, color, size, and text of web parts. Editor parts allow the user to create a customized atmosphere within an application.

So let's look at web parts in action. Two of the web controls are none other than existing web controls: a Calendar and RadioButtonList control. Looking at the controls in the designer, each is given a web parts header with access to the verb options to close or restore the verbs, as well as a title and the drop-down list (for custom verb actions). Notice that these controls don’t require additional code to be implemented; yet, they have all of the capabilities of web parts.

<asp:WebPartZone ID="WebPartZone1" Runat="server" ToolTip="Zone 1">
  <ZoneTemplate>
    <asp:Calendar Runat="server" ID="Calendar1" BorderColor="#3366CC" Width="220px" BackColor="White" BorderWidth="1px" Font-Names="Verdana" Font-Size="8pt" CellPadding="1" DayNameFormat="FirstLetter" Height="200px" ForeColor="#003399">
      <SelectedDayStyle ForeColor="#CCFF99" Font-Bold="True" BackColor="#009999"></SelectedDayStyle>
      <SelectorStyle ForeColor="#336666" BackColor="#99CCCC"></SelectorStyle>
      <WeekendDayStyle BackColor="#CCCCFF"></WeekendDayStyle>
      <OtherMonthDayStyle ForeColor="#999999"></OtherMonthDayStyle>
      <TodayDayStyle ForeColor="White" BackColor="#99CCCC"></TodayDayStyle>
      <NextPrevStyle ForeColor="#CCCCFF" Font-Size="8pt"></NextPrevStyle>
      <DayHeaderStyle ForeColor="#336666" Height="1px" BackColor="#99CCCC"></DayHeaderStyle>
      <TitleStyle ForeColor="#CCCCFF" BorderColor="#3366CC" Height="25px" Font-Size="10pt" Font-Bold="True" BackColor="#003399" BorderWidth="1px"></TitleStyle>
    </asp:Calendar>
    <asp:RadioButtonList ID="RadioButtonList1" Runat="server">
      <asp:ListItem Value="1" Selected="True">Option 1</asp:ListItem>
      <asp:ListItem Value="2">Option 2</asp:ListItem>
      <asp:ListItem Value="3">Option 3</asp:ListItem>
      <asp:ListItem Value="4">Option 4</asp:ListItem>
    </asp:RadioButtonList>
  </ZoneTemplate>
</asp:WebPartZone>

The last example of web parts is a web user control called ExamplePart.ascx. This control implements the IWebPart interface, which defines six properties. The skeleton of the properties defined for the interface are shown below:

Public Property CatalogIconImageUrl() As String Implements System.Web.UI.WebControls.WebParts.IWebPart.CatalogIconImageUrl
  Get

  End Get
    Set(ByVal value As String)

  End Set
End Property

Public Property Description() As String Implements System.Web.UI.WebControls.WebParts.IWebPart.Description
  Get

  End Get
    Set(ByVal value As String)

  End Set
End Property

Public ReadOnly Property Subtitle() As String Implements System.Web.UI.WebControls.WebParts.IWebPart.Subtitle
  Get

  End Get
End Property

Public Property Title() As String Implements System.Web.UI.WebControls.WebParts.IWebPart.Title
  Get

  End Get
  Set(ByVal value As String)

  End Set
End Property

Public Property TitleIconImageUrl() As String Implements System.Web.UI.WebControls.WebParts.IWebPart.TitleIconImageUrl
  Get

  End Get
  Set(ByVal value As String)

  End Set
End Property

Public Property TitleUrl() As String Implements System.Web.UI.WebControls.WebParts.IWebPart.TitleUrl
  Get

  End Get
  Set(ByVal value As String)

  End Set
End Property

Each of these properties is pretty self-explanatory. The values provided affect the rendering of the web part. We will come back to that in a minute; the HTML code for the web part looks like this:

<asp:WebPartZone ID="WebPartZone2" Runat="server" ToolTip="Zone 2" PartChromeType="TitleAndBorder">
  <ZoneTemplate>
    <uc1:examplepart runat="server" id="ExamplePart1" Title="Example UC Part" Description="My example for web parts in UC"></uc1:examplepart>
  </ZoneTemplate>
  <PartChromeStyle BorderColor="#C00000" BackColor="#FFE0C0" ForeColor="Blue"></PartChromeStyle>
  <MinimizeVerb Enabled="false" />
  <PartStyle BackColor="#E0E0E0"></PartStyle>
</asp:WebPartZone>

The user control defines the values provided (not specified as the default) as HTML properties of the user control. The control belongs to a separate zone (or zone 2). Based on the last setup of the page, this control will be shifted to the last known zone as stored in the aspnet_PagePersonalizationPerUser table (see the attached Access database).

The user control in this example uses a partial class in the code-behind file. The .NET framework generates a lot more of the code required for classes at compile time, removing a lot of the repetitive code, which is the reason for the Partial declaration. The skeleton from above is shown below, populated with values. Some of the properties aren't used, such as the image and regular URL's.

Partial Class ExamplePart_ascx
  Implements IWebPart

  Public Property CatalogIconImageUrl() As String Implements System.Web.UI.WebControls.WebParts.IWebPart.CatalogIconImageUrl
    Get
      Return Nothing
    End Get
    Set(ByVal value As String)
    End Set
  End Property

  Public Property Description() As String Implements System.Web.UI.WebControls.WebParts.IWebPart.Description
    Get
      If (Not IsNothing(ViewState("Description"))) Then
        Return ViewState("Description").ToString()
      End If
    End Get
    Set(ByVal value As String)
      ViewState("Description") = value
    End Set
  End Property

  Public ReadOnly Property Subtitle() As String Implements System.Web.UI.WebControls.WebParts.IWebPart.Subtitle
    Get
      Return "UC Example Part Subtitle"
    End Get
  End Property

  Public Property Title() As String Implements System.Web.UI.WebControls.WebParts.IWebPart.Title
    Get
      If (Not IsNothing(ViewState("Title"))) Then
        Return ViewState("Title").ToString()
      End If
    End Get
    Set(ByVal value As String)
      ViewState("Title") = value
    End Set
  End Property

  Public Property TitleIconImageUrl() As String Implements System.Web.UI.WebControls.WebParts.IWebPart.TitleIconImageUrl
    Get
      Return Nothing
    End Get
    Set(ByVal value As String)
    End Set
  End Property

  Public Property TitleUrl() As String Implements System.Web.UI.WebControls.WebParts.IWebPart.TitleUrl
    Get
      If (Not IsNothing(ViewState("TitleUrl"))) Then
        Return ViewState("TitleUrl").ToString()
      End If
    End Get
    Set(ByVal value As String)
      ViewState("TitleUrl") = value
    End Set
  End Property

  Sub lnkGo_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    lblWeather.Visible = True
  End Sub
End Class

One other event handler hasn't been discussed. The Go button displayed in the control shows the label containing the weather conditions. This isn't a real world example by any means, as the weather is pre-populated in a label; however, this could easily be replaced with a database or web service call.

Run the application and play around with the settings. You will notice that each web part has a close and minimize button by default. For the second WebPartZone, minimize capabilities have been disabled, which affects all of the web parts belonging to that zone. By dragging and dropping additional web parts into that zone, you will see that the minimize button becomes disabled.

In addition, separate styles have been rendered for the web parts. The first zone has a purple header, whereas the second zone has an orange header. Dragging/dropping web parts between zones at runtime alters these styles. The web part conforms to the styling "standards" that the zone provides to it, so when a web part is dragged from Zone1 to Zone2, it now conforms to Zone2's standard. The same happens with the minimize button. Zone2 has the minimize button disabled, which any web parts dropped into it now have that button disabled.

This example is setup using Windows authentication, so the access database storing personalization settings contains the account that is accessing the web site. Each user has a numerical ID number associated with the account name (in the aspnet_Users table). This ID number is stored in the aspnet_PagePersonalizationPerUser table, which also contains a PageSettings column. This column stores an encrypted string. Below is a copy of that string stored in the database:

/wEUKwAJAgECARkqMVN5c3RlbS5XZWIuVUkuV2ViQ29udHJvbHMuV2ViUGFydHMuV2ViUGFydE1hbmFnZXIFBV9fd3BtZgIBHhBXZWJQYX J0U3RhdGVVc2VyFCsADwUMZ3dwQ2FsZW5kYXIxBQxXZWJQYXJ0Wm9uZTICAWhkBRNnd3BSYWRpb0J1dHRvbkxpc3QxBQxXZWJQYXJ0Wm9uZT FmaGQFD2d3cEV4YW1wbGVQYXJ0MQUMV2ViUGFydFpvbmUyZmhkaA==

This string contains the settings information for where each web part was. Each web part resides in a zone, and if the zone "owner" is changed from redesigning the page, this is retained in the above settings information. In addition, any other information such as styling or user interface changes through editor parts are also retained.

In the future, I will be writing more about web parts, such as Editor and Catalog parts, custom web part controls, and creating custom verbs. In addition, I will try to detail some of the properties available, as there are a lot available in the framework.

You may download the code here.