Para crear un proyecto web
debemos seleccionar desde el entorno del Visual Studio 2008: Archivo ->Nuevo
sitio web. Inmediatamente aparece un diálogo donde podemos configurar que
versión de Framework será compatible nuestra aplicación, la ubicación dentro
del disco donde se almacenará, el lenguaje de programación a utilizar:
En este ejemplo localizamos
en la unidad D y desde el explorador de archivos creamos dos carpetas una
llamada “TP4” y dentro de la misma la carpeta clase1 (en esta última carpeta es
donde se almacenará nuestra aplicación web)
Hemos dejado seleccionado
por defecto el framework a utilizar (.NET framework 2.0)
También dejamos seleccionado
la plantilla a utilizar "Sitio Web ASP.NET)"
Ya tenemos el esqueleto
básico para iniciar nuestro sitio web empleando la tecnología de Microsoft.
En la parte izquierda
tenemos el “Cuadro de herramientas”, en esta aparecen las componentes visuales (Label, TextBox, Button etc.) que
tenemos disponibles para crear nuestro formulario Web.
En el centro aparece la
página en vista de código (se puede ver en “vista de diseño”, “Divisor” y
“Código”)
En la parte derecha
disponemos del “Explorador de soluciones” donde podemos identificar el
directorio donde se almacena nuestra aplicación web y los archivos contenidos
en dicho directorio.
Siempre que creamos una
aplicación web nos crea un formulario web inicial y lo almacena en el archivo
Default.aspx (la extensión aspx indica que se trata de una página dinámica
ASP.Net, así como la extensión php indica que su contenido está programado en
PHP).
Además del archivo
Default.aspx se crea otro archivo llamada
Default.aspx.vb (éste archivo contiene la codificación en Visual Basic de
los eventos que definamos a los controles del formulario)
Otro archivo que veremos más
adelante y que se crea en forma automático es el web.config.
Por último se crea una
carpeta llamada App_Data.
Para nuestro primer ejemplo
implementaremos el “Hola Mundo” para ello en el recuadro central seleccionamos
la pestaña “Diseño” y desde el cuadro de herramientas arrastramos un control de
tipo Label. Seguidamente desde el
cuadro de propiedades ubicado en la pare inferior derecha de la pantalla
inicializamos la propiedad text con el mensaje que queremos que muestre nuestra
“Label”, en nuestro caso “Hola Mundo”. 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 Diseño en la
parte centrar de nuestra pantalla:
Para probar nuestra pequeña
aplicación desarrollada debemos presionar el triángulo verde que se encuentra
en la barra de botones, o desde el menú de opciones: Depurar->Iniciar
depuración, o presionar la tecla “F5”.
Inmediatamente nos aparece
un diálogo que nos invita a modificar el archivo Web.config para que la página se pueda ejecutar en modo depuración
(esto nos permite disponer puntos de interrupción o ejecutar paso a paso una
aplicación) Seleccionamos el botón “Aceptar” para activar el modo depuración.
Podemos ver que
inmediatamente aparece el navegador configurado por defecto con el resultado de
la ejecución de la página:
El Visual Studio 2008 instala un servidor web propio que está
escuchando en un puerto desocupado. Luego de cerrar la ventana del navegador
debemos detener la depuración de nuestra aplicación para poder modificarla,
para esto podemos seleccionar desde el
menú Depurar -> Detener
Depuración o presionar desde la barra de botones el cuadradito azul (luego de
esto aparece el “Cuadro de herramientas”).
Eventos
Modificaremos ahora nuestra
aplicación para que muestre la fecha del servidor en una Label. Cuando desde el
navegador solicitamos una página aspx lo primero que se ejecuta es el evento
Page_Load. Para poder definir un método para dicho evento hacemos doble clic
sobre el WebForm con lo que inmediatamente se abre el archivo Default.aspx.vb y
genera dicho método:
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As _
System.EventArgs) Handles Me.Load
End Sub
End
Class
Luego codificamos dentro del
método Page_Load el algoritmo que
muestra la fecha actual del servidor:
Protected Sub Page_Load(ByVal
sender As Object, ByVal e As _
System.EventArgs) Handles Me.Load
Me.Label1.Text = Date.Now.Day &
"/" & Date.Now.Month & "/" & Date.Now.Year
End
Sub
Mediante el objeto Date y
accediendo a la propiedad Now obtenemos el día, mes y año disponible en el
servidor.
Captura
del evento click de un objeto de la clase Button.
Ahora nuevamente
modificaremos nuestra pequeña aplicación para que muestre un objeto de una
clase Button y una Label.
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”.
El objetivo es que cada vez
que se presione el botón se actualice el contenido de la Label con el valor
actual más uno.
La forma más 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 según el objeto
seleccionado nos aparecen todos los métodos disponibles para dicho objeto:
Luego para el evento Button1_Click actualizamos el contenido
de la propiedad Text de la Label con el valor actual más uno. El operador que
utilizamos es el + y no el &
(que nos concatenaría el valor y no lo sumaría numéricamente como necesitamos
en este problema) Podemos utilizar directamente el operador + ya que el segundo
operando es un número y por lo tanto el Visual Basic convierte automáticamente
el primer operando a entero.
Controles
Label, Button y TextBox.
Hasta ahora hemos utilizado
los controles de tipo Label y Button,
ahora utilizaremos el control TextBox.
Crearemos una aplicación que nos permita ingresar dos números y luego en una
label muestre la suma de los mismos.
(Si
tenemos un proyecto abierto podemos cerrarlo seleccionando la opción:
Archivo->Cerrar proyecto y luego seguir los mismos pasos que vimos
anteriormente para crear un nuevo proyecto ASP.NET).
Crearemos un proyecto
llamado pruebatextbox y
desarrollaremos la siguiente interface:
Disponemos tres Label, dos TextBox y un Button.
Las dos primeras Label las inicializamos con los textos: “Ingrese primer
valor”, “Ingrese 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á
vacía)
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):
Protected Sub Button1_Click(ByVal
sender As Object, ByVal _
e As System.EventArgs) Handles
Button1.Click
Dim s As Integer
s = Integer.Parse(Me.TextBox1.Text) +
Integer.Parse(Me.TextBox2.Text)
Me.Label2.Text
= "La suma de los dos valores es :" & s
End Sub
La clase Integer tiene un
método estático llamado Parse y que tiene por objetivo recibir un String y
retornar el valor del mismo convertido a entero.
Luego de sumar mostramos en
la tercer 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 indicar que los controles RadioButton
están en el mismo grupo debemos inicializar la propiedad GroupName con el mismo
valor (con esto logramos que al seleccionar un RadioButton el otro se
desmarca), si nos olvidamos inicializar la propiedad GroupName luego los dos controles
de tipo RadioButton se podrán seleccionar en forma simultánea.
Si queremos que alguno de
los dos RadioButton aparezca seleccionado por defecto debemos inicializar la
propiedad Checked con el valor True.
La codificación del evento
click del objeto Button1 es el siguiente:
Protected Sub Button1_Click(ByVal
sender As Object, ByVal e _
As System.EventArgs) Handles Button1.Click
Dim x1 As Integer = Me.TextBox1.Text
Dim x2 As Integer = Me.TextBox2.Text
Dim resultado As Integer
If Me.RadioButton1.Checked Then
resultado
= x1 + x2
Me.Label3.Text = "La suma de
los dos valores es:" &
resultado
Else
If Me.RadioButton2.Checked Then
resultado
= x1 - x2
Me.Label3.Text = "La diferencia de
los dos valores es:" & resultado
End If
End If
End Sub
Cuando se presiona el botón
se ejecuta el método Button1_Click
donde primero extraemos el contenido de los dos controles TextBox.
Verificamos con if cual de
los dos controles RadioButton se
encuentra seleccionado. La propiedad
Checked del RadioButton indica
si está seleccionado el control o no.
Control
CheckBox.
Los controles CheckBox
permiten que más de uno esté seleccionado. Similar a los controles RadioButton
tiene dos estados (seleccionado o no seleccionado) y esto lo sabemos según 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:
La codificación del evento
click del botón es:
Protected Sub Button1_Click(ByVal
sender As Object, _
ByVal e As System.EventArgs) Handles Button1.Click
Dim x1 As Integer = Me.TextBox1.Text
Dim x2 As Integer = Me.TextBox2.Text
Dim resultado As Integer
Me.Label3.Text = ""
If Me.CheckBox1.Checked Then
resultado
= x1 + x2
Me.Label3.Text = "La suma de
los dos valores es:" &
resultado
End If
If Me.CheckBox2.Checked Then
resultado
= x1 - x2
Me.Label3.Text = Me.Label3.Text
& "<br />La" & _
" diferencia de los dos
valores es:" & resultado
End If
End Sub
Disponemos dos if a la misma
altura ya que ambos CheckBox pueden estar seleccionados. Previo a los if
borramos el contenido de la Label en el 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 de la 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 (Como vemos podemos
añadir marcas HTML a la propiedad Text de una Label, luego estas serán
interpretadas por el navegador).
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 lógico))
Otra propiedad muy
importante del control ListBox es
SelectionMode, esta admite dos valores: Single o Multiple.
Crearemos una aplicación 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
simultánea configuraremos la propiedad SelectionMode del ListBox con el valor
Multiple)
Luego la interface visual a
crear es la siguiente (insertamos también una Label luego del botón “Calcular”,
con el objetivo de mostrar los resultados):
Cuando se presiona el botón
calcular verificamos cual de las opciones está seleccionada y procedemos a calcular
y mostrar los resultados.
Protected Sub Button1_Click(ByVal
sender As Object, _
ByVal e As System.EventArgs) Handles
Button1.Click
Dim x1 As Integer = Me.TextBox1.Text
Dim x2 As Integer = Me.TextBox2.Text
Me.Label3.Text = ""
If Me.ListBox1.Items(0).Selected Then
Dim
suma As Integer = x1 + x2
Me.Label3.Text &= "La suma
es:" & suma & "<br />"
End If
If Me.ListBox1.Items(1).Selected Then
Dim
resta As Integer = x1 - x2
Me.Label3.Text &= "La
diferencia:" & resta & "<br />"
End If
If Me.ListBox1.Items(2).Selected Then
Dim multi As Integer = x1 * x2
Me.Label3.Text
&= "El producto:" & multi & "<br />"
End If
If Me.ListBox1.Items(3).Selected Then
Dim divi As Integer = x1 / x2
Me.Label3.Text &= "La
division:" & divi & "<br />"
End If
End
Sub
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:
Cargamos las cuatro
operaciones básicas en el control DropDownList y para el evento clic del botón
tenemos que codificar:
Dim x1 As Integer =
Me.TextBox1.Text
Dim x2 As Integer = Me.TextBox2.Text
If Me.DropDownList1.Items(0).Selected
Then
Dim
suma As Integer = x1 + x2
Me.Label3.Text = "La suma
es:" & suma & "<br />"
ElseIf
Me.DropDownList1.Items(1).Selected Then
Dim
resta As Integer = x1 - x2
Me.Label3.Text = "La
diferencia:" & resta & "<br />"
ElseIf
Me.DropDownList1.Items(2).Selected Then
Dim multi As Integer = x1 * x2
Me.Label3.Text
= "El producto:" & multi & "<br />"
ElseIf
Me.DropDownList1.Items(3).Selected Then
Dim divi As Integer = x1 / x2
Me.Label3.Text = "La
division:" & divi & "<br />"
End If
Como solo un elemento del
control DropDowList puede estar seleccionado disponemos una serie de if/elseif
para verificar cual de ellos es el seleccionado. Cuando identificamos el item
seleccionado procedemos a efectuar el cálculo correspondiente y mostrarlo en la
Label3.
