Tutorial: Crear una página de elementos Web

Artículo
10/22/2014

Actualización: noviembre 2007

Este tutorial es una demostración práctica de los componentes y las tareas esenciales para crear páginas Web que utilizan controles de elementos Web.

En muchas aplicaciones Web es útil poder cambiar la apariencia del contenido, y permitir que los usuarios seleccionen y organicen el contenido que desean ver. La característica de elementos Web de ASP.NET consta de un conjunto de controles para crear páginas Web que presentan contenido modular, y que permiten a los usuarios cambiar la apariencia y el contenido de acuerdo con sus preferencias. Para obtener una introducción general a los elementos Web, vea Información general sobre los elementos Web ASP.NET. Para obtener una descripción de los componentes principales del conjunto de controles de elementos Web, varios de los cuales se utilizan en este tutorial, vea Información general sobre el conjunto de controles de elementos web.

Durante este tutorial creará una página que utiliza el conjunto de controles de elementos Web para crear una página Web que los usuarios pueden 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 un control de elementos Web.
Permitir que los usuarios personalicen el diseño de los controles de elementos Web en la página.
Permitir que los usuarios cambien la apariencia de un control de elementos Web.
Permitir que los usuarios elijan entre un catálogo de controles de elementos Web disponibles.

Requisitos previos

Para poder completar este tutorial, necesitará:

Servicios de Internet Information Server (IIS) instalados y configurados en el equipo que alojará el sitio. Para obtener información detallada acerca de la instalación y configuración de IIS, consulte la documentación de la Ayuda de IIS incluida con la instalación o la de IIS en línea en el sitio de Microsoft TechNet (Internet Information Services 6.0 Technical Resources).
Un sitio Web de ASP.NET que pueda identificar a usuarios individuales. Si ya tiene este tipo de sitio configurado, puede utilizarlo como punto de partida para este tutorial. De lo contrario, para obtener información acerca de cómo crear un directorio o sitio virtual, vea Cómo: Crear y configurar directorios virtuales en IIS 5.0 y 6.0 o Cómo: Crear y configurar sitios web ASP.NET locales en IIS 6.0.
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 Standard Edition para almacenar datos de personalización. En este tutorial se utiliza SSE y el proveedor de SQL predeterminado. Si tiene SSE instalado, no se necesita ninguna configuración. SSE está disponible con Microsoft Visual Studio 2005 como una parte opcional de la instalación o como una descarga gratuita desde Microsoft.com. Para utilizar una de las versiones completas de SQL Server, debe instalar y configurar una base de datos de servicios de aplicaciones ASP.NET, y configurar el proveedor de personalización de SQL para conectarse a esa 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. También puede crear y configurar un proveedor personalizado que se utilizará con otras bases de datos que no sean de SQL o con otras soluciones de almacenamiento. Para obtener información detallada y ejemplos de código, vea Implementar un proveedor de suscripciones.

Crear una página sencilla con elementos Web

En esta parte del tutorial creará una página que utiliza elementos Web para mostrar contenido estático. El primer paso para trabajar con elementos Web consiste en crear una estructura de página para contener los controles de elementos Web.

Nota:
No necesita hacer nada para habilitar la personalización de elementos Web; está habilitada de forma predeterminada para el conjunto de controles de elementos Web. La primera vez que ejecuta una página de elementos Web en un sitio, ASP.NET configura un proveedor de personalización predeterminado para almacenar la configuración de personalización del usuario. El proveedor predeterminado utiliza una base de datos creada en un subdirectorio del directorio de su sitio. Para obtener más información acerca de la personalización, vea Información general sobre la personalización de elementos Web.

No necesita hacer nada para habilitar la personalización de elementos Web; está habilitada de forma predeterminada para el conjunto de controles de elementos Web. La primera vez que ejecuta una página de elementos Web en un sitio, ASP.NET configura un proveedor de personalización predeterminado para almacenar la configuración de personalización del usuario. El proveedor predeterminado utiliza una base de datos creada en un subdirectorio del directorio de su sitio. Para obtener más información acerca de la personalización, vea Información general sobre la personalización de elementos Web.

Para crear una página Web

En un editor de texto, cree un nuevo archivo y agregue la declaración de página siguiente al principio del archivo.
```
<%@ page language="VB" %>
```
```
<%@ page language="C#" %>
```

