Cómo: Generar y ejecutar el ejemplo de control de elementos Web enlazado a datos

Actualización: noviembre 2007

Este tema contiene instrucciones para generar y ejecutar el control WebPart enlazado a datos, para el que se proporciona un ejemplo completo de código en el tema Ejemplo de un control de elementos Web enlazado a datos. En el código de ejemplo se muestra cómo crear un control de servidor personalizado que enlaza un control GridView a un origen de datos, pero también hereda de la clase WebPart para poder participar en aplicaciones de elementos Web. En este tema se proporciona información relacionada que necesitará para compilar el ejemplo de código y configurar una aplicación Web ASP.NET para ejecutar el control como control de elementos Web.

Compilar el control WebPart

Para ejecutar el ejemplo de código debe compilar este código fuente. Puede compilarlo explícitamente y colocar el ensamblado resultante en la carpeta Bin de su sitio Web o en la caché de ensamblados global. Como alternativa, puede colocar el código fuente en la carpeta App_Code de su sitio, donde se compilará dinámicamente en tiempo de ejecución. En este ejemplo de código se utiliza compilación dinámica. Para ver un tutorial en el que muestra cómo realizar una compilación, vea Tutorial: Desarrollar y utilizar un control de servidor personalizado.

Para compilar dinámicamente el control WebPart enlazado a datos

  1. En la carpeta raíz de la aplicación Web, cree una carpeta con el nombre App_Code.

  2. Obtenga el código fuente para el control personalizado WebPart enlazado a datos del tema Ejemplo de un control de elementos Web enlazado a datos. Coloque el archivo de código fuente en la carpeta App_Code. El nombre del archivo no es importante, ya que se utiliza compilación dinámica, pero la extensión debe ser la que corresponda al lenguaje que utilice (por ejemplo, .cs o .vb).

Utilizar el control en una aplicación de elementos Web

Para configurar una aplicación de modo que utilice elementos Web sólo es necesario disponer de un sitio Web ASP.NET capaz de autenticar usuarios de forma individual, así como una base de datos habilitada para controlar servicios de aplicaciones que incluyan personalización. Para este ejemplo (dado que se utiliza un control enlazado a datos), también deberá crear en el archivo Web.config una cadena de conexión que permita que el origen de datos se conecte a la base de datos de ejemplo Northwind. Una vez configurada la aplicación, en todas las aplicaciones de elementos Web deberá agregar un control WebPartManager y, como mínimo un control WebPartZone a cada página Web que vaya a alojar los controles de servidor y WebPart en la aplicación de elementos Web. En el segundo procedimiento que se indica a continuación se muestra cómo agregar estos controles y cómo ejecutar los demás pasos necesarios para preparar la página de modo que se pueda ejecutar el control enlazado a datos.

Para configurar una aplicación ASP.NET de modo que ejecute controles de elementos Web

  1. Asegúrese de que tiene una aplicación Web ASP.NET configurada para reconocer usuarios individuales. Si necesita indicaciones acerca de cómo crear un sitio de este tipo, 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.

  2. Asegúrese de que dispone de 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 (SSE) para almacenar datos de personalización. En este tema se utilizan 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 parte opcional de la instalación o como 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.

  3. Cree una cadena de conexión para que el control enlazado a datos pueda conectarse a la base de datos Northwind del ejemplo. Para ejecutar el ejemplo, necesitará acceso a la base de datos Northwind de ejemplo que se proporciona con SQL Server. Si no tiene instalada la base de datos de ejemplo Northwind, puede descargar secuencias de comandos para crear e instalar la base de datos desde el Centro de descarga de Microsoft.

    Es recomendable colocar las cadenas de conexión en el archivo archivo Web.config para la aplicación. Para obtener más información sobre archivos de configuración, vea Archivos de configuración de ASP.NET. En el ejemplo de código siguiente se muestra una cadena de conexión en el archivo Web.config, que establece conexión con una instancia local de Northwind, la cual se ejecuta en SSE. Observe que las comillas sencillas (') que normalmente delimitarían la ruta de acceso al archivo de base de datos se representan como entidades ("). Es un requisito porque Web.config es un archivo XML.

    <connectionStrings>
  <add name="nwind" 
    connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=
    &quot;C:\SQL Server 2000 Sample Databases\NORTHWND.MDF&quot;;
    Initial Catalog=Northwind;Integrated Security=True;"
    providerName="System.Data.SqlClient" />
</connectionStrings>
    Nota:

    Es recomendable cifrar cualquier información confidencial, como puede ser una contraseña, que se encuentre en una cadena de conexión. Para obtener detalles sobre cómo cifrar los datos de configuración, vea Tutorial: Cifrar la información de configuración mediante la configuración protegida.

  4. En la sección <system.web> del archivo Web.config, agregue un elemento <webparts>. Esta operación no es necesaria para todas las aplicaciones de elementos Web, pero algunas características de las aplicaciones de elementos Web se deben configurar en esta sección si se van a utilizar. El control de ejemplo enlazado a datos WebPart se habilita para exportar un archivo de configuración que contiene sus datos de estado y propiedad. Dado que la característica de exportación está deshabilitada de forma predeterminada en las aplicaciones de elementos Web, debe habilitarla en la sección <webParts>. Agregue un atributo enabledExport al elemento <webParts> y establezca su valor en true, como en el ejemplo de código siguiente.

    <webParts enableExport="true" />

  5. Guarde y cierre el archivo Web.config.

Para preparar una página Web con el fin de alojar controles de elementos Web

  1. Cree un control de usuario que permita a los usuarios cambiar entre los modos de presentación de elementos Web disponibles en la página Web. Este control y el paso siguiente no son necesarios para ejecutar el control de elementos Web enlazado a datos, pero se trata de una característica que resulta de utilidad en muchas páginas de elementos Web. Pegue en un editor el código siguiente para el control de usuario y guarde en la carpeta raíz de la aplicación Web el archivo, con el nombre Displaymodemenucs.ascx o Displaymodemenuvb.ascx (en función del lenguaje que utilice).

    <!-- This user control recognizes what display modes are possible 
on a page, given the zones that are present, and enables users to 
switch among the display modes. -->
<%@ control language="vb" classname="DisplayModeMenuVB"%>

<script >

' Use a field to reference the current WebPartManager.
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 dropdown 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 + " Mode", modeName)
            DisplayModeDropdown.Items.Add(item)
        End If
    Next mode

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 


