Adding Controls to Web Zones

You will now add controls to the Web zones that you placed in the previous lesson. You will then run the page to see how all of these Web Part controls work together.

1. From the Toolbox drag a Calendar control into leftColWebPartZone, setting its ID property to "skedCalendar".

2.  Add a Web User Control called MyWebUserControl.ascx to your project. 

3.  On the MyWebUserControl.ascx design surface, place some controls (such as shown here). You won't actually use these controls. It's just to demonstrate how you can make a Web Part out of a custom User Control.

4. From the Solution Explorer drag MyWebUserControl.ascx into midColWebPartZone. The user control is automatically loaded and displayed within the zone.

You will now add a RadioButtonList control to handle the mode switching.

5. From the ToolBox drag a RadioButtonList control onto the page, placing it below the WebPartManager control. In the RadioButtonList Tasks menu check Enable AutoPostBack, and then click Edit Items. In the ListItem Collection Editor dialog click Add. For Text enter "Browse" and for Selected select True. Click Add. For Text enter "Design", and then click OK.

6. Press ESC to close the RadioButtonList Tasks menu. Press F4 to access its properties, setting the ID property to "displayModeRadioButtonList", and RepeatDirection to Horizontal.

7. Double-click the RadioButtonList to add a SelectedIndexChanged event handler. To this handler add the following code, which sets the WebPartManager.DisplayMode property based on the user's RadioButtonList selection.

Select Case RadioButtonList.SelectedIndex
    Case 0
        authorsWebPartManager.DisplayMode = WebPartManager.BrowseDisplayMode
    Case Else
        authorsWebPartManager.DisplayMode = WebPartManager.DesignDisplayMode
End Select

Browse mode is the normal "locked" mode. Web Parts cannot be moved in this mode. In Design mode the user can move Web Parts from one zone to another. You will see this in action in a moment.

8. In the Solution Explorer select login.aspx and then press F5 to run the application. Log in as "johns" or "marys" with the password "Pa$$word!". From the navigation menu select Home | Web Parts.

It's important to log in first because Web Parts Design mode is only available to authenticated users. The user's customizations are stored in the application's database. This is one aspect of a new ASP.NET 2.0 feature called Personalization.

9. Notice how the page looks in Browse mode. Hovering your mouse over a Web Part does not change the cursor to a move cursor. All you can do is select Minimize or Close from the Web Part menu. However, do not select Close or you will lose the Web Part. You have not yet added a CatalogZone control for selecting and adding a Web Part from a list of available Web Parts. You will do this in the final Web Parts lesson.

10. In the RadioButtonList control select Design. Notice that Web Part Zone IDs appear and you can now click and drag a Web Part to another zone.

You can re-run your site and log in as the other user. You will notice that when you go to the WebParts.aspx page that the Web Parts are in their original place. If you then log back in as the original user you will see that the changes you made to Web Part locations are preserved. Again, this is called personalization. The first user set up the Web Parts as they like them, and their settings were saved in the application database so their user experience is "personalized" when they return to the page.