Descripción general de los controles de usuario frente a los controles personalizados

Se aplica a: Microsoft ASP.NET

ASP.NET admitir la columna de voz


Descripción general de los controles de usuario frente a los controles personalizados

Para personalizar esta columna según sus necesidades, queremos invitarle a enviar sus ideas sobre temas que le interesen y los problemas que desea ver abordados en futuros artículos de Knowledge Base y columnas de voz de soporte técnico. Puede enviar sus ideas y comentarios utilizando el formulario Pedirlo. También hay un vínculo al formulario en la parte inferior de esta columna.

Introducción


¡Hola! Este es Parag, y soy un ingeniero de soporte técnico que trabaja con el grupo de soporte técnico de Microsoft ASP.NET desde hace más de un año. Antes de unirme a Microsoft, trabajé en proyectos basados en Web y aplicaciones de escritorio con tecnologías de Microsoft. Al mismo tiempo que proporcionaba soporte de calidad a los clientes, he visto casos en los que había cierta confusión en torno a los controles personalizados, y me gustaría tomarme un tiempo para explicar algunos conceptos en torno a los controles personalizados. Por muy malo que parezca, créeme, una vez que te des cuenta, estarás en una mejor posición para apreciar ASP.NET.

Información general

En la columna de este mes, discutiré los siguientes temas:
  • ¿Qué son los controles de usuario?
  • ¿Qué son los controles personalizados?
  • ¿Cuáles son las diferencias básicas entre los controles de usuario y los controles personalizados?
También presentaré algunos de los temas avanzados que se refieren a controles personalizados, como la administración de estado y la representación de controles personalizados.

¿Qué son los controles de usuario?

Los controles de usuario son controles personalizados y reutilizables y usan las mismas técnicas que emplean los controles de servidor web y HTML. Ofrecen una manera fácil de particionar y reutilizar interfaces de usuario comunes en ASP.NET aplicaciones web. Utilizan el mismo modelo de programación de formularios Web Forms en el que funciona una página de formularios Web Forms. Para obtener más información sobre el modelo de programación de formularios Web Forms, visite los siguientes sitios Web de Microsoft Developer Network (MSDN):

Cómo crear un control de usuario

La sintaxis que se usa para crear un control de usuario es similar a la sintaxis que se usa para crear una página de formularios Web Forms (.aspx). La única diferencia es que un control de usuario no incluye los elementos <html>, <body> y <form> ya que una página de formularios Web Forms hospeda el control de usuario. Para crear un control de usuario, siga estos pasos:
  1. Abra un editor de texto o HTML y cree un bloque de código del lado servidor que exponga todas las propiedades, métodos y eventos.
    <script language="C#" runat="server">   public void button1_Click(object sender, EventArgs e)   {      label1.Text = "Hello World!!!";   }</script>
  2. Cree una interfaz de usuario para el control de usuario.
    <asp:Label id="label1" runat="server"/> <br><br><asp:button id="button1" text="Hit" OnClick="button1_Click" runat="server" />

Cómo usar un control de usuario en una página de formularios Web Forms

  1. Cree una nueva página de formularios Web Forms (.aspx) en Microsoft Visual Studio .NET 2002, Microsoft Visual Studio .NET 2003, Microsoft Visual Studio 2005 o cualquier editor de texto.
  2. Declare la directiva de registro. Por ejemplo, utilice el código siguiente.
    <%@ Register TagPrefix="UC" TagName="TestControl" Src="test.ascx" %>
    Nota Supongamos que el control de usuario y la página de formularios Web Forms están en la misma ubicación.
  3. Para usar el control de usuario en la página de formularios Web Forms, use el código siguiente después de la directiva .
    <html>    <body>          <form runat="server">               <UC:TestControl id="Test1" runat="server"/>          </form>    </body>  </html>

Cómo crear una instancia de un control de usuario mediante programación en el código detrás del archivo de una página de formularios Web Forms

En el ejemplo anterior se crea una instancia de un control de usuario mediante declaración en una página de formularios Web Forms mediante la directiva de registro. Sin embargo, puede crear instancias de un control de usuario dinámicamente y agregarlo a la página. Estos son los pasos para hacerlo:
  1. Cree una nueva página de formularios Web Forms en Visual Studio.
  2. Vaya al código subyacente del archivo generado para esta página de formularios Web Forms.
  3. En el evento Page_Load de la clase Page, escriba el código siguiente.
    // Load the control by calling LoadControl on the page class.Control c1 = LoadControl("test.ascx");            // Add the loaded control in the page controls collection.Page.Controls.Add(c1);
    Nota Puede agregar un control de usuario dinámicamente en determinados eventos del ciclo de vida de la página. Para obtener más información, visite los siguientes sitios Web:
    Adición de controles a una páginade formularios Web Forms mediante programación Controlar el ciclo de vida deejecuciónControlesWeb dinámicos, devueltas y estado de vista, por Scott Mitchell