Sub Page_PreRender(ByVal sender As Object, ByVal e As EventArgs) 
    DisplayModeDropdown.SelectedValue = _manager.DisplayMode.Name

End Sub 

</script>
<div>
  <asp:DropDownList ID="DisplayModeDropdown" 

    AutoPostBack="true" 
    OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
</div>

    <!-- This user control recognizes what display modes are possible 
on a page, given the zones that are present, and enables users to 
switch among the display modes. -->
<%@ control language="C#" classname="DisplayModeMenuCS"%>

<script >

 // Use a field to reference the current WebPartManager.
  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 dropdown 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 + " Mode", modeName);
        DisplayModeDropdown.Items.Add(item);
      }
    }

  }

  // 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;

  }

  void Page_PreRender(object sender, EventArgs e)
  {
    DisplayModeDropdown.SelectedValue = _manager.DisplayMode.Name;
  }

</script>
<div>
  <asp:DropDownList ID="DisplayModeDropdown" 

    AutoPostBack="true" 
    OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
</div>

  2. Cree una nueva página ASP.NET para alojar el control WebPart personalizado y los demás controles. Agregue una directiva Register a la página, justo debajo de la directiva Page, para registrar el control de usuario recién creado. El contenido de la directiva depende del lenguaje que está utilizando y debería ser similar al del ejemplo que se muestra a continuación.

    [Visual Basic]

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

    [C#]

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

  3. Agregue ahora una directiva Register para el control WebPart personalizado. Dado que en este tema se utiliza la compilación dinámica, no es necesario que agregue un atributo Assembly a la directiva. Agregue otra directiva Register justo debajo de la directiva anterior en el archivo, asigne una cadena arbitraria a su atributo tagprefix y asigne el espacio de nombres del control personalizado al atributo namespace, una vez más con arreglo al lenguaje que utilice, como en el ejemplo que se muestra a continuación.

    [Visual Basic]

    <%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.VB.Controls" %>

    <%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.CS.Controls" %>

  4. Agregue un elemento <asp:webpartmanager> a la página, justo en el interior del elemento <form>, como se muestra en el ejemplo de código siguiente. Se necesita un control WebPartManager en todas las páginas que utilizan elementos Web.

    <asp:webpartmanager id="WebPartManager1" >
</asp:webpartmanager>

  5. Declare el control de usuario para cambiar de modo de presentación, justo después del elemento <asp:webpartmanager>. La forma en que se declara el control depende del lenguaje que se está utilizando, como en el ejemplo de código que se muestra a continuación.

    [Visual Basic]

    <uc1:displaymodevb id="Displaymodevb1"  />

    <uc1:displaymodecs id="Displaymodecs1"  />

  6. Después del control de usuario, agregue una tabla con una fila y dos columnas para estructurar el diseño de los controles en la página. El marcado de la tabla debe tener una apariencia similar a la del ejemplo de código siguiente.

    <table style="width: 80%; position: relative">
  <tr valign="top">
    <td style="width: 40%">
    </td>
    <td style="width: 40%">
    </td>
  </tr>
</table>

  7. Dentro de cada conjunto de etiquetas <td>, agregue un elemento <asp:webpartzone>. Es necesario que una zona que se derive de la clase WebPartZoneBase contenga los controles WebPart y les permita tener una funcionalidad completa por lo que se refiere a los elementos Web. El marcado para la primera zona debería tener una apariencia similar a la del ejemplo de código que aparece a continuación.

    <asp:webpartzone id="WebPartZone1"  
  style="position: relative" >
  <parttitlestyle font-size="14" font-names="Verdana" />
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

    El marcado para la segunda zona debería tener una apariencia como la que se muestra a continuación.

    <asp:webpartzone id="WebPartZone2"  
  style="position: relative" >
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

  8. Declare el control personalizado enlazado a datos WebPart en la primera zona, entre las etiquetas <zonetemplate>, tal como se muestra en el ejemplo de código siguiente. Tenga en cuenta que el marcado utiliza el prefijo de etiqueta definido en la directiva Register para el control, así como el nombre de la clase del control personalizado. Tenga también presente que una propiedad personalizada definida en el control ConnectionString aparece como un atributo con la cadena de conexión del archivo Web.config asignada. Este enfoque permite a los desarrolladores de páginas determinar qué cadena de conexión debe utilizarse para el control. El marcado debe tener una apariencia similar a la que se muestra a continuación.

    <aspSample:SmallGridWebPart id="grid1"  
  title="Customer Phone List" width="300" 
  connectionstring="<%$ ConnectionStrings:nwind %>"   />

  9. Para poder establecer comparaciones, declare un control de servidor de calendario ordinario en la segunda zona, entre las etiquetas <zonetemplate>. Dado que está colocando el control en un control WebPartZone, se comportará como un control WebPart en tiempo de ejecución. Para obtener información detallada acerca de cómo utilizar controles de servidor en aplicaciones de elementos Web, vea Usar controles de servidor ASP.NET en aplicaciones de elementos Web. El marcado debe tener una apariencia similar a la del ejemplo de código siguiente.

    <asp:calendar id="Calendar1"  
  style="position: relative"></asp:calendar>

  10. Guarde y cierre la página. Ahora está listo para ejecutar la página y probar el control WebPart personalizado. El código finalizado para la página debería ser similar al que figura en el ejemplo de código siguiente.

    <%@ Page Language="VB" %>
<!-- Register the user control to change display modes. -->
<%@ register src="displaymodevb.ascx" tagname="displaymodevb" 
    tagprefix="uc1" %>
<!-- Register the namespace that contains the custom WebPart 
control. Note there is no assembly attribute because this example 
uses dynamic compilation, by placing the source file for the 
control in an App_Code subfolder. -->
<%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.VB.Controls" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
      <asp:webpartmanager id="WebPartManager1" >
      </asp:webpartmanager>
      <uc1:displaymodevb id="Displaymodevb1"  />
      <br />
      <table style="width: 80%; position: relative">
        <tr valign="top">
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone1"  
              style="position: relative" >
              <parttitlestyle font-size="14" font-names="Verdana" />
              <zonetemplate>
                <aspSample:SmallGridWebPart id="grid1"  
                  title="Customer Phone List" width="300" 
                  connectionstring="<%$ ConnectionStrings:nwind %>"  
                  />
              </zonetemplate>
            </asp:webpartzone>
          </td>
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone2"  
              style="position: relative">
              <zonetemplate>
                <asp:calendar id="Calendar1"  
                  style="position: relative"></asp:calendar>
              </zonetemplate>
            </asp:webpartzone>
          </td>
        </tr>
      </table>
    </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>
<!-- Register the user control to change display modes. -->
<%@ register src="displaymodecs.ascx" tagname="displaymodecs" 
    tagprefix="uc1" %>
<!-- Register the namespace that contains the custom WebPart 
control. Note there is no assembly attribute because this example 
uses dynamic compilation, by placing the source file for the 
control in an App_Code subfolder. -->
<%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.CS.Controls" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
      <asp:webpartmanager id="WebPartManager1" >
      </asp:webpartmanager>
      <uc1:displaymodecs id="Displaymodecs1"  />
      <br />
      <table style="width: 80%; position: relative">
        <tr valign="top">
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone1"  
              style="position: relative" >
              <parttitlestyle font-size="14" font-names="Verdana, Arial" />
              <zonetemplate>
                <aspSample:SmallGridWebPart id="grid1"  
                  title="Customer Phone List" width="300" 
                  connectionstring="<%$ ConnectionStrings:nwind %>"  
                  />
              </zonetemplate>
            </asp:webpartzone>
          </td>
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone2"  
              style="position: relative">
              <zonetemplate>
                <asp:calendar id="Calendar1"  
                  style="position: relative"></asp:calendar>
              </zonetemplate>
            </asp:webpartzone>
          </td>
        </tr>
      </table>
    </div>
    </form>
</body>
</html>

Vea también

Conceptos

Crear un control de elementos Web enlazado a datos

Ejemplo de un control de elementos Web enlazado a datos

  • Last updated on