Tutorial: Implementar la personalización de elementos Web con un control de usuario

Actualización: noviembre 2007

Este tutorial es una demostración práctica del procedimiento empleado para crear un control de usuario de ASP.NET que se base en la personalización de elementos Web para proporcionar valores predeterminados específicos del usuario en una página Web.

El control de elementos Web de ASP.NET permite crear páginas Web con diseños modulares en los que el usuario puede modificar el aspecto y el contenido para adaptarlos a sus preferencias. Una característica clave de los elementos Web, conocida como personalización, permite guardar la configuración específica del usuario para cada página y reutilizarla en sesiones futuras del explorador.

Con la ayuda de los elementos Web y la personalización, puede crear páginas Web que incluyen una característica útil para muchas aplicaciones Web: la capacidad de proporcionar valores predeterminados específicos del usuario en un formulario. Este tutorial muestra cómo se proporcionan los valores predeterminados específicos del usuario mediante la implementación de un control de usuario que se puede tratar como un control de elementos Web personalizable. Esta estrategia de desarrollo puede resultar útil si se está creando, por ejemplo, una aplicación que permita a los agentes del servicio al cliente rellenar formularios en pantalla. Los elementos Web y las funciones de personalización hacen posible que la página reconozca a cada agente. El control de usuario permite que cada agente guarde los valores predeterminados de los campos del formulario. De esta forma, esos valores se pueden rellenar automáticamente en las visitas posteriores a la página.

Nota:

El control de usuario creado en este tutorial no hereda de la clase WebPart. Este tutorial enseña que un control de usuario puede funcionar como un control WebPart. Durante el tutorial, el control de usuario se agrega a una zona WebPartZoneBase. Esto permite a ASP.NET insertar el control de usuario en un control GenericWebPart. De esta forma, el control de usuario funcionará como cualquier otro control WebPart y permitirá explorar la personalización.

Durante este tutorial aprenderá a:

  • Crear un control de usuario con propiedades personalizables cuyos valores se pueden guardar en almacenamiento a largo plazo.

  • Mostrar los valores predeterminados específicos del usuario en un formulario de una página Web.

  • Trabajar con el control de usuario en una zona como un control WebPart verdadero.

Nota:

Este tipo de aplicación se puede desarrollar utilizando los perfiles de ASP.NET. Sin embargo, en este caso no se almacena información sobre el usuario que se vaya a reutilizar en el conjunto de una aplicación, como una aplicación de carro de la compra. En lugar de esto, se guardan configuraciones o preferencias específicas del usuario para cada control, según las distintas páginas. Para obtener más información acerca de los perfiles, vea Información general sobre las propiedades de perfil de ASP.NET.

Requisitos previos

Para poder completar este tutorial, necesitará:

  • Servicios de Internet Information Server (IIS) instalado y configurado en el equipo que alojará el sitio. Para obtener información detallada sobre 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 usuarios individuales. Si ya tiene este sitio configurado, podrá utilizarlo como punto de partida en este tutorial. En caso contrario, para obtener información sobre la creación de un directorio o sitio virtual, vea Cómo: Crear y configurar directorios virtuales en IIS 5.0 y 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 para almacenar los datos de personalización. En este tutorial se utilizan SSE y el proveedor de SQL predeterminado. Si SSE está 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 que establezca conexión con 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 un ejemplo de código, vea Implementar un proveedor de suscripciones.

Crear un control de usuario personalizable

En esta parte del tutorial, creará un control de usuario que proporciona la interfaz de usuario de un formulario de información de agente. El control también expone las propiedades personalizables para la información de nombre y teléfono.

Nota:

No es necesario habilitar la personalización de elementos Web; está habilitada de forma predeterminada. Para obtener más información sobre la personalización, vea Información general sobre la personalización de elementos Web.

Para crear las propiedades personalizables del control de usuario

  1. En un editor de texto, cree un archivo nuevo. Agregue la declaración de control siguiente al principio del archivo, junto con las etiquetas <script> de apertura y cierre. El código debe tener el aspecto del ejemplo siguiente.

    <%@ control language="VB" classname="AccountUserControl" %>
<script >
</script>

    <%@ control language="C#" classname="AccountUserControl" %>