Escriba etiquetas bajo la declaración de página para crear una estructura de página completa como se muestra en el ejemplo de código siguiente. Observe que la página incluye una tabla vacía con una fila y tres columnas. La tabla contendrá los controles de elementos Web que agregará después.

<html>
<head >
  <title>Web Parts Page</title>
</head>
<body>
  <h1>Web Parts Demonstration Page</h1>
  <form  id="form1">
  <br />
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td valign="top">
      </td>
      <td valign="top">
      </td>
      <td valign="top">
      </td>
    </tr>
  </table>
  </form>
</body>
</html>

Asigne el nombre WebPartsDemo.aspx al archivo y guárdelo en el directorio del sitio Web.

El paso siguiente consiste en preparar las zonas. Las zonas son controles compuestos que ocupan una región especificada de una página y contienen controles de elementos Web.

Para agregar zonas a la página

Justo debajo del elemento <form> de la página, agregue un elemento <asp:webpartmanager>, como se muestra en el ejemplo siguiente.
```
<asp:webpartmanager id="WebPartManager1"  />
```
El control WebPartManager es necesario en cada página que utiliza controles de elementos Web.
Agregue un elemento <asp:webpartzone> dentro del primer elemento <td> de la tabla y asigne los valores de sus propiedades como se muestra en el ejemplo de código siguiente. Observe que el elemento <asp:webpartzone> también contiene un elemento <zonetemplate>; los controles de elementos Web se colocan dentro de <zonetemplate>.
```
<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td valign="top">
      <asp:webpartzone id="SideBarZone"  
        headertext="Sidebar">
        <zonetemplate>
        </zonetemplate>
      </asp:webpartzone>
    </td>
```
Agregue un elemento <asp:webpartzone> dentro del segundo elemento <td> de la tabla y asigne los valores de sus propiedades como se muestra en el ejemplo de código siguiente.
```
<td valign="top">
   <asp:webpartzone id="MainZone"  headertext="Main">
     <zonetemplate>
     </zonetemplate>
   </asp:webpartzone>
</td>
```
Guarde el archivo WebPartsDemo.aspx.

La página tiene ahora dos zonas distintas que puede controlar por separado. Sin embargo, ninguna zona tiene contenido, por lo que el paso siguiente consiste en crear contenido. En este tutorial trabajará con controles de elementos Web que sólo muestran contenido estático.

Un elemento <zonetemplate> especifica el diseño de la zona de elementos Web. Dentro de la plantilla de zona puede agregar cualquier control de servidor Web, ya sea un control personalizado de elementos Web, un control de usuario o un control de servidor existente. Tenga en cuenta que en este tutorial está utilizando el control de servidor Label y que dentro de él simplemente está agregando texto estático. Cuando pone un control de servidor ASP.NET normal en una zona WebPartZone, ASP.NET lo trata como un control de elementos Web en tiempo de ejecución, lo que le permite utilizar la mayoría de las características de los elementos Web de un control de servidor normal.

Para crear contenido para las zonas

Dentro del elemento <zonetemplate> para la zona Main, agregue un elemento <asp:label> con algún contenido, como se muestra en el ejemplo de código siguiente.

<asp:webpartzone id="MainZone"  headertext="Main">
  <zonetemplate>
    <asp:label id="contentPart"  title="Content">
      <h2>Welcome to My Home Page</h2>
      <p>Use links to visit my favorite sites!</p>
    </asp:label>
  </zonetemplate>
</asp:webpartzone>

Guarde el archivo WebPartsDemo.aspx.
Cree un nuevo archivo en el editor de texto. Este archivo contendrá un control de usuario que también se puede agregar a la página como un control de elementos Web.

Nota:

El control de búsqueda para este tutorial no implementa la funcionalidad de búsqueda real; sólo se utiliza para mostrar las características de elementos Web.

Nota:
El control de búsqueda para este tutorial no implementa la funcionalidad de búsqueda real; sólo se utiliza para mostrar las características de elementos Web.

En la parte superior del nuevo archivo, agregue una declaración de control, como se muestra en el ejemplo siguiente.

<%@ control language="VB" classname="SearchUserControl" %>

<%@ control language="C#" classname="SearchUserControl" %>

