Microsoft & .NETASPASP.NET 2.0: WebPart Framework Basics

ASP.NET 2.0: WebPart Framework Basics

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Looking at the Internet, I see a number of exceptionally functional sites personalized to my tastes. Much like staring at a map that says “You are here” and wondering, “Hmmm… how do they know where I am?!”, I am continually surprised at how advanced these sites are. A number of mature frameworks that free developers from mundane programming tasks have made this level of advancement possible.


Another thing that sticks out like a sore thumb is the level of reuse possible on most sites. For instance, every site has a header and banner. Some of them show a calendar, while others show forum-like applications. These reusable abstractions, or widgets, have been expressed in multiple ways in various application programming frameworks. In fact, entire products have been written on this concept of widgets; they just call them different names.


One such rather popular product was SharePoint Portal Server 2003, which called its reusable widgets WebParts. Thus, it makes perfect sense that ASP.NET 2.0 provides fantastic support for WebParts, and it definitely is no surprise to see Microsoft Office SharePoint Server 2007 (MOSS 2007) built upon this very framework. This article discusses WebPart framework basics, which can serve as the foundation for more advanced topics such as WebPart support in MOSS 2007.


The Major Components of the ASP.NET 2.0 WebPart Framework


Before diving into a sample WebPart-driven Web site, you must first understand the major reusable controls built into the .NET framework, which you will use to set up the site:



  1. WebPart: A WebPart is a reusable widget on a Web page. The user can choose to add a WebPart on his page, customize the WebPart per his needs, or even define communication between various WebParts. An ASP.NET 2.0 WebPart inherits from the System.Web.UI.WebControls.WebParts.WebPart class. A good example is a widget that displays traffic. End-user customization could involve specifying a freeway, and communication with another WebPart could involve a different WebPart that has a list of freeways that the user can click, one by one, to view updated traffic information. Setting up something like that is not very difficult in ASP.NET 2.0.

  2. WebPartManager: This control is the central policeman of the ASP.NET 2.0 WebPart framework. Each page should contain only a single WebPartManager, which is responsible for managing all functionality, events, and customization of various WebParts on that page. WebPartManager also has the ability to set various modes. So, for instance, if the user sets the WebPartManager in a Catalog mode, he could pick and choose the WebParts he wants on his page from a catalog of WebParts. Alternatively, he could put the page in Communication mode and define the various connections between different WebParts.

  3. Various Zones: Zones are physical areas on a page. These are implemented in the following Server Controls that ship with the Framework:


    • WebPartZone: A WebPartZone is a control that defines an area on a page where one or more WebParts can be hosted. A WebPartZone also controls the look and feel of a WebPart inside itself. Also, any control that doesn’t inherit from the WebPart class can masquerade itself as a WebPart and live inside a WebPartZone. This is done with the help of the GenericWebPart class, which inherits from the WebPart base class. By doing so, you are restricted to a subset of the functionality that a WebPart class can expose.

    • CatalogZone: The CatalogZone is the menu or the catalog from which a user can choose. It holds a number of CatalogPart controls, which in turn hold WebParts that are already added to the site and ready for the picking to add to various pages on the site. The user can pick WebParts from the Catalog, and add them to the various WebPartZones on the same page.
      There are three types of CatalogParts: DeclarativeCatalogPart, PageCatalogPart, and ImportCatalogPart.

    • EditorZone: This is the area on the page that prompts the user to edit his WebPart and customize it to his specific needs. A WebPart can also be customized in a Shared mode, where an administrator can configure the WebPart and all other users can view or use the WebPart but not customize it.

    • ConnectionsZone: This is the area of the page that prompts the end user to define communication between various WebParts on the same page. For instance, you could build an online RSS reader. One WebPart holds the user’s OPML, and the other WebPart renders the RSS for a particular subscription. The connection between the two would be the OPML WebPart providing a row (the RSS URL) and the RSS reader WebPart consuming the row, and then rendering appropriately. Because this is a simple ASP.NET 2.0 Web site, you can wrap these inside an atlas:UpdatePanel or a third-party control such as the telerik AJAX Panel. You even can eliminate postbacks and replace them with AJAX callbacks with almost no code at all.

Writing a Simple WebPart


Now that you familiar with the basic building blocks of the ASP.NET 2.0 WebPart framework, dive straight in and write your first WebPart.


