Documente Academic
Documente Profesional
Documente Cultură
Controles Web
alumno
2015
Unidad 2
Introduccin
alumno 2
Unidad 2
Toda pgina web tiene asociado un formulario de servidor que es el encargado de enviar
la informacin de accin de los controles que contenga en su interior, a la pgina. Las
pginas Asp .Net solamente pueden contener un nico control form de servidor.
<form id="form1" runat="server">
<div>
</div>
</form>
Dicho formulario de servidor sirve para incluir todos los controles web que vayamos a
utilizar en nuestra pgina. Podemos complementar perfectamente cdigo HTML para
el diseo con controles web para la lgica propia de la pgina. Ser imprescindible
incluir todos los controles web dentro del formulario para la correcta ejecucin de la
pgina.
Los atributos de una etiqueta <Form> incluyen:
Method:
El atributo Method identifica el mtodo para enviar valores de control de devolucin al
servidor. Las opciones de este atributo son:
Post: Los datos se pasan en pares nombre/valor dentro del cuerpo de la peticin HTTP
(Hypertext Transfer Protocol).
Get: Los datos se pasan en una cadena de consulta.
Runat:
Una de las principales caractersticas de un formulario Web Form es que los controles
se ejecutan en el servidor. El atributo runat="server" hace que el formulario publique
informacin de control de retorno a la pgina ASP.NET en el servidor donde se ejecuta
el cdigo de soporte. Si el atributo runat no est establecido en "server", el formulario
funciona como un formulario HTML normal.
La estructura de cualquier pgina inicial asp net ser la siguiente:
alumno 3
Unidad 2
alumno 4
Unidad 2
Todos los controles de validacin comparten propiedades comunes entre ellos. Las
propiedades ms importantes de dichos controles son las siguientes:
o ControlToValidate
alumno 5
Unidad 2
o Text
}
</script>
o RangeValidator
alumno 6
Unidad 2
+ 1 o ms veces
* una, ninguna o ms veces
? una o ninguna vez
{5} debera estar 5 veces exactas
{5, } debera estar 5 veces como mnimo
{2, 5} debera estar entre 2 y 5 veces
CARACTERES
\d Slo Nmeros
alumno 7
Unidad 2
\D No Nmeros
\w Letras, Nmeros y guin bajo
\W NO Letras, Nmeros y guin bajo
\s Espacio en blanco
o RequiredFieldValidator
Un control de usuario es parecido a una pgina Web aspx, incluyendo su parte grfica y
su cdigo asociado.
Lo que permiten los controles de usuario en la tecnologa de asp net es la creacin de
controles reutilizables en diferentes pginas y obtener su funcionalidad.
Un control de usuario puede incluir cdigo interno para manipular su contenido y para
realizar diversas acciones, como el enlace de datos.
La extensin de archivo para un control de usuario es .ascx.
En lugar de utilizar la directiva @Page, el control de usuario utiliza una directiva
@Control que identifica su configuracin y sus propiedades.
Los controles de usuario no se pueden ejecutar como archivos independientes. Para
poder utilizar dichos controles, ser necesario incluirlos en pginas web para comprobar
su funcionalidad.
alumno 8
Unidad 2
El control de usuario no contiene elementos html, body o form. Estos elementos deben
estar incluidos en la pgina dnde sern ubicados.
Vamos a realizar un sencillo ejemplo de control de usuario para visualizar su
funcionalidad. Vamos a realizar un sencillo control de usuario que contendr una caja
de texto que solamente podr incluir nmeros.
Para ello, vamos a agregar sobre un proyecto web un nuevo control de usuario y lo
llamaremos TextBoxNumeros.
A continuacin nos crearemos una propiedad para nuestro control de usuario que
llamaremos ComprobarNumeros y que nos permitir decidir si queremos que realice
una validacin sobre el contenido de nuestro control.
Implementaremos el siguiente cdigo sobre el control de usuario.
private bool _ComprobarNumeros = false; //Propiedad
public bool ComprobarNumeros
{
get
{
return this._ComprobarNumeros;
}
set
{
this._ComprobarNumeros = value;
}
}
alumno 9
Unidad 2
Ahora vamos a comprobar la funcionalidad de nuestro control. Para ello, nos creamos
una nueva pgina Web Forms.
Escribimos la siguiente instruccin para poder acceder al control desde la pgina aspx.
<%@ Register Src="~/TextBoxNumeros.ascx" TagName="cajanumeros"
TagPrefix="micontrol" %>
alumno 10
Unidad 2
Son controles que envan informacin al servidor al realizar acciones sobre ellos. Sirven
para enviar el formulario web al servidor y capturar la respuesta en la clase.
Lo que realizan internamente es un submit de la pgina hacia el servidor. Existen tres
controles, diferenciados entre s por el aspecto grfico, pero su funcionalidad es la
misma. Tienen un evento que es el evento click, que se ejecuta en el momento de pulsar
sobre el control.
alumno 11
Unidad 2
Button
El control Button se utiliza para enviar informacin al servidor sobre la misma pgina.
ImageButton
Es un control que envia informacin al servidor, pero sobre el que podemos asociar una
imagen.
LinkButton
alumno 12
Unidad 2
alumno 13
Unidad 2
Label: Representa una etiqueta de texto. Generar como resultado de su ejecucin una
etiqueta <span> de HTML.
TextBox: Este control representa una caja de texto.
El control Textbox es un control para la entrada de texto de los usuarios. Se utiliza para
poder completar formularios o bsquedas por parte del usuario. Sus eventos no estn
activados en el lado del servidor.
Sus propiedades ms importantes son:
MaxLength: Mximo nmero de caracteres que se permiten incluir en la caja de
texto.
Text: Propiedad que obtiene o establece el valor que hay escrito en la caja de
texto.
TextMode: Es una enumeracin compuesta por tres diferentes posibilidades:
alumno 14
Unidad 2
SingleLine: Caja de texto de una sola lnea.
MultiLine: Caja de texto de mltiples lneas
Password: Caja de texto con caracteres ocultos para el usuario.
alumno 15
Unidad 2
{
this.label1.Text = "El Checkbox NO ha sido seleccionado";
}
}
alumno 16
Unidad 2
Posee una coleccin Items que contiene todos los objetos de la coleccin.
Todo este tipo de controles tiene tres propiedades interesantes para acceder a los
contenidos guardados en sus listas respectivas. As, cada control es un contenedor para
uno o varios elementos de lista. Cada elemento de lista es un objeto de tipo ListItem
con propiedades especficas, que se describen en la tabla siguiente.
Propiedades del objeto ListItem:
Text: Texto que se muestra en la lista.
Value: Valor asociado a un elemento. Al establecer esta propiedad, puede
asociar un valor a un elemento especfico sin mostrarlo. Por ejemplo, puede
establecer la propiedad Text en el nombre de un estado de EE.UU. y la propiedad
Value, en su abreviatura postal.
Selected: Valor de tipo Boolean que indica si el elemento est seleccionado.
Para trabajar con elementos mediante programacin, hay que utilizar la coleccin Item
de cada control.
La coleccin Items es una coleccin estndar, por lo que es posible agregar objetos de
elementos, eliminar elementos, borrar la coleccin, etc. Cada uno de esos elementos
como ha quedado dicho es un elemento ListItem. Este representa un elemento de datos
individual dentro de un control de lista.
Hay diversas formas de especificar el texto que se muestra en un elemento de un control
de lista. El mtodo ms comn es colocar texto en el contenido de cdigo HTML interno.
El contenido de cdigo HTML interno es el texto contenido entre las etiquetas de
apertura y cierre del control ListItem.
Tambin se puede utilizar la propiedad Text para especificar el texto mostrado en el
control de lista para el elemento. Un ejemplo de este formato de relleno del ListItem
sera este:
Para rellenar un ListBox manualmente, debemos ir a su propiedad tems y rellenar las
propiedades Text y Value de cada objeto ListItem.
alumno 17
Unidad 2
En esta imagen se muestra un ListBox con siete elementos ListItem. Cada uno de ellos
tiene un da de la semana.
La propiedad Text del ListItem se recupera a partir del texto anidado entre las etiquetas
de apertura y cierre del elemento. Mientras que la propiedad Value se recupera del valor
dado al atributo de dicho nombre.
alumno 18
Unidad 2
Otra forma de insertar, modificar, borrar e, incluso, localizar y buscar elementos ListItem
en un control de tipo lista, es mediante cdigo. Para ello tenemos una serie de mtodos
de mantenimiento ligados a la coleccin Items del control.
Los ms importantes seran los siguientes:
As para rellenar la lista del ejemplo anterior por cdigo podramos hacerlo as:
alumno 19
Unidad 2
this.ListBox1.Items.Add(it);
}
}
}
alumno 20
Unidad 2
{
if (this.ListBox1.SelectedIndex != -1)
{
ListItem elem;
elem = this.ListBox1.SelectedItem;
this.lbldia.Text = elem.Text;
this.lblinicial.Text = elem.Value;
}
}
alumno 21