Tutorial I ASP.NET

Este artículo quiere servir de quía de introducción a la programación en ASP.NET en lenguaje C# y con VisualStudio 2010.  Revisando por internet la documentación existente me dí cuenta que la gran mayoría de ejemplo vienen codificados en visual basic así que mehe permitido la libertad de realizarlos en C# y compartirlos. Aquí tenéis la primera entrega con código incluido.

INICIO:

Para crear un proyecto web debemos seleccionar desde el entorno del Visual Studio 2010: 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á y el lenguaje de programación a utilizar:

Hemos dejado seleccionado por defecto el framework a utilizar (.NET framework 4.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)

Además del archivo Default.aspx se crea otro archivo llamada Default.aspx.cs (éste archivo contiene la codificación en c# de los eventos que definamos a los controles del formulario)

Para nuestro primer ejemplo mostraremos la hora por pantalla 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 parte derecha de la pantalla inicializamos la propiedad text con el mensaje que queremos que muestre nuestra “Label”, en nuestro caso “FECHA”. 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 2010 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 la 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.cs y genera dicho método:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

}

Luego codificamos dentro del método Page_Load el algoritmo que muestra la fecha actual del servidor:

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        this.Label1.Text = DateTime.Now.Day.ToString() + "/" + DateTime.Now.Month.ToString() + "/" + DateTime.Now.Year.ToString();

    }

}

Mediante el objeto DateTime 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.

Label1.Text = (Int32.Parse(Label1.Text) + 1).ToString();

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 void Button1_Click(object sender, EventArgs e)

        {

            int s = Int32.Parse(TextBox1.Text) + Int32.Parse(TextBox2.Text);

            Label3.Text = "La suma de los dos valores es: " + s;

        }

La clase Int32 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 void Button1_Click(object sender, EventArgs e)

        {

            int s;

            if (RadioButton1.Checked)

            {

                s = Int32.Parse(TextBox1.Text) + Int32.Parse(TextBox2.Text);

                Label3.Text = "La suma de los dos valores es: " + s;

            }

            else if (RadioButton2.Checked)

            {

                s = Int32.Parse(TextBox1.Text) - Int32.Parse(TextBox2.Text);

                Label3.Text = "La diferencia de los dos valores es: " + s;

            }

        }

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 void Button1_Click(object sender, EventArgs e)

        {

            int s;

            Label3.Text = ""; Label4.Text = "";

            if (CheckBox1.Checked)

            {

                s = Int32.Parse(TextBox1.Text) + Int32.Parse(TextBox2.Text);

                Label3.Text = "La suma de los dos valores es: " + s;

            }

            if (CheckBox2.Checked)

            {

                s = Int32.Parse(TextBox1.Text) - Int32.Parse(TextBox2.Text);

                Label4.Text = "La diferencia de los dos valores es: " + s;

            }

        }

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 cuál de las opciones está seleccionada y procedemos a calcular y mostrar los resultados.

protected void Button1_Click(object sender, EventArgs e)

        {

            int s;

            Label3.Text = "";

            switch (ListBox1.SelectedItem.Value)

            {

                case "Sumar":

                    s = Int32.Parse(TextBox1.Text) + Int32.Parse(TextBox2.Text);

                    Label3.Text = "La suma de los dos valores es: " + s;

                    break;

                case "Restar":

                    s = Int32.Parse(TextBox1.Text) + Int32.Parse(TextBox2.Text);

                    Label3.Text = "La resta de los dos valores es: " + s;

                    break;

                case "Multiplicar":

                    s = Int32.Parse(TextBox1.Text) + Int32.Parse(TextBox2.Text);

                    Label3.Text = "La multiplicación de los dos valores es: "+ s;

                    break;

                case "Dividir":

                    s = Int32.Parse(TextBox1.Text) + Int32.Parse(TextBox2.Text);

                    Label3.Text = "La división de los dos valores es: " + s;

                    break;

            }

        }

Como podemos ver primero vaciamos el contenido de la Label3 y procedemos mediante un “switch” a checkear cuál de los cuatro elementos es el seleccionado para operar.

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:

protected void Button1_Click(object sender, EventArgs e)

        {

            int s;

            Label3.Text = "";

            switch (DropDownList1.SelectedItem.Value)

            {

                case "Sumar":

                    s = Int32.Parse(TextBox1.Text) + Int32.Parse(TextBox2.Text);

                    Label3.Text = "La suma de los dos valores es: " + s;

                    break;

                case "Restar":

                    s = Int32.Parse(TextBox1.Text) + Int32.Parse(TextBox2.Text);

                    Label3.Text = "La resta de los dos valores es: " + s;

                    break;

                case "Multiplicar":

                    s = Int32.Parse(TextBox1.Text) + Int32.Parse(TextBox2.Text);

                    Label3.Text = "La multiplicación de los dos valores es: "+ s;

                    break;

                case "Dividir":

                    s = Int32.Parse(TextBox1.Text) + Int32.Parse(TextBox2.Text);

                    Label3.Text = "La división de los dos valores es: " + s;

                    break;

            }

        }

El método de click del botón es casi idéntico al listbox.

Para terminar aqui os adjunto el código de los ejemplos: LINK