Información general sobre de controles de usuario y controles personalizados

Columna de voz de soporte ASP.NET

Información general sobre de controles de usuario y controles personalizados

Para personalizar esta columna a sus necesidades, deseamos invitar a enviar sus ideas sobre temas que le interesan los problemas que desea ver y abordaron en próximas columnas de voz de soporte y artículos de Knowledge Base. Puede enviar sus ideas y comentarios mediante el Preguntar para el formulario. También hay un vínculo al formulario en la parte inferior de esta columna.

Introducción

¡Hola! Se trata de Parag y soy ingeniero de soporte en colaboración con el grupo de soporte técnico de Microsoft ASP.NET por ahora más de un año. Antes de unirse a Microsoft, he trabajado en proyectos basados en Web y aplicaciones de escritorio mediante tecnologías de Microsoft. Al proporcionar soporte de calidad a los clientes, he visto casos donde ha habido alguna confusión en torno a los controles personalizados y me gustaría dedique algún tiempo a explicar algunos conceptos alrededor de los controles personalizados. Como malo como parece, créame, una vez que obtenga el bloqueo de la misma, estará en una mejor posición para apreciar ASP.NET.

Información general

En la columna de este mes, hablaré sobre 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 controles personalizados?
También presentaré a 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?

Controles de usuario son controles personalizados y reutilizables, y utilizan las mismas técnicas que se emplean en controles de servidor HTML y Web. Ofrecen una forma sencilla de dividir y reutilizar interfaces de usuario comunes entre las aplicaciones Web de ASP.NET. 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 detalles sobre el modelo de programación de Web Forms, visite los siguientes sitios Web de Microsoft Developer Network (MSDN):
Introducción a las páginas de formularios Web Forms
http://msdn2.microsoft.com/en-us/library/65tcbxz3(vs.71).aspx

Modelo de código de formularios Web
http://msdn2.microsoft.com/en-us/library/015103yb(vs.71).aspx

Cómo crear un control de usuario

La sintaxis que se utiliza para crear un control de usuario es similar a la sintaxis que se utiliza para crear una página de formularios Web Forms (.aspx). La única diferencia es que un control de usuario no incluye < html >, < body >, y < > los elementos del formulario desde 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 HTML o de texto y crear un bloque de código de servidor expone 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. Crear 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 utilizar un control de usuario en una página de formularios Web Forms

  1. Crear 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 @ Register . Por ejemplo, utilice el código siguiente.
    <%@ Register TagPrefix="UC" TagName="TestControl" Src="test.ascx" %>
    Nota: Suponga que el control de usuario y la página de formularios Web Forms en la misma ubicación.
  3. Para utilizar el control de usuario en la página de formularios Web Forms, utilice el código siguiente después de la directiva @ Register .
    <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 archivo de código subyacente de una página de formularios Web Forms

En el ejemplo anterior crea una instancia de un control de usuario mediante declaración en una página de formularios Web Forms mediante la directiva @ Register . Sin embargo, puede crear dinámicamente una instancia de un control de usuario y agregarlo a la página. Estos son los pasos para hacerlo:
  1. Crear una nueva página de formularios Web Forms en Visual Studio.
  2. Desplácese hasta el archivo de código subyacente generado para esta página de formularios Web Forms.
  3. En el evento Page_Load de la clase de página , 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 dinámicamente un control de usuario en determinados eventos de ciclo de vida de página.

    Para obtener más información, visite los siguientes sitios Web:
    Agregar controles a una página de formularios Web Forms mediante programación
    http://msdn2.microsoft.com/en-us/library/kyt0fzt1(vs.71).aspx

    Ciclo vital de ejecución de control
    http://msdn2.microsoft.com/en-us/library/aa719775(vs.71).aspx

    Controles Web dinámicos, las devoluciones de datos y el estado de vista, por Scott Mitchell
    http://aspnet.4guysfromrolla.com/articles/092904-1.aspx

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 se deriva de la clase System.Web.UI.UserControl .
  • A continuación, el analizador compila dinámicamente la clase en un ensamblado.
  • Si utiliza Visual Studio, a continuación, en tiempo de diseño, Visual Studio crea un archivo de código subyacente del control de usuario y el archivo está precompilado por el propio diseñador.
  • Por último, la clase del control de usuario, que se genera a través del proceso de generación de código dinámico y compilación, incluye el código para el archivo de código subyacente (. ascx.cs), así como el código escrito en el archivo .ascx.

