TUTORIAL: CREAR UN FORMULARIO WEB CON ASP.

NET EN VISUAL
STUDIO 2008

Este tutorial ofrece una gua para el usuario en la que se muestran las tcnicas
bsicas para crear una nueva pgina, agregar controles y escribir cdigo necesario para
el funcionamiento de nuestro formulario Web.
Objetivos:

Crear un sitio Web

Crear una pgina ASP.NET

Agregar controles para la implementacin de un formulario Web

Ejecutar las paginas con el Servidor Web

Para completar este tutorial ser necesario:

Visual Studio 2008
El entorno .NET Framework

Carlos De Gracia

Tutorial: Como crear un

formulario con ASP.NET en Visual Studio 2008.

Crear un sitio y una pgina Web

Aqu crearemos un sitio Web y le agregaremos una nueva pgina.
Para crear un sitio Web:
1. Abra Visual Studio 2008.
2. En el men Archivo (File), elija Nuevo (New), luego Sitio Web (Web Site...).

Nos aparece el cuadro de dialogo Nuevo Sitio Web (New Web Site).

Carlos De Gracia

Tutorial: Como crear un

formulario con ASP.NET en Visual Studio 2008.

3. En Plantillas instaladas de Visual Studio (Visual Studio installed templates),

haga clic en Sitio Web ASP.NET (ASP.NET Web Site)

Esta plantilla Sitio Web ASP.NET crear varias carpetas y archivos
predeterminadas.
4. En el cuadro Ubicacin (Location), seleccione Sistemas de Archivos (File

System) y escriba la direccin donde desea guardar la pgina del sitio Web.
5. En la lista Lenguaje (Language), seleccione Visual C#, el cual ser el lenguaje

predeterminado del sitio Web que crearemos.

6. Haga clic en Aceptar (OK).

Se crear una carpeta y una nueva pgina llamada Default.aspx.

Carlos De Gracia

Tutorial: Como crear un

formulario con ASP.NET en Visual Studio 2008.

Crear una pgina ASP.NET

En esta seccin no trabajaremos con la pgina predeterminada Default.aspx, sino
que crearemos una pgina nueva y trabajaremos en ella.
Para agregar una pgina al Sitio Web:
1. Cierre la pgina Default.aspx, haciendo clic derecho sobre la pestaa que

contiene la pagina y escoja la opcin Cerrar (Close).

2. Ahora agregar una nueva pgina a nuestro Sitio Web, haciendo clic derecho

sobre el Sitio Web en el Explorador de Soluciones (Solution Explorer).

3. En Plantillas instaladas de Visual Studio (Visual Studio installed templates),

escoja la opcin Web Form.

4. En el cuadro Nombre (Name), coloque un nombre para nuestra pgina.
5. En la lista Lenguajes (Language), seleccione el lenguaje de programacin

Visual C#.
6. Desactive la casilla de verificacin Colocar el cdigo en un archivo

independiente (Place code in separate file).

Carlos De Gracia

Tutorial: Como crear un

formulario con ASP.NET en Visual Studio 2008.

7. Haga clic en Agregar (Add).

Agregar y programar controles para la implementacin de un formulario Web

En esta parte del tutorial agregaremos controles de servidor a la pgina, entre los
cuales estn botones, etiquetas, cuadros de texto, adems de que agregaremos cdigo
para controlar el evento Click del control Button.
Para agregar controles a la pgina:
1. Cambie a la vista Diseo (Design).
2. En el cuadro de herramientas localizado en el lateral izquierdo se encuentran los

controles estndar que utilizar: Label, TextBox, DropDownList, RadioButton

y Button.

Carlos De Gracia

Tutorial: Como crear un

formulario con ASP.NET en Visual Studio 2008.

3. Arrastre estos controles hacia la pgina para crear la interfaz de nuestro

formulario. Presiones SHIFT+ENTER varias veces para dejar espacio.

4. Al insertar los botones de accin (RadioButton) en nuestra pgina, en la

ventana de propiedades seleccione para ambos la propiedad GroupName y le

