6-Creacion de Controles de Usuario

Creación de controles de usuario
Índice
Descripción 1
Lección: agregar controles de usuario a un formulario
Web Form ASP.NET 2
Lección: crear controles de usuario 12
Creación de controles de usuario 1
Descripción
Agregar controles de usuario a un formulario Web

FormASP.NET
Crear controles de usuario
***************************** ******************************
Introducción Además de Hypertext Markup Language (HTML) y los controles de servidor

Web, podemos crear fácilmente nuestros propios controles que pueden ser
reutilizados en las aplicaciones Web. Estos controles se denominan controles de
usuario. Los controles de usuario proporcionan un modo fácil de reutilizar
componentes habituales de la interfaz de usuario y código en una aplicación
Web.
Objetivos En este módulo, aprenderemos a:
Agregar un control de usuario a un formulario Microsoft® ASP.NET.
Crear un control de usuario.
2 Creación de controles de usuario
Lección: agregar controles de usuario a un formulario

Web Form ASP.NET
¿Qué es un control de usuario?

¿Por qué utilizar controles de usuario?
Práctica: hacer una lista de controles de usuario
Agregar un control de usuario
Demostración: Crear un control de usuario
***************************** ******************************
Introducción Un control de usuario es una página ASP.NET que otro formulario Web Form
ASP.NET puede importar como un control de servidor. De modo similar a los
controles de servidor Web, que son componentes que se ejecutan en el servidor,
los controles de usuario proporcionan interfaz de usuario y demás
funcionalidades relacionadas. Una vez creado un control de usuario, éste puede
ser utilizado por otras páginas de la misma aplicación Web.
En esta lección, estudiaremos qué son los controles de usuario, porqué
deberíamos pensar en utilizarlos en nuestras aplicaciones Web, cómo
referenciar un control de usuario desde un formulario Web Form ASP.NET, y
cómo acceder a las propiedades de un control de usuario.
Objetivos de la lección En esta lección, aprenderemos a:
Explicar qué es un control de usuario y por qué deberíamos utilizar uno.
Agregar un control de usuario a una página ASP.NET.
Acceder a las propiedades de los controles de usuario de una página
ASP.NET.
¿Qué es un control de usuario?
Los controles de usuario simplifican la reutilización de

código y componentes de la IU en una aplicación Web
Un control de usuario es un control de servidor Web
definido por el usuario con una extensión .ascx
Contiene HTML, pero no las etiquetas <HTML>,
<BODY>, o <FORM>
<%@
<%@ Control
Control Language="vb"
Language="vb" %>
%>
ó
<%@
<%@ Control
Control Language="c#"
Language="c#" %>
%>
Contiene código para gestionar sus propios eventos
***************************** ******************************
Introducción Los controles de usuario pueden simplificar la reutilización de código y

componentes habituales de la interfaz de usuario; por ello, saber qué son y
cómo funcionan es una parte importante del aprendizaje del desarrollo con
ASP.NET.
Definición Los controles de usuario son páginas ASP.NET con una extensión de archivo
.ascx. Los controles de usuario ofrecen un modo fácil de particionar y reutilizar
funcionalidades habituales de la interfaz de usuario en nuestras aplicaciones
Web ASP.NET. Similar a una página de un formulario Web Form, podemos
crear estos controles con cualquier editor de texto, o desarrollarlos utilizando
clases de código subyacente. Además, de forma similar a un formulario Web
Form, los controles de usuario se compilan cuando se solicitan por primera vez
y se almacenan en memoria del servidor para reducir el tiempo de respuesta de
las siguientes peticiones. Sin embargo, a diferencia de los formularios Web
Form, los controles de usuario no pueden ser solicitados de modo
independiente; deben estar incluidos en una página Web Form para que puedan
funcionar.
Nota El Microsoft .NET Framework impide que archivos con la extensión de

archivo .ascx puedan ser visualizados en un navegador Web. Es una medida de
seguridad que asegura que el control de usuario no puede ser visualizado como
una página ASP.NET independiente.
¿Qué hay en un control Un control de usuario está formado por HTML y código, pero como los
de usuario? controles de usuario son utilizados por formularios Web Forms, no contienen
las etiquetas HTML <HEAD>, <BODY> ni <FORM>. En lugar de ello, estas
etiquetas se incluyen en cada formulario Web Form que utilice el control de

