TALLER DE PROGRAMACIN III

UNIVERSIDAD NACIONAL MICAELA BASTIDAS DE APURMAC

FACULTAD DE INGENIERIAS
ESCUELA ACADEMICO PROFESIONAL DE INGENIERA INFORMTICA Y SISTEMAS

UNAMBA

2
WEB FORMS (II)
OBJETIVOS ESPECIFICOS
Comprender los conceptos de programacin script en ASP.NET
Comprender el uso de los controles web

CONTENIDO
Controles HTML de Servidor
Controles Web

ACTIVIDADES
Desarrolla el ejemplo guiado.

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 1

TALLER DE PROGRAMACIN III

1. Controles Web
Continuamos con el aprendizaje en el uso de los controles Web, estudiaremos aquellos que
permitan seleccionar uno o varios elementos de un listado u obligar a escoger solo una
opcin de las varias expuestas.

Nombre
Control
Imagen

DropDownList Lista desplegable

Imagen en
Formulario
Cdigo del
control.
Note el uso
de la
etiqueta de
la ASP

Propiedades
principales
(control no
enlazado)

<asp:DropDownList ID="DropDownList2" runat="server"

Height="16px"
style="margin-left: 12px" Width="163px">
</asp:DropDownList>
Id

Identificador del control

AutoPostBack

Cuando se selecciona un
elemento de la lista,
automticamente la pgina
es enviada al servidor.

EnabledViewState

El control automticamente
guarda su estado.

Items

Permite, mediante un
formulario, ingresar tems
a la lista.

Agregue una WebForm llamada vacaciones.aspx y disee la siguiente interfaz:

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 2

TALLER DE PROGRAMACIN III

Cargue el control dropdownlist de pas con 5 de ellos. Seleccione el control y ubque la propiedad
ITEMS.

Vera el siguiente formulario, donde creara los tems para el control, pulsando la tecla Agregar o Add:

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 3

TALLER DE PROGRAMACIN III

Comience a cargar la lista, por ejemplo:

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 4

TALLER DE PROGRAMACIN III

Las propiedades mostradas permiten:

Selected:
o Item seleccionado en la lista = TRUE
o Item NO seleccionado en la lista=FALSE
Text: Es el texto que se mostrara en la lista.
Value: Es el valor recuperado por el control luego de seleccionar un tem,
cada tems se asocia con un TEXT y VALUE.
En nuestro ejemplo TEXT y VALUE tienen el mismo valor.
Implemente el cdigo del botn grabar, note el uso de la propiedad SelectedItem y de las
propiedades Text y Value.

Luego, ejecute su aplicacin.

Cambie la propiedad AUTOPOSTBACK del control a TRUE y ejecute su aplicacin. Observe que al
seleccionar los tems del control el Explorador procesa la pgina, es decir, se enva al servidor.
Seleccione el siguiente evento que se muestra en la imagen y pegue el cdigo anterior; luego,
ejecute su aplicacin. Trate de seleccionar un tem de la lista.

Liste los elementos de un cuadro combinado de la siguiente manera:

Cargue elementos a un cuadro combinado mediante cdigo:

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 5

TALLER DE PROGRAMACIN III

Vista de la pgina web

Cdigo de carga de elementos

Nombre
Control
Imagen

ListBox Lista

Imagen en
Formulario

Cdigo del
control.
Note el uso
de la
etiqueta de
la ASP

<asp:ListBox ID="lstMes" runat="server" Width="158px">

<asp:ListItem>Marzo</asp:ListItem>
<asp:ListItem>Abril</asp:ListItem>
</asp:ListBox>

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 6

TALLER DE PROGRAMACIN III

Id
AutoPostBack
Propiedades
principales
(control no EnabledViewState
enlazado)
Items
Propiedades DataSource
principales
(Control
enlazado)
Databind()
Mtodo

Identificador del control

Cuando se selecciona un elemento de la
lista, automticamente la pgina es
enviada al servidor.
El control automticamente guarda su
estado.
Permite, mediante un formulario, ingresar
tems a la lista.
Identifica la fuente de datos a la que se
enlaza el control.

