October 26, 2016
Hot Topics:

ASP.NET 2.0: WebPart Framework Basics

  • July 10, 2006
  • By Sahil Malik
  • Send Email »
  • More Articles »

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">
             ID="DeclarativeCatalogPart1" runat="server">
                <cc1:SimpleWebPart ID="SimpleWebPart1"
          <asp:PageCatalogPart ID="PageCatalogPart1"
  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">
             ID="PropertyGridEditorPart1" runat="server" />
  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"
  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.

Page 2 of 2

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date
Rocket Fuel