Tutorial: Crear una página de elementos Web en Visual Web Developer
Actualización: noviembre 2007
Este tutorial es una demostración práctica de los componentes y tareas esenciales para crear páginas web que utilizan controles de elementos web en una herramienta visual de diseño de páginas como Microsoft Visual Studio 2005.
En muchas aplicaciones Web resulta útil tener la posibilidad de cambiar el aspecto del contenido, además de permitir que los usuarios seleccionen y organicen el contenido que desean ver. Los elementos Web ASP.NET permiten crear páginas Web con contenido modular y que permiten a los usuarios cambiar la apariencia y el contenido según sus preferencias. Para obtener una introducción general a los elementos Web, vea Información general sobre los elementos Web ASP.NET. Para obtener información general acerca del conjunto de controles de elementos Web, vea Información general sobre el conjunto de controles de elementos web.
En este tutorial creará una página en que se utilizan controles de elementos Web para crear una página Web que el usuario pueda modificar o personalizar. Las tareas ilustradas en este tutorial incluyen:
Agregar controles de elementos Web a una página.
Crear un control de usuario personalizado y utilizarlo como control de elementos Web.
Permitir a los usuarios personalizar la distribución de los controles de elementos Web en la página.
Permitir a los usuarios editar el aspecto de un control de elementos Web.
Permitir a los usuarios seleccionar controles de un catálogo de controles de elementos Web disponibles.
Requisitos previos
Para poder completar este tutorial, necesitará:
Un sitio que puede identificar a usuarios determinados. Si ya tiene un sitio configurado con suscripción de ASP.NET, podrá utilizarlo en este tutorial. En caso contrario, en el tutorial se proporcionan las instrucciones para configurar un sitio de modo que identifique al usuario por el nombre de su cuenta de usuario de Windows.
Un entorno de diseño visual para crear páginas Web. Este tutorial utiliza Visual Studio 2005.
Una base de datos y un proveedor de personalización configurados. La personalización de elementos Web está habilitada de manera predeterminada y utiliza el proveedor de personalización de SQL (SqlPersonalizationProvider) con Microsoft SQL Server Express para almacenar los datos de personalización. En este tutorial se utilizan SQL Server Express y el proveedor predeterminado de SQL. Si tiene instalado SQL Server Express, no necesita realizar ninguna configuración. SQL Server Express está disponible con Microsoft Visual Studio 2005 como parte opcional de la instalación o se puede descargar gratuitamente en Microsoft.com. Para utilizar una versión completa de SQL Server, debe instalar y configurar una base de datos de servicios de aplicación de ASP.NET, y configurar el proveedor de personalización de SQL para que se conecte a dicha base de datos. Para obtener información detallada, vea Crear y configurar la base de datos de servicios de la aplicación para SQL Server.
Crear y configurar el sitio Web
Para este tutorial tiene que tener una identidad de usuario, para que la configuración de los elementos Web pueda tener su clave. Si ya tiene un sitio Web configurado para utilizar la suscripción, se recomienda que utilice ese sitio. En caso contrario, puede crear un nuevo sitio y utilizar su nombre de usuario de Windows actual como identidad de usuario.
Para crear un sitio Web nuevo
En Visual Studio, cree un nuevo sitio Web ASP.NET.
Para obtener información detallada, vea Tutorial: Crear un sitio web con pertenencia e inicio de sesión de usuarios.
Crear una página sencilla con elementos Web
En esta parte del tutorial, creará una página que utilice controles de elementos Web para mostrar el contenido estático. El primer paso para trabajar con elementos Web es crear una página con dos elementos que son obligatorios. Primero, una página de elementos Web necesita un control WebPartManager para coordinar todos los controles de elementos Web. En segundo lugar, una página de elementos Web necesita al menos una zona, que es un control compuesto que contiene WebPart u otros controles de servidor y ocupa un área concreta en una página.
.gif "Nota") Nota: |
|---|
No es necesario hacer nada para habilitar la personalización de los elementos Web, que se habilita de forma predeterminada para el conjunto de elementos Web. La primera vez que se ejecuta una página con elementos Web en un sitio, ASP.NET configura un proveedor de personalización predeterminado para almacenar la configuración de personalización de usuario. Para obtener más información sobre personalización, vea Información general sobre la personalización de elementos Web. |
Para crear una página para que contenga los controles de elementos Web
Cierre la página predeterminada y agregue una nueva página denominada WebPartsDemo.aspx.
Cambie a la vista Diseño.
En el menú Ver, haga clic en Ayudas visuales y, a continuación, compruebe que están seleccionadas las opciones Controles no visuales de ASP.NET y Detalles.
Esto permite ver las etiquetas y controles de diseño que no tienen una interfaz de usuario.
Agregue una nueva línea justo antes del elemento body.
Nota:Si tiene algún problema al realizar esto, seleccione el elemento div y presione ESC dos veces para seleccionar el elemento body, presione la tecla FLECHA IZQUIERDA y, a continuación, presione ENTRAR.
Coloque el punto de inserción delante del carácter de nueva línea.
En la lista Formato del bloque en la barra de herramientas, seleccione Encabezado 1.
En el encabezado, agregue el texto Página de demostración de elementos web.
En la ficha Elementos Web del Cuadro de herramientas, arrastre un control WebPartManager hasta la página y colóquelo exactamente entre el carácter de nueva línea y la etiqueta de apertura <div>.
El control WebPartManager no produce ningún resultado, por lo que aparece como un cuadro gris en la superficie del diseñador.
Sitúe el punto de inserción dentro del elemento div.
En el menú Tabla, haga clic en Insertar tabla, especifique una tabla con una fila y tres columnas y, a continuación, haga clic en Aceptar.
Arrastre un control WebPartZone a la columna izquierda de la tabla. Haga clic con el botón secundario en el control WebPartZone, seleccione Propiedades y establezca las propiedades siguientes:
ID: SidebarZone
HeaderText: Sidebar
Arrastre un segundo control WebPartZone a la columna central de la tabla y establezca las propiedades siguientes:
ID: MainZone
HeaderText: Main
Guarde el archivo, pero no lo cierre todavía.
Ahora, la página tiene dos zonas distintas que se pueden controlar por separado. Sin embargo, ninguna de las zonas tiene contenido, por lo que el paso siguiente será crearlo. En este tutorial se trabaja con controles de elementos Web que muestran sólo contenido estático.
Un elemento zonetemplate especifica el diseño de una zona de elementos Web. En la plantilla de la zona puede agregar cualquier control ASP.NET: un control de elementos Web personalizado, un control de usuario o un control de servidor existente. Observe que aquí se está utilizando el control Label y que todo lo que va a hacer es agregar texto estático. Al colocar un control de servidor normal en una zona WebPartZone, ASP.NET lo trata como control de elementos Web en tiempo de ejecución, lo que habilita las características de los elementos Web en el control.
Para crear contenido para la zona principal
En la vista Diseño, arrastre un control Label desde la ficha Estándar del Cuadro de herramientas hasta una de las áreas de contenido de la zona cuya propiedad ID está establecida en MainZone.
Cambie a la vista Código fuente.
Observe que se ha agregado un elemento zonetemplate para que el control Label esté en MainZone.
Agregue un atributo denominado title al elemento asp:label y establezca su valor en Contenido. Quite el atributo Text="Label" del elemento asp:label. Dentro del elemento asp:label, agregue texto como <h2>Mi página principal</h2>. El código debe ser como el que aparece a continuación:
<asp:webpartzone id="MainZone" headertext="Main"> <zonetemplate> <asp:label id="Label1" title="Content"> <h2>Welcome to My Home Page</h2> </asp:label> </zonetemplate> </asp:webpartzone>Guarde el archivo.
Después, cree un control de usuario que también se pueda agregar a la página como un control de elementos Web.
Para crear un control de usuario
Agregue un nuevo control de usuario Web al sitio para que actúe como un control de búsqueda denominado SearchUserControl.ascx y asegúrese de que no esté activada la casilla Colocar código fuente en un archivo independiente.
Nota:El control de usuario de este tutorial no implementa una funcionalidad de búsqueda real; sólo se utiliza para mostrar las características de los elementos Web.
Cambie a la vista Diseño.
Desde la ficha Estándar del cuadro de herramientas, arrastre un control TextBox a la página.
Coloque el punto de inserción después del cuadro de texto que acaba de agregar y presione ENTRAR para agregar una nueva línea.
Arrastre un control Button a la página en la nueva línea debajo del cuadro de texto que acaba de agregar.
Cambie a la vista Código fuente y, a continuación, asegúrese de que el código fuente del control de usuario sea como el siguiente:
<%@ control language="VB" classname="SearchUserControl" %> <asp:textbox id="TextBox1"></asp:textbox> <br /> <asp:button id="Button1" text="Search" /><%@ control language="C#" classname="SearchUserControl" %> <asp:textbox id=" TextBox1"></asp:textbox> <br /> <asp:button id=" Button1" text="Search" />Guarde y cierre el archivo.
.gif "Nota de seguridad")
Nota de seguridad:Este control tiene un cuadro de texto que acepta datos del usuario, lo que puede resultar una amenaza para la seguridad. Los datos proporcionados por el usuario en una página Web pueden contener secuencias de comandos de cliente malintencionadas. De manera predeterminada, las páginas Web ASP.NET validan la entrada de datos del usuario para asegurarse de que no contiene ninguna secuencia de comandos o elemento HTML. Siempre que esta validación esté habilitada, no tendrá que comprobar explícitamente si algún usuario está insertando secuencias de comandos o elementos HTML. Para obtener más información, vea Información general sobre los ataques mediante secuencias de comandos.
A continuación, puede agregar controles de elementos Web a la zona de la barra lateral. Va a agregar dos controles a la zona de la barra lateral, uno con una lista de vínculos y otro que es el control de usuario creado en el tutorial anterior. Los vínculos se agregan como un control de servidor Label estándar, de forma similar a como creó el texto estático para la zona principal. Sin embargo, aunque cada uno de los controles de servidor que se encuentran en el control de usuario se podía contener directamente en la zona (como el control de etiqueta), en este caso es así. En lugar de ello, forman parte del control de usuario que creó en el procedimiento anterior. Éste es un método habitual para incluir controles y funcionalidad adicional en un control de usuario y, a continuación, hacer referencia a ese control en una zona como control de elementos Web.
En tiempo de ejecución, el conjunto de controles de elementos Web introduce los dos controles dentro de controles GenericWebPart. Cuando un control GenericWebPart contiene un control de servidor Web, el control del elemento genérico es el control primario; se puede tener acceso al control de servidor a través de la propiedad ChildControl del control primario. El uso de controles de elementos genéricos permite que los controles de servidor Web estándar tengan el mismo comportamiento básico y los mismos atributos que los controles de elementos Web que se derivan de la clase WebPart.
Para agregar controles de elementos Web a la zona de la barra lateral
Abra la página WebPartsDemo.aspx.
Cambie a la vista Diseño.
Arrastre la página de control de usuario que ha creado, SearchUserControl.ascx, desde el Explorador de soluciones hasta la zona cuya propiedad ID está establecida en SidebarZone.
Guarde la página WebPartsDemo.aspx.
Cambie a la vista Código fuente.
En el elemento asp:webpartzone de la SidebarZone, agregue un elemento asp:label que contiene vínculos y, en la etiqueta del control de usuario, agregue un atributo Title con un valor de Search, tal y como se muestra en el siguiente ejemplo:
<asp:WebPartZone id="SidebarZone" headertext="Sidebar"> <zonetemplate> <asp:label id="linksPart" title="My Links"> <a href="https://www.asp.net">ASP.NET site</a> <br /> <a href="https://www.gotdotnet.com">GotDotNet</a> <br /> <a href="https://www.contoso.com">Contoso.com</a> <br /> </asp:label> <uc1:SearchUserControl id="searchPart" title="Search" /> </zonetemplate> </asp:WebPartZone>Guarde y cierre el archivo.
Ahora puede probar la página.
Para probar la página
Cargue la página en un explorador.
La página muestra las dos zonas. La captura de pantalla siguiente muestra la página.
Página de demostración de elementos Web con dos zonas
.gif)
En la barra de título de cada control hay una flecha hacia abajo que proporciona acceso a un menú de verbos con las acciones que se pueden realizar en un control. Haga clic en el menú de verbos de uno de los controles y, a continuación, haga clic en el verbo Minimizar y observe cómo se minimiza el control. En el menú de verbos, haga clic en Restaurar y el control vuelve a tener su tamaño normal.
Permitir a los usuarios editar páginas y cambiar el diseño
Los elementos Web proporcionan a los usuarios la capacidad de cambiar la distribución de los controles de elementos Web arrastrándolos de una zona a otra. Además de permitir que los usuarios muevan los controles de WebPart de una zona a otra, también puede permitirles que editen diversas características de los controles: su aspecto, distribución y comportamiento. El conjunto de controles de elementos Web proporciona funcionalidad de edición básica para los controles de WebPart. Si bien no se va a realizar en este tutorial, se pueden crear controles de editor personalizados que permiten a los usuarios editar las características de los controles de WebPart. Lo mismo que sucede con el cambio de ubicación de un control de WebPart, la edición de las propiedades de control depende de la personalización de ASP.NET para guardar los cambios que realizan los usuarios.
En esta parte del tutorial, se agrega la capacidad de que los usuarios editen las características básicas de cualquier control WebPart en la página. Para habilitar estas características, se agrega otro control de usuario personalizado a la página, junto con un elemento asp:editorzone y dos controles de edición.
Para crear un control de usuario que permita cambiar el diseño de la página
En Visual Studio, en el menú Archivo, haga clic en Nuevo y, a continuación, en Archivo.
En el cuadro de diálogo Agregar nuevo elemento, seleccione Control de usuario Web. Asígnele un nombre DisplayModeMenu.ascx al nuevo archivo. Desactive la casilla Colocar código fuente en un archivo independiente.
Haga clic en Agregar para crear el nuevo control.
Cambie a la vista Código fuente.
Quite todo el código existente en el archivo nuevo y pegue el código siguiente. Este código de control de usuario utiliza las características del conjunto de controles de elementos Web para que en una página se pueda cambiar el modo de vista o presentación; además, permite cambiar el aspecto físico y el diseño de la página cuando se está en ciertos modos de presentación.
<%@ control language="vb" classname="DisplayModeMenuVB"%> <script > ' Use a field to reference the current WebPartManager control. Dim _manager As WebPartManager Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) AddHandler Page.InitComplete, AddressOf InitComplete End Sub Sub InitComplete(ByVal sender As Object, ByVal e As System.EventArgs) _manager = WebPartManager.GetCurrentWebPartManager(Page) Dim browseModeName As String = _ WebPartManager.BrowseDisplayMode.Name ' Fill the drop-down list with the names of supported display modes. Dim mode As WebPartDisplayMode For Each mode In _manager.SupportedDisplayModes Dim modeName As String = mode.Name ' Make sure a mode is enabled before adding it. If mode.IsEnabled(_manager) Then Dim item As New ListItem(modeName, modeName) DisplayModeDropdown.Items.Add(item) End If Next mode ' If Shared scope is allowed for this user, display the ' scope-switching UI and select the appropriate radio button ' for the current user scope. If _manager.Personalization.CanEnterSharedScope Then Panel2.Visible = True If _manager.Personalization.Scope = _ PersonalizationScope.User Then RadioButton1.Checked = True Else RadioButton2.Checked = True End If End If End Sub ' Change the page to the selected display mode. Sub DisplayModeDropdown_SelectedIndexChanged(ByVal sender As Object, _ ByVal e As EventArgs) Dim selectedMode As String = DisplayModeDropdown.SelectedValue Dim mode As WebPartDisplayMode = _ _manager.SupportedDisplayModes(selectedMode) If Not (mode Is Nothing) Then _manager.DisplayMode = mode End If End Sub ' Set the selected item equal to the current display mode. Sub Page_PreRender(ByVal sender As Object, ByVal e As EventArgs) Dim items As ListItemCollection = DisplayModeDropdown.Items Dim selectedIndex As Integer = _ items.IndexOf(items.FindByText(_manager.DisplayMode.Name)) DisplayModeDropdown.SelectedIndex = selectedIndex End Sub ' Reset all of a user's personalization data for the page. Protected Sub LinkButton1_Click(ByVal sender As Object, _ ByVal e As EventArgs) _manager.Personalization.ResetPersonalizationState() End Sub ' If not in User personalization scope, toggle into it. Protected Sub RadioButton1_CheckedChanged(ByVal sender As _ Object, ByVal e As EventArgs) If _manager.Personalization.Scope = _ PersonalizationScope.Shared Then _manager.Personalization.ToggleScope() End If End Sub ' If not in Shared scope, and if user has permission, toggle the ' scope. Protected Sub RadioButton2_CheckedChanged(ByVal sender As _ Object, ByVal e As EventArgs) If _manager.Personalization.CanEnterSharedScope AndAlso _ _manager.Personalization.Scope = _ PersonalizationScope.User Then _manager.Personalization.ToggleScope() End If End Sub </script> <div> <asp:Panel ID="Panel1" Borderwidth="1" Width="230" BackColor="lightgray" Font-Names="Verdana, Arial, Sans Serif" > <asp:Label ID="Label1" Text=" Display Mode" Font-Bold="true" Font-Size="8" Width="120" /> <asp:DropDownList ID="DisplayModeDropdown" AutoPostBack="true" Width="120" OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" /> <asp:LinkButton ID="LinkButton1" Text="Reset User State" ToolTip="Reset the current user's personalization data for the page." Font-Size="8" OnClick="LinkButton1_Click" /> <asp:Panel ID="Panel2" GroupingText="Personalization Scope" Font-Bold="true" Font-Size="8" Visible="false" > <asp:RadioButton ID="RadioButton1" Text="User" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton1_CheckedChanged" /> <asp:RadioButton ID="RadioButton2" Text="Shared" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton2_CheckedChanged" /> </asp:Panel> </asp:Panel> </div><%@ control language="C#" classname="DisplayModeMenuCS"%> <script > // Use a field to reference the current WebPartManager control. WebPartManager _manager; void Page_Init(object sender, EventArgs e) { Page.InitComplete += new EventHandler(InitComplete); } void InitComplete(object sender, System.EventArgs e) { _manager = WebPartManager.GetCurrentWebPartManager(Page); String browseModeName = WebPartManager.BrowseDisplayMode.Name; // Fill the drop-down list with the names of supported display modes. foreach (WebPartDisplayMode mode in _manager.SupportedDisplayModes) { String modeName = mode.Name; // Make sure a mode is enabled before adding it. if (mode.IsEnabled(_manager)) { ListItem item = new ListItem(modeName, modeName); DisplayModeDropdown.Items.Add(item); } } // If Shared scope is allowed for this user, display the // scope-switching UI and select the appropriate radio // button for the current user scope. if (_manager.Personalization.CanEnterSharedScope) { Panel2.Visible = true; if (_manager.Personalization.Scope == PersonalizationScope.User) RadioButton1.Checked = true; else RadioButton2.Checked = true; } } // Change the page to the selected display mode. void DisplayModeDropdown_SelectedIndexChanged(object sender, EventArgs e) { String selectedMode = DisplayModeDropdown.SelectedValue; WebPartDisplayMode mode = _manager.SupportedDisplayModes[selectedMode]; if (mode != null) _manager.DisplayMode = mode; } // Set the selected item equal to the current display mode. void Page_PreRender(object sender, EventArgs e) { ListItemCollection items = DisplayModeDropdown.Items; int selectedIndex = items.IndexOf(items.FindByText(_manager.DisplayMode.Name)); DisplayModeDropdown.SelectedIndex = selectedIndex; } // Reset all of a user's personalization data for the page. protected void LinkButton1_Click(object sender, EventArgs e) { _manager.Personalization.ResetPersonalizationState(); } // If not in User personalization scope, toggle into it. protected void RadioButton1_CheckedChanged(object sender, EventArgs e) { if (_manager.Personalization.Scope == PersonalizationScope.Shared) _manager.Personalization.ToggleScope(); } // If not in Shared scope, and if user has permission, toggle // the scope. protected void RadioButton2_CheckedChanged(object sender, EventArgs e) { if (_manager.Personalization.CanEnterSharedScope && _manager.Personalization.Scope == PersonalizationScope.User) _manager.Personalization.ToggleScope(); } </script> <div> <asp:Panel ID="Panel1" Borderwidth="1" Width="230" BackColor="lightgray" Font-Names="Verdana, Arial, Sans Serif" > <asp:Label ID="Label1" Text=" Display Mode" Font-Bold="true" Font-Size="8" Width="120" /> <asp:DropDownList ID="DisplayModeDropdown" AutoPostBack="true" Width="120" OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" /> <asp:LinkButton ID="LinkButton1" Text="Reset User State" ToolTip="Reset the current user's personalization data for the page." Font-Size="8" OnClick="LinkButton1_Click" /> <asp:Panel ID="Panel2" GroupingText="Personalization Scope" Font-Bold="true" Font-Size="8" Visible="false" > <asp:RadioButton ID="RadioButton1" Text="User" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton1_CheckedChanged" /> <asp:RadioButton ID="RadioButton2" Text="Shared" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton2_CheckedChanged" /> </asp:Panel> </asp:Panel> </div>Guarde el archivo.
Nota:Aunque este control de usuario puede permitir a los usuarios de la página de elementos web alternar entre el modo compartido y el modo de personalización del usuario, la característica de personalización exige que el usuario tenga los permisos adecuados, tal como se especifica en el archivo Web.config. Este tutorial no muestra cómo conceder estos derechos, por lo que la característica no está habilitada. Por consiguiente, los botones de opción compartidos y de usuario del control de usuario están ocultos al ejecutar la página. Para obtener más información sobre la personalización, vea Personalización de elementos Web.
Para permitir a los usuarios cambiar el diseño
Abra la página WebPartsDemo.aspx.
Cambie a la vista Diseño.
Coloque el punto de inserción justo detrás del control WebPartManager que ha agregado anteriormente. Presione ENTRAR para crear una línea en blanco detrás del control WebPartManager.
Arrastre el control de usuario que acaba de crear (DisplayModeMenu.ascx) hasta la página WebPartsDemo.aspx y colóquelo en la línea en blanco.
Arrastre un control EditorZone desde la ficha Elementos Web del Cuadro de herramientas hasta la celda de tabla abierta que queda en la página WebPartsDemo.aspx.
Desde la ficha Elementos Web del Cuadro de herramientas, arrastre un control AppearanceEditorPart y un control LayoutEditorPart hasta el control EditorZone.
Cambie a la vista Código fuente.
El código resultante en la celda de la tabla debe ser similar al código siguiente.
<td valign="top"> <asp:EditorZone ID="EditorZone1" > <ZoneTemplate> <asp:AppearanceEditorPart ID="AppearanceEditorPart1" /> <asp:LayoutEditorPart ID="LayoutEditorPart1" /> </ZoneTemplate> </asp:EditorZone> </td>Nota:Si bien los controles AppearanceEditorPart y LayoutEditorPart se utilizan en este tutorial, los controles BehaviorEditorPart y PropertyGridEditorPart no se utilizan, puesto que exigen una configuración que va más allá del alcance del tutorial.
Guarde el archivo WebPartsDemo.aspx.
Ha creado un control de usuario que le permite cambiar los modos de presentación y el diseño de la página, y ha establecido una referencia al control en la página Web primaria.
Ahora puede probar la función de edición de páginas y cambio de diseño.
Para probar los cambios del diseño
Cargue la página en un explorador.
En el menú Modo de presentación, haga clic en Editar.
Se muestran los títulos de las zonas.
Arrastre el control Mis vínculos por la barra de título desde la zona Sidebar hacia la parte inferior de la zona Main.
La página será similar a lo que aparece a continuación:
Página de demostración de elementos Web con el control Mis vínculos desplazado
.gif)
Haga clic en Modo de presentación y, a continuación, en Examinar.
Se actualiza la página, los nombres de zona desaparecen y el control Mis vínculos permanece donde se colocó inicialmente.
Para probar que la personalización funciona, cierre el explorador y, a continuación, vuelva a cargar la página. Los cambios que realizó se guardan para sesiones del explorador subsiguientes.
En el menú Modo de presentación, haga clic en Editar.
Ahora, cada control de la página se muestra con una flecha descendente en la barra de título, que contiene el menú desplegable de verbos.
Haga clic en la flecha para mostrar el menú de verbos en el control Mis vínculos y, a continuación, haga clic en Editar.
Aparece el control EditorZone, mostrando los controles EditorPart que ha agregado.
En la sección Apariencia del control de edición, cambie el Título a Mis favoritos. En la lista Tipo de cromo, seleccione Sólo el título y, a continuación, haga clic en Aplicar.
La captura de pantalla siguiente muestra la página en modo de edición.
Página de demostración de elementos Web en modo de edición
.gif)
En el menú Modo de presentación, haga clic en Examinar para volver al modo de exploración.
El control tiene ahora un título actualizado y no tiene borde, como se muestra en la captura de pantalla siguiente.
Página de demostración de elementos Web modificada
.gif)
Agregar elementos Web en tiempo de ejecución
También puede habilitar a los usuarios para que agreguen controles de elementos Web a la página en tiempo de ejecución. Para ello, configure la página con un catálogo de elementos Web que contenga una lista de los controles de elementos Web que desee poner a disposición de los usuarios.
| Nota: |
|---|
En este tutorial, va a crear una plantilla que tiene los controles FileUpload y Calendar. Esto le permitirá probar la funcionalidad básica del catálogo, pero los controles de elementos Web resultantes no tendrán ninguna funcionalidad real. Si tiene un control de usuario o Web personalizado, puede sustituirlo por el contenido estático. |
Para permitir a los usuarios agregar elementos Web en tiempo de ejecución
Abra la página WebPartsDemo.aspx.
Cambie a la vista Diseño.
Desde la ficha Elementos Web del cuadro de herramientas, arrastre un control CatalogZone hasta la columna derecha de la tabla, por debajo el control EditorZone.
Ambos controles pueden estar en la misma celda de la tabla porque no se mostrarán al mismo tiempo.
En el panel Propiedades, asigne la cadena Agregar elementos Web a la propiedad HeaderText del control CatalogZone.
Desde la ficha Elementos Web del Cuadro de herramientas, arrastre un control DeclarativeCatalogPart hasta el área de contenido del control CatalogZone.
Haga clic en la flecha del ángulo superior derecho del control DeclarativeCatalogPart para exponer su menú Tareas y, a continuación, seleccione Editar plantillas.
Desde la ficha Estándar del Cuadro de herramientas, arrastre un control FileUpload y un control Calendar hasta la sección WebPartsTemplate del control DeclarativeCatalogPart.
Cambie a la vista Código fuente y compruebe el código fuente del elemento asp:catalogzone.
Fíjese que el control DeclarativeCatalogPart tiene un elemento webpartstemplate con los dos controles de servidor contenidos que se podrán agregar a la página desde el catálogo.
Nota:Si tiene un control personalizado, éste es el lugar en que se tiene que sustituir por uno de los controles de servidor del ejemplo, si bien para ello hay que realizar pasos que van más allá del alcance de este tutorial. Para obtener información adicional, vea el ejemplo de código de la documentación de la clase WebPart.
Agregue una propiedad Title a cada uno de los controles que ha agregado al catálogo, utilizando el valor de cadena que se muestra para cada título en el siguiente ejemplo de código. Si bien el título no es una propiedad que se pueda establecer habitualmente en estos dos controles de servidor en tiempo de diseño, si un usuario agrega los controles a una zona WebPartZone desde el catálogo en tiempo de ejecución, cada uno está contenido en un control GenericWebPart. Así, pueden actuar como controles de elementos Web, por lo que podrán mostrar títulos.
El código de los dos controles incluidos en el control DeclarativeCatalogPart será similar al que figura a continuación.
<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" > <WebPartsTemplate> <asp:Calendar ID="Calendar1" title="My Calendar" /> <asp:FileUpload ID="FileUpload1" title="Upload Files" /> </WebPartsTemplate> </asp:DeclarativeCatalogPart>Guarde la página.
Ya puede probar el catálogo.
Para probar el catálogo de elementos Web
Cargue la página en un explorador.
En el menú Modo de presentación, haga clic en Catálogo.
Se muestra el catálogo titulado Agregar elementos Web.
Vuelva a arrastrar el control Mis favoritos desde la zona Main hasta la parte superior de la zona Sidebar.
En el catálogo Agregar elementos Web, active ambas casillas y, a continuación, seleccione Principal en la lista de zonas disponibles.
Haga clic en Agregar en el catálogo.
Los controles se agregan a la zona Main. Si lo desea, puede agregar varias instancias de controles del catálogo a la página. En la siguiente captura de pantalla se muestra la página con el control de carga de archivos y el calendario en la zona Main.
Controles agregados a la zona Principal desde el catálogo
.gif)
En el menú Modo de presentación, haga clic en Examinar.
El catálogo desaparece y se actualiza la página.
Cierre el explorador y, a continuación, vuelva a cargar la página.
Los cambios que realizó se mantienen.
Pasos siguientes
En este tutorial se han mostrado los principios básicos de la utilización de los controles de elementos Web sencillos en una página Web ASP.NET. Podían interesarle experimentar con características adicionales y más complejas de los elementos Web. Sugerencias para una exploración más a fondo:
- Cree controles de elementos Web que proporcionen funcionalidad más compleja que los elementos Web estáticos de este tutorial. Puede crear controles de elementos Web como controles de usuario o controles personalizados. Para obtener información detallada, consulte la documentación de la clase WebPart.
Vea también
Tareas
Tutorial: Crear una página de elementos Web
Conceptos
Información general sobre los elementos Web ASP.NET
Referencia
Información general sobre el conjunto de controles de elementos web