Saltar al contenido

Formularios web ASP.NET: ejemplos de controles de usuario

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

El código utilizable ayuda a reducir la cantidad de tiempo que el desarrollador pasa después de escribir el código. Puede hacerse una vez y reutilizarse en numerosos lugares.

En este tutorial, aprenderá:

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 toda la aplicación según el requisito.

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

En nuestro ejemplo,

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

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

Paso 2) En el siguiente paso, necesitamos crear la opción para el control del usuario web.

  1. En el cuadro de diálogo del proyecto, podemos ver diferentes opciones para crear diferentes tipos de componentes. Haga clic en la opción «Web» de la izquierda.
  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 llamamos al Control Web «Guru99Control».
  4. Finalmente, haga clic en el botón ‘Agregar’ para permitir que Visual Studio agregue 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 usuarios 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 creamos un elemento de tabla. Esto se usará para contener 2 conjuntos de texto que se usarán para mostrarlo
  1. A continuación, definimos nuestro primer conjunto de tablas y agregamos el texto como «Tutoriales de Guru99».
  2. Luego definimos nuestro segundo conjunto de tablas y agregamos el texto como «Este tutorial es para ASP.Net».

NOTA: Ahora no podemos ejecutar este código y mostrar la salida. La única forma de ver si esto funciona es incluyéndolo en nuestra aplicación (archivo aspx). Veremos esto en el material más adelante.

Registrar controles de usuario en el formulario web ASP.NET

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

Una vez que se crea 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 su uso en cualquier control web personalizado en una aplicación ASP.Net.

Veamos cómo podemos lograrlo. Los pasos a continuación son una continuación de los pasos a continuación. En la sección anterior, hemos creado nuestro control personalizado. En esta sección, usaremos el control en nuestro Demo.aspx formulario web.

Primero, programaremos nuestro ‘control’ personalizado en el archivo Demo.aspx.

Paso 1) Asegúrese de estar trabajando en el archivo demo.aspx. Este archivo es donde se registra el control de usuario web. Esto se puede hacer haciendo doble clic en el archivo demo.aspx en el explorador de resoluciones de su solución .Net.

Cuando haga doble clic en el formulario, probablemente verá el siguiente código en el formulario. Este es el código predeterminado que Visual Studio agrega al agregar un formulario web a un proyecto ASP.Net.

El código predeterminado consta de pasos, que son necesarios para garantizar que el formulario se pueda ejecutar como un formulario web ASP.Net en el navegador.

Paso 2) Ahora, agreguemos nuestro código para registrar el control de usuario. La siguiente imagen muestra el registro de control de usuario con el código básico anterior.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="https://www.guru99.com/~/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 usuarios web. Esto incluye los siguientes parámetros básicos
    1. La palabra clave ‘Registrarse’ se utiliza para registrar el control de usuarios web.
    2. El parámetro src se usa 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 control HTML normal.
  2. Luego nos referimos a nuestro control de usuario web asignando el TagPrefix: TagName anteriormente. TagPrefix: TagName es un indicador de que queremos usar nuestro control web personalizado. Cuando el servidor web procesa la página, puede ver que usamos la etiqueta TWebControl: WebControl. Luego procesará el ‘Guru99Control’ en consecuencia.

    En nuestro ejemplo, TWebControl es: WebControl.

    1. El ID opcional se denomina control «Encabezado». Por lo general, es una buena práctica asignar 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.

Una vez que se establece el código anterior, el proyecto se completa con Visual Studio. Encontrará la salida a continuación.

Producción: –

El mensaje de salida que se muestra en el navegador indica que el control del usuario web se ha completado con éxito.

Registre los controles de asp.net globalmente en el archivo de configuración web de asp

A veces, es posible que desee utilizar controles de usuario en varias páginas en una aplicación .Net. En este punto, no desea registrar controles de usuario en cada página ASP.Net.

A continuación se muestra una descripción general 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 haciendo doble clic en el archivo.

Cuando abre el archivo web.config, es posible que vea la configuración a continuació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.

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

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

El registro consta de los sustratos a continuación

  1. Etiqueta llamada leis. Esto 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 está agregando una configuración para el control del usuario.
  3. Luego registramos el control de usuario con la etiqueta adicional. Los parámetros restantes de tagPrefix, tagName y src permanecen como siempre.

Paso 3) Recuerde ir a la página ‘demo.aspx’ y eliminar las líneas de control, que tenía registrado el 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="https://www.guru99.com/~/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>

El código se establece arriba y el proyecto se realiza con Visual Studio. Encontrará la salida a continuación.

Producción: –

El mensaje de salida indica que el control del usuario web se ha completado con éxito.

Agregar propiedad pública al control de la red

La propiedad es un par clave-valor asociado con cualquier control. Tomemos un ejemplo de la etiqueta HTML simple

. A continuación se muestra una imagen 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 un elemento en un documento HTML. La etiqueta ‘div’ contiene una propiedad llamada propiedad de estilo. Esto se puede utilizar para dar 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.

Entonces, el atributo de color es solo 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 desarrollemos nuestro «Guru99Control» creado en las secciones anteriores.

En nuestro ejemplo, vamos a agregar una propiedad entera simple llamada MinValue. Este valor indicaría el número mínimo de caracteres en el texto que se muestra bajo el control del usuario.

Tomemos los pasos a continuación para implementar esto.

Paso 1) Abra el archivo Guru99Control.ascx. Agregue el código a 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 runat = server se utiliza para indicar que estamos agregando un código específico de .Net y que debe ejecutarse en el servidor web.

Esto es necesario para procesar cualquier propiedad agregada al control del 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 tenemos que hacer ahora es consultar 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 ejecuta 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 utiliza repetidamente en una aplicación. 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 que pueda usarse.
  • Para utilizar el control de usuario en todas las páginas de una aplicación, regístrelo en el archivo web.config.
  • Las propiedades también se pueden agregar al control de usuarios web.