Agregar controles a zonas Web

Ahora añadiremos controles a las zonas Web que hemos ubicado en la lección anterior. A continuación, ejecutaremos la página para ver cómo trabajan conjuntamente los controles Web Parts.

1.Desde Toolbox, arrastrar un control Calendar en leftColWebPartZone, estableciendo su propiedad ID a "skedCalendar".

2. Añadir un control Web User Control denominado MyWebUserControl.ascx a nuestro proyecto.

3. Sobre la superficie de diseño MyWebUserControl.ascx, ubicar algunos controles (como se muestra aquí). No vamos a utilizar ahora estos controles. Simplemente es una demostración de cómo podemos construir un Web Part fuera de un control de usuario personalizado.

4.Desde Solution Explorer, arrastrar MyWebUserControl.ascx a midColWebPartZone. El control de usuario se carga automáticamente y se visualiza dentro de la zona.

Hay varios modos de operación para los Web Parts. Para conmutar de un modo a otro, la Beta 1 de ASP.NET 2.0 incluía un control WebPartPageMenu. Esto se ha eliminado en la Beta 2 porque podemos utilizar fácilmente uno de los controles estándar para conmutar entre modos, haciendo que el control anterior sea algo redundante. Ahora añadiremos un control RadioButtonList para procesar la conmutación de modos.

ToolBox, arrastrar un control RadioButtonList a la página, ubicándolo bajo el control WebPartManager. En el menú RadioButtonList Tasks, seleccionar Enable AutoPostBack, y a continuación hacer clic en Edit Items. En el cuadro de diálogo ListItem Collection Editor, hacer clic en Add. En Text, introducir "Browse" y en selected, seleccionar True. hacer clic en Add. En Text, introducir "Design", y a continuación hacer clic en OK.

6. Presionar ESC para cerrar el menú RadioButtonList Tasks. Presionar F4 para acceder a sus propiedades, estableciendo la propiedad ID a "displayModeRadioButtonList" y RepeatDirection a Horizontal.

7. Hacer doble clic en RadioButtonList para añadir un procesador de eventos selectedIndexChanged. A este procesador, añadir el siguiente código, que establece la propiedad WebPartManager.DisplayMode basada en la selección RadioButtonList del usuario.

seleccionar Case displayModeRadioButtonList.selectedIndex
    Case 0
        authorsWebPartManager.DisplayMode = WebPartManager.BrowseDisplayMode
    Case Else
        authorsWebPartManager.DisplayMode = WebPartManager.DesignDisplayMode
End seleccionar

El modo de navegación es el modo normal "bloqueado" Los Web Parts no pueden moverse en este modo. En modo de diseño, el usuario puede mover Web Parts de una zona a otra. Lo veremos en acción en un momento.

8.En Solution Explorer, seleccionar login.aspx y a continuación presionar F5 para ejecutar la aplicación. Iniciar sesión como "johns" o "marys" con la contraseña "Pa$$word!". Desde el menú de navegación, seleccionar Home | Web Parts.

Es importante primero iniciar sesión, porque el modo de diseño de Web Parts únicamente está disponible para usuarios autenticados. Las personalizaciones del usuario se almacenan en la base de datos de la aplicación. Este es un aspecto de la nueva funcionalidad de personalización de ASP.NET 2.0.

9. Observar el aspecto de la página en modo Browse. Mover nuestro ratón sobre un Web Part no cambia el cursor a un cursor de movimiento. Todo lo que podemos hacer es seleccionar Minimize o Close desde el menú Web Part. Sin embargo, asegurémonos de no seleccionar Close, o perderemos el Web Part. No hemos añadido todavía un control CatalogZone para seleccionar y añadir un Web Part desde una lista de Web Parts disponibles. Lo haremos al final de la lección sobre los Web Parts.

10. En el control RadioButtonList, seleccionar Design. Observar que aparecen los Web Part Zone IDs y ahora podemos hacer clic y arrastrar un Web Part a otra zona.

Podemos ejecutar de nuevo nuestro sitio e iniciar sesión como el otro usuario. Observaremos que cuando navegamos a la página WebParts.aspx, los Web Parts están en su posición original. Si a continuación iniciamos sesión como el usuario original veremos que los cambios efectuados sobre las posiciones de Web Parts se mantienen. De nuevo, esto se denomina personalización. El primer usuario establece los Web Parts como más les gustan, y sus configuraciones se almacenan en la base de datos de la aplicación, de modo que su experiencia de usuario resulta "personalizada" cuando regresan de nuevo a la página.