oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

What's New in Beta 2: Web Parts Revisited
Pages: 1, 2

Enabling Editing and Layout Changes

In order to edit the contents of zones or move controls from one zone to another, you need to be able to enter Edit and Design mode. To do so, you will create a new user control, called DisplayModeMenu.ascx, that will allow the user to change modes among Browse, Edit, and Design, as shown in Figure 6:

Display Mode Menu
Figure 6.

Add a new user control named DisplayModeMenu.ascx to your project, and in the content file add the following code:

  <asp:Panel ID="Panel1" runat="server" 
    Font-Names="Verdana, Arial, Sans Serif" >
    <asp:Label ID="Label1" runat="server" 
      Text=" Display Mode" 
      Width="120" />
    <asp:DropDownList ID="ddlDisplayMode" runat="server"  
      OnSelectedIndexChanged="ddlDisplayMode_SelectedIndexChanged" />

This creates a panel that contains a drop-down list and sets the event handler for when the selected item changes. To implement the event handler, you'll add code to the code-behind page DisplayModeMenu.ascx.cs:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class DisplayModeMenu : System.Web.UI.UserControl
   // Use a field to reference the current WebPartManager control.
   WebPartManager webPartManager;

   public void Page_Init( object sender, EventArgs e )
      Page.InitComplete += new EventHandler( InitComplete );

   // when the page is fully initialized
   public void InitComplete( object sender, System.EventArgs e )
      webPartManager = WebPartManager.GetCurrentWebPartManager( Page );

      String browseModeName = WebPartManager.BrowseDisplayMode.Name;

      foreach ( WebPartDisplayMode mode in
        webPartManager.SupportedDisplayModes )
         String modeName = mode.Name;
         if ( mode.IsEnabled( webPartManager ) )
            ListItem listItem = new ListItem( modeName, modeName );
            ddlDisplayMode.Items.Add( listItem );

   // Change the page to the selected display mode.
   public void ddlDisplayMode_SelectedIndexChanged( object sender,
     EventArgs e )
      String selectedMode = ddlDisplayMode.SelectedValue;

      WebPartDisplayMode mode =
      if ( mode != null )
         webPartManager.DisplayMode = mode;

   // Set the selected item equal to the current display mode.
   public void Page_PreRender( object sender, EventArgs e )
      ListItemCollection items = ddlDisplayMode.Items;
      int selectedIndex =
        items.IndexOf( items.FindByText( webPartManager.DisplayMode.Name ) );
      ddlDisplayMode.SelectedIndex = selectedIndex;

To use your nifty new control, open the WebPartsDemo page in design mode and make a space between the WebPartManager and the table that contains your zones. Drag the DisplayModeMenu.ascx file from the Solution Explorer right onto your page. Hey! Presto! Visual Studio registers your control in the WebPartsDemo.aspx page.

<%@ Register Src="DisplayModeMenu.ascx" TagName="DisplayModeMenul" TagPrefix="uc1" %>

It also places the control on the page (you can verify this in Source view if you don't trust me. It's okay, I don't mind. People are so suspicious these days. I'll just wait here while you check. Don't mind me, I can keep busy ...).

Before testing this, drag an Editor Zone into the lower right-hand cell in the table (if there is already something in that cell, delete it) and then drag an AppearanceEditorPart and a LayoutEditorPart onto the Editor Zone. To make the Editor Zone stand out, click on its smart tab and choose AutoFormat and then Professional. Your page should look like Figure 7.

Editor Zone Added
Figure 7.

Moving a Part

Run the application. When you log in and go to the Web Parts page, you are in Browse mode. Use the DisplayModeMenu drop-down menu to switch to design mode, and all of the zones (except the editing zone) appear. You can now click on any Web Part (e.g., "Today's News") and drag it to any zone, as shown in Figure 8.

Moving Web Parts
Figure 8.

Editing A Part

Click on the drop-down menu and choose Edit. Nothing much happens, but click on the drop down tag on one of the web part controls. A menu appears that now includes Edit, as shown in Figure 9.

Edit Menu
Figure 9.

When you select Edit from this menu, the Edit Zone you added earlier appears, allowing you to edit the appearance of the web part, as shown in Figure 10.

Editor Zone Working
Figure 10.


Adding Parts from a Catalog

You can provide your users with a catalog of web parts that they can assign to the various zones on their page. This allows the user to pick the information of particular interest (stock quotes, weather, news, etc.) and virtually hand-craft the look and feel of the page. To do so, open WebPartsDemo.aspx in Source view and find Zone 4. Remove it from the cell so that the cell is empty. Switch to Design view and drag a CatalogZone control into newly empty cell. Click on the zone, and in the properties window set the HeaderText property to Catalog Zone. Drag a DeclarativeCatalogPart control into the zone, as shown in Figure 11.

Adding A Declarative Catalog Part
Figure 11.

Click the smart tag on the DeclarativeCatalogPart and select Edit Templates. From the standard tab of the toolbox, drag on a Calendar and a File Upload control. Switch to Source view and find the catalog zone. Within the <WebPartsTemplate> element, add a Title attribute to both the Calendar and the File Upload controls.

<asp:CatalogZone ID="CatalogZone1" runat="server">
      <asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">
            <asp:Calendar ID="Calendar1" runat="server" title="Calendar" />
            <asp:FileUpload ID="FileUpload1" runat="server" title="Upload Files" />

Run the application. Drop down the display mode menu and notice that the Catalog mode has been added, as shown in Figure 12.

Display Mode with Catalog
Figure 12.

When you click on Catalog, the newly added catalog zone is exposed. You may select one of the controls and decide which zone to place it in, as shown in Figure 13.

Using the Catalog Zone
Figure 13.

Once you've picked your control and the zone to add it to, click Add and the control instantly appears in the designated zone.

Jesse Liberty is a senior program manager for Microsoft Silverlight where he is responsible for the creation of tutorials, videos and other content to facilitate the learning and use of Silverlight. Jesse is well known in the industry in part because of his many bestselling books, including O'Reilly Media's Programming .NET 3.5, Programming C# 3.0, Learning ASP.NET with AJAX and the soon to be published Programming Silverlight.

Return to