Cómo se procesa un control de usuario

Cuando se solicita una página con un control de usuario, ocurre lo siguiente:
  • El analizador de páginas analiza el archivo .ascx especificado en el atributo Src en la directiva . Register y genera una clase que deriva de la clase System.Web.UI.UserControl.
  • A continuación, el analizador compila dinámicamente la clase en un ensamblado.
  • Si usa Visual Studio, solo en tiempo de diseño, Visual Studio crea un código detrás del archivo para el control de usuario y el propio diseñador precompila el archivo.
  • Por último, la clase para el control de usuario, que se genera a través del proceso de generación y compilación de código dinámico, incluye el código para el código detrás del archivo (.ascx.cs), así como el código escrito dentro del archivo .ascx.

¿Qué son los controles personalizados?

Los controles personalizados son componentes de código compilados que se ejecutan en el servidor, exponen el modelo de objetos y representan texto de marcado, como HTML o XML, como lo hace un formulario web normal o un control de usuario.

Cómo elegir la clase base para el control personalizado

Para escribir un control personalizado, debe derivar directa o indirectamente la nueva clase de la clase System.Web.UI.Control o de la clase System.Web.UI.WebControls.WebControl:
  • Debe derivar de System.Web.UI.Control si desea que el control represente elementos no visuales. Por ejemplo, <meta> y <head> son ejemplos de representación no visual.
  • Debe derivar de System.Web.UI.WebControls.WebControl si desea que el control represente HTML que genera una interfaz visual en el equipo cliente.
Si desea cambiar la funcionalidad de los controles existentes, como un botón o una etiqueta, puede derivar directamente la nueva clase con estas clases existentes y puede cambiar su comportamiento predeterminado.En resumen, la clase Control proporciona la funcionalidad básica mediante la cual se puede colocar en el árbol de control de una clase Page. La clase WebControl agrega la funcionalidad a la clase Control base para mostrar contenido visual en el equipo cliente. Por ejemplo, puede usar la clase WebControl para controlar el aspecto y los estilos a través de propiedades como fuente, color y altura.

Cómo crear y usar un control personalizado simple que se extiende desde System.Web.UI.Control mediante Visual Studio

  1. Inicie Visual Studio.
  2. Cree un proyecto de biblioteca de clases y asíbse de asignar un nombre, por ejemplo, CustomServerControlsLib.
  3. Agregue un archivo de origen al proyecto, por ejemplo, SimpleServerControl.cs.
  4. Incluya la referencia del espacio de nombres System.Web en la sección references.
  5. Compruebe si los siguientes espacios de nombres se incluyen en el archivo de SimpleServerControl.cs.
    SystemSystem.CollectionsSystem.ComponentModelSystem.DataSystem.WebSystem.Web.SessionStateSystem.Web.UISystem.Web.UI.WebControls
  6. Heredar la SimpleServerControls clase con el Control clase base.
    public class SimpleServerControl : Control
  7. Invalide el método Render para escribir la salida en la secuencia de salida.
    protected override void Render(HtmlTextWriter writer) { writer.Write("Hello World from custom control");}
    Nota La clase HtmlTextWriter tiene la funcionalidad de escribir HTML en una secuencia de texto. El Write método de la HtmlTextWriter clase genera el texto especificado en la secuencia de respuesta HTTP y es el mismo que el Response.Write método.
  8. Compile el proyecto de biblioteca de clases. Generará la salida DLL.
  9. Abra un proyecto de aplicación web de ASP.NET existente o cree uno nuevo.
  10. Agregue una página de formularios Web Forms donde se pueda usar el control personalizado.
  11. Agregue una referencia a la biblioteca de clases en la sección de referencias del proyecto ASP.NET.
  12. Registre el control personalizado en la página de formularios Web Forms.
    <%@ Register TagPrefix="CC " Namespace=" CustomServerControlsLib " Assembly="CustomServerControlsLib " %>
  13. Para crear instancias o usar el control personalizado en la página de formularios Web Forms, agregue la siguiente línea de código en las etiquetas <form>.
    <form id="Form1" method="post" runat="server">    <CC:SimpleServerControl id="ctlSimpleControl" runat="server">    </CC:SimpleServerControl ></form>
    Nota En este código, SimpleServerControl es el nombre de clase de control dentro de la biblioteca de clases.
  14. Ejecute la página formularios Web Forms y verá la salida del control personalizado.
