INSTITUTO SUPERIOR TECNOLOGICO HIPOLITO UNANUE

SESIN 1

INTRODUCCION A ASP.NET CON

VISUAL STUDIO

ACTIVIDADES

Creacin de proyecto

ASP.NET es un framework para aplicaciones web desarrollado y comercializado por Microsoft. Es usado
por programadores y diseadores para construir sitios web dinmicos, aplicaciones web y servicios web
XML. Apareci en enero de 2002 con la versin 1.0 del .NET Framework, y es la tecnologa sucesora de
la tecnologa Active Server Pages (ASP). ASP.NET est construido sobre el Common Language Runtime,
permitiendo a los programadores escribir cdigo ASP.NET usando cualquier lenguaje admitido por el
.NET Framework.

Para crear un sitio web debemos abrir el programa Visual Studio 2010, teniendo el programa abierto nos
dirigimos al men Archivo ->Nuevo sitio web.

Inmediatamente aparece un dilogo donde podemos configurar con que versin de Framework ser
compatible nuestra aplicacin, la ubicacin dentro del disco donde se almacenar y el lenguaje de
programacin a utilizar, en nuestro caso Visual Basic:

Para la ubicacin de nuestro proyecto damos clic en el botn Examinar y en la unidad D creamos dos
carpetas una llamada ASP-(SuNombre) y dentro de la misma la carpeta clase1 (en esta ltima carpeta es
donde se almacenar nuestra aplicacin web). Hemos dejado seleccionado por defecto el framework a
utilizar (.NET framework 4.0).
1
 INSTITUTO SUPERIOR TECNOLOGICO HIPOLITO UNANUE

Una vez que damos clic en Aceptar despus de unos segundos Visual Studio nos mostrara la interfaz
para trabajar con ASP.Net.

En la parte izquierda tenemos el Cuadro de herramientas, en este panel aparecen las componentes
visuales (Label, TextBox, Button etc.) que tenemos disponibles para crear nuestro formulario Web.
En el centro aparece la pgina web que se puede ver en vista de Diseo, Dividir y Cdigo
En la parte derecha disponemos del Explorador de soluciones donde podemos identificar el directorio
donde se almacena nuestra aplicacin web y los archivos contenidos en dicho directorio.

Siempre que creamos una aplicacin web nos crea un formulario web inicial y lo almacena en el archivo
Default.aspx (la extensin aspx indica que se trata de una pgina dinmica ASP.Net, as como la
extensin php indica que su contenido est programado en PHP)
Adems del archivo Default.aspx se crea otro archivo llamada Default.aspx.vb (este archivo contiene la
codificacin en Visual Basic de los eventos que definamos a los controles del formulario)
Otro archivo que veremos ms adelante y que se crea en forma automtico es el web.config.
Por ltimo se crea una carpeta llamada App_Data.

Para ejecutar nos dirigimos a la parte superior al botn Iniciar depuracin o presionamos la tecla F5

Inmediatamente nos aparece un dilogo que nos invita a modificar el archivo Web.config para que la
pgina se pueda ejecutar en modo depuracin (esto nos permite disponer puntos de interrupcin o
ejecutar paso a paso una aplicacin) Seleccionamos el botn Aceptar para activar el modo depuracin.

2
 INSTITUTO SUPERIOR TECNOLOGICO HIPOLITO UNANUE

Finalmente nuestra pgina web es mostrada en nuestro navegador por defecto.

Visual Studio 2010 instala un servidor web propio que est escuchando en un puerto desocupado. Luego
de cerrar la ventana del navegador debemos detener la depuracin de nuestra aplicacin web para
poder modificarla, para esto podemos seleccionar desde el men Depurar -> Detener Depuracin o
presionar desde la barra de botones el cuadradito azul.

Evento Load

Modificaremos ahora nuestra aplicacin para que muestre la fecha del servidor en un Label.
Para ellos crearemos una nueva pgina en blanco por lo que nos dirigimos al botn de Agregar nuevo
elemento.

En la siguiente ventana escogemos WebForm y despus de colocarle un nombre aceptamos. Veremos

que la pgina aparece completamente en blanco as que agregamos un control Label.

Cuando desde el navegador solicitamos una pgina aspx lo primero que se ejecuta es el evento
Page_Load. Para poder definir un mtodo para dicho evento hacemos doble clic sobre el WebForm con
lo que inmediatamente se abre el archivo Default.aspx.vb y genera dicho mtodo:

3
 INSTITUTO SUPERIOR TECNOLOGICO HIPOLITO UNANUE

Luego codificamos dentro del mtodo Page_Load el algoritmo que muestra la fecha actual del servidor:

