Además de los controles HTML y de servidor Web, se puede crear
fácilmente sus propios controles personalizados y reutilizables empleando las mismas técnicas que
hemos aprendido para desarrollar páginas de formularios Web Forms. Estos controles se denominan
controles de usuario.
Los controles de usuario ofrecen una forma sencilla de dividir y reutilizar funciones de interfaz de usuario comunes entre las aplicaciones Web ASP.NET. Al igual que con una página de formularios Web Forms, puede crear estos controles con cualquier editor de texto.
- Para crearlo un control de usuario en Visual Studio .NET.
Con Visual Studio .Net es la forma más sencilla de construir un control de usuario, ya que dispone de un
elemento para ello en el menú de Agregar. Con esta opción de menú se nos genera lo que seria como una
pagina Web normal pero la cual se va a poder importar en las demás paginas del sitio, reutilizando así
el código.
Para crear un control de usuario seguiremos los siguientes pasos.
- Si no tenemos un proyecto creado, creamos un proyecto de “Aplicación Web de ASP.NET”.
- Para crear el control de usuario, vamos a la opción Archivo -> Agregar Nuevo
Componente…” En este wizard seleccionamos que queremos crear un nuevo control de usuario Web. Le
indicamos el nombre que va a tener nuestro componente.
- Se nos creara un nuevo fichero con el nombre seleccionado con extensión “.ascx”. Este
componente es como si se tratase de una página Web. El contenido de esta página será sustituido
en los lugares donde usemos el control.
Con esto podemos crear nuestros controles y reutilizar todo el código que queramos en nuestras
páginas Web. Para poder usar el control en otra pagina web solo tenemos que arrastrar el fichero
del “Explorador de soluciones” al lugar donde queremos colocar el control dentro de nuestra pagina
web.
Esto genera el siguiente código:
<%@Register TagPrefix=”BancoASPNET” TagName=”Encabezado” Src=”encabezado.ascx”%>
Con esto estamos diciendo que la pagina a utilizar un fichero llamado “encabezado.ascx”
y que lo vamos a usar bajo en nombre de BancoASPNET:Encabezado.
<BancoASPNET:Encabezado
runat=”server”/>
- Para crearlo un control de usuario en Visual Studio .NET.
Un control de usuario no es más que una página Web a la cual le indicamos que va a ser
un control de usuario.
- Creamos una pagina Web con el contenido que queremos que vaya a tener el control.
- Guardamos esa página con extensión “.ascx”.
- En la pagina que va a utilizar el control.
- Declaramos que vamos a utilizar el control con la misma cadena que
veíamos que generaba el VS.NET.
- Añadimos el mismo tag que en VS.NET en el lugar donde vamos a colocar el fichero.
- Un ejemplo.
Pero todo esto se ve mejor con un ejemplo. Vamos a crear una pagina que tenga un menú de
navegación en el lateral izquierdo y un encabezado en la parte superior.
Para ello creamos dos páginas web una para el menú lateral y otra para el encabezado.
El menú lateral seria. Lo guardamos como “nav.ascx”.
|
<table align=”left” width=”150” height=”350” bicolor=”#cccc99”>
<tr>
<td
align=”right” nowrap bgcolor=”Cyan”>
<a href=”cuenta.aspx”>Estados de Cuentas</a><br>
<a href=”facturas.aspx”>Pagar
Facturas</a><br>
<a href=”salir.aspx”>Terminar Sesion</a><br>
</td>
</tr>
</table>
|
El encabezado seria simplemente un control Label para mostrar un encabezado. Lo
guardaremos como “encabezado.ascx”.
|
<asp:Label id=”Encabezado” runat=”server”
Text=”Centro bancario ASP.NET”
Height=”25px”
Width=”100%”
BackColor=”#cccccc”
ForeColor=”Black”
Font-Size=20
Font-Bold=”False”
Font-name=”Arial”
BorderStyle=”outset” />
|
Para terminar crearemos una pagina para usar estos controles. El código seria el siguiente:
<%@Page Language=”VB”%>
<%@Register TagPreFix=”BancoASPNET” TagName=”Encabezado”
src=”encabezado.ascx” %>
<html><body>
<BancoASPNET:Encabezado runat=”server” />
<table>
<tr>
<td valign=”top” width=”150”>
<BancoASPNET:Menu runat=”server” />
</td>
<td>
RESTO DE LA PAGINA
</td>
</tr>
</table>
|
Con esto tenemos dos controles de usuario que podemos utilizar en todas las páginas del sitio.
Espero que este pequeño manual os sea de alguna utilidad. Nos vemos.
