Tutorial de formularios web ASP.NET: ejemplos de controles de usuario

En ASP.Net, es posible crear código reutilizable. El código reutilizable se puede utilizar en muchos lugares sin necesidad de escribir el código nuevamente.

El código reutilizable ayuda a reducir el tiempo que el desarrollador dedica a escribirlo. Se puede escribir una vez y reutilizar en múltiples lugares.

Crear control de usuario en ASP.Net

ASP.Net permite crear controles web. Estos controles contienen código reutilizable que puede utilizarse en toda la aplicación según las necesidades.

Veamos un ejemplo de cómo podemos crear un control de usuario web en ASP.Net.

En nuestro ejemplo:

• Vamos a crear un control web.
• Se utilizará para crear un componente de encabezado.
• Contendrá el siguiente texto: “Guru“99 Tutoriales” y “Este tutorial es para ASP.Net”.

Trabajemos con nuestra aplicación web actual creada en las secciones anteriores. Sigamos los pasos a continuación para crear un control de usuario web.

Paso 1) El primer paso es crear un control de usuario web y agregarlo a nuestra solución de Visual Studio.

1. Vaya al Explorador de soluciones en Visual Studio y haga clic con el botón derecho en la solución DemoApplication.
2. Seleccione la opción de menú Agregar->Nuevo elemento.

Paso 2) En el siguiente paso, debemos elegir la opción de crear un control de usuario web.

1. En el cuadro de diálogo del proyecto, podemos ver varias opciones para crear distintos tipos de componentes. Haga clic en la opción “Web” en el lado izquierdo.
2. Al hacer clic en la opción "Web", verá la opción "Control de usuario de formularios web". Haga clic en esta opción.
3. Luego le damos un nombre al control web, “Guru99Control”.
4. Por último, haga clic en el botón "Agregar" para permitir que Visual Studio agregue el control de usuario web a nuestra solución.

A continuación, verá el "GuruSe agregó "99Control" a la solución.

Paso 3) Ahora es el momento de agregar el código personalizado al control de usuario web. Nuestro código se basará en la sintaxis HTML pura. Agregue el siguiente código al 'GuruArchivo '99Control.ascx'.

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

Code Explicación:-

1. En nuestro archivo de control web, primero creamos un elemento de tabla. Este se utilizará para contener 2 filas de texto que mostrarán “Guru“99 Tutoriales” y “Este tutorial es para ASP.Net”.
2. A continuación, definimos nuestra primera fila de la tabla y colocamos el texto como “Guru99 tutoriales.
3. Luego definimos nuestra segunda fila de la tabla y ponemos el texto como "Este tutorial es para ASP.Net".

NOTA: Ahora no podemos ejecutar este código ni mostrar el resultado. La única forma de comprobar si funciona es incluirlo en nuestra aplicación (archivo .aspx). Lo veremos en el siguiente tema.

Registro de controles de usuario en un formulario web ASP.NET

En la sección anterior, vimos cómo crear un control web personalizado. Este se puede usar para mostrar las siguientes dos líneas en un formulario web:

• "Guru99 tutoriales”
• "Este tutorial es para ASP.Net".

Una vez creado el control personalizado, debemos usarlo en nuestra aplicación web. El primer paso es registrar el componente en nuestra aplicación (Demo.aspx). Este es un requisito previo para usar cualquier control web personalizado en una aplicación ASP.Net.

Veamos cómo podemos lograr esto. Los siguientes pasos son una continuación de la sección anterior, en la que creamos nuestro control personalizado. En esta sección, utilizaremos el control en nuestro Demostración.aspx Formulario web. Primero, registraremos nuestro 'control' personalizado en el archivo Demo.aspx.

Paso 1) Asegúrese de estar trabajando en el archivo demo.aspx. En este archivo se registrará el control de usuario web. Para ello, haga doble clic en el archivo demo.aspx en el Explorador de soluciones de su solución .NET.

Al hacer doble clic en el formulario, probablemente verá el siguiente código. Este es el código predeterminado que Visual Studio agrega al añadir un formulario web a un proyecto ASP.Net. El código predeterminado incluye los pasos necesarios para que el formulario se ejecute correctamente en el navegador.

Paso 2) Ahora agreguemos nuestro código para registrar el control de usuario. La siguiente captura de pantalla muestra el registro del control de usuario agregado al código básico anterior.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Code Explicación:-

1. El primer paso es registrar el control de usuario web. Esto comprende los siguientes parámetros básicos:
   1. La palabra clave "Registrar" se utiliza para registrar el control de usuario web.
   2. El parámetro Src se utiliza para definir el nombre del control, que en nuestro caso es Guru99Control.ascx.
   3. TagName y TagPrefix son nombres individuales que se le dan al control. Esto se hace para que se pueda hacer referencia a ellos en las páginas HTML como a un control HTML normal.
2. A continuación, hacemos referencia a nuestro control de usuario web a través de TagPrefix:TagName que se asignó anteriormente. TagPrefix:TagName es un indicador de que queremos usar nuestro control web personalizado. Cuando la página es procesada por el servidor web, puede ver que hemos usado la etiqueta TWebControl:WebControl. Luego procesará el 'Guru99Control' en consecuencia.
   1. Se asigna un ID opcional al control "Header". Generalmente, es una buena práctica asignar un ID a un control HTML.
   2. Finalmente, el atributo `runat="server"` garantiza que el control se ejecute en el servidor web. Para todos los controles de ASP.Net, este es el atributo predeterminado. Todos los controles de ASP.Net (incluidos los controles personalizados) deben ejecutarse en el servidor. Su salida se envía desde el servidor al cliente y se muestra en el navegador.

