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
!rear un sitio Web
!rear una pgina "#$.%E&
"gregar controles para la implementacin de un formulario Web
Ejecutar las paginas con el #ervidor Web
$ara completar este tutorial ser necesario
'isual #tudio ())*
El entorno .%E& +rame,or-
Carlos De Gracia Tutorial: Como crear un
formulario con ASP.NET en Visual Studio 2008.
Crear un sii! " una #$%ina We&
"qu crearemos un sitio Web y le agregaremos una nueva pgina.
Para crear un sitio Web:
1. "bra 'isual #tudio ())*.
2. En el men. Ar'(i)! *Fi+e,, elija Nue)! *Ne-,, luego Sii! We& *We& Sie...,.
%os aparece el cuadro de dialogo Nue)! Sii! We& *Ne- We& Sie,.
Carlos De Gracia Tutorial: Como crear un
formulario con ASP.NET en Visual Studio 2008.
. En $+ani++as insa+a.as .e Visua+ Su.i! *Visua+ Su.i! insa++e. e/#+aes,,
/aga clic en Sii! We& ASP.NET *ASP.NET We& Sie,
Esta plantilla Sii! We& ASP.NET crear varias carpetas y arc/ivos
predeterminadas.
!. En el cuadro U&i'a'i0n 0L!'ai!n1, seleccione Sise/as .e Ar'(i)!s 0Fi+e
S"se/1 y escriba la direccin donde desea guardar la pgina del sitio Web.
". En la lista Len%ua1e 0Lan%ua%e1, seleccione Visua+ C2, el cual ser el lenguaje
predeterminado del sitio Web que crearemos.
#. 2aga clic en A'e#ar 0O31.
#e crear una carpeta y una nueva pgina llamada 3efault.asp4.
Carlos De Gracia Tutorial: Como crear un
formulario con ASP.NET en Visual Studio 2008.
Crear una #$%ina ASP.NET
En esta seccin no trabajaremos con la pgina predeterminada 3efault.asp4, sino
que crearemos una pgina nueva y trabajaremos en ella.
Para agregar una pgina al Sitio Web:
1. !ierre la pgina 3efault.asp4, /aciendo clic derec/o sobre la pesta5a que
contiene la pagina y escoja la opcin Cerrar 0C+!se1.
2. "/ora agregar una nueva pgina a nuestro #itio Web, /aciendo clic derec/o
sobre el #itio Web en el E4#+!ra.!r .e S!+u'i!nes 0S!+ui!n E4#+!rer1.
. En P+ani++as insa+a.as .e Visua+ Su.i! 0Visua+ Su.i! insa++e. e/#+aes1,
escoja la opcin We& F!r/.
!. En el cuadro N!/&re 0Na/e1, coloque un nombre para nuestra pgina.
". En la lista Len%ua1es 0Lan%ua%e1, seleccione el lenguaje de programacin
Visua+ C2.
#. 3esactive la casilla de verificacin C!+!'ar e+ '0.i%! en un ar'(i)!
in.e#en.iene 0P+a'e '!.e in se#arae 5i+e1.
Carlos De Gracia Tutorial: Como crear un
formulario con ASP.NET en Visual Studio 2008.
$. 2aga clic en A%re%ar 0A..1.
A%re%ar " #r!%ra/ar '!nr!+es #ara +a i/#+e/ena'i0n .e un 5!r/u+ari! We&
En esta parte del tutorial agregaremos controles de servidor a la pgina, entre los
cuales estn botones, etiquetas, cuadros de te4to, adems de que agregaremos cdigo
para controlar el evento C+i'6 del control Bu!n.
Para agregar controles a la pgina:
1. !ambie a la vista Dise7! 0Desi%n1.
2. En el cuadro de /erramientas locali6ado en el lateral i6quierdo se encuentran los
controles estndar que utili6ar La&e+, Te4B!4, Dr!#D!-nLis, Ra.i!Bu!n
y Bu!n.
Carlos De Gracia Tutorial: Como crear un
formulario con ASP.NET en Visual Studio 2008.
. "rrastre estos controles /acia la pgina para crear la interfa6 de nuestro
formulario. $resiones S8IFT9ENTER varias veces para dejar espacio.
!. "l insertar los botones de accin 0Ra.i!Bu!n, en nuestra pgina, en la
ventana de propiedades seleccione para ambos la propiedad :r!u#Na/e y le
asigna el mismo nombre. "dems le asigna a la propiedad C(e'6e. 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.
". $ara el caso de las listas desplegables 0Dr!#D!-nLis1, 'isual #tudio permite
editar los datos a listar de una manera sencilla, con solo seleccionar las tareas de
listas desplegables 0Dr!#D!-nLis Tas61 escoger la opcin Editar Elementos
0E.i Ie/s...1, con lo cual podemos ad/erir la cantidad de elementos a listar,
como lo muestra la imagen.
#. "/ora para el caso de las etiquetas 0La&e+1, necesitamos que solo nos muestren
la informacin requerida al reali6ar 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 Te4 de las mismas.
Pr!%ra/ar e+ '!nr!+ Bu!n
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 La&e+.
Agregando el controlador de eventos de botn:
1. En la vista Dise7! 0Desi%n1, /acemos doble clic sobre el control Bu!n. Esto
nos cambiar automticamente a la vista C0.i%! 5uene 0S!ur'e1 y crea un
esquema del controlador de eventos para el evento C+i'6 del control Bu!n.
Carlos De Gracia Tutorial: Como crear un
formulario con ASP.NET en Visual Studio 2008.
2. 3entro del controlador de eventos C+i'6 para el botn agregue el siguiente
cdigo escrito en Visua+ C2.
int a5onac 7 int.$arse0&e4t8o49.&e4t1:
int edad 7 ())* ; a5onac:
<abel=.&e4t 7 >#u nombre es > ? &e4t8o4=.&e4t ? > > ? &e4t8o4(.&e4t:
if 0@adio8utton=.!/ec-ed1 A
<abel(.&e4t 7 >Bsted es 2ombre de > ? edad ? > a5os>:
if 03rop3o,n<ist=.#electedCtem.&e4t 77 >#olteroDa>1
<abelE.&e4t 7 >#u estado civl es soltero>:
else
<abelE.&e4t 7 >#u estado civl es casado>:
F
elseA
<abel(.&e4t 7 >Bsted es Gujer de > ? edad ? > a5os>:
if 03rop3o,n<ist=.#electedCtem.&e4t 77 >#olteroDa>1
<abelE.&e4t 7 >#u estado civl es soltera>:
else
<abelE.&e4t 7 >#u estado civl es casada>:
F
. Observe que a/ora en la vista C0.i%! 5uene el elemento ;as#:Bu!n< tiene el
atributo !n'+i'6=>Bu!n?@C+i'6>. Este atributo enla6a el evento C+i'6 del
botn al mtodo controlador codificado.
E1e'uar +a #$%ina
Carlos De Gracia Tutorial: Como crear un
formulario con ASP.NET en Visual Studio 2008.
$ara ejecutar la pgina necesitaremos un servidor Web. $odemos utili6ar el
Inerne In5!r/ai!n Ser)er 0IIS1 como servidor Web, pero en nuestro caso
utili6aremos para probar la pgina el servidor de desarrollo de "#$.%E&, que se ejecuta
localmente y no requiere IIS.
Ahora probaremos nuestra pgina:
1. $resione CTRL9FA para ejecutar la pgina. !on esto aparece un icono en la
barra de tareas, que indica que el servidor Web est en ejecucin.
"unque la pagina se muestra en el e4plorador con e4tensin .asp4, se ejecuta
como cualquier pagina 2&G<.
(. @ellene el formulario con los datos correspondientes y /aga clic en el botn.
Carlos De Gracia Tutorial: Como crear un
formulario con ASP.NET en Visual Studio 2008.
<os controles <abel se encargarn de desplegar el nombre, se4o, edad y estado
civil del usuario.
E. En el e4plorador, vea el cdigo fuente de la pgina que est ejecutando
En el cdigo fuente de la pgina, slo se ve 2&G< ordinario: no se ven los
elementos ;as#:< con los que /a trabajado en la vista !digo fuente. $or
ejemplo, el control ;as#:Bu!n< se representa como elemento 2&G< ;in#u
"#e=Bsu&/iB<.
H. !ierre el e4plorador.
Carlos De Gracia Tutorial: Como crear un
formulario con ASP.NET en Visual Studio 2008.