Cómo implementar controles de usuario de Web anidados en ASP.NET mediante Visual C#.

Resumen

En este artículo paso a paso se muestra cómo implementar controles de usuario de Web anidados en una aplicación ASP.NET. Los conceptos son básicamente las mismas que cuando se crean controles de usuario Web para incluir en una página .aspx o en otro control de usuario Web, que normalmente se denomina anidamiento.

Una de las razones principales para utilizar los controles de usuario Web anidados es facilitar la reutilización del código. Al dividir la funcionalidad en los controles de usuario independiente, el desarrollo de controles de usuario puede beneficiarse de reutilizar el mismo código y, por tanto, la misma interfaz de control de usuario, lo que agrega valor a las páginas. aspx.

Requisitos

La lista siguiente describe el hardware recomendado, software, infraestructura de red y service packs que se necesitan:
  • Microsoft Windows 2000 Professional, Windows 2000 Server, Windows 2000 Advanced Server o Windows XP Professional
  • Microsoft.NET Framework
  • Microsoft Visual Studio .NET
  • Microsoft Internet Information Services (IIS)

Crear una aplicación Web ASP.NET utilizando .NET Visual C#

  1. Inicie Microsoft Visual Studio. NET.
  2. En el menú archivo, elija nuevo y, a continuación, haga clic en proyecto.
  3. Haga clic en Proyectos de Visual C# en Tipos de proyectoy, a continuación, en plantillas, haga clic en Aplicación Web de ASP.NET .
  4. En el cuadro ubicación , reemplace el nombre predeterminado de WebApplication#con NestedUserControls en la ruta de acceso de dirección URL. Si está utilizando el servidor local, puede dejar el nombre del servidor como http://localhost. La ruta de acceso siguiente aparece en el cuadro de ubicación :
    http://localhost/NestedUserControls

Crear controles de usuario

En las dos secciones siguientes, se crea un ejemplo de un sencillo control de usuario Web que recupera y muestra el nombre de un usuario en una cookie. A continuación, se anidarán este control en otro control de usuario Web (MenuCtrl.ascx).

Crear el Control de saludo

  1. Siga estos pasos para agregar un nuevo control de usuario Web denominado GreetingCtrl.ascx:
    1. En el Explorador de soluciones, haga clic en el nodo del proyecto, elija Agregary, a continuación, haga clic en Agregar Control de usuario Web.
    2. En el cuadro nombre , escriba GreetingCtrl.ascx.
  2. Cambie a la vista Diseño en el editor y, a continuación, arrastre un control Label de formularios Web Forms del cuadro de herramientas a la página.
  3. En la ventana Propiedades, cambie la propiedad ID del control Label a saludoy, a continuación, desactive el valor de la propiedad Text .
  4. Haga clic derecho en la página y, a continuación, haga clic en Ver código.
  5. Agregue la siguiente declaración de variable privada para el archivo de código subyacente en la clase GreetingCtrl :
    private string ctrlGreeting = "Welcome";
  6. Agregue el código siguiente al archivo de código subyacente después de la declaración de variable privada para ctrlGreeting:
    public string GreetingMessage{
    set{ctrlGreeting = value;}
    get{return ctrlGreeting;}
    }

    Este código agrega una propiedad denominada GreetingMessage. GreetingMessage utiliza un bloque get (descriptor de acceso) y un bloque de conjunto (mutador) para recuperar los valores y los valores de la variable ctrlGreeting .
  7. Reemplace el código existente en el controlador de eventos Page_Load con el código siguiente:
    private void Page_Load(object sender, System.EventArgs e){
    Greeting.Font.Bold = true;
    //Retrieves a cookie that contains the customer's name,
    //assuming that it may have been set elsewhere in the application.
    HttpCookie userName = Request.Cookies["Name"];

    //See if the cookie exists.
    if(userName.Value == null)
    {
    Greeting.Text = ctrlGreeting.ToString();
    }
    else
    {
    Greeting.Text = string.Format("{0} {1}",ctrlGreeting.ToString(),userName.Value.ToString());
    }
    }

