[ASP.NET] Controles de usuario I: Creando un control de usuario

Posted on


Los controles de usuario o user controls son un tipo de controles web personalizados. Un control de usuario es un grupo de controles de servidor y elementos HTML agrupados con una funcionalidad en común. Voy a subir algunos post para mostrar como podemos trabajar con los mismos, en este primer post vamos a ver como crear un control de usuario.

Podemos definir algunas características para los controles de usuario:

  • Pueden ser implementados en varias páginas de un mismo sitio.
  • Tienen la extensión ascx.
  • Tienen los mismos eventos que una página aspx tradicional.
  • Deben estar contenidos en una página aspx.
  • Tienen su propio codebehind.

Para crear un control de usuario simplemente a nuestro proyecto le decimos que agregue un nuevo ítem y allí seleccionamos Web User Control, le damos un nombre y luego le agregamos los controles y la lógica necesaria.

Imagen3

Para agregar un control de usuario a una página debemos hacer lo siguiente:

1. Registrar el control de usuario, se definen tres propiedades: a) Src: ruta del control, b) TagPrefix: prefijo para crear el HTML del control y c) TagName: Nombre del control. Vamos a agregar un control de usuario ubicado en la carpeta UserControls el cual se llama RegistrarUsuario.

   1:  <%@ Register Src="~/UserControls/RegistrarUsuario.ascx" TagPrefix="uc" TagName="UCRegistrarUsuario"  %>

2.  Crear el HTML para mostrar el control:

   1:   <uc:UCRegistrarUsuario id="RegistrarUsuario" runat="server"></uc:UCRegistrarUsuario>

La idea del control de usuario es de brindar la posibilidad a un usuario de registrarse, así que creamos la interfaz de usuario para solicitar algunos datos:

   1:  <fieldset>
   2:      <legend>Datos de usuario</legend>
   3:      <table>
   4:          <tbody>
   5:              <tr>
   6:                  <td>Nombre:</td>
   7:                  <td><asp:TextBox ID="txtNombre" runat="server"></asp:TextBox></td>
   8:              </tr>
   9:              <tr>
  10:                  <td>Apellido:</td>
  11:                  <td><asp:TextBox ID="txtApellido" runat="server"></asp:TextBox></td>
  12:              </tr>
  13:              <tr>
  14:                  <td>Usuario:</td>
  15:                  <td><asp:TextBox ID="txtUsuario" runat="server"></asp:TextBox></td>
  16:              </tr>
  17:              <tr>
  18:                  <td>Email:</td>
  19:                  <td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>
  20:              </tr>
  21:              <tr>
  22:                  <td colspan="2"><asp:Button ID="btnRegistrar" runat="server" Text="Registrar" /></td>
  23:              </tr>
  24:          </tbody>
  25:      </table>
  26:  </fieldset>

Finalmente solo haría falta implementar la lógica necesaria para registrar el usuario cuando se da clic en el botón correspondiente. Una vez se cargue la página que contiene el control de usuario vamos a tener algo como:

Imagen2

En el próximo post vamos a seguir trabajando con los controles de usuario.

About these ads

5 comentarios en “[ASP.NET] Controles de usuario I: Creando un control de usuario

    [...] [ASP.NET] Controles de usuario I: Creando un control de usuario [...]

    [...] [ASP.NET] Controles de usuario I: Creando un control de usuario [...]

    bryan escribió:
    04/16/2013 en 10:21

    hola.
    se puede usar el control de usuario para ser llamado por ajax y mostrarlo en un div?
    si se puede… ¿como se aria?

    gracias…

    Ana Cristina escribió:
    03/18/2014 en 19:45

    Hola, un web user control tiene un metodo de cargar la pagina, o ¿cuales son metodos principales?

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s