[ASP.

NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

Unidad 1 Conceptos

Pasos para crear un sitio web ASP.Net con el Visual Studio en cualquiera de sus versiones

Lo primero que necesitamos para crear una aplicacin o proyecto web es seleccionar el entorno del Visual Studio 20xx, en este caso hemos elegido el Visual Studio 2010, no importa funciona igualito que en cualquiera de las dems versiones anteriores de Visual Studio: 1. Hacemos clic en la opcin de Archivo -> luego en la de Nuevo sitio web. Inmediatamente aparecer la ventana de dilogo para que podamos elegir o configurar la versin del Framework que ser compatible con nuestra aplicacin, la ubicacin dentro del disco donde se almacenar, el lenguaje de programacin a utilizar, etc. En este caso hemos elegido Visual Basic por ser el lenguaje de mayor afinidad o dominio. Hacemos click en Ok para crear el nuevo documento en ASP.NET.

Hemos dejado seleccionado por defecto el framework a utilizar (.NET framework 4) Tambin dejamos seleccionado la plantilla a utilizar "Sitio Web ASP.NET en Blanco" Como hemos seleccionado un "Sitio Web ASP.NET en Blanco" debemos hacer click en la parte
Unidad 1 1|Pgina

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

izquierda de la ventana, donde dice Explorador de Solucin y all tendremos que hacer click derecho sobre el nombre y ruta de nuestra aplicacin web a crear.

2. Al hacer click derecho sobre la ruta o nombre de nuestra aplicacin web, seleccionamos Agregar Nuevo Elemento o presionamos desde el teclado las

combinaciones de teclas de CTRL+SHIFT+A con las cuales obtendremos el mismo resultado.

3. Inmediatamente se abrir una ventana de dialogo en la cual vamos a elegir el tipo de elemento que ser agregado a nuestro Explorador de Solucin, en nuestro ejemplo

Unidad 1

2|Pgina

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

hemos seleccionado la opcin de Formulario Web y luego hacemos click en Agregar y listo.

4. Si observamos la barra inferior que se muestra en la ventana, observaremos las siguientes opciones: Diseo, Divisor, Codigo, html, etc. (En los ejemplos mostrados estas opciones las apreciamos en ingls.

Si hacemos click en la opcin Fuente podemos alternar la vista de la ventana y observaremos el cdigo fuente que se ha generado automticamente para nuestra aplicacin en ASP.NET.

Unidad 1

3|Pgina

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

Al alternar la vista de la ventana entre Diseo y Cdigo, observamos que ya tenemos el esqueleto bsico para iniciar nuestro sitio web empleando la tecnologa de Microsoft.

En la parte izquierda tenemos el Cuadro de herramientas o Tool Box, en esta aparecen las componentes visuales (Label, TextBox, Button etc.) que tenemos disponibles para crear nuestro formulario Web. En el centro aparece la pgina en vista de cdigo (se puede ver en vista de Diseo, Divisor 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, o que la extensin pas indica que su contenido ha sido programado en PASCAL). Adems del archivo Default.aspx se crea otro archivo llamada Default.aspx.vb (ste archivo contiene la codificacin en Visual Basic de los eventos que definamos a los controles del formulario).
Unidad 1 4|Pgina

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

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.

Creando nuestra primera aplicacin

1) Para nuestro primer ejemplo implementaremos el Hola Mundo para ello en el recuadro central seleccionamos la pestaa Diseo y desde el cuadro de herramientas arrastramos un control de tipo Label. 2) Seguidamente desde el cuadro de propiedades ubicado en la parte inferior derecha de la pantalla inicializamos la propiedad text con el mensaje que queremos que muestre nuestra Label, en nuestro caso Hola Mundo. 3) Una vez modificada la propiedad Text con el mensaje que queremos mostrar y presionada la tecla Enter podemos ver como se actualiza la ventana de Diseo en la parte centrar de nuestra pantalla:

Unidad 1

5|Pgina

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

Si alternamos la vista de Diseo por la de Cdigo podemos ver que la etiqueta (Label) ha sido agregada al cdigo del programa automticamente generado, cada elemento que sea agregado en la aplicacin insertar una lnea de cdigo, observamos que la propiedad Text de la etiqueta ha tomado el valor de Hola Mundo.

4) Para probar nuestra pequea aplicacin desarrollada debemos presionar el tringulo verde que se encuentra en la barra de botones, o desde el men de opciones: Depurar>Iniciar depuracin, o presionar la tecla F5. 5) 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.

Podemos ver que inmediatamente aparece el navegador configurado por defecto con el resultado de la ejecucin de la pgina:

Unidad 1

6|Pgina

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

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

Eventos
1. Modificaremos ahora nuestra aplicacin para que muestre la fecha del servidor en una etiqueta o Label. Cada vez que 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:

Unidad 1

7|Pgina

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

2. Luego codificamos dentro del mtodo Page_Load el algoritmo que muestra la fecha actual del servidor, agregamos la siguiente lnea de codigo:

Mediante el objeto Date y accediendo a la propiedad Now obtenemos el da, mes y ao disponible en el servidor.

Captura del evento click de un objeto de la clase Button.

1. Ahora nuevamente modificaremos nuestra pequea aplicacin para que muestre un objeto de una clase Button y una Label. 2. La propiedad Text de la Label la inicializamos con el valor 0 y la propiedad Text del Objeto Button lo inicializamos con la cadena Sumar. 3. El objetivo es que cada vez que se presione el botn se actualice el contenido de la Label con el valor actual ms uno. 4. La forma ms sencilla de generar dicho evento es hacer 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:

Unidad 1

8|Pgina

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

