Cómo hacer un control de usuario (.ascx)


Los controles de usuario (esos ficheritos .ascx) son controles que nos creamos nosotros mismo, perfecto complemento de los controles Web que nos provee ASP.NET.

Son como plantillas que podremos ubicar en tantos sitios de nuestra Web como queramos, de forma que todo queda centralizado, y cualquier cambio en nuestro fichero .ascx se verá reflejado allá donde lo hayamos ubicado.

Realmente es más difícil explicar lo que es que el utilizarlo

Y como siempre un ejemplo vale más de mil palabras, pongamos uno:

Supongamos que en varios sitios de nuestra Web, necesitamos que el usuario nos diga una fecha. Existen mil formas de hacerlo, y en todas ellas acabaremos encontrando los mismo problemas, muchos de los cuales radican en que el usuario debe poner la fecha en el formato correcto para que nuestra aplicación lo entienda.

Como es trabajoso hacerlo una vez, más lo es si lo tenemos que hacer en varios sitios de nuestra Web. Proponemos pues el siguiente control .ascx, que no sólo evita el problema del formato correcto, sino que se le hace muy cómodo al usuario:

Componentes
- Un Calendar
- Un TextBox

Funcionalidades
- El TextBox será ReadOnly, de modo que el usuario no podrá escribir en él.
- Presionando sobre una fecha en el calendar se modificará el TextBox.

Propiedades
- FechaElegida: nos devolverá un DateTime con la fecha que hemos elegido.


Ahora vamos a lo importante: ¿cómo se crea y se usa un control de usuario?

Crearlo es realmente sencillo, añadamos un nuevo item y elijamos un Web User Control:

Upload/control-de-usuario-1.jpg


Una vez creado, lo usamos como si de una página .aspx normal se tratara, con su codebehind, su html, etc. (descargaos el control para ver el código de nuestro ejemplo).

Para añadir el control a cualquier sitio de nuestra Web, no tenemos más que arrastrarlo al lugar que queremos... y ya está!!

En nuestro ejemplo, nos queda este código:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Varios_ASCX_Default" %>
<%@ Register src="Subgurim.ascx" TagName="Subgurim" TagPrefix="uc1" %>

<!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 runat="server">
    <title>Subgurim.NET ejemplo de control de usuario</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>  
        <uc1:Subgurim id="Subgurim1" runat="server"></uc1:Subgurim>      
    </div>
    </form>
</body>
</html>


Destacamos en negrita lo que se ha añadido: un register apuntando a dónde se ubica el control, y un tag que indica donde poner el control dentro de nuestra página .aspx.

Sólo indicar una cosa que no me gusta de lo que hace ASP.NET, y es que si el control está en un directorio diferente al que se encuentra tu página, comenzará a poner tantos "../" como le haga falta. Por eso yo siempre aconsejo cambiar el "Src" a mano y poner el path de forma absoluta. Y eso es más urgente aún si el control lo añadimos a una masterpage y vamos a navegar por más directorios.

Por ejemplo, si todos nuestros controles los pusiéramos en el directorio "UserControls", el Src que aconsejo sería:

<%@ Register src="~/UserControls/Subgurim.ascx" TagName="Subgurim" TagPrefix="uc1" %>

De este modo nos evitamos problemas.
La (fea) Web que nos queda con lo que hemos hecho se parece a:

Upload/control-de-usuario-2.jpg

¡¡Descargaos libremente el control!!