¿Qué son los controles personalizados?

Controles personalizados son componentes de código compilado que ejecutan en el servidor y exponen el modelo de objetos para representan texto de marcado, como HTML o XML, como un control de formulario Web Forms o un usuario normal.

Cómo elegir la clase de base para el control personalizado

Para escribir un control personalizado, debe directa o indirectamente derivar la nueva clase de la clase System.Web.UI.Control o de la clase System.Web.UI.WebControls.WebControl :
  • Si desea que el control represente los elementos no visuales debe derivar de System.Web.UI.Control . Por ejemplo, < meta > y < head > es ejemplos de representación no Visual.
  • Si desea que el control represente HTML que genera una interfaz visual en el equipo cliente debe derivar de System.Web.UI.WebControls.WebControl .
Si desea cambiar la funcionalidad de los controles existentes, como un botón o etiqueta, que puede derivar directamente la nueva clase con estas clases existentes y puede cambiar su comportamiento predeterminado.

En pocas palabras, la clase Control proporciona la funcionalidad básica que se puede colocar en el árbol de control para una clase de página . La clase WebControl agrega la funcionalidad a la clase base del Control para mostrar el contenido visual en el equipo cliente. Por ejemplo, puede utilizar la clase WebControl para controlar la apariencia y estilos mediante propiedades como fuente, color y alto.

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

  1. Inicie Visual Studio.
  2. Cree un proyecto de biblioteca de clases y asígnele un nombre, por ejemplo, CustomServerControlsLib.
  3. Agregar un archivo de código fuente al proyecto, por ejemplo, SimpleServerControl.cs.
  4. Incluir la referencia de espacio de nombres System.Web en la sección referencias.
  5. Compruebe si los espacios de nombres siguientes están incluidos en el archivo SimpleServerControl.cs.
    SystemSystem.Collections
    System.ComponentModel
    System.Data
    System.Web
    System.Web.SessionState
    System.Web.UI
    System.Web.UI.WebControls

  6. Heredar de la clase SimpleServerControls con la clase base Control .
    public class SimpleServerControl : Control
  7. Reemplazar el método Render para escribir el resultado 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 escritura HTML en una secuencia de texto. El método Write de la clase HtmlTextWriter envía el texto especificado en la secuencia de respuesta HTTP y es el mismo que el método Response.Write .
  8. Compile el proyecto de biblioteca de clases. Generará la salida de la DLL.
  9. Abrir una existente o crear un nuevo proyecto de aplicación Web de ASP.NET.
  10. Agregar una página de formularios Web Forms donde se puede utilizar el control personalizado.
  11. Agregue una referencia a la biblioteca de clases en la sección de referencias del proyecto ASP.NET.
  12. Registrar el control personalizado en la página de formularios Web Forms.
    <%@ Register TagPrefix="CC " Namespace=" CustomServerControlsLib " Assembly="CustomServerControlsLib " %>
  13. Para crear una instancia o utilizar 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 la clase de control dentro de la biblioteca de clases.
  14. Ejecutar la página de formularios Web Forms y verá el resultado del control personalizado.