Cuando se configura el código anterior y el proyecto se ejecuta usando Visual Studio, obtendrá el siguiente resultado.

Salida:-

El mensaje de salida que se muestra en el navegador muestra que el control de usuario web se ejecutó correctamente.

Registro global de controles ASP.Net en el archivo de configuración web.config

En ocasiones, puede que se desee utilizar controles de usuario en varias páginas de una aplicación .Net. En este caso, no conviene registrar controles de usuario en cada página de ASP.Net.

• En .Net puedes realizar el registro en el archivo ‘web.config’.
• El archivo web.config es un archivo de configuración común utilizado por todas las páginas web en un proyecto .Net.
• Contiene los detalles de configuración necesarios para el proyecto web ASP.Net. Por ejemplo, una configuración común en el archivo web.config es la siguiente: parámetro del marco de destino.
• Este parámetro se utiliza para identificar la versión de .Net framework utilizada por la aplicación.

A continuación se muestra una instantánea del código predeterminado en el archivo web.config. La parte resaltada es la parte del marco de destino.

Veamos cómo podemos registrar nuestro Guru99Control en el archivo web.config.

Paso 1) Abra el archivo web.config desde el Explorador de soluciones haciendo doble clic en él.

Al abrir el archivo web.config, es posible que vea la siguiente configuración. Visual Studio agrega automáticamente el archivo 'web.config' cuando se crea el proyecto. Esta es la configuración básica necesaria para que el proyecto ASP.Net funcione correctamente.

Paso 2) Ahora registremos nuestro componente en el archivo web.config. Necesitamos agregar las siguientes líneas para eso.

<configuration>
	<system.web>
	 <compilation debug="true" targetFramework="4.5" />
	<pages>
		<controls>
		 <add tagPrefix="TWebControl" src="~/Guru99Control.ascx" tagName="WebControl" />
		</controls>
	</pages>
	</system.web>
</configuration>

El proceso de registro comprende los siguientes pasos:

1. Agregue una etiqueta llamada . Significa que toda la configuración de los controles será aplicable a todas las páginas ASP.Net de la solución.
2. La etiqueta significa que está agregando una configuración para el control de usuario.
3. Luego registramos el control de usuario con la etiqueta adicional. Los parámetros restantes de tagPrefix, tagName y src permanecen iguales que antes.

Paso 3) Recuerde ir a la página 'demo.aspx' y eliminar las líneas del control que tenían el registro de la Guru99 componentes. Si no realiza este paso, entonces el 'GuruEl archivo '99Control.ascx' se ejecutará desde el archivo 'demo.aspx' en lugar del archivo 'web.config'.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>
<body>
	<form id="form1" runat="server">
	  <TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Una vez configurado el código anterior y ejecutado el proyecto con Visual Studio, obtendrá el siguiente resultado.

Salida:-

El mensaje de salida muestra que el control de usuario web se ejecutó correctamente.

Agregar propiedades públicas a un control web

Una propiedad es un par clave-valor asociado a cualquier control. Veamos un ejemplo sencillo. Etiqueta HTML. A continuación se muestra una captura de pantalla de cómo se ve la etiqueta.

<html>
<body>
	<div style="color:#0000FF">

		Demo Form

	</div>
</body>
</html>

La etiqueta 'div' se utiliza para crear una sección en un documento HTML. La etiqueta 'div' tiene una propiedad llamada propiedad de estilo. Esta se puede utilizar para dar un estilo diferente al texto que se muestra en la etiqueta div. Normalmente, verá el código para la etiqueta div como se muestra a continuación.

<div style="color:#0000FF">

Entonces, el atributo de color no es más que un par clave-valor que brinda más información sobre la etiqueta en sí. En el caso anterior, el nombre de la clave es "estilo" y el valor de la clave es "color:#0000FF".

De manera similar, para los controles de usuario, puede crear sus propias propiedades que describan el control.

Tomemos un ejemplo sencillo y desarrollemos nuestro 'GuruEl control '99Control' se creó en las secciones anteriores. En nuestro ejemplo, agregaremos una propiedad entera simple llamada MinValue. Este valor representará la cantidad mínima de caracteres en el texto que se muestra en el control de usuario.

Llevemos a cabo los pasos que se mencionan a continuación para implementar esto.

Paso 1) Abra el panel de GuruArchivo 99Control.ascx. Agregue el código para añadir la propiedad MinValue.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>

	<script runat="server">
	  public int MinValue = 0;
	</script>

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

Code Explicación:-

El atributo `runat="server"` del script se utiliza para indicar que estamos agregando código específico de .NET y que este debe ejecutarse en el servidor web. Esto es necesario para procesar cualquier propiedad agregada al control de usuario. A continuación, agregamos nuestra propiedad `MinValue` y le asignamos un valor predeterminado de 0.

Paso 2) Ahora hagamos referencia a esta propiedad en nuestro archivo demo.aspx. Todo lo que estamos haciendo ahora es simplemente hacer referencia a la propiedad MinValue y asignar un nuevo valor de 100.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>
<body>
	<form id="form1" runat="server">
	  <TWebControl:WebControl ID="Header" runat="server" MinValue="100" />
	</form>
</body>
</html>

NOTA: Al ejecutar este código, no se mostrará ninguna salida. Esto se debe a que la salida no supera el límite de 100 caracteres.

Preguntas Frecuentes