asigna el mismo nombre. Adems le asigna a la propiedad Checked el valor
True para uno de los botones de accin. Esto permitir escoger solo una de las
opciones que se mostrarn en nuestro formulario.

Carlos De Gracia

Tutorial: Como crear un

formulario con ASP.NET en Visual Studio 2008.

5. Para el caso de las listas desplegables (DropDownList), Visual Studio permite

editar los datos a listar de una manera sencilla, con solo seleccionar las tareas de
listas desplegables (DropDownList Task) escoger la opcin Editar Elementos
(Edit Items...), con lo cual podemos adherir la cantidad de elementos a listar,
como lo muestra la imagen.

6. Ahora para el caso de las etiquetas (Label), necesitamos que solo nos muestren

la informacin requerida al realizar un clic sobre el botn Desplegar datos, por

lo que pasamos a editar las etiquetas en la ventana de propiedades, rellenando
con un espacio vaco la propiedad Text de las mismas.

Programar el control Button

En esta parte del tutorial, agregaremos cdigo que permita leer los datos
introducidos por el usuario al formulario y luego al presionar el botn se desplegarn
esos mismos datos a travs de los controles Label.
Agregando el controlador de eventos de botn:
1. En la vista Diseo (Design), hacemos doble clic sobre el control Button. Esto

nos cambiar automticamente a la vista Cdigo fuente (Source) y crea un

esquema del controlador de eventos para el evento Click del control Button.

Carlos De Gracia

Tutorial: Como crear un

formulario con ASP.NET en Visual Studio 2008.

2. Dentro del controlador de eventos Click para el botn agregue el siguiente

cdigo escrito en Visual C#.

int aonac = int.Parse(TextBox5.Text);
int edad = 2008 - aonac;
Label1.Text = "Su nombre es " + TextBox1.Text + " " + TextBox2.Text;
if (RadioButton1.Checked) {
Label2.Text = "Usted es Hombre de " + edad + " aos";
if (DropDownList1.SelectedItem.Text == "Soltero/a")
Label3.Text = "Su estado civl es soltero";
else
Label3.Text = "Su estado civl es casado";
}
else{
Label2.Text = "Usted es Mujer de " + edad + " aos";
if (DropDownList1.SelectedItem.Text == "Soltero/a")
Label3.Text = "Su estado civl es soltera";
else
Label3.Text = "Su estado civl es casada";
}

3. Observe que ahora en la vista Cdigo fuente el elemento <asp:Button> tiene el

atributo onclick=Button1_Click. Este atributo enlaza el evento Click del

botn al mtodo controlador codificado.

Ejecutar la pgina

Carlos De Gracia

Tutorial: Como crear un

formulario con ASP.NET en Visual Studio 2008.

Para ejecutar la pgina necesitaremos un servidor Web. Podemos utilizar el

Internet Information Server (IIS) como servidor Web, pero en nuestro caso
utilizaremos para probar la pgina el servidor de desarrollo de ASP.NET, que se ejecuta
localmente y no requiere IIS.
Ahora probaremos nuestra pgina:
1. Presione CTRL+F5 para ejecutar la pgina. Con esto aparece un icono en la

barra de tareas, que indica que el servidor Web est en ejecucin.

Aunque la pagina se muestra en el explorador con extensin .aspx, se ejecuta

como cualquier pagina HTML.
2. Rellene el formulario con los datos correspondientes y haga clic en el botn.
Carlos De Gracia

Tutorial: Como crear un

formulario con ASP.NET en Visual Studio 2008.

Los controles Label se encargarn de desplegar el nombre, sexo, edad y estado

civil del usuario.

3. En el explorador, vea el cdigo fuente de la pgina que est ejecutando

En el cdigo fuente de la pgina, slo se ve HTML ordinario; no se ven los
elementos <asp:> con los que ha trabajado en la vista Cdigo fuente. Por
ejemplo, el control <asp:Button> se representa como elemento HTML <input
type="submit">.
4. Cierre el explorador.

Carlos De Gracia

Tutorial: Como crear un

formulario con ASP.NET en Visual Studio 2008.