You can masquerade any control using GenericWebPart, but that wouldn’t be a true WebPart because a true WebPart inherits from the Abstract base class System.Web.UI.WebParts.WebPart. So, the code for a simplistic WebPart that simply shows a line of text is as follows:

public class SimpleWebPart : WebPart
{
private string displayText = “Hello World!”;
[WebBrowsable(true), Personalizable(true)]
public string DisplayText
{
get { return displayText; }
set { displayText = value; }
}
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
writer.Write(displayText);
}
}

Don’t worry about the WebBrowsable and Personalizable attributes just yet—more on those shortly. For now, view this as a simple server control that renders the displayText, which is exposed as a public property: DisplayText. The obvious next question is: How can I make use of this WebPart?


Using a WebPart


Create a simple ASP.NET 2.0 Web site, and add a reference to the class library that holds the WebPart you just wrote. In the default.aspx, perform the following steps:



  1. Drag and drop an instance of the WebPartManager from the ToolBox.

  2. Drag and drop two WebPartZones (format them as you wish). To keep things simple, my WebPartZones look like this in design view:


  3. Now, add the SimpleWebPart you just wrote inside WebPartZone1. My page looks like this in Design Mode:


  4. Now, run this page. You should see your WebPart running successfully in the browser. You even have a neat menu next to the WebPartZone. When you do check Minimize (as shown below), the window even minimizes. Neat!

  5.   


The code so far is really simple:

<form id=”form1″ runat=”server”>
<div>
<asp:WebPartManager ID=”/img/2006/07/WebPartManager1″ runat=”server”>
</asp:WebPartManager>
<asp:WebPartZone ID=”/img/2006/07/WebPartZone1″ runat=”server”>
<ZoneTemplate>
<cc1:simplewebpart id=”SimpleWebPart1″
runat=”server”></cc1:simplewebpart>
</ZoneTemplate>
<asp:WebPartZone>
<asp:WebPartZone ID=”/img/2006/07/WebPartZone2″ runat=”server”>
</asp:WebPartZone>
</div>
</form>

Also, note that the first time you ran the Web site, the SQL Express database ASPNETDB.MDF showed up as follows:



This is because the WebPart framework, much like a lot of other important functional blocks in ASP.NET 2.0, use that SQL Express database by default. If you were to customize your WebPart, move it between different WebPartZones, or perform any personalization that was tied to URL rewriting or the Membership API, and so forth, all of that information goes into that SQL Express database by default. Of course, all of that is very easily changeable thanks to the provider model and a few easy web.config changes.


You can do a number of really awesome things with the WebPart framework—way more than one article can cover. So far, you have seen very basic functions. What if the user wished to change the display text, or simply move the WebPart from WebPartZone1 to WebPartZone2?

Having Fun with Your WebPart


The WebPartZone you have already placed on the page will enable you to set it (and thus the page) in various DisplayModes. These DisplayModes let you move WebParts around, edit them, define connections between them, or simply view the page.