usuario.
Cuando un formulario Web Form utiliza un control de usuario, éste último
participa en el ciclo de vida del evento del formulario Web Form. Además,
como un control de usuario es una página ASP.NET, tiene su propia lógica de
página. Por ejemplo, un control de usuario puede gestionar su propio postback
en su procedimiento de evento Page_Load.
Nota Los controles de usuario son diferentes de los controles de servidor

personalizados. Para aprender más sobre la creación de controles de servidor
personalizados, leer “Desarrollo de controles de servidor ASP.NET” en la
documentación de Microsoft Visual Studio® .NET.
Controles de usuario y Al igual que los formularios Web Forms tienen páginas de código subyacente,
sus páginas asociados los controles de usuario también tienen una página de código subyacente
de código subyacente asociada. La directiva @ Page se utiliza en los formularios Web Forms para
asociar una página de código subyacente, mientras que la directiva @ Control
se utiliza para hacer referencia a una página de código subyacente desde una
página de control de usuario. La directiva @ Control sólo puede utilizarse con
controles de usuario, y únicamente podemos incluir una directiva @ Control
por cada archivo .ascx. Por ejemplo, para hacer referencia a una página de
código subyacente de un control de usuario denominada WebUserControl1, en
un proyecto de aplicación Web denominado test, utilizamos la siguiente
directiva @ Control:
Visual Basic .NET <%@ Control Language="vb" Codebehind="WebUserControl1.ascx.vb"
Inherits="test.WebUserControl1" %>
C# <%@ Control Language="c#" Codebehind="WebUserControl1.ascx.cs"

Nota La directiva @ Control soporta los mismos atributos que la directiva @

Page, salvo los atributos AspCompat y Trace. Como la directiva @ Control
no utiliza el atributo Trace, si deseamos habilitar el seguimiento para el control
de usuario, debemos añadirlo a la directiva @ Page para la página .aspx que
invoca el control de usuario.
Control de usuario Un control de usuario es distinto de un control de servidor Web. Los controles
frente a control de de servidor Web no sólo incluyen controles de tipo formulario, como botones y
servidor Web cuadros de texto, sino también controles específicos como calendarios, etc.
Nota Para más información sobre los controles de servidor Web, ver el
Módulo “Crear un formulario Web Form con Microsoft ASP.NET”.
¿Por qué utilizar controles de usuario?
Reutilizar interfaz de usuario y código
Control1.ascx Aplicación A Aplicación B
Page3.aspx
Page1.aspx
Page2.aspx
***************************** ******************************
Introducción Son varias las ventajas de utilizar controles de usuario en nuestras aplicaciones
Web ASP.NET. Los controles de usuario son autocontenidos, pueden utilizarse
muchas veces y pueden escribirse en un lenguaje distinto al de la página
principal que los hospeda.
Ventajas de utilizar Los controles de usuario se utilizan para numerosas utilidades, como crear
controles de usuario encabezados y barras de navegación, y para repetir bloques de código en un
proyecto de aplicación Web.
Nota En las páginas Web Active Server Pages (ASP) tradicionales, la

funcionalidad include de archivos se utiliza para reutilizar código e interfaz de
usuario. En ASP.NET, las páginas de controles de usuario sustituyen la
funcionalidad include de archivos.
Los controles de usuario ofrecen numerosas ventajas en el desarrollo de una

