Cómo implementar anida controles de usuario de Web en ASP.NET utilizando Visual C# .NET

Seleccione idioma Seleccione idioma
Id. de artículo: 317991 - Ver los productos a los que se aplica este artículo
Expandir todo | Contraer todo

En esta página

Resumen

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

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

Requisitos

En la lista siguiente se describe el hardware, el software, la infraestructura de red y los Service Packs recomendados que necesitará:
  • Microsoft Windows 2000 Professional, Windows 2000 Server, Windows 2000 Advanced Server o Windows XP Professional
  • Microsoft .NET framework
  • Microsoft Visual Studio .NET
  • Servicios de Microsoft Internet Information Server (IIS)

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

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

Crear controles de usuario

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

Generar el control de felicitación

  1. Siga estos pasos para agregar un nuevo control de usuario de Web se denomina GreetingCtrl.ascx:
    1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nodo del proyecto, elija Agregar y, 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 de y a continuación, arrastre un Web control Label de formularios desde el cuadro de herramientas hasta la página.
  3. En la ventana Propiedades, cambie la propiedad ID del control Label a saludo y, a continuación, borre el valor de la propiedad Text .
  4. Haga clic con el botón secundario 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 código - detrás de archivo en la clase GreetingCtrl :
    private string ctrlGreeting = "Welcome";
    					
  6. Agregue el código siguiente al código - detrás archivo 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 que se denomina GreetingMessage . GreetingMessage utiliza un bloque get (descriptor de acceso) y un bloque de conjunto (mutador) para recuperar los valores y para asignar valores para la variable ctrlGreeting .
  7. Reemplace el código existente en el controlador de eventos Page_Load con el siguiente código:
    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());
    	} 
    }
    					

Generar el control de menú

  1. Siga estos pasos para agregar un nuevo control de usuario de Web se denomina MenuCtrl.ascx:
    1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nodo del proyecto, elija Agregar y, a continuación, haga clic en Agregar Control de usuario Web .
    2. En el cuadro nombre , escriba MenuCtrl.ascx .
  2. Cambie a la 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>
    						
    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 Forms y otros controles de usuario.

    Además, observe que la directiva @ Register incluye atributos Src , el TagName y el TagPrefix .

    • El atributo TagPrefix determina un espacio de nombres único para el control de usuario. Esta diferencia 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 la ruta de acceso 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 haría con un control de servidor normal, incluya el siguiente atributo:
    runat="server"
    					
  3. Haga clic con el botón secundario en la página y, a continuación, haga clic en Ver código .
  4. Para declarar el GreetingCtrl para que se hace referencia a él en el código - detrás del archivo de clase y a la lista el control de formularios Web Forms tabla ( MenuTable ), agregue el siguiente código para el archivo de clase de código subyacente:
    protected NestedUserControls.GreetingCtrl MyGreetingControl;
    protected System.Web.UI.WebControls.Table MenuTable;
    						
    Nota : cuando esté en la vista Diseño en 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 declare una instancia del control de usuario en el archivo de clase de código subyacente a hacer referencia a él correctamente. Para obtener más información, vea la Troubleshooting de la sección de este artículo.
  5. Para especificar mediante programación vínculos de menú, agregue el código siguiente al código - detrás del archivo de clase 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);
    }
    						
    aviso que este código agrega el método BuildLink , que llama el método AddMenuItem para generar los hipervínculos en 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 .aspx o de control de usuario al que se agrega el control.

    En este ejemplo, se establecen el menú valores de hipervínculo en el propio control, se espera que se utilizará el control con los mismos 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 que 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 en función de qué servirá el control y cómo desea implementarla.
  6. Agregue el código siguiente al código - detrás del archivo de clase para crear una propiedad denominada BackGroundColor le 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 siguiente código:
    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 genera los hipervínculos para el control MenuCtrl .

Agregar el control de usuario a un Web Form

En esta sección, agregue el control de MenuCtrl que contiene el anidado GreetingCtrl 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 con el botón secundario del mouse en el nodo del proyecto, elija Agregar y, a continuación, haga clic en Agregar Web Forms .
    2. En el cuadro nombre , escriba SamplePage.aspx .
  2. Cambie a la 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>
    						
    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 se asocian con el proyecto.
  4. En el menú Generar en el entorno de desarrollo integrado Visual Studio .NET (IDE), haga clic en Generar solución para generar el proyecto.
  5. En el Explorador de soluciones, haga clic con el botón secundario del mouse en SamplePage.aspx y, a continuación, haga clic en Ver en el explorador . Observe cómo la GreetingCtrl y los controles MenuCtrl se representan en el explorador. Observe que ambos controles conservan su funcionalidad y parecen ser otra parte de la página Web.

Solución de problemas

Si no declara específicamente un control de usuario en el archivo de clase de código subyacente y si intenta hacer referencia el control de usuario en el código, puede recibir un error de generación es similar a la siguiente mensaje de error:
El tipo o espacio de nombres de nombre no se pudo encontrar ' User Control Name ' (¿falta una utilizando directiva o una referencia de ensamblado?)
Deberá declarar específicamente los controles de usuario cuando programa contra ellas en el archivo de clase de código en segundo plano.

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

Referencias

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

Convertir una página de formularios Web en un control de usuario
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: viernes, 14 de abril de 2006 - Versión: 4.6
La información de este artículo se refiere a:
  • Microsoft ASP.NET 1.1
  • Microsoft ASP.NET 1.0
  • Microsoft Visual C# .NET 2003 Standard Edition
  • Microsoft Visual C# .NET 2002 Standard Edition
Palabras clave: 
kbmt kbctrlcreate kbhowtomaster KB317991 KbMtes
Traducción automática
IMPORTANTE: Este artículo ha sido traducido por un software de traducción automática de Microsoft (http://support.microsoft.com/gp/mtdetails) en lugar de un traductor humano. Microsoft le ofrece artículos traducidos por un traductor humano y artículos traducidos automáticamente para que tenga acceso en su propio idioma a todos los artículos de nuestra base de conocimientos (Knowledge Base). Sin embargo, los artículos traducidos automáticamente pueden contener errores en el vocabulario, la sintaxis o la gramática, como los que un extranjero podría cometer al hablar el idioma. Microsoft no se hace responsable de cualquier imprecisión, error o daño ocasionado por una mala traducción del contenido o como consecuencia de su utilización por nuestros clientes. Microsoft suele actualizar el software de traducción frecuentemente.
Haga clic aquí para ver el artículo original (en inglés): 317991

Enviar comentarios

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com