Creating Webparts

Overview

This is the first of a couple articles on managing web parts. I would like to keep these articles as simple and concise as possible. This tutorial simply covers how to place WebParts onto the screen. WebParts are a portion of Asp.Net that doesn’t receive very much love. From my experience they feel complex, and where to apply them in your application very ambiguous. Let’s just start with creating one.

Creating your WebPart

• Open Visual Studio (I am using 2008), and add a new website This will create the Default.aspx page. Open the Default.aspx page
• Create three Divs
• Drag a WebPartManager and a DropDownList in the first
• Drag a WebPartZone in the second
• Drag a WebPartZone in the third

<div>
  <asp:WebPartManager ID="“WebPartManager1”" runat="“server”">
  </asp:WebPartManager>
  <asp:DropDownList ID="“DropDownList1”" runat="“server”"> </asp:DropDownList>
</div>
<div>
  <asp:WebPartZone ID="“WebPartZone1”" runat="“server”"> </asp:WebPartZone>
</div>
<div>
  <asp:WebPartZone ID="“WebPartZone2”" runat="“server”"> </asp:WebPartZone>
</div>

In the design view, place something in each webpartzone (like a calendar, button, or wizard control)

<div>
  <asp:WebPartZone ID="“WebPartZone1”" runat="“server”">
    <ZoneTemplate>
      <asp:Calendar ID="“Calendar1”" runat="“server”" />
    </ZoneTemplate>
  </asp:WebPartZone>
</div>
<div>
  <asp:WebPartZone ID="“WebPartZone2”" runat="“server”">
    <ZoneTemplate>
      <asp:Button ID="“Button1”" runat="“server”" Text="“Button”" />
    </ZoneTemplate>
  </asp:WebPartZone>
</div>

Set your dropdown list to AutoPostBack and then double click it to create an event handler. Then switch to your code-behind and change your code to this:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // Set up the list of options
        foreach (WebPartDisplayMode mode in this.WebPartManager1.SupportedDisplayModes)

        // Add an item for each mode
        this.DropDownList1.Items.Add(
                new ListItem(mode.Name, mode.Name));
    }

    this.WebPartManager1.DisplayMode =
          this.WebPartManager1.SupportedDisplayModes[
          this.DropDownList1.SelectedValue];
}

protected void DropDownList1_SelectedIndexChanged1(
                     object sender, EventArgs e)
{
    this.WebPartManager1.DisplayMode =
          this.WebPartManager1.SupportedDisplayModes[
                  this.DropDownList1.SelectedValue];
}

Explaination

The first time the page loads, the dropdown will populate with the different display modes of the WebPartManager. The WebPartManager handles all of the cool drag and drop functionality. With every page load, the WebPartManager is set to the display mode specified by the dropdown. The eventhandler just changes the display mode of the WebPartManager.

If you run this code in IE, you will see your dropdown with options. If you select the Design options, you can move the controls inside the WebPartZone to another WebPartZone. In Firefox, this functionality isn’t there, but we will enable it in the next article.

Conclusion

This is the simple hello world application with WebParts. In the near future, we will cover more advanced topics in WebParts as well as how and where to integrate them into your application.

Happy Coding