TUTORIAL: CREAR UN FORMULARIO WEB CON ASP.

NET EN VISUALSTUDIO 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 parael 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 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), elijaNuevo (New), luegoSitio Web (Web Site...). Nos aparece el cuadro de dialogo Nuevo Sitio Web (New Web Site)

3. En Plantillas instaladas de Visual Studio (Visual Studio installed templates),haga clic en Sitio Web ASP.NET (ASP.NET Web Site) Esta plantillaSitio Web ASP.NETcrear varias carpetas y archivos predeterminadas. 4.En el cuadroUbicacin(Location), seleccione Sistemas de Archivos(FileSystem) 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.

Crear una pgina ASP.NET En esta seccin no trabajaremos con la pgina predeterminada Default.aspx, sinoque 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 quecontiene la pagina y escoja la opcinCerrar(Close). 2.Ahora agregar una nueva pgina a nuestro Sitio Web, haciendo clic derechosobre el Sitio Web en elExplorador de Soluciones(Solution Explorer).

3.En Plantillas instaladas de Visual Studio(Visual Studio installed templates),escoja la opcinWeb 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)

7. haga clik enn aceptar (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 vistaDiseo(Design). 2 En el cuadro de herramientas localizado en el lateral izquierdo se encuentran loscontroles estndar que utilizar:Label, TextBox, DropDownList, RadioButton y Button

3. Arrastre estos controles hacia la pgina para crear la interfaz de nuestroformulario. 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 Group Name y le asigna el mismo nombre. Adems le asigna a la propiedad Checke del valor True para uno de los botones de accin. Esto permitir escoger solo una de las opciones que se mostrarn en nuestro formulario

5. Para el caso de las listas desplegables (DropDownList), Visual Studio permiteeditar los datos a listar de una manera sencilla, con solo seleccionar las tareas delistas 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 muestrenla informacin requerida al realizar un clic sobre el botn Desplegar datos, por lo que pasamos a editar las etiquetas en la ventana de propiedades, rellenandocon un espacio vaco la propiedadTextde las mismas Programar el control Button En esta parte del tutorial, agregaremos cdigo que permita leer los datosintroducidos por el usuario al formulario y luego al presionar el botn se desplegar nesos mismos datos a travs de los controles Label. Agregando el controlador de eventos de botn: 1 .En la vistaDiseo(Design), hacemos doble clic sobre el controlButton. Estonos cambiar automticamente a la vista Cdigo fuente(Source) y crea unesquema del controlador de eventos para el eventoClick del controlButton.

2. Dentro del controlador de eventos Click para el botn agregue el siguientecdigo 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 vistaCdigo fuente el elemento <asp:Button> tiene elatributo onclick=Button1_Click . Este atributo enlaza el evento Click del botn al mtodo controlador codificado Para ejecutar la pgina necesitaremos un servidor Web. Podemos utilizar el Internet Information Server (IIS) como servidor Web, pero en nuestro casoutilizaremos para probar la pgina el servidor de desarrollo de ASP.NET, que se ejecutalocalmente y no requiere IIS Ahora probemos nuestra pagina 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 kualkier pagina html 2. Rellene el formulario con los datos correspondientes y haga clik en el botn 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 ejecutandoEn 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 <inputtype="submit"> 4. .4.Cierre el explorador.