aplicación Web:
Los controles de usuario son autocontenidos. Proporcionan espacios de
nombres de variables distintos, lo cual significa que ninguno de los métodos
y propiedades del control de usuario entra en conflicto con ningún método
existente o propiedad de la página que lo aloja.
Los controles de usuario pueden utilizarse más de una vez en la página que
los hospeda, sin causar conflictos con propiedades o métodos.
Los controles de usuario pueden escribirse en un lenguaje distinto del de la
página principal. Por ejemplo, un control de usuario escrito en Microsoft
Visual C# puede utilizarse en un formulario Web Form escrito en Microsoft
Visual Basic® .NET.
Compartir controles de Un único control de usuario puede ser compartido por todas las páginas de una
usuario aplicación Web. Sin embargo, las páginas .aspx de una aplicación Web no
pueden hospedar un control de usuario de otra aplicación Web. Para utilizar un
control de usuario en varias aplicaciones Web, el control de usuario debe
copiarse a la carpeta raíz del directorio virtual de cada aplicación Web.
Para compartir controles entre múltiples aplicaciones Web, también podemos
crear un control Web personalizado, que actúa como un control de usuario
compartible. Los controles Web personalizados son más difíciles de crear que
los controles de usuario, ya que, a diferencia de los controles de usuario, los
controles Web personalizados no pueden crearse utilizando las herramientas
visuales de Visual Studio .NET; de este modo, todo el desarrollo debe realizarse
únicamente por código.
Nota Para más información sobre controles de usuario y los controles Web
personalizados, ver “Controles de usuario Web y controles Web
personalizados” en la documentación de Visual Studio .NET.
Práctica: hacer una lista de controles de usuario
Los estudiantes:
z Crearán una lista de ejemplos sobre
cuándo resulta apropiado el uso de
controles de usuario
Tiempo: 5 minutos
***************************** ******************************
Introducción En esta práctica, generaremos una lista de ideas en las que podríamos utilizar
controles de usuario y compartiremos estos ejemplos con el resto de la clase.
Pensar en cuatro ejemplos en los que un control de usuario simplifique el
desarrollo de páginas Web
________________________________________________________________
________________________________________________________________
Agregar un control de usuario
Utilizar la directiva @ Register para incluir un control de

usuario en una página ASP.NET
<%@
<%@ Register
Register TagPrefix="demo"
TagPrefix="demo"
TagName="validNum"
TagName="validNum" Src="numberbox.ascx"
Src="numberbox.ascx" %>
%>
Insertar el control de usuario en un formulario Web Form
<demo:validNum
<demo:validNum id="num1"
id="num1" runat="server"/>
runat="server"/>
Utilizar las propiedades Get y Set del control de usuario
num1.pNum
num1.pNum == 55 'uses
'uses Set
Set
xx == num1.pNum 'uses Get
num1.pNum 'uses Get
o
num1.pNum
num1.pNum == 5;
5; //uses
//uses Set
Set
xx == num1.pNum; //uses Get
num1.pNum; //uses Get
***************************** ******************************
Introducción Podemos ubicar un control de usuario en cualquier formulario Web Form

ASP.NET. La página que hace referencia al control de usuario se denomina
host, y el control se incluye en ella.
Incluir controles de Los controles de usuario se incluyen en un formulario Web ASP.NET
usuario utilizando la directiva @ Register, como muestra el siguiente código:
<%@ Register TagPrefix="demo" TagName="validNum"
El atributo TagPrefix determina un espacio de nombres único para el control de

usuario de forma que múltiples controles de usuario con el mismo nombre
pueden diferenciarse entre sí. El atributo TagName es el único nombre para el
control de usuario. El atributo Src es la ruta virtual al archivo del control de
usuario.
Uso del control de Tras registrar el control de usuario con la directiva @ Register, podemos ubicar
usuario la etiqueta del control de usuario en el formulario Web Form al igual que
colocaríamos un control de servidor Web normal, incluyendo el uso del atributo
runat="server". El siguiente código de ejemplo agrega dos controles de
usuario a un formulario Web Form:
<demo:validNum id="num1" runat="server"/>
<demo:validNum id="num2" runat="server"/>
Cuando se solicita el formulario Web Form principal, el entorno de ejecución

compila el archivo del control de usuario y lo pone a disposición de la página.
Uso de las propiedades En los procedimientos de evento en la página host, podemos acceder a las
Get y Set propiedades del control de usuario agregando declaraciones para el control de
usuario. El siguiente código muestra declaraciones para dos controles de
usuario numberbox:
Visual Basic .NET Protected num1 As numberbox
Protected num2 As numberbox
C# protected numberbox num1;

protected numberbox num2;
En los ejemplos de código anteriores, numberBox es el nombre de la clase que

implementa el control de usuario. El nombre de variable (num1 o num2) debe
ser el mismo que el atributo id que se utiliza cuando se agrega el control de
usuario al formulario Web Form.
El siguiente ejemplo invoca la propiedad Get de los controles de usuario num1
y num2:
Visual Basic .NET lblSum.Text = (num1.pNum + num2.pNum).ToString()
C# lblSum.Text = (num1.pNum + num2.pNum).ToString();
El siguiente ejemplo invoca la propiedad Set de los controles de usuario num1

