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 la cantidad de tiempo que dedica el desarrollador después de escribir el código. Se puede hacer una vez y reutilizar en varios lugares.

Crear control de usuario en ASP.Net

ASP.Net tiene la capacidad de crear controles web. Estos controles contienen código que se puede reutilizar. Se puede utilizar en todas las aplicaciones según los requisitos.

Echemos un vistazo a 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 texto mencionado a continuación. "Tutoriales de Guru99" 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. Elija el elemento del 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. Cuando hacemos clic en la opción "Web", verá una opción para "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.

Verá el “Guru99Control” agregado a la solución.

Paso 4) Ahora es el momento de agregar el código personalizado al control de usuario web. Nuestro código se basará en sintaxis HTML pura. Agregue el siguiente código al archivo 'Guru99Control.ascx'

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

Explicación del código: -

1. En nuestro archivo de Control web, primero estamos creando un elemento de tabla. Esto se usará para contener 2 filas de texto que se usarán para mostrar

• “Tutoriales de Guru99” y
• "Este tutorial es para ASP.Net".

2. A continuación, definimos nuestra primera fila de la tabla y ponemos el texto como "Tutoriales de Guru99".
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 y mostrar el resultado. La única forma de ver si esto funciona es incluirlo en nuestra aplicación (archivo aspx). Veremos esto en el tema siguiente.

Registro de controles de usuario en formularios web ASP.NET

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

• “Tutoriales de Guru99”
• "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 el requisito previo para utilizarlo en cualquier control web personalizado en una aplicación ASP.Net.

Veamos cómo podemos lograrlo. Los pasos siguientes son una continuación de la sección anterior. En la sección anterior, hemos creado nuestro control personalizado. En esta sección, usaremos 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. Es en este archivo donde se registrará el control de usuario web. Esto se puede hacer haciendo doble clic en el archivo demo.aspx en el explorador de soluciones de su solución .Net.

Una vez que haga doble clic en el formulario, probablemente verá el código que aparece a continuación. Este es el código predeterminado que agrega Visual Studio cuando se agrega un formulario web a un proyecto ASP.Net.

El código predeterminado consta de pasos necesarios para garantizar que el formulario pueda ejecutarse como un formulario web ASP.Net 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 en el 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.ore/1999/xhtml">
	<head runat="server">
		<title></title>
	</head>
<body>
	<form id="forml" runat="server”>
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Explicación del código: -

1. El primer paso es registrar el control de usuario web. Esto se compone de 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. El nombre de etiqueta y el prefijo de etiqueta son nombres individuales que se le dan al control. Esto se hace para que puedan hacer referencia en páginas HTML como 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 utilizar nuestro control web personalizado. Cuando el servidor web procesa la página, puede ver que hemos utilizado la etiqueta TWebControl:WebControl. Luego procesará el 'Guru99Control' en consecuencia. En nuestro ejemplo, es TWebControl:WebControl.
   1. Se proporciona una identificación opcional al control de "Encabezado". Generalmente es una buena práctica dar un ID a un control HTML.
   2. Por último, el atributo runat=server para que el control se ejecute en el servidor web. Para todos los controles ASP.Net, este es el atributo predeterminado. Todos los controles ASP.Net (incluidos los controles personalizados) deben ejecutarse en el servidor. Su salida se envía luego desde el servidor al cliente y se muestra en el navegador en consecuencia.

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 de controles asp.net globalmente en el archivo de configuración web asp

A veces es posible que desee utilizar controles de usuario en varias páginas de una aplicación .Net. En este punto, no desea seguir registrando controles de usuario en todas y cada una de las páginas 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 del 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 el archivo.

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 registro consta de los siguientes subpasos.

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 siguen siendo los mismos que antes.

Paso 3) Recuerde ir a la página 'demo.aspx' y eliminar las líneas de control, que tenían el registro del componente Guru99. Si no realiza este paso, el archivo 'Guru99Control.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" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl"%>

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

Se configura el código anterior y se ejecuta el proyecto mediante 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 con cualquier control. Tomemos un ejemplo de la etiqueta HTML simple. 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 simple y construyamos sobre nuestro 'Guru99Control' creado en las secciones anteriores.

En nuestro ejemplo, vamos a agregar una propiedad de número entero simple llamada MinValue. Este valor representaría 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 archivo Guru99Control.ascx. Agregue el código para agregar 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
	</tr>
</table>

Explicación del código: -

El atributo script runat=server se utiliza para indicar que estamos agregando algún código específico de .Net y que debe ejecutarse en el servidor web.

Esto es necesario para procesar cualquier propiedad agregada al control de usuario. Luego agregamos nuestra propiedad MinValue y le damos 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.ore/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: – Cuando ejecute este código, no mostrará ningún resultado. Esto se debe a que la salida cae por debajo del límite de 100 caracteres.

Resum

• ASP.Net tiene la capacidad de crear controles de usuario. Los controles de usuario se utilizan para tener código que se usa varias veces en una aplicación. Luego, el control de usuario se puede reutilizar en toda la aplicación.
• El control de usuario debe registrarse en la página ASP.Net antes de poder utilizarlo.
• Para utilizar el control de usuario en todas las páginas de una aplicación, regístrelo en el archivo web.config.
• También se pueden agregar propiedades a un control de usuario web.