Captura del evento Click de un objeto de la clase Button

Ahora nuevamente modificaremos nuestra pequea aplicacin para que muestre un objeto de la clase
Button y un Label. La propiedad Text del Label la inicializamos con el valor 0 y la propiedad Text del
objeto Button lo inicializamos con el texto Sumar.

El objetivo es que cada vez que se presione el botn se actualice el contenido del Label con el valor
actual ms uno.

La forma ms sencilla de generar dicho evento es dar doble clic sobre el objeto Button. Otra forma es
seleccionar dicho objeto de la lista que aparece en la parte superior del editor y al lado derecho segn
el objeto seleccionado nos aparecen todos los mtodos disponibles para dicho objeto:

Luego para el evento Button1_Click actualizamos el contenido de la propiedad Text del Label1 con el
valor actual ms uno.

El operador que utilizamos es el + y no el &, ya que nos concatenara el valor y no lo sumara

numricamente como necesitamos en este problema. Podemos utilizar directamente el operador + ya
que el segundo operando es un nmero y por lo tanto Visual Basic considera automticamente el primer
operando como entero.

Controles Label, Button y TextBox

Hasta ahora hemos utilizado los controles de tipo Label y Button, ahora utilizaremos el control TextBox.
Crearemos una aplicacin que nos permita ingresar dos nmeros y luego en un Label muestre la suma
de los mismos.

(Si tenemos un proyecto abierto podemos cerrarlo seleccionando la opcin: Archivo->Cerrar proyecto y
luego seguir los mismos pasos que vimos anteriormente para crear un nuevo proyecto ASP.NET)

4
 INSTITUTO SUPERIOR TECNOLOGICO HIPOLITO UNANUE

Crearemos un proyecto llamado pruebatextbox y desarrollaremos la siguiente interface:

Luego codificamos el evento Click del objeto Button, en este evento debemos extraer el contenido de
los dos controles de tipo TextBox y proceder a convertirlos a tipo de dato entero y sumarlos:

La clase Integer tiene un mtodo esttico llamado Parse y que tiene por objetivo recibir un String y
retornar el valor del mismo convertido a entero.
Luego de sumar mostramos en el Label el resultado de la suma de los dos valores ingresados.

Control RadioButton

Para probar el funcionamiento del control RadioButton crearemos un nuevo sitio web llamado
pruebaradiobutton.
Crearemos una interface similar al problema anterior, con la salvedad que le agregaremos dos controles
de tipo RadioButton para poder indicar si queremos sumar o restar los valores ingresados:

Como vemos agregamos dos controles de tipo RadioButton, inicializamos las propiedades Text con los
textos Sumar y Restar. Luego para evitar que los controles RadioButton puedan seleccionarse al
mismo tiempo debemos inicializar la propiedad GroupName con el mismo valor para ambos
RadioButton. Si queremos que alguno de los dos RadioButton aparezca seleccionado por defecto
debemos inicializar la propiedad Checked con el valor True.

5
 INSTITUTO SUPERIOR TECNOLOGICO HIPOLITO UNANUE

La codificacin del evento click del objeto Button1 es el siguiente:

Cuando se presiona el botn se ejecuta el mtodo Button1_Click donde primero extraemos el contenido
de los dos controles TextBox, verificamos con la sentencia if cul de los dos controles RadioButton se
encuentra seleccionado. La propiedad Checked del RadioButton indica si est seleccionado el control o
no y de acuerdo a RadioButton seleccionado realizamos una operacin distinta y as mismo mostramos
un mensaje diferente.

Control CheckBox

Los controles CheckBox permiten que ms de uno ellos est seleccionado. Similar a los controles
RadioButton tiene dos estados: seleccionado o no seleccionado y esto lo sabemos segn el estado de la
propiedad Checked.

Codificaremos un nuevo sitio web que permita cargar dos valores y luego calcule la suma y/o resta de
los valores ingresados. Como podemos seleccionar ambas operaciones utilizaremos los controles de tipo
CheckBox.

La interface visual es la siguiente:

6
 INSTITUTO SUPERIOR TECNOLOGICO HIPOLITO UNANUE

La codificacin del evento Click del botn es:

Disponemos dos if a la misma altura ya que ambos CheckBox pueden estar seleccionados. Previo a los if
borramos el contenido del Label en caso que tenga el resultado de operaciones anteriores.
Luego en el primer if verificamos si el primer CheckBox est seleccionado y procedemos a inicializar la
propiedad Text del Label con el resultado de la suma de los dos valores ingresados, seguidamente
verificamos con un segundo if si el siguiente CheckBox est seleccionado, en caso afirmativo agregamos
al contenido actual del Label el resultado de la diferencia de los valores ingresados.
Como vemos podemos aadir marcas HTML a la propiedad Text de un Label, luego estas sern
interpretadas por el navegador.