Genere el Control menú

  1. Siga estos pasos para agregar un nuevo control de usuario Web denominado MenuCtrl.ascx:
    1. En el Explorador de soluciones, haga clic en el nodo del proyecto, elija Agregary, a continuación, haga clic en Agregar Control de usuario Web.
    2. En el cuadro nombre , escriba MenuCtrl.ascx.
  2. Cambie a vista HTML en el editor y, a continuación, agregue el código siguiente:
    <%@ Control Language="c#" AutoEventWireup="false" Codebehind="MenuCtrl.ascx.cs" Inherits="NestedUserControls.MenuCtrl" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%><%@ Register TagPrefix="uc1" TagName="GreetingCtrl" Src="GreetingCtrl.ascx" %>
    <asp:Table ID=MenuTable Runat=server>
    <asp:TableRow>
    <asp:TableCell HorizontalAlign="Center">
    <uc1:GreetingCtrl id="MyGreetingControl" runat="server"></uc1:GreetingCtrl>
    </asp:TableCell>
    </asp:TableRow>
    </asp:Table>

    De forma predeterminada, Visual Studio .NET agrega el código de la directiva @ Control y la directiva @ Register de la GreetingCtrl. Se utiliza la directiva @ Register para incluir controles de usuario en páginas de formularios Web y otros controles de usuario.

    Además, observe que la directiva @ Register incluye los atributos Src , TagNamey TagPrefix.

    • El atributo TagPrefix determina un espacio de nombres único para el control de usuario. Esto distingue entre varios controles de usuario con el mismo nombre.
    • El atributo TagName es el nombre único que seleccionó para el control de usuario.
    • El atributo Src es una ruta virtual al control de usuario.
    Nota: después de registrar un control de usuario Web, puede colocar la directiva @ Control en una página de formularios Web Forms como lo haría un control de servidor normal incluyendo el siguiente atributo:
    runat="server"
  3. Haga clic derecho en la página y, a continuación, haga clic en Ver código.
  4. Para declarar la GreetingCtrl de modo que se hace referencia en el archivo de clase de código subyacente y a la lista de control de formularios Web Forms tabla (MenuTable), agregue el código siguiente al archivo de clase de código subyacente:
    protected NestedUserControls.GreetingCtrl MyGreetingControl;protected System.Web.UI.WebControls.Table MenuTable;

    Nota: cuando se encuentra en la vista Diseño de Visual Studio .NET, puede arrastrar un control de usuario del explorador de soluciones en otro control de usuario o en una página .aspx. Muestra automáticamente el control con la directiva @ Register . Sin embargo, todavía debe declarar una instancia del control de usuario en el archivo de clase de código subyacente para hacer referencia a él correctamente. Para obtener más información, consulte la sección solución de problemasde este artículo.
  5. Para especificar mediante programación los vínculos de menú, agregue el código siguiente al archivo de clase de código subyacente para incluir un método AddMenuItem en el MenuCtrl:
    private void AddMenuItem(string linkName,string linkURL){
    TableRow menuRow = new TableRow();
    MenuTable.Rows.Add(menuRow);
    TableCell menuCell = new TableCell();
    BuildLink(menuCell, linkName, linkURL);
    menuRow.Cells.Add(menuCell);
    }

    private void BuildLink(TableCell menuCell, string linkCaption, string linkHRef)
    {
    HyperLink menuLink = new HyperLink();
    menuLink.Text = linkCaption;
    menuLink.NavigateUrl = linkHRef;
    menuCell.Controls.Add(menuLink);
    }

    Observe que este código agrega el método BuildLink , que llama al método AddMenuItem para crear los hipervínculos para el menú. Puede hacer que el método AddItem pública para exponer AddItem. Al exponer AddItem, puede establecer el menú elementos de hipervínculo desde cualquier página de aspx o de control de usuario al que se agrega el control.

    En este ejemplo, se establece el menú valores de hipervínculo en el propio control, se espera que se utilizará el control con el mismo hipervínculos en toda la aplicación. Mediante este método, puede modificar el control y asegúrese de que los cambios se aplican automáticamente a todas las páginas o a otros controles de usuario que utilizan el control.

    Si desea hacer pública AddItem y llamar a AddItem desde una página .aspx, debe modificar el código en cada página .aspx que implementa AddItem si cambiara los hipervínculos. Esto puede resultar útil si desea MenuCtrl ser más genérico y si tiene que establecer los hipervínculos basados en la página o en otro control de usuario al que se agrega el control. Esto depende de en qué papel servirá el control y cómo desea implementarla.
  6. Agregue el código siguiente al archivo de clase de código subyacente para crear una propiedad denominada BackGroundColor que permite establecer el color de fondo del control mediante la propiedad BackColor del control de formularios Web Forms tabla (MenuTable):
    public Color BackGroundColor{
    set{MenuTable.BackColor = value;}
    get{return MenuTable.BackColor;}
    }

  7. Reemplace el código existente en el controlador de eventos Page_Load para el MenuCtrl con el código siguiente:
    private void Page_Load(object sender, System.EventArgs e){
    //Adding a cookie for demonstration only.
    //This is typically set in another section of the application,
    //such as when you collect logon information.
    HttpCookie userName = new HttpCookie("Name", "Joe");
    Response.Cookies.Add(userName);

    this.AddMenuItem("MSN", "http://www.MSN.com");
    this.AddMenuItem("Microsoft", "http://www.microsoft.com");
    this.AddMenuItem(".NET Development Center","http://msdn.microsoft.com/netframework/default.aspx");

    MyGreetingControl.GreetingMessage = "Howdy";
    }

    Este código establece la propiedad GreetingMessage del control GreetingCtrl "Howdy". Además, este código crea los hipervínculos del control MenuCtrl .

