Microsoft ASP.NET 4 : The Web Parts Architecture

Create a new Visual Studio Web Application project. Name it UseWebParts.

In the default page, add a WebPartManager by dragging an instance from the Toolbox onto the page.

Drag a WebPartZone onto the page. Set the ID to WebPartZoneLinks. Set the HeaderText to Try These Links. Set the HeaderStyle font ForeColor to Blue (so that you can see it better later during editing mode). Using the AutoFormat editor of the control itself, set the style to Professional. (To access AutoFormat, click the caret to the right of the control in the Designer.)

Add some HyperLinks to the WebPartZone, as shown here. Feel free to add any hyperlink you like (these are just examples).

Run the page. You should see the links appear on the left side of the page.

Add a Label to the page. The text should be Switch Display Mode. Add a DropDownList to the page. Name it DropDownListDisplayModes, and set its AutoPostBack property to true. This is used to switch the display mode back and forth.

ASP.NET Web Parts support five separate display modes. You add code to support (some of) these display modes in the next step:

• BrowseDisplayMode This is normal mode. No personalization or editing is available here.

• DesignDisplayMode This mode turns on drag-and-drop layout personalization.

• EditDisplayMode This option turns on personalization or customization of WebPart properties and permits a user to delete Web Parts that have been added to the page dynamically.

• ConnectDisplayMode This mode allows a user to connect Web Parts at run time.

• CatalogDisplayMode This mode allows a user to add Web Parts into a WebPartZone at run time.

Update the _Default class to support switching modes. Visual Studio added a WebPartManager to the page. Update the Page_Init method to attach an event handler to the page's InitializationComplete event. In the InitializationComplete handler, get the current WebPartManager and stash the reference in the WebPartManager1 member, as shown in the following code.

public partial class _Default : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    if (!this.IsPostBack)
    {
      String browseModeName = WebPartManager.BrowseDisplayMode.Name;
      foreach (WebPartDisplayMode mode in
        this.WebPartManager1.SupportedDisplayModes)
      {
        String modeName = mode.Name;
        // Make sure a mode is enabled before adding it. 
        if (mode.IsEnabled(this.WebPartManager1))
        {
          ListItem item = new ListItem(modeName, modeName);
          DropDownListDisplayModes.Items.Add(item);
        }
      }
    }
  }
}

The code listed in the InitializationComplete handler interrogates the current WebPartManager for the supported display modes and puts them in the DropDownList.

Add a handler for the DropDownListDisplayModes drop-down list when the SelectedIndexChanged event occurs. Have the handler switch the WebPart page into the selected mode. The following code shows how:

protected void
   DropDownListDisplayModes_SelectedIndexChanged(
            object sender, EventArgs e)
{
  string selectedMode = DropDownListDisplayModes.SelectedValue;
  WebPartDisplayMode mode =
    this.WebPartManager1.SupportedDisplayModes[selectedMode];
  if (mode != null)
  {
    this.WebPartManager1.DisplayMode = mode;
  }
}

Run the site. Make sure at least one user is registered with the site (by using the ASP.NET Configuration utility on the Project menu). Make sure a user is logged in by going to the Login page.

You can enter Browse mode and Design mode, as shown in the following graphic:

You'll see more modes later as you add more zones. Notice how the title now shows up. You can pick up items on the page and move them around now. For example, you can pick up one of the links and move it around in the Links WebPartZone.

Now add some more functionality. Add an EditorZone to the page. Then, in the EditorZone, add an AppearanceEditorPart, as shown in the following graphic (the Designer's default layout is to lay out components one after the other—this example shows the EditorZone part with an absolute layout style set so that it can be placed anywhere on the form):

Now run the site and log in as a user. You'll see a new option in the Switch Display Mode drop-down list—the Edit mode.

Now go back and add a CatalogZone. Drop a DeclarativeCatalogPart into the new WebPartZone and select Edit Templates.

While in Template Editing mode, pick up a TextBox control from the Toolbox and drop it into the DeclarativeCatalogPart. Then, access the page's source view and update the actual markup to add a Title attribute, as shown:

<ZoneTemplate>
   <asp:DeclarativeCatalogPart
      ID="DeclarativeCatalogPart1" runat="server">
      <WebPartsTemplate>
        <asp:TextBox ID="TextBox1"
          Title="A TextBox"
          runat="server">
        </asp:TextBox>
      </WebPartsTemplate>
   </asp:DeclarativeCatalogPart>
</ZoneTemplate>

Now run the page again. Switch to Catalog mode. Select the A TextBox check box, and click Add to add a TextBox to the Try These Links zone. (This might not seem too interesting yet. However, in the next exercise, you write a hyperlink Web Part that you can add to the links page from the catalog—and then update it with your own links and display names.)

Here is the page with a new TextBox added from the catalog:

Run the page and shift to Edit mode. Select a local menu from one of the hyperlink Web Parts in the Links zone. (You can get to the local "verb" menu by clicking the arrow in the upper right-hand corner of each Web Part.) Select Edit. You should see a collection of controls for editing the Web Part appearing in the Editor Zone, like so: