Elaboracin de un

Formulario Web utilizando

ASP.NET desde cero.

Realizado por:
Fabricio.A.Santillana.V. 2-718-1147

TABLA DE CONTENIDO
Pg.
Introduccin.................................................................................................3
Objetivos.......................................................................................................4
Contenido.....................................................................................................5
1. Introduccin a ASP.NET..........................................................6
1.1 Estructura de una pgina ASP.NET.............................. 6
1.2 Directivas........................................................................7
1.3 Bloque de declaracin de cdigo...................................7
1.4 Comentarios del lado del servidor.................................7
1.5 Controles........................................................................ 8
1.6 Ejecucin del Cdigo..................................................... 8
2. Instalacin del Internet Information Server...............................9
3. Instalacin de .NET Framework..............................................14
4. Eleccin de un Entorno de desarrollo integrado.....................16
5. Creacin de la plantilla CSS.....................................................19
6. Implementacin de ASP.NET en el cdigo HTML...............24
7. Pruebas a la aplicacin Web.................................................... 31
Conclusiones.............................................................................................. 32
Webgrafa...................................................................................................33

Introduccin
Con el auge de las tecnologas orientadas a Internet es de suma importancia
conocer el uso de herramientas que nos permitan crear pginas Webs que
tengan un comportamiento parecido a aplicaciones similares a las utilizadas
en un PC domstica.
Una de esas tecnologas es ASP.NET incluida como componente en la
plataforma .NET Framework de la corporacin Microsoft. Esta tecnologa
permite ejecutar pginas tipo Web en forma dinmica insertando cdigos
que no son propios de lenguajes de hipertexto.
Es una tecnologa que cuenta con varios aos de desarrollo y una gran
variedad de documentacin que no se puede abarcar con un solo
documento, pero a lo largo de este se darn las generalidades para la
creacin de un formulario Web tan comunes en la Internet y que sea capaz
de procesar la informacin y generar una salida.
Para ello se capturara informacin elemental de una persona como:
Nombre, Apellido, Fecha de cumpleaos, Sexo y Estado civil para luego
determinar su edad en aos y estado civil dependiendo del sexo.

Objetivos
Objetivo Generales
Adquirir informacin Bsica acerca de la Tecnologa ASP.NET
Objetivos Especficos
Obtener conocimiento acerca del de ASP.NET mediante el uso de
herramientas propias de .NET y fabricantes de terceros.

Desarrollar un formulario Web capaz de procesar informacin y

generar una salida.

Contenido

1. Introduccin a ASP.NET
ASP.NET es un framework para aplicaciones Web desarrollado y
comercializado por Microsoft. Es usado por programadores para construir
sitios Web dinmicos, aplicaciones Web y servicios Web XML.
Apareci en enero de 2002 con la versin 1.0 del .NET Framework, y es la
tecnologa sucesora de la tecnologa Active Server Pages (ASP). ASP.NET
esta construido sobre el Common Language Runtime, permitiendo a los
programadores escribir cdigo ASP.NET usando cualquier lenguaje
admitido por el .NET Framework.
1.1 Estructura de una pgina ASP.NET
Una pgina ASP.NET consiste en: directiva, Bloque de declaracin de
cdigo, Comentario del lado del servidor, Control y Ejecucin

1.2 Directivas
Las directivas especifican los valores que utilizarn la pgina y los
compiladores de controles de usuario cuando procesan pginas de
formularios Web Forms ASP.NET (.aspx) y archivos de controles de
usuario (.ascx).
ASP.NET trata todos los bloques de directivas (<%@ %>) que no contienen
nombres explcitos de directivas como directivas @ Page (para pginas) o
como directivas @ Control (para controles de usuario).
1.3 Bloque de declaracin de cdigo
Los bloques de declaraciones de cdigo definen secciones de cdigo de
servidor incrustadas en archivos de aplicacin ASP.NET dentro de bloques
de script marcados con un atributo runat="server", cuando su valor es
"server", este atributo especifica que el cdigo incluido en el bloque script se
ejecuta en el servidor y no en el cliente. Este atributo es necesario para los
bloques de cdigo de servidor.
1.4 Comentarios del lado del servidor
Permiten a los desarrolladores incrustar comentarios de cdigo en cualquier
parte de un archivo de aplicacin ASP.NET (excepto en el interior de los
bloques de cdigo <script>). El contenido incluido entre las etiquetas de
apertura y cierre de los elementos de comentarios en el servidor, ya sea texto
de literales o de cdigo de ASP.NET, no se procesar en el servidor ni se
representar en la pgina resultante.
Los bloques de comentarios en el servidor ASP.NET tienen los mismos
usos que los bloques de comentarios especficos de lenguajes tradicionales,
7