<script >
</script>

  2. Dentro de las etiquetas <script>, agregue código para crear dos propiedades personalizables: una llamada UserName y la otra llamada Phone, como se muestra en el ejemplo siguiente.

    Nota:

    Cada propiedad tiene un atributo Personalizable. Esto hace posible que la personalización de los elementos Web almacene los valores de las propiedades en una base de datos de proveedor.

    		 
      <Personalizable()> _
  Property UserName() As String

    Get
      If Textbox1.Text Is Nothing Or Textbox1.Text.Length < 0 Then
          Return String.Empty
      Else
          Return Textbox1.Text
      End If
    End Get

    Set(ByVal value As String)
      Textbox1.Text = value
    End Set

  End Property

  <Personalizable()> _
  Property Phone() As String

    Get
      If Textbox2.Text Is Nothing Or Textbox2.Text.Length < 0 Then
          Return String.Empty
      Else
          Return Textbox2.Text
      End If
    End Get

    Set(ByVal value As String)
      Textbox2.Text = value
    End Set

  End Property

      [Personalizable]
  public string UserName
  {
    get
    {
      if(Textbox1.Text == null | Textbox1.Text.Length < 0)
        return String.Empty;
      else
        return Textbox1.Text;
    }

    set
    {
      Textbox1.Text = value;
    }
  }

  [Personalizable]
  public string Phone
  {
    get
    {
      if(Textbox2.Text == null | Textbox2.Text.Length < 0)
        return String.Empty;
      else
        return Textbox2.Text;
    }

    set
    {
      Textbox2.Text = value;
    }
  }

  3. Asigne el nombre AccountUserControlCS.ascx o AccountUserControlVB.ascx (dependiendo del lenguaje que esté utilizando) al archivo y guárdelo en el directorio raíz del sitio Web.

    Nota de seguridad:

    Este control tiene un cuadro de texto que acepta datos del usuario, lo que puede suponer 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 de ASP.NET validan los datos proporcionados por el usuario para asegurarse de que no contienen ninguna secuencia de comandos o elementos 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 que ha agregado propiedades personalizables para guardar los valores predeterminados, puede agregar controles de interfaz de usuario al control de usuario para mostrar el nombre y el número de teléfono de un usuario.

Para agregar controles de interfaz de usuario al control de usuario

  1. Debajo de las etiquetas <script>, agregue un control Label y un control TextBox rodeados de etiquetas <div> que contengan el nombre del usuario, como se muestra en el siguiente ejemplo de código.

    <div>
<asp:label id="Label1" >Name</asp:label>
<asp:textbox id="Textbox1"  />
</div>

  2. Bajo el control que acaba de agregar, agregue un control Label y un control TextBox rodeados de etiquetas <div> que contengan el número de teléfono del usuario, como se muestra a continuación.

    <div>
<asp:label id="Label2" >Phone</asp:label>
<asp:textbox id="Textbox2"  />
</div>

  3. Bajo el control que acaba de agregar, agregue un elemento <asp:button> rodeado de etiquetas <div> para guardar la información del usuario mediante una devolución de datos. El código debe tener el aspecto del ejemplo siguiente.

    <div>
<asp:button id="Button1"  
  text="Save Form Values" />
</div>

  4. Guarde el archivo.

Hacer referencia al control de usuario como un control de elementos Web

Ahora que ha creado un control de usuario con propiedades personalizables, puede crear una página de formularios Web para alojar el control de usuario como control de elementos Web. Alojar el control como control de elementos Web es necesario para que las características de personalización funcionen.

Para hacer referencia al control de usuario como control de elementos Web

  1. En un editor de texto, cree un archivo nuevo. Agregue la declaración de página siguiente al principio del archivo.

    <%@ page language="VB" %>

    <%@ page language="C#" %>

  2. Bajo la declaración de página, agregue una declaración para hacer referencia al control de usuario que ha creado previamente, como se muestra en el ejemplo siguiente.

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

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

  3. Bajo la referencia al control, agregue la estructura de página básica siguiente para alojar el control de usuario como control de elementos Web.

    Nota:

    Para que el control de usuario funcione como control de elementos Web, la página debe contener un elemento <asp:webpartmanager> y el control de usuario debe estar contenido entre un elemento <asp:webpartzone> y un elemento <zonetemplate> consecutivos, como muestra el siguiente ejemplo de código.

    		 
    <html>
<head >
    <title>Personalizable User Control</title>
</head>
<body>
    <form id="form1" >
      <asp:webpartmanager id="WebPartManager1"   />
      <asp:webpartzone id="zone1"  headertext="Main">
        <zonetemplate>
          <uc1:AccountUserControl 

            id="accountwebpart"
            title="Agent Information" /> 
        </zonetemplate>
      </asp:webpartzone>
    </form>
</body>
</html>

  4. Asigne al archivo el nombre Hostaccountcontrol.aspx y guárdelo en el mismo directorio que el control de usuario.

    Ha creado un control de usuario personalizable y ha hecho referencia a él como control de elementos Web en una página de formularios Web Forms.

El último paso consiste en probar el control de usuario.

Para probar el control de usuario personalizable

  1. Cargue la página Hostaccountcontrol.aspx en un explorador.

  2. Escriba valores en los campos Name (Nombre) y Phone (Teléfono) y haga clic en el botón Guardar valores del formulario.

  3. Cierre el explorador.

  4. Vuelva a cargar la página en un explorador.

    Los valores especificados previamente deben aparecer en el formulario. Estos son los valores que se guardaron en las propiedades personalizables y se restablecieron desde la base de datos al volver a cargar la página en el explorador.

  5. Escriba los nuevos valores en el formulario, pero no haga clic en el botón para guardarlos. Cierre el explorador.

  6. Vuelva a cargar la página en un explorador. Los valores originales especificados y guardados en las propiedades personalizadas deben reaparecer en el formulario.

Pasos siguientes

Este tutorial ha mostrado las tareas básicas implicadas en la creación de un control de usuario con propiedades personalizables. Ha creado un control que permite guardar una configuración específica del usuario para el control y la página, y mostrar esa configuración guardada cuando el usuario vuelve a visitar la página en una nueva sesión del explorador. Sugerencias para una exploración más a fondo:

Vea también

Conceptos

Información general sobre los elementos Web ASP.NET

Información general sobre la personalización de elementos Web

  • Last updated on