Agregar el Control de usuario a un formulario Web Forms

En esta sección, agregue el control MenuCtrl que contiene el anidado GreetingCtrl a una página de formularios Web Forms que se denomina SamplePage.aspx.
  1. Siga estos pasos para agregar un nuevo Web Form de ASP.NET que se denomina SamplePage.aspx al proyecto:
    1. En el Explorador de soluciones, haga clic en el nodo del proyecto, elija Agregar y, a continuación, haga clic en Agregar formulario Web.
    2. En el cuadro nombre , escriba SamplePage.aspx.
  2. Cambie a vista HTML en el editor y, a continuación, agregue el código siguiente:
    <%@ Page language="c#" Codebehind="SamplePage.aspx.cs" AutoEventWireup="false" Inherits="NestedUserControls.SamplePage" %><%@ Register TagPrefix="uc1" TagName="MenuCtrl" Src="MenuCtrl.ascx" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    <HTML>
    <HEAD>
    <title>SamplePage</title>
    </HEAD>
    <body>
    <form id="SamplePage" method="post" runat="server">
    <TABLE WIDTH="150" BORDER="1" align=left>
    <TR>
    <TD><uc1:menuctrl id="Menu" runat="server" BackGroundColor="#99ccff"></uc1:menuctrl></TD>
    </TR>
    </TABLE>
    </form>
    </body>
    </HTML>

    De forma predeterminada, Visual Studio .NET agrega la directiva @ Page para usted.
  3. En el menú archivo , haga clic en Guardar todo para guardar el Web Form y otros archivos que están asociados con el proyecto.
  4. En el menú Generar en el entorno de desarrollo integrado (IDE) de Visual Studio .NET, haga clic en Generar solución para generar el proyecto.
  5. En el Explorador de soluciones, haga SamplePage.aspxy, a continuación, haga clic en Ver en el explorador. Observe cómo se representan los controles MenuCtrl y la GreetingCtrl en el explorador. Observe que ambos controles conserven su funcionalidad y parecen ser otra parte de la página Web.

Solución de problemas

Si no se declara específicamente un control de usuario en el archivo de clase de código subyacente y, a continuación, intenta hacer referencia al control de usuario en el código, puede recibir un error de compilación similar al siguiente mensaje de error:
El nombre de espacio de nombres o tipo 'Nombre de Control de usuario' no se encontró (¿falta una utilizando Directiva o una reference? de ensamblado)
Específicamente, se deben declarar controles de usuario cuando programa contra ellos en el archivo de clase de código subyacente.

Para obtener información adicional, haga clic en el número de artículo siguiente para verlo en Microsoft Knowledge Base:
Error de 316370 : Visual Studio .NET no genera una declaración de código subyacente para controles de usuario Web

Referencias

Para obtener información adicional acerca de los recursos de desarrollo de ASP.NET, haga clic en el número de artículo siguiente para verlo en Microsoft Knowledge Base:
305140 INFO: Guía básica de ASP.NET
Para obtener más información acerca de cómo utilizar los controles de usuario Web de ASP.NET, visite los siguientes sitios Web de MSDN:
Controles de usuario de Web Forms
http://msdn.microsoft.com/en-us/library/aa735701.aspx

Convertir un Web página a un Control de usuario de formularios
http://msdn.microsoft.com/en-us/library/aa719784.aspx

Controlar eventos de Control de usuario
http://msdn.microsoft.com/en-us/library/t4z863dh.aspx
Propiedades

Id. de artículo: 317991 - Última revisión: 17 ene. 2017 - Revisión: 1

Comentarios