y num2 para mostrar las constantes 5 y 7 en el control de usuario:
Visual Basic .NET num1.pNum = 5
num2.pNum = 7
C# num1.pNum = 5;
num2.pNum = 7;
Demostración: crear un control de usuario
Crear un nuevo control de usuario

Crear una propiedad
***************************** ******************************
Introducción En esta demostración, crearemos un control de usuario con Visual Studio .NET.
El código completo para esta demostración se encuentra en el archivo
numberbox.ascx del proyecto Demo07VB o Demo07CS, que se pueden
encontrar dentro del fichero demos07.zip.
Ë Ejecutar esta demostración

1. Crear un nuevo proyecto de aplicación Web o utilizar un proyecto existente.
2. Agregar la página beforeuser.aspx al proyecto de aplicación Web.
Para el proyecto Visual Agregar la página
Basic .NET carpeta_instalación\Democode\Mod08VB\beforeuser.aspx al proyecto.
Para el proyecto Visual Agregar la página
C# carpeta_instalación\Democode\Mod08CS\beforeuser.aspx al proyecto.
3. Abrir la página y mostrar el código fuente HTML. El código HTML utiliza
la misma combinación de controles (un cuadro de texto y dos controles de
validación) en dos lugares.
4. En vista Diseño, agrupar, seleccionar y copiar el primer conjunto del cuadro
de texto y los controles de validación de la página.
5. Crear un nuevo control de usuario añadiendo un nuevo Control de Usuario
Web al proyecto. Denominarlo numberbox.ascx.
6. Mostrar el código HTML de la página y observar la directiva @ Control
que ha creado Visual Studio .NET.
7. En la vista Diseño, pegar en el cuadro de texto y en los controles de
validación.
8. Abrir la página de código subyacente para el nuevo control de usuario.

9. En la página de código subyacente denominada numberbox.ascx.vb o
numberbox.ascx.cs, crear una propiedad pública para el valor del cuadro de
texto, como muestra el siguiente código de ejemplo:
Para el proyecto Visual Public Property pNum() As Integer
Basic .NET Get
Return CInt(txtNum1.Text)
End Get
Set(ByVal Value As Integer)
txtNum1.Text = Value.ToString()
End Set
End Property
Observar que cuando se introduce el encabezado de la propiedad pNum,

Visual Studio .NET crea una plantilla para las propiedades Get y Set.
Para el proyecto Visual public int pNum
C# {
get
{
return Convert.ToInt32(txtNum1.Text);
}
set
{
txtNum1.Text = Convert.ToString(value);
}
}
Observar que la propiedad set no toma ningún argumento. El valor pasado

se asigna automáticamente a una variable denominada value, accesible para
la propiedad set.
10. Guardar los cambios de la página numberbox.ascx.
Lección: crear controles de usuario
Crear un control de usuario

Demostración: utilizar un control de usuario
***************************** ******************************
Introducción Después de crear un control de usuario, éste puede ser utilizado por otras
páginas de la misma aplicación Web. En esta lección, aprenderemos a crear
controles de usuario.
Objetivos de la lección En esta lección, aprenderemos a:
Crear un control de usuario.
Convertir un formulario Web Form existente en un control de usuario.
Crear un control de usuario
Dos métodos para la creación de controles de usuario:

z Crear un nuevo control de usuario utilizando Visual Studio .NET
z Convertir una página ASP.NET existente en un control de usuario
La pagina host interactúa con el control utilizando propiedades
La página host debería utilizar el flujo de presentación
Public
Public Property
Property pNum()
pNum() As
As Integer
Integer public
public int
int pNum
pNum
Get
Get {{
Return
Return Convert.ToInt32(txtNum.Text)
Convert.ToInt32(txtNum.Text) get
get
End
End Get
Get {{
Set
Set (ByVal
(ByVal value
value As
As Integer)
Integer) return
return
txtNum.Text
txtNum.Text == CStr(value)
CStr(value) Convert.ToInt32(txtNum.Text);
Convert.ToInt32(txtNum.Text);
End
End Set
Set }}
End
End Property
Property set
set
{{
txtNum.Text
txtNum.Text ==
Convert.ToString(value);
Convert.ToString(value);
}}
}}
***************************** ******************************
Introducción Podemos crear un nuevo control de usuario o convertir un formulario Web

Form ASP.NET existente en un control de usuario.
Crear un nuevo control
de usuario
Ë Crear un nuevo control de usuario
1. Hacer clic con el botón derecho en un proyecto de aplicación Web en el
Explorador de soluciones de Visual Studio .NET, seleccionar Agregar, y
hacer clic en Agregar control de usuario Web.
2. Poner al control un nombre y hacer clic en Abrir.
Se crea una página con una extensión .ascx.
Nota La página se crea con la presentación de página establecida en modo de

presentación de flujo, y una directiva @ Control. Podemos arrastrar un control
de panel de presentación en rejilla (Grid Layout Panel) desde la sección de
HTML al cuadro de herramientas si necesitamos generar el control de usuario
con una presentación de rejilla en lugar de presentación de flujo.
3. Agregar los elementos de la interfaz de usuario. Generamos la página del

mismo modo que un formulario Web ASP.NET, agregando elementos de la
interfaz de usuario desde el Cuadro de herramientas de Visual Studio .NET
o escribiendo el código HTML.
Nota Cuando generamos la parte de interfaz de usuario de un control de

usuario en Visual Studio .NET, debemos utilizar presentación de flujo en
lugar de presentación de rejilla.
4. Agregar procedimientos de evento para elementos de interfaz de usuario y

los eventos de página. Al igual que la creación de cualquier otra página
ASP.NET, agregamos procedimientos de evento a la página de código
subyacente.
5. Crear propiedades para interactuar con la página host. Las propiedades
permiten al formulario Web Form que hospeda el control leer y escribir
valores en los elementos de la interfaz de usuario del control de usuario. Las
propiedades del control de usuario ocultan la implementación del control.
Convertir un formulario
Web Form existente en
Ë Convertir un formulario Web Form existente en un control de usuario
un control de usuario 6. Eliminar todas las etiquetas <HTML>, <BODY> y <FORM>.
7. Si hay una directiva @ Page existente en la página, modificarla a una
directiva @ Control. Aunque la mayoría de atributos @ Page también están
soportados por la directiva @ Control, comprobar que no hay atributos no
soportados.
Nota Para más información sobre los atributos soportados por las directivas
@ Page y @ Control, ver “Sintaxis de directivas” en la documentación de
Visual Studio .NET.
8. Agregar un atributo className a la directiva @ Control. El atributo

className permite que control de usuario sea fuertemente tipado cuando se
agrega a una página.
9. Cambiar el nombre del archivo a un nombre que represente su
funcionalidad, y cambiar la extensión de archivo .aspx por .ascx.
Página host La página host es el formulario Web Form que incluirá el control de usuario.
Esta página debería estar en modo de presentación de flujo para evitar
solapamientos entre el contenido del control de usuario y el contenido de la
página.
La página host no tiene acceso directo a los elementos de la interfaz de usuario
que están en un control de usuario. Por tanto, utilizamos propiedades públicas
en un control de usuario para exponer los elementos de la interfaz de usuario
que se encuentran en el control de forma que el host puede utilizar los
elementos de la interfaz de usuario.
Por ejemplo, si un control de usuario está formado por dos cuadros de texto,
necesitaríamos una propiedad para cada cuadro de texto para que la página host
pueda leer y escribir el valor de cada cuadro de texto.
El siguiente código es la parte HTML de un control de usuario Visual Basic
.NET que incluye un cuadro de texto y dos controles de validación de entrada
de datos:
<%@ Control Language="vb" Codebehind="WebUserControl1.ascx.vb"

<asp:textbox id="txtNum" runat="server" />
<asp:RequiredFieldValidator id="txtNumValidator"
runat="server"
controlToValidate="txtNum"
errorMessage="You must enter a value"
display="dynamic">
</asp:RequiredFieldValidator>
<asp:RangeValidator id="txtNumRngValidator" runat="server"
controlToValidate="txtNum"
errorMessage="Please enter a number between 0 and 99"
type="Integer"
minimumValue="0"
maximumValue="99"
display="dynamic">
</asp:RangeValidator>
Para exponer los valores del cuadro de texto en el host, debemos crear una
propiedad pública. Por ejemplo, el siguiente código de la página de código
subyacente crea una propiedad denominada pNum. La propiedad pNum
expone la propiedad Text del control del cuadro de texto en el control de
usuario:
Visual Basic .NET Public Property pNum() As Integer
Get
Return CInt(txtNum.Text)
End Get
Set(ByVal Value As Integer)
txtNum.Text = Value.ToString()
End Set
End Property
C# public int pNum

{
get
{
return Convert.ToInt32(txtNum1.Text);
}
set
{
txtNum1.Text = Convert.ToString(value);
}
}
Todas las variables, propiedades y métodos públicos de un control de usuario se

convierten en propiedades y métodos del control en la página host. Desde los
ejemplos de código anteriores, podemos acceder a la propiedad pNum como un
atributo de una etiqueta de la página host. Si el control de usuario se denomina
userText1, podemos leer y escribir la propiedad userText1.pNum. Del mismo
modo, si creamos una función pública en el control de usuario, se convierte en
un método que puede ser utilizado desde la página host.
Demostración: uso de un control de usuario
Insertar un control de usuario en una

página
Utilizar los controles de usuario en la
página de código subyacente
***************************** ******************************
Introducción En esta demostración, veremos cómo utilizar un control de usuario desde una
página host.
El código completo para la demostración de Visual Basic .NET se encuentra en
el archivo Demo07VB\afteruser.aspx.
El código completo para la demostración de Visual C# se encuentra en el
archivo Demo07CS\afteruser.aspx.
Ambos archivos pueden encontrarse dentro del fichero demos07.zip.
Nota Esta demostración se añade a la primera demostración de este módulo,

“Crear un control de usuario.”
Ë Utilizar un control de usuario en una nueva página ASP.NET

1. Editar la página beforeuser.aspx.
2. Borrar los dos conjuntos de cuadros de texto y controles de validación (seis
controles en total).
3. Mediante una operación de arrastrar y soltar, colocar el control de usuario
numberbox.ascx desde el Explorador de soluciones en la ubicación del
primer conjunto de controles en el formulario Web Form que acabamos de
borrar.
4. Visualizar el código HTML de la página; Visual Studio .NET ha agregado
la directiva @ Register, junto con la etiqueta para el control de usuario,
como muestra el siguiente código de ejemplo:
<%@ Register TagPrefix="uc1" TagName="numberbox"

...
<uc1:numberbox id=Numberbox1 runat="server">
</uc1:numberbox>
...
5. Colocar un segundo control numberbox.ascx en el formulario Web Form
beforeuser.aspx en la ubicación del segundo conjunto de controles que
acabamos de borrar.
Visual Studio .NET agrega el siguiente código HTML para crear el control
de usuario:
<uc1:numberbox id=Numberbox2 runat="server">
</uc1:numberbox>
6. En la página de código subyacente del archivo beforeuser.aspx, agregar

declaraciones para los dos nuevos controles:
Visual Basic .NET Protected Numberbox1 As numberbox
Protected Numberbox2 As numberbox
Visual C# protected numberbox Numberbox1;

protected numberbox Numberbox2;
Nota Si el nombre de nuestro proyecto no es Mod08CS o Mod08VB,

deberíamos cambiar el nombre del espacio de nombres en beforeuser.aspx.cs o
.vb para que coincida con el nombre del proyecto.
7. Cambiar el procedimiento de evento del botón Compute para leer los

valores de los controles de usuario:
Visual Basic .NET Sub Button1_Click(s As Object, e As EventArgs)
If Page.IsValid Then
lblSum.Text = _
CStr(Numberbox1.pNum + Numberbox2.pNum)
End If
End Sub
C#: private void Button1_Click(object sender, System.EventArgs

e)
{
if (Page.IsValid)
lblSum.Text = Convert.ToString(Numberbox1.pNum +
Numberbox2.pNum);
}
8. Generar y examinar la página beforeuser.aspx.

9. Visualizar el código fuente HTML en el navegador.
10. Observar cómo los controles de usuario se representan en HTML.
11. En el control de usuario numberbox.ascx, agregar código de inicialización al
procedimiento de evento Page_Load:
Visual Basic .NET If Not Page.IsPostBack Then