Bajo la declaración del control, agregue un par de etiquetas <script> y dentro de ellas agregue código para crear una propiedad personalizable. Observe que la propiedad ResultsPerPage tiene un atributo Personalizable. Esta propiedad permitiría a los usuarios del control personalizar cuántos resultados de la búsqueda se devolverán por página si proporcionara un control de edición con la interfaz de usuario para cambiar el valor en la vista Diseño. El código para el control debe ser similar al ejemplo de código siguiente.
```
<%@ control language="VB" classname="SearchUserControl" %>
<script >
  Private results As Integer

  <Personalizable()> _
  Property ResultsPerPage() As Integer

    Get
      Return results
    End Get

    Set(ByVal value As Integer)
      results = value
    End Set

  End Property
</script>
```
```
<%@ control language="C#" classname="SearchUserControl" %>
<script >
  private int results;

  [Personalizable]
  public int ResultsPerPage
  {
    get
      {return results;}

    set
      {results = value;}
  }    
</script>
```
Agregue un cuadro de texto y un botón debajo del elemento <script> para proporcionar la interfaz de usuario básica para un control de búsqueda, como se muestra en el ejemplo de código siguiente.
```
<asp:textbox  id="inputBox"></asp:textbox>
<br />
<asp:button  id="searchButton" text="Search" />
```

Asigne al archivo el nombre SearchUserControlVB.ascx o SearchUserControlCS.ascx (dependiendo del lenguaje que esté utilizando) y guárdelo en el mismo directorio que la página WebPartsDemo.aspx.

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 del cliente malintencionadas. De manera predeterminada, las páginas Web de ASP.NET validan la entrada del usuario para asegurarse de que ésta 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.

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 del cliente malintencionadas. De manera predeterminada, las páginas Web de ASP.NET validan la entrada del usuario para asegurarse de que ésta 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.

Ahora puede agregar controles de elementos Web a la zona Sidebar. Agregará dos controles a la zona Sidebar, uno de los cuales contiene una lista de vínculos y otro es el control de usuario que creó en el procedimiento anterior. Los vínculos se agregan como un único control de servidor Label estándar, de manera similar a como creó el texto estático para la zona Main. Sin embargo, aunque los controles de servidor individuales contenidos en el control de usuario podrían estar contenidos directamente en la zona, en este caso no lo están. En su lugar, forman parte del control de usuario que creó en el procedimiento anterior. Esto ilustra una forma habitual de empaquetar los controles y la funcionalidad adicional que desea tener en un control de usuario y, después, hacer referencia a dicho control de usuario en una zona como un control de elementos Web.

En tiempo de ejecución, el conjunto de controles de elementos Web contiene ambos controles con controles GenericWebPart. Cuando un control GenericWebPart contiene un control de servidor Web, el control de elemento genérico es el control primario y puede tener acceso al control de servidor mediante la propiedad ChildControl del control primario. Este uso de los 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 crear contenido para la zona de la barra lateral

Abra la página WebPartsDemo.aspx en el editor de texto.

En la parte superior de la página, justo después de la declaración de página, agregue la declaración siguiente para hacer referencia al control de usuario recién creado.

<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrolvb.ascx" %>

<%@ register tagprefix="uc1" tagname="SearchUserControl" 
  src="searchusercontrolcs.ascx" %>

Dentro del elemento <zonetemplate> para la zona Sidebar, agregue un control Label que contenga varios vínculos. Debajo del control, haga referencia al control de usuario que creó previamente, como se muestra en el ejemplo de código siguiente.

<asp:webPartZone id="SidebarZone"  
  headertext="Sidebar">
  <zonetemplate>
    <asp:label  id="linksPart" title="Links">
      <a href="www.asp.net">ASP.NET site</a> 
      <br />
      <a href="www.gotdotnet.com">GotDotNet</a> 
      <br />
      <a href="www.contoso.com">Contoso.com</a> 
      <br />
    </asp:label>
    <uc1:SearchUserControl id="searchPart" 
      title="Search" />
  </zonetemplate>
</asp:WebPartZone>

Guarde el archivo WebPartsDemo.aspx.

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. Cada control de la página se muestra ahora con una flecha descendente en su barra de título, que contiene un menú desplegable denominado el menú de verbos. Los verbos son acciones que un usuario puede llevar a cabo en un control de servidor, como cerrar, minimizar o modificar un control. Cada elemento del menú de verbos es un verbo. La captura de pantalla siguiente muestra la página.

