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 Visual Studio.

Crear control de usuario en ASP.Net

  1. Vaya al Explorador de soluciones en Visual Studio y haga clic 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.

Crear control de usuario en ASP.Net

  1. En el diálogo del proyecto box, podemos ver varias opciones para crear diferentes 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. Finalmente, 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.

Crear control de usuario en ASP.Net

Paso 4) 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. Agrega el siguientewing código al archivo 'Guru99Control.ascx'

Crear control de usuario en ASP.Net

<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".
  1. A continuación, definimos nuestra primera fila de la tabla y ponemos el texto como "Tutoriales de Guru99".
  2. 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 el siguientewing dos líneas 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.

Registro de controles de usuario en 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 fichero donde quedará registrado el control de usuario de la web. Esto se puede hacer haciendo doble clic en el archivo demo.aspx en el Explorador de soluciones de su solución .Net.

Registro de controles de usuario en ASP.NET

Una vez que haga doble clic en el formulario, probablemente verá el siguiente código en el formulario. 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.

Registro de controles de usuario en ASP.NET

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.

Registro de controles de usuario en ASP.NET

<%@ 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. Finalmente, 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. Luego, su salida se envía 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:-

Registro de controles de usuario en ASP.NET

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 la configuración necesaria details para el proyecto web ASP.Net. Por ejemplo, una configuración común en el archivo web.config es la 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.

Registro de controles asp.net globalmente en la configuración web

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.

Registro de controles asp.net globalmente en la configuración web

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

Registro de controles asp.net globalmente en la configuración web

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

Registro de controles asp.net globalmente en la configuración web

<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'.

Registro de controles asp.net globalmente en la configuración web

<%@ 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 el proyecto se ejecuta utilizando Visual Studio. Obtendrá el siguiente resultado.

Salida:-

Registro de controles asp.net globalmente en la configuración web

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.

Agregar propiedades públicas a un control web

<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. Esto se puede utilizar para darle un estilo diferente al texto que se muestra en la etiqueta div. Normalmente verá el código de 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 entera simple llamada MinValue. Este valor representaría el número mínimo 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.

Agregar propiedades públicas a un control web

<%@ 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.

Agregar propiedades públicas a un control web

!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.

Resumen

  • 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.