incluidos la documentacin y la comprobacin. Por ejemplo, se pueden

utilizar comentarios de servidor para describir secciones de marcado en un
archivo o para comentar uno o ms controles de servidor declarados en una
pgina. Estos comentarios se pueden utilizar en casi todos los tipos de
archivo de aplicacin ASP.NET, incluso pginas Web, controles de usuario,
archivos Global.asax, pginas principales y archivos de mscara.
1.5 Controles
De manera predeterminada, los elementos HTML contenidos en un archivo
ASP.NET se tratan como texto literal y no se puede hacer referencia a ellos
en el cdigo del servidor. Para que estos elementos estn accesibles
mediante programacin, puede indicar que un elemento HTML se trate
como un control de servidor; para ello, debe agregar el atributo
runat="server". Tambin puede establecer el atributo id del elemento para
disponer de una manera de hacer referencia al control mediante
programacin. A continuacin, se establecen atributos para declarar
argumentos de propiedades y enlaces de eventos en las instancias del control
de servidor.
1.6 Ejecucin del Cdigo
Esta seccin es la encargada de ejecutar el cdigo declarado en el bloque
delimitado por <script>.

2. Instalacin del Internet Information Server

Antes de iniciar con la creacin del formulario Web, mediante el uso de
ASP.NET, debemos cumplir con algunos requisitos uno de los cuales es
contar con el Internet Information Server ejecutndose como servidor en
nuestra PC.
Antes de entrar en detalles, en cuanto a la instalacin del Internet
Information Server tambin conocido como: IIS, es importante conocer
acerca de Qu es el IIS?
Gracias a Wikipedia es posible responder a esta pregunta. El IIS es una serie
de servicios para los ordenadores que funcionan con Windows.
Originalmente era parte del Option Pack para Windows NT. Luego fue
integrado en otros sistemas operativos de Microsoft destinados a ofrecer
servicios, como Windows 2000 o Windows Server 2003. Windows XP
Profesional incluye una versin limitada de IIS. Los servicios que ofrece son:
FTP, SMTP, NNTP y HTTP/HTTPS.
Este servicio convierte a un ordenador en un servidor de Internet o Intranet
es decir que en las computadoras que tienen este servicio instalado se
pueden publicar pginas Web tanto local como remotamente (servidor web).
El servidor web se basa en varios mdulos que le dan capacidad para
procesar distintos tipos de pginas, por ejemplo Microsoft incluye los de
Active Server Pages (ASP) y ASP.NET. Tambin pueden ser incluidos los
de otros fabricantes, como PHP o Perl.
As es, el IIS convierte un PC domestica que ejecute Windows como sistema
operativo en un servidor, gracias a l no ser posible ejecutar el cdigo
ASP.NET de la aplicacin Web.
9

Para instalarlo debemos tener a la mano el CD de instalacin del Sistema

Operativo, para efecto de este documento Windows xp Pro, dado que a la
fecha de redactar este documento no se encontraba disponible para su
descarga.
Introducimos el CD de instalacin de Windows a la unidad de CD-ROM y
accedemos a Panel de control y luego a Agregar o quitar programas
seleccionamos la opcin Agregar o quitar componentes de Windows. Luego
se desplegara un asistente que nos permite agregar como componente del
sistema el IIS. Los pasos aqu mencionados se muestran en forman visual a
continuacin:
Paso 1: Accedemos a panel de control

10

Paso 2: Seleccionamos la opcin Agregar o quitar programas

11

Paso 3: Le damos clic a Agregar o quitar componentes de Windows y se

desplegara un asistente.

ltimo paso: Seleccionamos para agregar el Servicio de Internet

Information Server y ejecutamos el asistente. Y listo!

12

Para verificar que IIS se encuentra activo abrimos nuestro navegador y

escribimos en la barra de direcciones http://localhost y debe cargarse un
pgina similar a esta:

13

3. Instalacin de .NET Framework

El .NET Framework es la plataforma desarrollada por Microsoft que