Si no usa Visual Studio, debe realizar los pasos siguientes:
  1. Abra cualquier editor de texto.
  2. Cree un archivo denominado SimpleServerControl.cs y escriba el código como se indica en los pasos del 1 al 14.
  3. En la variable PATH, agregue la ruta de acceso siguiente:
    c:\windows (winnt)\Microsoft.Net\Framework\v1.1.4322
  4. Inicie un símbolo del sistema y vaya a la ubicación donde SimpleServerControl.cs está presente.
  5. Ejecute el siguiente comando:
    csc /t:library /out: CustomServerControlsLib. SimpleServerControl.dll /r:System.dll /r:System.Web.dll SimpleServerControl.cs
    Para obtener más información acerca del compilador de C-C (csc.exe), visite el siguiente sitio Web de MSDN:
  6. Para ejecutar el control personalizado en la página de formularios Web Forms, haga lo siguiente:
    1. Cree un directorio en la carpeta wwwroot.
    2. Inicie el Administrador de Microsoft Internet Information Services (IIS) y marque el nuevo directorio como directorio raíz virtual.
    3. Cree una carpeta Bin en el nuevo directorio.
    4. Copie el archivo DLL de control personalizado en la carpeta Bin.
    5. Coloque la página de formularios Web Forms de ejemplo que creó en los pasos anteriores dentro del nuevo directorio.
    6. Ejecute la página de ejemplo desde el Administrador de IIS.
Ahora que ha creado un control personalizado simple, echemos un vistazo a cómo exponer propiedades y aplicar atributos en tiempo de diseño en ese control personalizado.

Cómo exponer propiedades en el control personalizado

Me basaré en el ejemplo anterior e introduciré una o varias propiedades que se pueden configurar mientras se usa el control personalizado en la página de formularios Web Forms.En el ejemplo siguiente se muestra cómo definir una propiedad que mostrará un mensaje del control un cierto número de veces, como se especifica en la propiedad del control:
  1. Abra SimpleServerControl.cs en un editor de texto.
  2. Agregue una propiedad en la clase SimpleServerControl.
    public class SimpleServerControl : Control{   private int noOfTimes;   public int NoOfTimes   {       get { return this.noOfTimes; }       set { this.noOfTimes = value; }   }    protected override void Render (HtmlTextWriter writer)   {     for (int i=0; i< NoOfTimes; i++)     {       write.Write("Hello World.."+"<BR>");     }    }}
  3. Compile el control personalizado.
  4. Para usar el control personalizado en la página de formularios Web Forms, agregue la nueva propiedad a la declaración de control.
    <CC:SimpleServerControl id="ctlSimpleControl" NoOfTimes="5" runat="server"></CC:SimpleServerControl>
  5. Al ejecutar la página se mostrará el mensaje "Hola mundo" desde el control personalizado tantas veces como se especifica en la propiedad del control.

Cómo aplicar atributos en tiempo de diseño en el control personalizado

