oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

What Are Web Parts?
Pages: 1, 2, 3, 4

Populating the Zones

This is a good time to put controls into some of the zones. Switch to Source mode, drag a Label into zone 1, and set the Title attribute to "Today's News" and the text (between the opening and closing label marks) to "Entire world declares peace!" Drag a List Box into zone 3, set the Title to "Favorite Books," and add the name of some of your favorite books to the List Box items collection.

Note that when you set the Title attribute, Visual Studio complains because neither the Label control nor the List Box control has a Title attribute. Yet, when you switch to Design view and when you run the application, there is the title properly displayed (as shown in Figure 4).

Figure 4
Figure 4. Title in Label

While Label does not have a Title attribute, all Web Parts do. When you drag any ASP.NET control into a Web Part Zone, it is wrapped in a Web Part, and thus has the Title, and also has the drop-down menu, as shown above in Figure 4.

Enabling Editing and Layout Changes

In order to allow your user to edit and change the layout, you must provide them with a way to change the display mode. You would think that this is so common a need that Microsoft would include a control to manage this, but, bizarrely, they do not. Instead the documentation tells you to create a user control, and provides example code. Follow these painless steps:

  1. Right-click on the application in Solution Explorer and choose Add New Item.
  2. In Templates, click on Web User Control, name the file DisplayModeMenu.ascx, and click the Add button.
  3. Copy the following code into the page, just below the header that was provided for you by Visual Studio.
    <asp:Panel ID="Panel1" runat="server" BackColor="lightgray" BorderWidth="1" Font-Names="Verdana, Arial, Sans Serif"
        <asp:Label ID="Label1" runat="server" Font-Bold="true" Font-Size="8" Text=" Display Mode"
        <asp:DropDownList ID="ddlDisplayMode" runat="server" AutoPostBack="true"
            OnSelectedIndexChanged="ddlDisplayMode_SelectedIndexChanged" Width="120">

Right-click on the user control page and go to the code-behind page to put in the event handlers:

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;

Pages: 1, 2, 3, 4

Next Pagearrow