incorpora como componente a ASP.NET necesario para el desarrollo del
formulario Web que deseamos crear. Para ellos demos descargar desde el
sitio oficial de Microsoft y descargar la ltima versin de la plataforma la
cuales pueden encontrarse paquetes previos o paquete redistribuible
completo. En este caso elegimos el de paquetes previos, porque, resulta
mucho ms cmodo, ya que, el programa de instalacin analiza y determina
los componentes a instalar automticamente descargndolos desde Internet.
Paso a seguir para su instalacin:
Paso 1: Una vez que obtenemos el archivo. Lo ejecutamos y se inicia la
instalacin.

14

Paso 2: En este punto el programa descargara desde Internet los archivos

necesarios para la instalacin. Si poseemos una velocidad de 56 Kbps
debemos esperar cerca de 2 hras.

15

Paso 3: Culminada la descarga se inicia la instalacin de los componentes.

4. Eleccin de un Entorno de desarrollo integrado

Una vez instalado los principales requisitos para la elaboracin de la
aplicacin Web en ASP.NET, IIS y .NET Framework, slo nos hace falta
un editor que nos permite escribir cdigo fuente y as completar un entorno
que nos permita aplicar a ASP.NET. Para ello demos estar seguro con que
requisitos debe contar el mismo, puesto que, en este punto podemos utilizar
desde Bloque de Notas hasta el propio Visual Studio. Sino queremos
instalar Visual Studio por requisitos tan elevados o Bloque de Notas por su
simpleza extrema es posible utilizar otros, eso si, debe ser capaz de contar
con soporte para ASP.NET. En este caso se utilizara Adobe Dreamweaver.

16

Dreamweaver cuenta con el soporte necesario para la creacin de un

formulario Web con ASP.NET, incluso, podemos agregarle una hoja CSS
que nos permita darle estilo. Para ello slo elegimos nuevo proyecto en el
men de archivo. Seleccionamos en tipo de pgina ASP.NET C# y
cualquier diseo entre otros parmetros de la pgina que creemos.
Recordemos que IIS posee soporte para varios lenguajes, por lo que,
usaremos C#, de all el porque de ASP.NET C#. En la siguiente imagen se
muestra el asistente para la creacin de un nuevo documento.

El siguiente paso ser configurar

nuestro sitio para que el IIS sea capaz
de ejecutar el cdigo AST.NET.
Dreamweaver despliega un asistente la
primera vez que seleccionamos vista
previa.

17

La primera parte del asistente nos solicita un nombre para el sitio y la

direccin Web en ella escribimos http://localhost/[nombre del sitio]/. El sitio
ser guardado en la ruta C:\Inetpub\wwwroot, directorio virtual del IIS. El
siguiente paso le indicamos al asistente que se trabajara con tecnologa de
servidor y le indicamos con cual seleccionando ASP.NET C#

18

El tercer y ltimo paso ser elegir la forma como se trabajara con el archivo.
El asistente detectara automticamente que IIS est instalado en el equipo y
determinara la ruta.
5. Creacin de una plantilla CSS
Para la creacin de un formulario en ASP.NET no es necesario el uso de
una plantilla CSS, pero la misma nos permitir dividir la pgina Web en
secciones que nos permita una distribucin ms ordenada y vistosa de los
distintos elementos del formulario. Para ello debemos tener en mente como
queremos que luzca, es decir, un diseo que nos permita tener una nocin
de la distribucin del los controles ASP.NET que utilicemos. Es posible que
cada persona que lea este documento tenga gustos diferentes por lo que
pueda que existan infinitas posibilidades para un diseo.
Primero se inicia con el bosquejo o maquetacin de la plantilla, mediante el
uso de la etiqueta <div></div> y a cada etiqueta se le asignara un id y as
dividiremos el cuerpo o <body> del documento HTML en secciones, estas
seccionas aun no se le aplica el estilo necesario que es el que le dar realce a
cada contenedor.

19

Algo similar a esto:

Todos los estilos que apliquemos estarn encerrados por as decirlo, en

una gran caja lo cual se le llamara contenedor, dentro de este contenedor
estarn definidas el resto de las cajas: encabezado, contenido y pie de pgina,
con los id: encabezado, contenido y pie_de_pagina respectivamente. La caja,
con el id: contenido, ser dividida en otras 6 secciones:
Id=Seccin1: contendr los controles Textbox para el nombre y
apellido.
Id=Seccin2: contendr los controles Textbox para el da,
DropDownList para el mes y Textbox para el ao de nacimiento.

Id=Seccin3: le dar estilo a los controles Checkbox para el sexo.

Id=Seccin4: para el controles DropDownList el cual determinara

el estado civil.

20

 Id=Seccin5: mostrara un botn. Esta seccin no es obligatoria

