ASP.NET permite a los usuarios crear controles. Estos controles definidos por el usuario se clasifican en:
control de usuario
Controles personalizados
Los controles de usuario se comportan como páginas ASP.NET en miniatura o formularios web que pueden ser utilizados por muchas otras páginas. Estos se derivan de la clase System.Web.UI.UserControl. Estos controles tienen las siguientes propiedades:
Tienen la extensión .ascx.
No pueden contener ninguna etiqueta.
Tienen una directiva de Control en lugar de una directiva de Página.
Para comprender este concepto, creemos un control de usuario simple que servirá como pie de página de una página web. Para crear y utilizar controles de usuario, siga los siguientes pasos:
Cree una nueva aplicación web.
Haga clic derecho en la carpeta del proyecto en el Explorador de soluciones y seleccione AGREGAR nuevo elemento.
Seleccione Control de usuario web en el cuadro de diálogo Agregar nuevo elemento y asígnele el nombre footer.ascx. Inicialmente, footer.ascx contiene sólo una directiva de Control.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="footer.ascx.cs" Inherits="customcontroldemo.footer" %>
Agregue el siguiente código al archivo:
<table> <tr> <td align="center"> Copyright ©2010 TutorialPoints Ltd.</td> </tr> <tr> <td align="center"> Ubicación: Hyderabad, AP </td> </ tr></tabla>
Para agregar un control de usuario a su página web, debe agregar una directiva de Registro y una instancia del control de usuario de la página. El siguiente código muestra las instrucciones:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="customcontroldemo._Default" %><%@ Register Src="~/footer.ascx" TagName="footer" TagPrefix="Tfooter" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" > < head runat="servidor"> <título> Página sin título </título> </cabeza> <cuerpo> <form id="form1" runat="servidor"> <div> <asp:Label ID="Label1" runat="server" Text="Bienvenido a los tutoriales de ASP.Net "></asp:Label> <br /> <br /> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text ="Información de derechos de autor" /> </div> <Tfooter:footer ID="footer1" runat="server" /> </form> </body></html>
Cuando se ejecuta, se muestra el pie de página y el control está disponible en todas las páginas de su sitio.
Observe lo siguiente:
(1) El comando Registrar especifica un nombre de etiqueta y un prefijo de etiqueta para el control.
<%@ Registro Src="~/footer.ascx" TagName="pie de página" TagPrefix="Tfooter" %>
(2) Se deben utilizar los siguientes nombres de etiquetas y prefijos al agregar controles de usuario en la página:
<Tpie de página:ID de pie de página="pie de página1" runat="servidor" />
Los controles personalizados se implementan como colecciones independientes. Se compilan en bibliotecas de vínculos dinámicos (DLL) y se utilizan como cualquier otro control de servicio ASP.NET. Se pueden crear mediante cualquiera de los siguientes métodos:
Obteniendo un control personalizado de un control existente.
Cree un nuevo control personalizado combinando dos o más controles existentes.
Obteniéndolo de la clase de control base.
Para comprender este concepto, creemos una clase personalizada que simplemente mostrará un mensaje de texto en el navegador. Para crear el control, siga los siguientes pasos:
Crea un nuevo sitio web. Haga clic derecho en la solución (no en el proyecto) en la parte superior del árbol en el Explorador de soluciones.
En el cuadro de diálogo Nuevo proyecto, seleccione Control de servidor ASP.NET en la plantilla del proyecto.
Los pasos anteriores agregan un nuevo proyecto y crean un control personalizado completo para la solución llamada ServerControl1. En este ejemplo, permítanme nombrar el proyecto CustomControls. Para poder utilizar este control se debe agregar como referencia a la página web antes de registrarse en la página. Para agregar una referencia a un proyecto existente, haga clic derecho en el proyecto (no en la solución) y haga clic en Agregar referencia.
Seleccione el proyecto CustomControl en la pestaña Proyectos en el cuadro de diálogo Agregar referencia. El Explorador de soluciones puede mostrar referencias.
Para usar el control en la página, agregue una directiva de Registro bajo la directiva @Page.
<%@ Registrar Asamblea="CustomControls" Namespace="CustomControls" TagPrefix="ccs" %>
Además, puedes utilizar controles como cualquier otro control.
<form id="form1" runat="server"> <div> <ccs:ServerControl1 runat="server" Text = "Soy un control de servidor personalizado" /> </div> </form>
Cuando se ejecuta, la propiedad Texto del control se muestra en el navegador, como se muestra a continuación:
En el ejemplo anterior, se estableció el valor de la propiedad Texto de la clase personalizada. ASP.NET agrega esta propiedad de forma predeterminada cuando se crea el control. El siguiente código después del archivo del control revela esto.
usando System;usando System.Collections.Generic;usando System.ComponentModel;usando System.Linq;usando System.Text;usando System.Web;usando System.Web.UI;usando System.Web.UI.WebControls;espacio de nombres CustomControls{ [ DefaultProperty("Text")] [ToolboxData("<{0}:ServerControl1 runat=server></{0}:ServerControl1 >")] público clase ServerControl1: WebControl { [Bindable(verdadero)] [Categoría("Apariencia")] [DefaultValue("")] [Localizable(verdadero)] cadena pública Texto { get { String s = (String)ViewState["Texto"] ; return ((s == null)? "[" + this.ID + "]" : s } set { ViewState["Text"] = valor; } } anulación protegida void RenderContents(salida de HtmlTextWriter) { salida.Write(Texto);El código anterior se genera automáticamente para un control personalizado. Se pueden agregar eventos y métodos a clases de control personalizadas.
Extendamos el control personalizado anterior llamado ServerControl1. Démosle un método llamado checkpalindrome que le dará permiso para verificar el palíndromo.
Palíndromo es una palabra/valor literal que aún se escribe igual cuando se invierte. Por ejemplo, malayalam, señora, saras, etc.
Extienda el código para su control personalizado y debería verse así:
usando System;usando System.Collections.Generic;usando System.ComponentModel;usando System.Linq;usando System.Text;usando System.Web;usando System.Web.UI;usando System.Web.UI.WebControls;espacio de nombres CustomControls{ [ DefaultProperty("Text")] [ToolboxData("<{0}:ServerControl1 runat=server></{0}:ServerControl1 >")] público clase ServerControl1: WebControl { [Bindable(verdadero)] [Categoría("Apariencia")] [DefaultValue("")] [Localizable(verdadero)] cadena pública Texto { get { String s = (String)ViewState["Texto"] ; return ((s == null)? "[" + this.ID + "]" : s } set { ViewState["Text"] = valor; } } anulación protegida void RenderContents(salida de HtmlTextWriter) { if (this.checkpanlindrome()) { salida.Write("Esto es un palíndromo: <br />"); >"); salida.Write("<B>"); salida.Write(Texto); salida.Write("</B>"); salida.Write("</FONT>"); } else { salida.Write("Esto no es un palíndromo: <br />"); salida.Write("<B>"); salida.Write(Texto); salida.Write("</B>"); salida.Write("</FONT>"); if (this.Text! = null) { String str = this.Text; String strtoupper = Text.ToUpper(); rev = strtoupper.ToCharArray(); String strrev = new String( rev); si (strtoupper == strrev) {devuelve verdadero; más {devuelve falso} } más {devuelve falso;Cuando cambia el código de un espacio, debe construir el método haciendo clic en Construir --> Construir solución para que los cambios puedan reflejarse en su proyecto. Agregue un cuadro de texto y un control de botón a la página para que el usuario pueda proporcionar un fragmento de texto. Cuando se hace clic en el botón, se utiliza para comprobar el palíndromo.
<form id="form1" runat="servidor"> <div> Introduzca una palabra: <br /> <asp:TextBox ID="TextBox1" runat="servidor"> </asp:TextBox> <br /> < br /> <asp:Button ID="Button1" runat="server onclick="Button1_Click" Text="Comprobar palíndromo" /> <br /> <br /> <ccs:ServerControl1 ID="ServerControl11" runat="servidor" Texto = "" /> </div></form>
El controlador de eventos Click del botón simplemente copia el texto del cuadro de texto en la propiedad de texto del control personalizado.
protected void Button1_Click(object sender, EventArgs e){ this.ServerControl11.Text = this.TextBox1.Text;}
Cuando se ejecuta, el control detecta palíndromos con éxito.
Observe lo siguiente:
(1) Cuando agrega una referencia a un control personalizado, se agrega a la caja de herramientas y puede usarla directamente desde la caja de herramientas como otros controles.
(2) Se anuló el método RenderContents de la clase de control personalizado y puede agregar sus propios métodos y eventos.
(3) El método RenderContents toma un parámetro de tipo HtmlTextWriter, que será el encargado de mostrarlo en el navegador.