Tutorial:crear un formulario Web con ASP NET en Visual Studio 2008

TUTORIAL: CREAR UN FORMULARIO WEB CON ASP.NET EN VISUAL STUDIO 2008

Este tutorial ofrece una guía para el usuario en la que se muestran las técnicas  básicas para crear una nueva página, agregar controles y escribir código necesario para el funcionamiento de nuestro formulario Web. Web. Objetivos: •

Crear un sitio Web Web

•

Crear una página ASP.NET

•

Agregar controles para la implementación de un formulario Web

•

Ejecutar las paginas con el Servidor Web 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 página Web

Aquí crearemos un sitio Web y le agregaremos una nueva página.

 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 Ubicación (Location), seleccione Sistemas de Archivos (File System ) y escriba la dirección donde desea guardar la página 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 página llamada Default.aspx.

Carlos De Gracia

Tutorial: Como crear un formulario con ASP.NET en Visual Studio 2008.

Crear una página ASP.NET

En esta sección no trabajaremos con la página predeterminada Default.aspx, sino que crearemos una página nueva y trabajaremos en ella.

 Para agregar una página al Sitio Web: 1.

Cierre la página Default.aspx, haciendo clic derecho sobre la pestaña que contiene la pagina y escoja la opción Cerrar (Close).

2.

Ahora agregará una nueva página 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 opción Web Form .

4.

En el cuadro Nombre (Name ), coloque un nombre para nuestra página.

5.

En la lista Lenguajes (Language ), seleccione el lenguaje de programación Visual C#.

6.

Desactive la casilla de verificación Colocar el código 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 implementación de un formulario Web

En esta parte del tutorial agregaremos controles de servidor a la página, entre los cuales están botones, etiquetas, cuadros de texto, además de que agregaremos código  para controlar el evento Click del control Button.

 Para agregar controles a la página: 1.

Cambie a la vista Diseño (Design).

2.

En el cuadro de herramientas localizado en el lateral izquierdo se encuentran los controles estándar 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 página para crear la interfaz de nuestro formulario. Presiones SHIFT+ENTER varias veces para dejar espacio.

4.

Al insertar los botones de acción (RadioButton) en nuestra página, en la ventana de propiedades seleccione para ambos la propiedad GroupName y le asigna el mismo nombre. Además le asigna a la propiedad Checked el valor  True para uno de los botones de acción. Esto permitirá escoger solo una de las opciones que se mostrarán 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 opción 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 información requerida al realizar un clic sobre el botón Desplegar datos , por  lo que pasamos a editar las etiquetas en la ventana de propiedades, rellenando con un espacio vacío la propiedad Text de las mismas.

Programar el control Button

En esta parte del tutorial, agregaremos código que permita leer los datos introducidos por el usuario al formulario y luego al presionar el botón se desplegarán esos mismos datos a través de los controles Label.

 Agregando el controlador de eventos de botón: 1.

En la vista Diseño (Design), hacemos doble clic sobre el control Button. Esto nos cambiará automáticamente a la vista Código 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 botón agregue el siguiente código escrito en Visual C#. int añonac = int.Parse(TextBox5.Text); int edad = 2008 - añonac; Label1.Text = "Su nombre es " + TextBox1.Text + " " + TextBox2.Text; if (RadioButton1.Checked) { Label2.Text = "Usted es Hombre de " + edad + " años"; if (DropDownList1.SelectedItem.Text == "Soltero/a") Label3.Text = "Su estado civíl es soltero"; else Label3.Text = "Su estado civíl es casado"; } else{ Label2.Text = "Usted es Mujer de " + edad + " años"; if (DropDownList1.SelectedItem.Text == "Soltero/a") Label3.Text = "Su estado civíl es soltera"; else Label3.Text = "Su estado civíl es casada"; }

3.

Observe que ahora en la vista Código fuente el elemento tiene el atributo onclick=”Button1_Click”. Este atributo enlaza el evento Click  del  botón al método controlador codificado.

Ejecutar la página

Carlos De Gracia

Tutorial: Como crear un formulario con ASP.NET en Visual Studio 2008.

Para ejecutar la página necesitaremos un servidor Web. Podemos utilizar el Internet Information Server (IIS) como servidor Web, pero en nuestro caso utilizaremos para probar la página el servidor de desarrollo de ASP.NET, que se ejecuta localmente y no requiere IIS.

 Ahora probaremos nuestra página: 1.

Presione CTRL+F5 para ejecutar la página. Con esto aparece un icono en la  barra de tareas, que indica que el servidor Web está en ejecución.

Aunque la pagina se muestra en el explorador con extensión .aspx, se ejecuta como cualquier pagina HTML. 2. Rellene el formulario con los datos correspondientes y haga clic en el botón. Carlos De Gracia

Tutorial: Como crear un formulario con ASP.NET en Visual Studio 2008.

Los controles Label se encargarán de desplegar el nombre, sexo, edad y estado civil del usuario.

3. En el explorador, vea el código fuente de la página que está ejecutando En el código fuente de la página, sólo se ve HTML ordinario; no se ven los elementos con los que ha trabajado en la vista Código fuente. Por  ejemplo, el control se representa como elemento HTML . 4. Cierre el explorador.

Carlos De Gracia

Tutorial: Como crear un formulario con ASP.NET en Visual Studio 2008.