dado que no es necesario asignarle un estilo a un botn, pero para
contar con mayor control sobre el se ha declarado dentro de una caja.
Id=desplegar: mostrara un mensaje.
Aplicando lo mencionado anteriormente el cdigo HTML tendr un
aspecto parecido a este:

Ahora se aplicara el estilo, para ello utilizaremos el cdigo CSS necesarios el

cual le dar color a la cajas creadas. Si desea conocer ms acerca de CSS
visite la siguiente direccin: http://www.cssya.com.ar/

21

Cuando vallamos a utilizar cdigo CSS nos colocamos en la seccin del head
y bajo las etiquetas <style type="text/css"> </style>
Se aplicara un color azul marino al encabezado y a pie_de_pagina. A las
secciones se intercalara el color gris y blanco para que el usuario no se
confunda con los distintos controles asp.net que utilicemos. Usted puede
aplicar el estilo que guste y recomiendo que tome el cdigo que se muestra a
continuacin y experimente con l.

22

Como estamos utilizando una clases debemos cambiar la etiqueta <body>

por <body class="oneColElsCtrHdr"> este le indica al navegador que un
estilo se aplica en forma global.
El aspecto que presenta la pgina Web ser similar a este:

23

Ya hemos aplicado una plantilla CSS.

6. Implementacin de ASP.NET en el cdigo HTML
Ahora es necesaria la aplicacin de la lgica de programacin que har que
el formulario funcione y as como ocurre con el diseo CSS no existen dos
personas que piensen igual en cuanto a la programacin dado que pueden
existir muchas posibles soluciones. Como lenguaje utilizare C# por lo que
recomiendo que ingresen en:
http://www.devjoker.com/asp/indice_contenido.aspx?co_grupo=TUCS.
Cada vez que escribimos cdigo ASP.NET debemos indicarle al navegador
que dicha seccin no ser ejecutada por l, sino, por el servidor para ello lo
indicamos con <form runat="server" id="formulario"> </form> dicha
operacin.
Los principales controles ASP.NET que se utilizaran el formulario son:
Textbox, DropDownList y CheckBox. Su ejecucin la indicamos con la
etiqueta <asp:>. Por ejemplo: <asp:CheckBox ID="hombre" runat="server" />
donde asp:CheckBox es la ejecucin del control, ID=nombre donde se
almacenara el valor que retorne el control y runat="server" indicara que ser
el servidor quien lo ejecute.
Una vez que hallamos finalizado con la implementacin del ASP.NET en el
cuerpo del HTML procedemos a escribir el cdigo fuente C#, para ello
indicamos con la directiva: <%@ Page Language="C#" %> antes del cdigo
HTML y con ello indicamos que lenguaje se esta usando. Seguido por las
etiquetas <script runat="server"> </script> dentro de las cuales escribamos el
cdigo.

24

La parte C# del formulario seria similar a esta:

25

26

La parte HTML CSS y ASP.NET sera similar a esta:

27

28

29

30

El aspecto final del formulario sera:

7. Pruebas a la aplicacin Web

Ya hemos terminado con el formulario! slo resta realizar pruebas al
formulario, corregir errores de lgica. Recordemos que el archivo ASP.NET
fue guardado del lado del servidor en la ruta C:\Inetpub\wwwroot\carpeta
donde la carpeta es aquella que definimos en el punto 4.

31

Conclusiones
ASP.NET esta basado en el modelo de programacin rpida.
ASP.NET permite el uso e integracin de componentes ya existentes.
Facilita la programacin Web y las pruebas con el Internet
Information Server, ya que, no es necesario hacer uso de
herramientas ms complejas.
ASP.NET ofrece un nuevo nivel de abstraccin dado que permite
crear con facilidad aplicaciones Webs.

32

Webgrafa
1. Wikipedia. Internet Information Server [en lnea].

<http://es.wikipedia.org/wiki/Internet_Information_Services>
[Consultada: 15 de junio del 2008]
2. Wikipedia. ASP.NET [en lnea].

< http://es.wikipedia.org/wiki/ASP.NET> [Consultada: 15 de junio

del 2008]
3. Microsoft. Directivas para las pginas Web ASP.NET [en lnea].

< http://msdn.microsoft.com/es-es/library/t8syafc7(VS.80).aspx>
[Consultada: 14 de junio del 2008].
4. Microsoft. Bloques de declaracin de cdigo [en lnea].

< http://msdn.microsoft.com/es-es/library/2cy7sxha(VS.80).aspx>
[Consultada: 13 de junio del 2008].

33