Control ListBox

El control ListBox permite crear una lista de valores. Su propiedad Item permite definir los miembros de
la lista cada item define las propiedades Text (valor a mostrar), Value (valor a retornar en caso de estar
seleccionado), Selected (con un valor lgico)). Otra propiedad muy importante del control ListBox es
SelectionMode, esta admite dos valores: Single o Multiple.

Crearemos una aplicacin que permita cargar dos valores y mediante un control ListBox poder
seleccionar si queremos sumar, restar, multiplicar o dividir dichos valores, como podemos seleccionar
varias operaciones en forma simultnea configuraremos la propiedad SelectionMode del ListBox con el
valor Multiple

7
 INSTITUTO SUPERIOR TECNOLOGICO HIPOLITO UNANUE

Para agregar los elementos mostrados en el ListBox debemos dar clic en el botn con el signo de "mayor
que" (>) y despus elegir Editar elementos

En la ventana que aparece debemos agregar cada uno de los elementos e ir cambiando su respectiva
propiedad Text.

Cuando se presiona el botn calcular verificamos cul de las opciones est seleccionada y procedemos
a calcular y mostrar los resultados.

8
 INSTITUTO SUPERIOR TECNOLOGICO HIPOLITO UNANUE

Como podemos ver primero vaciamos el contenido del Label1 y procedemos mediante cuatro if a
verificar cuales de los elementos del ListBox se encuentran seleccionados:

If Me.ListBox1.Items(0).Selected Then

Si por ejemplo el primer elemento del ListBox se encuentra seleccionado procedemos a sumar los dos
valores almacenados en los TextBox y los agregamos al Label.

Pero el cdigo anterior solo funciona cuando trabajamos con SelectionMode Single en caso de usar
Multiple debemos modificar el cdigo a partir del segundo if tal como se ve en cdigo que viene, para
poder concatenar las respuestas anteriores en caso de seleccionar ms de 1 operacin.

Recuerde modificar el cdigo para los Items(2) e Items(3).

Control DropDownList

El control DropDownList permite crear una lista de valores y luego seleccionar solo uno de ellos, esta es
la diferencia fundamental con el control ListBox.
Para probar este control implementaremos el problema propuesto con el control ListBox, ahora la
interface es la siguiente:

Cargamos las cuatro operaciones bsicas en el control DropDownList, de la misma manera que con el
ListBox, y para el evento clic del botn tenemos que codificar lo siguiente:

9
 INSTITUTO SUPERIOR TECNOLOGICO HIPOLITO UNANUE

Como solo un elemento del control DropDownList puede estar seleccionado disponemos de una serie
de if para verificar cul de ellos es el seleccionado. Cuando identificamos el item seleccionado
procedemos a efectuar el clculo correspondiente y mostrarlo en el Label1.

Pero al tener varios If seguidos tambin tenemos la posibilidad de usar la sentencia ElseIf, con la cual
quedara de esta manera nuestro cdigo:

10
 INSTITUTO SUPERIOR TECNOLOGICO HIPOLITO UNANUE

Ejercicios propuestos

1. Confeccionar una pgina que solicite el ingreso del nombre y apellido de una persona (cada elemento
en un TextBox), luego al presionar un botn mostrar en un Label si alguno de los datos no se carg.

2. Confeccionar una pgina que muestre un examen mltiple opcin (disponer 4 preguntas y tres
respuestas posibles por pregunta) utilizar controles de tipo RadioButton para la seleccin de la respuesta
correcta.
Mostrar la cantidad de respuestas correctas luego que se presiona un botn.

3. Solicitar el ingreso de un nmero en un TextBox. Verificar con la funcin IsNumeric si se trata de un

nmero. En caso que se trate de un nmero mostrar la cantidad de dgitos que tiene.

4. Disponer un conjunto de RadioButton agrupados. Mostrar en las leyendas de cada RadioButton

distintos buscadores (Google, Bing, Yahoo, etc.)
Cuando se presione un botn redireccionar a dicho servidor, para redireccionar debemos utilizar la
siguiente sintaxis response.redirect(http://www.google.com.pe)

5. Confeccionar el siguiente formulario para registrarse en un sitio web (utilizar controles de la pestaa
estndar)
En un Label mostrar los datos cargados en cada control (disponer el Label al final del formulario) Hacer
por lo menos 5 validaciones y mostrar mensajes de errores en un Label.

11