Section 13.6. Enabling Editing and Layout Changes

13.6. Enabling Editing and Layout Changes

Web Parts provide users with the ability to change the layout of the web part controls by dragging them from zone to zone. You may also allow your users to modify the appearance of the controls, their layout, and their behavior.

The built-in Web Parts control set provides basic editing of any Web Part control on the page. You can create custom editor controls that allow users to do more extensive editing.

13.6.1. Creating a User Control to Enable Changing Page Layout

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 this, you will create a new user control called DisplayModeMenu.ascx (see Chapter 14 for information on creating user controls), which will allow the user to change modes among Browse, Edit, and Design, as shown in Figure 13-21.

Figure 13-21. Display Mode user control

Right-click on the web project in the Solution Explorer and choose Add New Item. Select Web User Control and name the new user control DisplayModeMenu , as shown in Figure 13-22.

Figure 13-22. Adding a user control

Add the highlighted code listed in Example 13-6 to the content file of your new user control.

Example 13-6. DisplayModeMenu .ascx file

 <%@ Control Language="C#" AutoEventWireup="true"    CodeFile="DisplayModeMenu.ascx.cs"    Inherits="DisplayModeMenu" %>  <div>   <asp:Panel ID="Panel1" runat="server"     Borderwidth="1"     Width="230"     BackColor="lightgray"     Font-Names="Verdana, Arial, Sans Serif" >     <asp:Label ID="Label1" runat="server"       Text="&nbsp;Display Mode"       Font-Bold="true"       Font-Size="8"       Width="120" />     <asp:DropDownList ID="ddlDisplayMode" runat="server"       AutoPostBack="true"       EnableViewState="false"       Width="120"       OnSelectedIndexChanged="ddlDisplayMode_SelectedIndexChanged" />   </asp:Panel> </div>  

This code creates a panel, and within that panel, it adds a single drop-down list ( ddlDisplayMode ). It sets the event handler for when the Selected item changes in the drop-down list. To support this page, open the code-behind file ( DisplayModeMenu.ascx.cs ) and add the highlighted code shown in Example 13-7.

Example 13-7. 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 {  // will 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 =        webPartManager.SupportedDisplayModes[selectedMode];       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;    }  } 

Open the WebPartsDemo page in Design mode and make a space between the WebPartManager and the table of zones. Drag the DisplayModeMenu.ascx file from the solution explorer into that space. Change to Source view; VS2005 has done two things for you: it has registered the new control:

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

Second, it has placed the control into the form:

 <div>         <asp:WebPartManager ID="WebPartManager1" runat="server" />  <uc1:DisplayModeMenul ID="DisplayModeMenul1" runat="server" />  

Before testing this, drag an Editor Zone into the lower righthand cell in the table (currently unoccupied) and 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 design page should look more or less like Figure 13-23.

Figure 13-23. Editor zone

13.6.1.1. Moving a Part

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

Figure 13-24. Dragging a Web Part

13.6.1.2. Editing a Part

Next , change the drop-down to Edit mode. 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 13-25.

Figure 13-25. Edit mode

Click Edit and the Edit zone appears, allowing you to edit the current web part, as shown in Figure 13-26.

Figure 13-26. Editor Zone In Action

The Appearance editor lets you change the title and look of the Web Part, and the Layout lets you change, among other things, which zone the Web Part will appear in.

13.6.2. Adding Parts from a Catalog

You may want to provide a catalog of Web Parts that your users can add to the various zones. To do so, open WebPartsDemo.aspx in Source view and find Zone 4. Remove it from the cell so the cell is empty. Switch to Design view and drag a CatalogZone control into the 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 13-27.

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, as shown in Figure 13-28.

Before you run your program, switch to Source view and find the catalog zone you've added. Within the <WebPartsTemplate> element, add a Title attribute to both the calendar and the File Upload controls, as shown in Example 13-8. (Again, Intellisense will not like this attribute, but be strong and do it anyways.)

Figure 13-27. Adding a Declarative Catalog Part control

Figure 13-28. Dragging controls into the Declarative Template

Example 13-8. Catalog Zone

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

Run the application. Drop down the Display Mode; the Catalog mode has been added, as shown in Figure 13-29.

When you select Catalog , the catalog zone will be exposed. You may select one of the controls and decide which zone to place it in, as shown in Figure 13-30.

Figure 13-29. Catalog added to Display Mode

Figure 13-30. Adding a control from the catalog

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

Web Parts are the building blocks (along with personalization, themes, and skins) for the next generation of web applications, in which the user (rather than the designer) decides how the site appears and which information is given prominence.