txtNum1.Text = "0"
End If
C# if (!Page.IsPostBack)
txtNum1.Text = "0";
12. Generar y examinar la página beforeuser.aspx.

13. Ahora, el control de usuario tiene un valor inicial de 0.

6-Creacion de Controles de Usuario

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

6-Creacion de Controles de Usuario

Cargado por

Copyright:

Formatos disponibles

Creación de controles de usuario

 Agregar controles de usuario a un formulario Web

Introducción Además de Hypertext Markup Language (HTML) y los controles de servidor

Lección: agregar controles de usuario a un formulario

 ¿Qué es un control de usuario?

¿Qué es un control de usuario?

 Los controles de usuario simplifican la reutilización de

 Contiene código para gestionar sus propios eventos

Introducción Los controles de usuario pueden simplificar la reutilización de código y

Nota El Microsoft .NET Framework impide que archivos con la extensión de

etiquetas se incluyen en cada formulario Web Form que utilice el control de

Nota Los controles de usuario son diferentes de los controles de servidor

C# <%@ Control Language="c#" Codebehind="WebUserControl1.ascx.cs"

Nota La directiva @ Control soporta los mismos atributos que la directiva @

¿Por qué utilizar controles de usuario?

 Reutilizar interfaz de usuario y código

Control1.ascx Aplicación A Aplicación B

Nota En las páginas Web Active Server Pages (ASP) tradicionales, la

Los controles de usuario ofrecen numerosas ventajas en el desarrollo de una

Práctica: hacer una lista de controles de usuario

Agregar un control de usuario

 Utilizar la directiva @ Register para incluir un control de

Introducción Podemos ubicar un control de usuario en cualquier formulario Web Form

El atributo TagPrefix determina un espacio de nombres único para el control de

Cuando se solicita el formulario Web Form principal, el entorno de ejecución

C# protected numberbox num1;

En los ejemplos de código anteriores, numberBox es el nombre de la clase que

C# lblSum.Text = (num1.pNum + num2.pNum).ToString();

El siguiente ejemplo invoca la propiedad Set de los controles de usuario num1

Demostración: crear un control de usuario

 Crear un nuevo control de usuario

Ë Ejecutar esta demostración

8. Abrir la página de código subyacente para el nuevo control de usuario.

Observar que cuando se introduce el encabezado de la propiedad pNum,

Observar que la propiedad set no toma ningún argumento. El valor pasado

Lección: crear controles de usuario

 Crear un control de usuario

Crear un control de usuario

 Dos métodos para la creación de controles de usuario:

Introducción Podemos crear un nuevo control de usuario o convertir un formulario Web

Nota La página se crea con la presentación de página establecida en modo de

3. Agregar los elementos de la interfaz de usuario. Generamos la página del

Nota Cuando generamos la parte de interfaz de usuario de un control de

4. Agregar procedimientos de evento para elementos de interfaz de usuario y

8. Agregar un atributo className a la directiva @ Control. El atributo

<%@ Control Language="vb" Codebehind="WebUserControl1.ascx.vb"

C# public int pNum

Todas las variables, propiedades y métodos públicos de un control de usuario se

Demostración: uso de un control de usuario

 Insertar un control de usuario en una

Nota Esta demostración se añade a la primera demostración de este módulo,

Ë Utilizar un control de usuario en una nueva página ASP.NET

<%@ Register TagPrefix="uc1" TagName="numberbox"

6. En la página de código subyacente del archivo beforeuser.aspx, agregar

Visual C# protected numberbox Numberbox1;

Nota Si el nombre de nuestro proyecto no es Mod08CS o Mod08VB,

7. Cambiar el procedimiento de evento del botón Compute para leer los

C#: private void Button1_Click(object sender, System.EventArgs

8. Generar y examinar la página beforeuser.aspx.

Visual Basic .NET If Not Page.IsPostBack Then

12. Generar y examinar la página beforeuser.aspx.

También podría gustarte

Agregar controles de usuario a un formulario Web

¿Qué es un control de usuario?

Los controles de usuario simplifican la reutilización de

Contiene código para gestionar sus propios eventos

Reutilizar interfaz de usuario y código

Utilizar la directiva @ Register para incluir un control de

Crear un nuevo control de usuario

Crear un control de usuario

Dos métodos para la creación de controles de usuario:

Insertar un control de usuario en una