Si no está utilizando Visual Studio, debe realizar los siguientes pasos:
  1. Abra cualquier editor de texto.
  2. Cree un archivo denominado SimpleServerControl.cs y escribir el código tal como se indica en los pasos 1 a 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 /r:System.Web.dll SimpleServerControl.cs
    Para obtener más información sobre el compilador C# (csc.exe), visite el siguiente sitio Web de MSDN:
  6. Para ejecutar el control personalizado en la página de formularios Web Forms, siga este procedimiento:
    1. Cree un directorio en la carpeta wwwroot.
    2. Inicie el Administrador de servicios de Microsoft Internet Information Services (IIS) y marcar el nuevo directorio como directorio raíz virtual.
    3. Cree una carpeta Bin bajo el directorio nuevo.
    4. Copie el archivo DLL del control personalizado en la carpeta Bin.
    5. Coloque la página de formularios Web Forms de ejemplo que creó en los pasos anteriores en el nuevo directorio.
    6. Ejecutar 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 de tiempo de diseño en dicho control personalizado.

Cómo exponer propiedades en el control personalizado

Voy a crear en el ejemplo anterior y presentar una o varias propiedades que se pueden configurar mientras se utiliza el control personalizado en la página de formularios Web Forms.

En el ejemplo siguiente se muestra cómo definir una propiedad que se mostrará un mensaje desde el control de un determinado número de veces, según se especifica en la propiedad del control:
  1. Abra SimpleServerControl.cs en un editor de texto.
  2. Agregar 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. Compilar el control personalizado.
  4. Para utilizar el control personalizado en la página de formularios Web Forms, agregue la nueva propiedad a la declaración del control.
    <CC:SimpleServerControl id="ctlSimpleControl" NoOfTimes="5" runat="server"></CC:SimpleServerControl>
  5. Ejecución de la página, se mostrará el mensaje "Hello world" desde el control personalizado tantas veces como especificado en la propiedad del control.

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

¿Por qué son necesarios los atributos en tiempo de diseño
El control personalizado que generó en el ejemplo anterior funciona como se esperaba. Sin embargo, si desea utilizar dicho control en Visual Studio, puede la propiedad NoOfTimes se resalta automáticamente en la ventana Propiedades cuando se selecciona el control personalizado en tiempo de diseño.