Luego para el evento Button1_Click actualizamos el contenido de la propiedad Text de la Label con el valor actual ms uno. El operador que utilizamos es el + y no el & (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 el Visual Basic convierte automticamente el primer operando a entero.

Como resultado vemos en la ventana del navegador que al pulsar el botn Sumar, la etiqueta Label ha tomado un valor de 1, antes de ejecutarse la aplicacin tena asignado un valor de 0. Cada vez que se haga click en el botn Sumar, la etiqueta incrementara su valor en 1. Haga usted la prueba!

Unidad 1

9|Pgina

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

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 una 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). 1. Crearemos un proyecto llamado pruebatextbox interface: y desarrollaremos la siguiente

2. Disponemos de tres Label, dos TextBox y un Button. Las dos primeras Label las inicializamos con los textos: Ingrese el primer valor, Ingrese el segundo valor y la tercera Label borramos todo el contenido de la propiedad Text (como podemos ver el visor del Visual Studio muestra el nombre del objeto encerrado entre corchetes cuando la propiedad Text est vaca). 3. Inicializamos la propiedad Text del objeto de tipo Button con la etiqueta Sumar. Luego codificamos el evento click del objeto de la clase 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):

Unidad 1

10 | P g i n a

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

4. 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. 5. Luego de sumar mostramos en el tercer label el resultado de la suma de los dos valores ingresados. 6. Como resultado final vemos la ejecucin de la aplicacin con los valores introducidos y su respectiva suma.

Unidad 1

11 | P g i n a

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

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

2. Como vemos agregamos cuatro controles de tipo RadioButton, inicializamos las propiedades text con los textos Sumar, Restar, Multiplicar y Dividir. Luego para indicar que los controles RadioButton estn en el mismo grupo debemos inicializar la propiedad GroupName con el mismo valor, ejemplo si colocamos suma, debemos inicializar todos los GroupNames de cada RadioButton (con esto logramos que al seleccionar un RadioButton el otro se desmarca), si nos olvidamos inicializar la propiedad GroupName luego los cuatros controles de tipo RadioButton se podrn seleccionar en forma simultnea. 3. Si queremos que alguno de los cuatros RadioButton aparezca seleccionado por defecto debemos inicializar la propiedad Checked con el valor True.

Unidad 1

12 | P g i n a

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

4. La codificacin del evento click del objeto Button1 es la siguiente:

Control CheckBox.
Los controles CheckBox permiten que ms de uno 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.

Unidad 1

13 | P g i n a

[ASP.NET EN VISUAL STUDIO] La interfaz visual es la siguiente:

DESARROLLO DE APLICACIONES DE INTERNET

La codificacin del evento click del botn es:

Utilizamos tres IF a la misma altura ya que los tres CheckBox pueden estar seleccionados. Previo a los IF borramos el contenido de la Label en el caso que tenga el resultado de operaciones anteriores.
Unidad 1 14 | P g i n a

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

Luego en el primer IF verificamos si el primer CheckBox est seleccionado y procedemos a inicializar la propiedad Text de la etiqueta o 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 de la Label el resultado de la diferencia de los valores ingresados y posteriormente se realiza la misma verificacin del CheckBox, que de igual forma tambin agregara su contenido en los casos de que sea afirmativo el status de seleccin del CheckBox.

Control ListBox.
El control ListBox permite crear una lista de valores. La 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)

Unidad 1

15 | P g i n a

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

Luego la interfaz visual a crear es la siguiente (insertamos tambin un Label luego del botn Calcular, con el objetivo de mostrar los resultados):

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

Unidad 1

16 | P g i n a

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

Como podemos ver primero vaciamos el contenido de la Label3 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 a la Label: Dim suma As Integer = x1 + x2 Me.Label3.Text &= "La suma es:" & suma & "<br />"

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:

Unidad 1

17 | P g i n a

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

Cargamos las cuatro operaciones bsicas en el control DropDownList y para el evento clic del botn tenemos que codificar:

Como solo un elemento del control DropDowList puede estar seleccionado disponemos una serie de If/Else para verificar cul de ellos es el seleccionado. Cuando identificamos el item seleccionado procedemos a efectuar el clculo correspondiente y mostrarlo en la etiqueta Label3.

Unidad 1

18 | P g i n a

[ASP.NET EN VISUAL STUDIO]

DESARROLLO DE APLICACIONES DE INTERNET

Ejercicios propuestos
1 Crear una pgina que solicite el ingreso del nombre, apellido, direccin, telfono e email de una persona (cada elemento en un TextBox). A. Usted deber insertar un botn que permita mostrar en una etiqueta o label si algunos de los datos no fue introducido desde el teclado. 2 Crear una pgina que muestre un examen Mltiple Choice (Deber incluir 4 preguntas y tres respuestas posibles por preguntas) A. Identificar y utilice que tipo de controles se deber utilizar para la seleccin de la respuesta correcta. B. Deber incluir un botn que permita mostrar la cantidad de respuestas correctas 3 Solicitar el ingreso de un nmero en un Textbox. A. Verificar con la funcin IsNumeric si se trata de un nmero. B. En caso que se trate de un nmero deber mostrar la cantidad de dgitos que tiene. 4 En varios RadioButtons agrupados se requiere: A. Mostrar en las leyendas de cada RadioButton distintos buscadores (Google, Bing, Yahoo etc.) B. Cuando se presione un botn redireccionar a dicho servidor (para redireccionar debemos utilizar la siguiente sintaxis response.redirect(http://www.google.com.do) 5 Crear el siguiente formulario para registrarse en un sitio web A. Usted deber utilizar controles de la pestaa estndar. B. En una Label mostrar los datos cargados en cada control. C. Utilizar la Label al final del formulario. D. Hacer por lo menos 5 validaciones y mostrar mensajes de errores en una Label.

Unidad 1

19 | P g i n a