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
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
Select Case RadioButtonList.SelectedIndex
authorsWebPartManager.DisplayMode = WebPartManager.BrowseDisplayMode
authorsWebPartManager.DisplayMode = WebPartManager.DesignDisplayMode
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
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
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.