Por qué se necesitan atributos en tiempo de diseño
El control personalizado que creó en el ejemplo anterior funciona según lo esperado. Sin embargo, si desea usar ese control en Visual Studio, es posible que desee que la propiedad NoOfTimes se resalte automáticamente en la ventana Propiedades siempre que se seleccione el control personalizado en tiempo de diseño.Para que esto suceda, debe proporcionar la información de metadatos a Visual Studio, lo que puede hacer mediante una característica de Visual Studio denominada atributos. Los atributos pueden definir una clase, un método, una propiedad o un campo. Cuando Visual Studio carga la clase del control personalizado, comprueba los atributos definidos en el nivel de clase, método, propiedad o campo y cambia el comportamiento del control personalizado en tiempo de diseño en consecuencia.Para obtener más información acerca de los atributos, visite el siguiente sitio Web de MSDN:Vamos a crear un ejemplo que usa atributos de uso común:
  1. Abra SimpleServerControl.cs en un editor de texto.
  2. Introducir algunos atributos básicos en el nivel de clase, por ejemplo, DefaultProperty, ToolboxDatay TagPrefixAttrbute. Construiremos nuestra muestra sobre estos tres atributos.
            [// Specify the default property for the control.DefaultProperty("DefaultProperty"),// Specify the tag that is written to the aspx page when the        // control is dragged from the Toolbox to the Design view. // However this tag is optional since the designer automatically // generates the default tag if it is not specified.ToolboxData("<{0}:ControlWithAttributes runat=\"server\">" +"</{0}:ControlWithAttributes>")]public class ControlWithAttributes : Control{private string _defaultProperty;public string DefaultProperty{get { return "This is a default property value"; }set { this._defaultProperty = value; }}protected override void Render(HtmlTextWriter writer){writer.Write("Default Property --> <B>" + DefaultProperty + "</B>");}         }
  3. Hay una etiqueta más llamada TagPrefixAttrbute. Es un atributo de nivel de ensamblado que proporciona un prefijo a una etiqueta al arrastrar el control desde el cuadro de herramientas al diseñador. De lo contrario, el diseñador genera un prefijo como "cc1" de forma predeterminada. TagPrefixAttrbute no se aplica directamente a la clase de control. Para aplicar TagPrefixAttrbute, abra AssemblyInfo.cs, incluya la siguiente línea de código y, a continuación, vuelva a generar el proyecto.
    [assembly:TagPrefix("ServerControlsLib ", "MyControl")]
    Nota Si desea compilar el origen mediante la línea de comandos, debe crear el archivo de AssemblyInfo.cs, colocar el archivo en el directorio que contiene todos los archivos de origen y ejecutar el siguiente comando para compilar el control:
    > csc /t:library /out: ServerControlsLib.dll /r:System.dll /r :System.Web.dll *.cs

¿Cuáles son las diferencias básicas entre los controles de usuario y los controles personalizados?

Ahora que tiene una idea básica de qué son los controles de usuario y los controles personalizados y cómo crearlos, echemos un vistazo rápido a las diferencias entre los dos.
Factores Control de usuario Control personalizado
Implementación Diseñado para escenarios de una sola aplicación Implementado en el formulario de origen (.ascx) junto con el código fuente de la aplicación Si el mismo control necesita ser utilizado en más de una aplicación, introduce problemas de redundancia y mantenimiento Diseñado para que pueda ser utilizado por más de una aplicación Implementado en el directorio Bin de la aplicación o en la caché global de ensamblados Distribuido fácilmente y sin problemas asociados con la redundancia y el mantenimiento
Creación La creación es similar a la forma en que se crean las páginas de formularios Web Forms; adecuado para el desarrollo rápido de aplicaciones (RAD) La escritura implica mucho código porque no hay soporte para diseñadores
Contenido Una opción mucho mejor cuando se necesita contenido estático dentro de un diseño fijo, por ejemplo, cuando se hacen encabezados y pies de página Más adecuado para cuando una aplicación requiere que se muestre contenido dinámico; se puede reutilizar en una aplicación, por ejemplo, para un control de tabla enlazado a datos con filas dinámicas
Diseño La escritura no requiere mucho diseño de aplicaciones porque se crean en tiempo de diseño y en su mayoría contienen datos estáticos Escribir desde cero requiere una buena comprensión del ciclo de vida del control y el orden en que se ejecutan los eventos, que normalmente se cuida en los controles de usuario

Temas avanzados

A continuación, echemos un vistazo a algunas de las características avanzadas que puede usar al desarrollar controles personalizados.

Gestión estatal

Las aplicaciones web se basan en HTTP, que no tiene estado. Una página y sus controles secundarios se crean en cada solicitud y se eliminan una vez finalizada la solicitud. Para mantener el estado en la programación ASP clásica, utilice objetos de sesión y de aplicación. Pero para eso, usted necesita hacer un montón de codificación. Para evitar esto, ASP.NET proporciona un mecanismo conocido como estado de vista para mantener el estado en varias solicitudes. Para obtener más información sobre la administración de estado y el estado de vista, visite los siguientes sitios Web de MSDN:
Introducción ala administración de estado de formularios Web FormsEl estado de ASP.NET vistaGuardar valores de página de formularios Web Forms mediante el estado devista
Ejemplo de uso del estado de vista en un control personalizado
ViewStateExample.cs
using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Web;using System.Web.SessionState;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;using System.Text;namespace ServerControlLib{/// <summary>/// When a page framework reloads this control after postback, it           /// will restore the values which are in view state./// This control can easily perform state management without         /// implementing our own logic for maintaining the state./// </summary>public class ViewStateExample : WebControl{// Text to be displayed in Text box control.private string _text;/* * This property needs to be populated before every                  * postback in order to  * retain its value.*/ public string Text{get { return (_text == null) ? "_text property is empty"  : _text; }set { _text = value; }}/* * This property needs to be filled once and should be                  * available on the successive postbacks.*/ public string TextInViewState{get{object o = ViewState["TextInViewState"];return (o == null) ? "View state is empty" : (string)o;}set { ViewState["TextInViewState"] = value; } }/* * Over-ridden method on WebControl base class which                                    * displays both of the property values  * i.e. one stored in view state and other which is not                  * saved in view state.*/protected override void RenderContents(HtmlTextWriter writer){writer.Write("Text Without View State = ");writer.Write(Text);writer.Write("<hr><br>");writer.Write("Text In View State = ");writer.Write(TextInViewState);}}}
Ejemplo de uso del control anterior en una página de formularios Web Forms
ViewStateExampleDemo.aspx
<%@ Page Language="C#" %><%@ Register TagPrefix="CC" Namespace="ServerControlLib" Assembly = "ServerControlLib" %><html>  <head>    <script runat="server">      void button1_Click(object sender, EventArgs e)      {          Control1.Text = textbox1.Text;          Control1.TextInViewState = textbox2.Text;      }    </script>  </head>  <body>    <form runat="server" ID="Form1">      <br>      Property Value Without View State: <asp:TextBox id="textbox1"         runat="server" />      <br>      Property Value with View State: <asp:TextBox id="textbox2"         runat="server" />      <asp:Button text="Cause Postback" onClick="button1_Click"         id="button1" Runat="server" />      Output from the ViewStateExample Control :      <CC:ViewStateExample id="Control1" runat="server"/>    </form>  </body></html>

Representación

En esta sección, describiré brevemente qué métodos debe invalidar al derivar un control personalizado de la Control clase o el WebControl clase.
Métodos de representación de la clase System.Web.UI.Control
Para obtener información acerca de los métodos de representación de la clase System.Web.UI.Control, visite los siguientes sitios Web de MSDN:
Cómo se representa un control en la página
Cada página tiene un árbol de control que representa una colección de todos los controles secundarios de esa página. Para representar el árbol de control, se crea un objeto de la HtmlTextWriter clase que contiene el HTML que se va a representar en el equipo cliente. Ese objeto se pasa a la RenderControl método. A su vez, el RenderControl método invoca el Render método. A continuación, el Render método llama a la RenderChildren método en cada control secundario, lo que hace que un bucle recursivo hasta que se alcanza el final de la colección. Este proceso se explica mejor con el siguiente código de ejemplo.
public void RenderControl(HtmlTextWriter writer) {    // Render method on that control will only be called if its visible property is true.    if (Visible)    {        Render(writer);    }}protected virtual void Render(HtmlTextWriter writer) {    RenderChildren(writer);}protected virtual void RenderChildren(HtmlTextWriter writer) {    foreach (Control c in Controls)     {        c.RenderControl(writer);    }} 
Métodos de representación de la clase System.Web.UI.WebControl
Para obtener información acerca de los métodos de representación de la clase System.Web.UI.WebControl, visite los siguientes sitios Web de MSDN:
Cómo se lleva a cabo la representación de la clase WebControl
En el ejemplo de código siguiente se muestra el Render método para el control personalizado.
protected override void Render(HtmlTextWriter writer){    RenderBeginTag(writer);    RenderContents(writer);    RenderEndTag(writer);}
No es necesario invalidar el método Render para la clase WebControl. Si desea representar contenido dentro de la WebControl clase, debe invalidar el RenderContents método. Sin embargo, si todavía desea invalidar el Render método, debe invalidar el RenderBeginTag método, así como el RenderEndTag método en el orden específico que se muestra en el ejemplo de código anterior.

Conclusión

Eso es todo por ahora en los controles de usuario y controles personalizados en ASP.NET 1.0 y ASP.NET 1.1. Espero que esta columna le ayude a entender las diferencias básicas entre ellos y los diversos enfoques que puede tomar para desarrollarlas.Gracias por su tiempo. Esperamos escribir más sobre los temas avanzados para controles personalizados, como la administración de estado, estilos de control, controles compuestos y compatibilidad en tiempo de diseño para controles personalizados, en un futuro próximo.Para obtener más información acerca de los controles, visite los siguientes sitios Web de MSDN:
ASP.NET básicosde desarrollo de control de servidorUn examen exhaustivo de los controles de usuarioCreación de controles de ASP.NETpersonalizados con plantillaEventos en ASP.NET controles deservidorControl compuesto frente a controlde usuario Desarrollo de controles de servidor ASP.NETDesarrollo de controlespersonalizados: conceptos claveAdición de compatibilidad en tiempo de diseño a ASP.NETcontroles
Como siempre, no dude en enviar ideas sobre los temas que desea abordar en futuras columnas o en la Base de conocimiento mediante el formulario Solicitarlo.