Ejecuta el enlace de los datos al control

principal de
enlace
Realice el siguiente ejercicio en su proyecto, agregue una Web form llamada
PaisVisitados.aspx

lstPaises

La propiedad SelectionMode permite escoger un solo elemento o varios de la lista.

Propuesto:
Empleando el cdigo del control anterior, trate de mostrar en la etiqueta
lblSeleccion los tems seleccionados.

Para realizar un enlace entre un arreglo y un control lista, debe seguir los siguientes pasos:
Cree un Arreglo.

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 7

TALLER DE PROGRAMACIN III

Agregue elementos al arreglo.
Asigne a la lista (Propiedad DataSource de la lista).
Enlace los datos en la lista (Metodo Databind).

Ejecucin del aplicativo.

Nombre
Control
Imagen

CheckBox Control Casilla de verificacin

Imagen en
Formulario

Cdigo del
control.
Note el uso
de la

<asp:CheckBox ID="chkClave" runat="server"

Text="Cambio de clave" />

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 8

TALLER DE PROGRAMACIN III

etiqueta de
la ASP
Id

Identificador del control

AutoPostBack

Cuando se selecciona un elemento de la

lista, automticamente la pgina es
enviada al servidor.
El control automticamente guarda su
estado.
Permite conocer si el control ha sido
seleccionado (true/false)

Propiedades
principales EnabledViewState
checked

Nombre
Control
Imagen
Funcin
Imagen en
Formulario
Cdigo del
control.
Note el uso
de la
etiqueta de
la ASP
Nombre
Control
Imagen
Funcin

Radio button Control botn de opciones

Permite seleccionar un elemento de los varios mostrados.

<asp:RadioButton ID="RadioButton1" runat="server"

Text="Opcion 1" >
</asp:RadioButton>

CheckBoxList Control Lista de verificacin

Selecciona varios elementos de un conjunto de posibilidades disponibles.

Imagen en
Formulario

Cdigo del
control.
Note el uso
de la
etiqueta de
la ASP

<asp:CheckBoxList ID="CheckBoxList1" runat="server"

Height="75px">
<asp:ListItem>Visual Basic</asp:ListItem>
<asp:ListItem>ASP NET</asp:ListItem>
</asp:CheckBoxList>

Agregue una Web Form llamada EjemploOpciones.aspx

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 9

TALLER DE PROGRAMACIN III

Luego de escoger los elementos de la lista y pulsar el botn seleccionar, mostrarlos en la

etiqueta.
Cargue los elementos en el cuadro de verificacin empleando la propiedad ITEMS

Escriba el siguiente cdigo en el botn Seleccionar

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 10

TALLER DE PROGRAMACIN III

El efecto en la Web Form ser:

Nombre
Control
Imagen
Funcin

RadioButtonListLista de botones de opcin

Selecciona un solo elemento de un conjunto de posibilidades disponibles.

Imagen en
Formulario

Cdigo del
control.
Note el uso
de la
etiqueta de
la ASP

<asp:RadioButtonList ID="RadioButtonList1"
runat="server"
style="z-index: 1; left: 188px; top: -95px; position:
relative; height: 72px; width: 82px">
</asp:RadioButtonList>

Agregue un control RadioButtonList , llamado RdlPeriodo al formulario Web llamada

EjemploOpciones.aspx

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 11

TALLER DE PROGRAMACIN III

Evento Page_Load de la pagina se ejecuta en Cada Carga de la PAGINA,

es decir, en la PRIMERA LLAMADA A LA PAGINA o fruto de un submit y
carga por retorno del servidor.
Propiedad IsPostBack de la pgina, permite determinar el origen de la
carga de la pagina.
Si IsPostBack es True, entonces la carga se debe a una ida al servidor.
Si IsPostBack es False, entonces la carga se debe a la carga inicial.
Cargue los elementos en la lista de botones de opcin:

Emplee el siguiente cdigo, para cargar la lista al momento que la pagina Web se carga o hace
Page_Load(). El resultado se visualiza en la figura anterior.

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 12

TALLER DE PROGRAMACIN III

Presione el botn SELECCIONAR para recargar la pagina (hacer PostBack). Analice el resultado
obtenido: Por qu?

La solucin al problema anterior es emplear la propiedad IsPostBack de la pgina con la finalidad

de no agregar nuevamente elementos a la lista.

Nombre
Control
Imagen

CalendarControl de calendario

Funcin

Selecciona una fecha a partir de un calendario mostrado.

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 13

TALLER DE PROGRAMACIN III

Imagen en
Formulario

Cdigo del
control.
Note el uso
de la
etiqueta de
la ASP

<asp:Calendar ID="Calendar1" runat="server"

BackColor="White"
BorderColor="Black" BorderStyle="Solid"
CellSpacing="1" Font-Names="Verdana"
Font-Size="9pt" ForeColor="Black"
Height="250px" NextPrevFormat="ShortMonth"
Width="330px">
<DayHeaderStyle Font-Bold="True" FontSize="8pt" ForeColor="#333333"
Height="8pt" />
<DayStyle BackColor="#CCCCCC" />
<NextPrevStyle Font-Bold="True" FontSize="8pt" ForeColor="White" />
<OtherMonthDayStyle ForeColor="#999999" />
<SelectedDayStyle BackColor="#333399"
ForeColor="White" />
<TitleStyle BackColor="#333399"
BorderStyle="Solid" Font-Bold="True"
Font-Size="12pt" ForeColor="White"
Height="12pt" />
<TodayDayStyle BackColor="#999999" ForeColor="White"
/>
</asp:Calendar>

Agregue una Web Form llamada CalendarioWeb.aspx y disee como se muestra en la

siguiente figura:

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 14

TALLER DE PROGRAMACIN III

Para formatear el
calendario, solo
presione click derecho y
seleccione
AUTOFORMAT

Presione dos click sobre el calendario y agregue el siguiente cdigo, con la finalidad de pintar
la fecha seleccionada en la etiqueta.

Seleccionar una fecha en el control calendar produce un POSTBACK

automtico a la pagina.
Si desea concatenar la fecha seleccionada de un control calendario, es factible:

ACTIVIDAD
Agregue una Web form llamado Visitante.aspx, que permita registrar al visitante al ingresar
al Site.
Considere lo siguiente:
Cdigo
A
B
C
D
E

Datos
Nombre Visitante
Apellido Paterno Visitante
Apellido Materno Visitante
Fecha de Nacimiento
Estado Civil

Sexo

IIS-ING RAFAEL R. QUISPE MERMA

Control a emplear
Caja de texto
Caja de Texto
Caja de Texto
Calendario
Lista de radio buttons

Valores Ejemplos

S=Soltero, C=Casado
V=Viudo,
C=Conviviente
Cuadro combinado de M=Masculino
lista
F=Femenino
Pgina 15

TALLER DE PROGRAMACIN III

G

Pas

H
I

Hobbies

J
Contactos
K

Enviar

Valores enviado

Cuadro combinado de P=Peru, B=Brasil, etc

lista
Lista de checkbox
Proponga varios
Caja de texto
Debe ingresar los
correos electrnicos de
las personas que usted
Cuadro de lista
desea que se le
informo del web site.
Debe ingresarlos en la
Botn de comando
caja de texto y luego ir
agregndolos a la lista.
Botn de comando
Mostrara los valores
seleccionados en una
etiqueta.
Etiqueta
Mostrara lo
seleccionado en el
formulario, luego de
presionar el botn
envi.

El web form debe ser asi:

A
B
C

F
G

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 16

TALLER DE PROGRAMACIN III

J
K
L
M

Cuando se ejecute, debe mostrarse as:

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 17

TALLER DE PROGRAMACIN III

IIS-ING RAFAEL R. QUISPE MERMA

Pgina 18