Para que esto suceda, debe proporcionar la información de metadatos para Visual Studio, lo que puede hacer con una característica de Visual Studio denominadas 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 generar un ejemplo que utiliza habitualmente utiliza atributos:
  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. En estos tres atributos, crearemos nuestro ejemplo.
            [// 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 denominada TagPrefixAttrbute. Es un atributo de nivel de ensamblado que proporciona un prefijo a una etiqueta cuando se arrastra el control desde el cuadro de herramientas hasta el 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 el archivo AssemblyInfo.cs, incluya la línea siguiente de código y, a continuación, vuelva a generar el proyecto.
    [assembly:TagPrefix("ServerControlsLib ", "MyControl")]
    Nota: Si desea crear el origen de la línea de comandos, necesita crear el archivo AssemblyInfo.cs, coloque el archivo en el directorio que contiene todos los archivos de origen y ejecute el siguiente comando para generar el control:
    > csc/t: library/out: / r de r ServerControlsLib.dll: *.cs System.Web.dll

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

Ahora que tiene una idea básica de qué son los controles de usuario y controles personalizados y cómo crearlos, echemos un vistazo a las diferencias entre los dos.
FactoresControl de usuarioControl personalizado
ImplementaciónDiseñado para escenarios de aplicación única

Implementar en el formulario de origen (.ascx) junto con el código fuente de la aplicación

Si se necesita el mismo control ser utilizado en más de una aplicación, presenta redundancia y problemas de mantenimiento
Diseñado de forma que puede ser utilizado por más de una aplicación

Implementado en el directorio Bin de la aplicación o en la caché de ensamblados global

Distribuye fácilmente y sin problemas asociados con redundancia y mantenimiento
CreaciónLa creación es similar a la forma en que se crean páginas de formularios Web Forms; ideal para el desarrollo rápido de aplicaciones (RAD)Escritura implica un montón de código porque no hay ninguna compatibilidad con el diseñador
ContenidoUna opción mucho mejor cuando necesite contenido estático dentro de una presentación fija, por ejemplo, al realizar los encabezados y pies de páginaMás adecuados para cuando una aplicación requiere contenido dinámico para mostrarse; puede reutilizar en una aplicación, por ejemplo, para el control de tabla con filas dinámicas enlazada a datos
DiseñoEscritura no requiere mucho diseño de aplicación ya que se crean en tiempo de diseño y que contienen principalmente datos estáticosEscribir desde el principio, es necesario una buena comprensión del ciclo de vida del control y el orden en el que ejecutan eventos, que normalmente se solventan en controles de usuario

Temas avanzados

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

Administración del estado

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 después de la solicitud. Para mantener el estado en la programación de ASP clásica, utilice objetos session y application. Pero, para ello, necesitará hacer un montón de codificación. Para evitar este problema, ASP.NET proporciona un mecanismo conocido como el estado de vista para mantener el estado entre varias solicitudes. Para obtener más información acerca del estado de vista y de administración, visite los siguientes sitios Web de MSDN:
Introducción a la administración del estado de formularios Web Forms
http://msdn2.microsoft.com/en-us/library/75x4ha6s(vs.71).aspx

El estado de vista ASP.NET
http://msdn.microsoft.com/msdnmag/issues/03/02/cuttingedge/default.aspx

Formularios Web Guardar valores utilizando el estado de vista de página
http://msdn2.microsoft.com/en-us/library/4yfdwycw(vs.71).aspx
Ejemplo de cómo utilizar el 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 cómo utilizar el 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 se deben invalidar al derivar un control personalizado de la clase de Control o la clase WebControl .
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 procesa 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 clase HtmlTextWriter que contiene el código HTML que se representa en el equipo cliente. Ese objeto se pasa al método RenderControl . A su vez, el método RenderControl invoca el método Render . A continuación, el método Render llama al método RenderChildren en cada control secundario, haciendo un bucle recursivo hasta que se alcanza el final de la colección. Este proceso se explica mejor mediante el ejemplo de código siguiente.
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 realiza la representación de la clase WebControl
En el ejemplo de código siguiente se muestra el método Render del control personalizado.
protected override void Render(HtmlTextWriter writer){
RenderBeginTag(writer);
RenderContents(writer);
RenderEndTag(writer);
}

No es necesario reemplazar el método Render de la clase WebControl . Si desea representar contenido dentro de la clase WebControl , debe reemplazar el método RenderContents . Sin embargo, si desea reemplazar el método Render , debe reemplazar el método RenderBeginTag , así como el método RenderEndTag 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 ayudará a entender las diferencias básicas entre ellos y los distintos enfoques que puede tomar para desarrollarlas.

Gracias por su tiempo. Vamos a escribir más información acerca de los temas avanzados para controles personalizados, tales como administración de Estados, estilos de control, los 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:
Fundamentos de desarrollo de controles de servidor ASP.NET
http://msdn2.microsoft.com/en-us/library/aa310918(vs.71).aspx

Un examen extenso de controles de usuario
http://msdn2.microsoft.com/en-us/library/ms972975.aspx

Creación de controles con plantilla personalizada de servidor ASP.NET
http://msdn2.microsoft.com/en-us/library/Aa478964.aspx

Eventos en controles de servidor ASP.NET
http://msdn2.microsoft.com/en-us/library/aa720049(vs.71).aspx

Control compuesto frente a control de usuario
http://msdn2.microsoft.com/en-us/library/aa719735(vs.71).aspx

Desarrollar controles de servidor ASP.NET
http://msdn2.microsoft.com/en-us/library/aa719973(vs.71).aspx

Desarrollar controles personalizados: conceptos clave
http://msdn2.microsoft.com/en-us/library/aa720226(vs.71).aspx

Agregar compatibilidad en tiempo de diseño a los controles ASP.NET

http://msdn2.microsoft.com/en-us/library/Aa478960.aspx
Como siempre, no dude en enviar ideas sobre temas que desea dirigidos en futuras columnas o en Knowledge Base utilizando la solicite para el formulario.
Propiedades

Id. de artículo: 893667 - Última revisión: 17 ene. 2017 - Revisión: 1

Comentarios