Página WebPartsDemo
Haga clic en la flecha descendente de la barra de título de un control para ver su menú de verbos, haga clic en el vínculo Minimizar y observe que el control se minimiza. Después, vuelva al menú de verbos y haga clic en Restaurar. Esto muestra los diferentes estados de presentación visual de los controles de elementos Web.

Permitir que los usuarios modifiquen páginas y cambien el diseño

Los elementos Web permiten a los usuarios cambiar el diseño de los controles de elementos Web arrastrándolos de una zona a otra. Además de permitir a los usuarios mover controles WebPart de una zona a otra, puede permitir que los usuarios modifiquen diversas características de los controles, incluyendo su apariencia, su diseño y su comportamiento. El conjunto de controles de elementos Web proporciona una funcionalidad de edición básica para los controles WebPart. Aunque no lo hará en este tutorial, también puede crear controles de editor personalizados que permitan a los usuarios modificar las características de los controles WebPart. Como ocurre con el cambio de la ubicación de un control WebPart, al modificar sus propiedades se utiliza la personalización de ASP.NET para guardar los cambios realizados por los usuarios.

En esta parte del tutorial agregará la posibilidad de que los usuarios modifiquen las características básicas de cualquier control WebPart de la página. Para habilitar estas características, agregará 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 página

En un nuevo archivo en el editor de texto, pegue el código siguiente. Este código utiliza características del conjunto de controles de elementos Web que permiten a una página cambiar su vista o su modo de presentación, y que también le permiten cambiar la apariencia física y el diseño de la página mientras se encuentra en determinados 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="&nbsp;Display Mode" 
      Font-Bold="true"
      Font-Size="8"
      Width="120" />
    <div>
    <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" />
    </div>
    <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="&nbsp;Display Mode" 
      Font-Bold="true"
      Font-Size="8"
      Width="120" />
    <div>
    <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" />
    </div>
    <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>

Asigne al archivo el nombre Displaymodemenu.ascx y guárdelo en el mismo directorio que las páginas anteriores que guardó.

Para permitir a los usuarios cambiar el diseño

En la página WebPartsDemo.aspx, agregue una directiva <register> para registrar el nuevo control de usuario en la página.

<%@ register TagPrefix="uc2" 
  TagName="DisplayModeMenuVB" 
  Src="DisplayModeMenu.ascx" %>

<%@ register TagPrefix="uc2" 
  TagName="DisplayModeMenuCS" 
  Src="DisplayModeMenu.ascx" %>

En la página WebPartsDemo.aspx, agregue una referencia declarativa al control de usuario inmediatamente debajo del elemento <asp:webpartmanager>.
```
<uc2:DisplayModeMenuVB ID="DisplayModeMenu1"  />
```
```
<uc2:DisplayModeMenuCS ID="DisplayModeMenu1"  />
```

Agregue un elemento <asp:editorzone> dentro del tercer elemento <td> de la tabla. Agregue un elemento <zonetemplate>, un elemento <asp:appearanceeditorpart> y un elemento <asp:layouteditorpart>. El código debe tener la apariencia del ejemplo siguiente.

<td valign="top">
  <asp:editorzone id="EditorZone1" >
    <zonetemplate>
      <asp:appearanceeditorpart 

        id="AppearanceEditorPart1" />
      <asp:layouteditorpart 

        id="LayoutEditorPart1" />
    </zonetemplate>
  </asp:editorzone>
</td>

Nota:
Aunque los controles AppearanceEditorPart y LayoutEditorPart se utilizan en este tutorial, los controles BehaviorEditorPart y PropertyGridEditorPart no se utilizan porque necesitan una configuración que queda fuera del ámbito de este 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 página, y ha hecho referencia al control en la página Web principal.

Ahora puede probar la posibilidad de modificar páginas y cambiar el diseño.

Para probar los cambios de diseño

Cargue la página en un explorador.
Haga clic en el menú desplegable Display Mode y seleccione Edit. Se mostrarán los títulos de zona.
Arrastre el control Links por su barra de título desde la zona Sidebar hasta la parte inferior de la zona Main. La página debe ser similar a la captura de pantalla siguiente.

Página de elementos Web modificada
Haga clic en el menú desplegable Display Mode y seleccione Browse. Se actualizará la página, desaparecerán los nombres de zona y el control Links seguirá estando donde lo colocó.
Para demostrar que la personalización está funcionando, cierre el explorador y cargue de nuevo la página. Los cambios que realizó se guardarán para futuras sesiones del explorador.
En el menú Display Mode, seleccione Edit.
Haga clic en la flecha para mostrar el menú de verbos del control Links. Haga clic en el verbo Modificar.

Aparecerá el control EditorZone y mostrará los controles EditorPart que agregó.
En la sección Apariencia del control de edición, cambie el Título a Mis favoritos, utilice la lista desplegable Tipo de cromo para seleccionar Sólo título y haga clic en Aplicar. La captura de pantalla siguiente sigue mostrando la página revisada en modo de edición.

Página revisada que muestra el control EditorZone
Haga clic en el menú Display Mode y seleccione Browse para volver al modo de exploración.

El control tiene ahora un título actualizado y ningún borde, como se muestra en la captura de pantalla siguiente.

Página revisada con el control Links actualizado

Agregar elementos Web en tiempo de ejecución

También puede permitir a los usuarios agregar controles de elementos Web a su página en tiempo de ejecución. Para ello, configure la página con un catálogo de elementos Web, que contiene una lista de controles de elementos Web que desea que estén disponibles para los usuarios.

Nota:
En este tutorial creará una plantilla que contiene controles FileUpload y Calendar. Esto le permitirá probar la funcionalidad básica del catálogo, pero los controles de elementos Web resultantes no tienen ninguna funcionalidad real. Si tiene un control Web o de usuario personalizado, puede sustituirlo por el contenido estático.

Para permitir a los usuarios agregar elementos Web en tiempo de ejecución

En el archivo WebPartsDemo.aspx, agregue un elemento <asp:catalogzone> dentro de la tercera columna de la tabla, justo debajo del elemento <asp:editorzone>. Agregue un elemento <zonetemplate> y, dentro de él, un elemento <asp:declarativecatalogpart> y un elemento <webpartstemplate>. Por último, agregue elementos <asp:fileupload> y <asp:calendar>. El código debe tener la apariencia del ejemplo de código siguiente.
```
<asp:catalogzone id="CatalogZone1"  
  headertext="Add Web Parts">
  <zonetemplate>
    <asp:declarativecatalogpart id="catalogpart1" 
       Title="My Catalog">
      <webPartsTemplate>
         <asp:fileupload  id="upload1" 
           title="Upload Files" />
         <asp:calendar  id="cal1" 
            Title="Team Calendar" />
      </webPartsTemplate>
    </asp:declarativecatalogpart>
  </zonetemplate>
</asp:catalogzone>
```
Nota:

Los dos controles EditorZone y CatalogZone pueden estar en la misma celda de la tabla porque no se muestran al mismo tiempo.
Guarde el archivo WebPartsDemo.aspx.

Nota:
Los dos controles EditorZone y CatalogZone pueden estar en la misma celda de la tabla porque no se muestran al mismo tiempo.

Ahora puede probar el catálogo.

Para probar el catálogo de elementos Web

Cargue la página en un explorador.
Haga clic en el menú desplegable Display Mode y seleccione Catalog.

Se mostrará el catálogo denominado Add Web Parts.
Vuelva a arrastrar el control Mis favoritos desde la zona Main hasta la parte superior de la zona Sidebar.
En el catálogo Add Web Parts, active ambas casillas de verificación y, a continuación, seleccione Main en la lista desplegable Add to.
Haga clic en Add en el catálogo. Los controles se agregarán a la zona Main. Si lo desea, puede agregar varias instancias de controles del catálogo a su página.

La captura de pantalla siguiente muestra la página con el control de carga de archivos y el calendario en la zona Main.

Controles agregados a la zona Main
Haga clic en el menú desplegable Display Mode y seleccione Browse. El catálogo desaparecerá y se actualizará la página.
Cierre el explorador. Cargue de nuevo la página. Los cambios que realizó se conservarán.

Pasos siguientes

Este tutorial ha ilustrado los principios básicos del uso de controles de elementos Web muy sencillos en una página Web ASP.NET. Quizás desee probar con otras características de elementos Web más sofisticadas. Sugerencias para una exploración más a fondo:

Cree controles de elementos Web que ofrezcan una funcionalidad más sofisticada que los controles estáticos de elementos Web de este tutorial. Puede crear controles de elementos Web como controles de usuario o como controles personalizados. Para obtener información detallada, consulte la documentación de la clase WebPart.

Vea también

Share via