On the same Default.aspx you have been working with, perform the following steps:



  1. Drop a CatalogZone. Inside the CatalogZone, create a ZoneTemplate and drop a DeclarativeCatalogPart and a PageCatalogPart. Also, add a WebPartsTemplate in the DeclarativeCatalogPart and move the cc1:simplewebpart definition from WebPartZone1 in there. Your code should look like this:
  2. <asp:WebPartManager ID=”/img/2006/07/WebPartManager1″ runat=”server” />
    <asp:WebPartZone ID=”/img/2006/07/WebPartZone1″ runat=”server” />
    <asp:WebPartZone ID=”/img/2006/07/WebPartZone2″ runat=”server” />
    <asp:CatalogZone ID=”CatalogZone1″ runat=”server”>
    <ZoneTemplate>
    <asp:DeclarativeCatalogPart
    ID=”DeclarativeCatalogPart1″ runat=”server”>
    <WebPartsTemplate>
    <cc1:SimpleWebPart ID=”SimpleWebPart1″
    runat=”server”></cc1:SimpleWebPart>
    </WebPartsTemplate>
    </asp:DeclarativeCatalogPart>
    <asp:PageCatalogPart ID=”PageCatalogPart1″
    runat=”server”></asp:PageCatalogPart>
    </ZoneTemplate>
    </asp:CatalogZone>

  3. Add an EditorZone as well. Inside the EditorZone, set up a ZoneTemplate and throw on an asp:PropertyGridEditorPart control from the toolbox. The asp:PropertyGridEditorPart simply looks for all public properties of the WebPart marked with the WebBrowsable(true) attribute, and gives you a simple UI to edit the value of that property. Your EditorZone should look like this:
  4. <asp:EditorZone ID=”EditorZone1″ runat=”server”>
    <ZoneTemplate>
    <asp:PropertyGridEditorPart
    ID=”PropertyGridEditorPart1″ runat=”server” />
    </ZoneTemplate>
    </asp:EditorZone>

  5. Now, you need to add some code to set the WebPartManager’s DisplayMode to Edit, Catalog, and Browse. Because this is hardly an article about aesthetic UI, drop three LinkButtons as follows:
  6. <br />
    <asp:LinkButton ID=”Edit” runat=”server”
    OnClick=”Edit_Click”>Edit</asp:LinkButton> |
    <asp:LinkButton ID=”Catalog” runat=”server”
    OnClick=”Catalog_Click”>Catalog</asp:LinkButton> |
    <asp:LinkButton ID=”Browse” runat=”server”
    OnClick=”Browse_Click”>Browse</asp:LinkButton>

  7. Also, add OnClick event handlers for the above three LinkButtons as follows:
  8. protected void Edit_Click(object sender, EventArgs e)
    {
    WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;
    }
    protected void Catalog_Click(object sender, EventArgs e)
    {
    WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode;
    }
    protected void Browse_Click(object sender, EventArgs e)
    {
    WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
    }

  9. You’re all set. Run the WebApplication. You should see a UI like this:


  10. Click on the “Catalog” button, and the UI suddenly changes to the following:


  11. Now, check the checkbox next to “Untitled” and click the “Add” button below it. By doing so, you add an instance of the “untitled” WebPart to WebPartZone1. You obviously can give your WebParts more meaningful names in either the CatalogZone or the WebPart itself. Notice that the WebPart is now added in WebPartZone1. Not only that, you can drag and drop the WebPart from WebPartZone1 to WebPartZone2, as shown here:


  12. Note: Drag and drop works only in IE. However, you can enable drag and drop in Firefox very easily by using Atlas.

  13. Now, click on Browse, and you should see the page as shown below:


  14. Supposedly, this is how the page will appear to the end user after you are done editing it.


  15. Now, go into the Catalog display mode once again and add another instance of the same WebPart to WebPartZone1. Click on Edit. Once in Edit, choose Edit from the WebPart that is sitting inside WebPartZone1, as shown here:


  16. You now will be prompted with a UI that allows you to edit the DisplayText in the PropertyGridEditorPart, as follows:


  17. Change the text to “Hello Mars!”, and click OK. Next, click Browse once again. The user is able to personalize the WebPart property because it was marked with the Personalizable(true) attribute. With that, you have just customized the WebPart to your specific tastes, as shown here:


ASP.NET 2.0 WebPart Framework: Power and Flexibility


With very little code, you have a full-fledged widget/portal framework ready to use. This framework is immensely flexible. Granted, what you have written is neither aesthetically pleasing nor terribly functional, but those problems can be easily addressed with stylesheets and more complex WebParts.


A good example of this framework’s power is my Web site (www.winsmarts.com), which is built on the ASP.NET 2.0 WebPart framework. Here is a screenshot of my site in edit mode:



You can see that I have a WebPart that serves as a content block, and the screenshot shows me dragging a content block over another in Edit mode. With some friendly ASP.NET building blocks that work very well with the WebPart framework, such as URL rewriting HTTP modules, custom authentication, and custom SiteMap providers, I was able to very easily create a quick-but-not-so-dirty content management system for myself that runs on a SQL server back-end.


About the Author


Sahil Malik (www.winsmarts.com) has worked for a number of top-notch clients in Microsoft technologies ranging from DOS to .NET. He is the author of Pro ADO.NET 2.0 and co-author of Pro ADO.NET with VB.NET 1.1. Sahil is currently also working on a multimedia series on ADO.NET 2.0 for Keystone Learning. For his community involvement, contributions, and speaking, he has also been awarded the Microsoft MVP award.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories