Elaboración de un

Formulario Web utilizando

ASP.NET desde cero.

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

Pág.

Introducción.................................................................................................3

Objetivos.......................................................................................................4

Contenido.....................................................................................................5

1. Introducción a ASP.NET..........................................................6

1.1 Estructura de una página ASP.NET.............................. 6

1.2 Directivas........................................................................7

1.3 Bloque de declaración de código...................................7

1.4 Comentarios del lado del servidor.................................7

1.5 Controles........................................................................ 8

1.6 Ejecución del Código..................................................... 8

2. Instalación del Internet Information Server...............................9

3. Instalación de .NET Framework..............................................14

4. Elección de un Entorno de desarrollo integrado.....................16

5. Creación de la plantilla CSS.....................................................19

6. Implementación de ASP.NET en el código HTML...............24

7. Pruebas a la aplicación Web.................................................... 31

Conclusiones.............................................................................................. 32

Webgrafía...................................................................................................33
 Introducción

Con el auge de las tecnologías orientadas a Internet es de suma importancia

conocer el uso de herramientas que nos permitan crear páginas Webs que
tengan un comportamiento parecido a aplicaciones similares a las utilizadas
en un PC doméstica.

Una de esas tecnologías es ASP.NET incluida como componente en la

plataforma .NET Framework de la corporación Microsoft. Esta tecnología
permite ejecutar páginas tipo Web en forma dinámica insertando códigos
que no son propios de lenguajes de hipertexto.

Es una tecnología que cuenta con varios años de desarrollo y una gran
variedad de documentación que no se puede abarcar con un solo
documento, pero a lo largo de este se darán las generalidades para la
creación de un formulario Web tan comunes en la Internet y que sea capaz
de procesar la información y generar una salida.

Para ello se capturara información elemental de una persona como:

Nombre, Apellido, Fecha de cumpleaños, Sexo y Estado civil para luego
determinar su edad en años y estado civil dependiendo del sexo.

3
Objetivos

Objetivo Generales
• Adquirir información Básica acerca de la Tecnología ASP.NET

Objetivos Específicos
• 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 información y
generar una salida.

4
Contenido

5
1. Introducción a ASP.NET

ASP.NET es un framework para aplicaciones Web desarrollado y

comercializado por Microsoft. Es usado por programadores para construir
sitios Web dinámicos, aplicaciones Web y servicios Web XML.

Apareció en enero de 2002 con la versión 1.0 del .NET Framework, y es la

tecnología sucesora de la tecnología Active Server Pages (ASP). ASP.NET
esta construido sobre el Common Language Runtime, permitiendo a los
programadores escribir código ASP.NET usando cualquier lenguaje
admitido por el .NET Framework.

1.1 Estructura de una página ASP.NET

Una página ASP.NET consiste en: directiva, Bloque de declaración de

código, Comentario del lado del servidor, Control y Ejecución

6
1.2 Directivas

Las directivas especifican los valores que utilizarán la página y los

compiladores de controles de usuario cuando procesan páginas 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 explícitos de directivas como directivas @ Page (para páginas) o
como directivas @ Control (para controles de usuario).

1.3 Bloque de declaración de código

Los bloques de declaraciones de código definen secciones de código de

servidor incrustadas en archivos de aplicación ASP.NET dentro de bloques
de script marcados con un atributo runat="server", cuando su valor es
"server", este atributo especifica que el código incluido en el bloque script se
ejecuta en el servidor y no en el cliente. Este atributo es necesario para los
bloques de código de servidor.

1.4 Comentarios del lado del servidor

Permiten a los desarrolladores incrustar comentarios de código en cualquier

parte de un archivo de aplicación ASP.NET (excepto en el interior de los
bloques de código <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 código de ASP.NET, no se procesará en el servidor ni se
representará en la página resultante.

Los bloques de comentarios en el servidor ASP.NET tienen los mismos

usos que los bloques de comentarios específicos de lenguajes tradicionales,

7
incluidos la documentación y la comprobación. Por ejemplo, se pueden
utilizar comentarios de servidor para describir secciones de marcado en un
archivo o para comentar uno o más controles de servidor declarados en una
página. Estos comentarios se pueden utilizar en casi todos los tipos de
archivo de aplicación ASP.NET, incluso páginas Web, controles de usuario,
archivos Global.asax, páginas principales y archivos de máscara.

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 código del servidor. Para que estos elementos estén accesibles
mediante programación, puede indicar que un elemento HTML se trate
como un control de servidor; para ello, debe agregar el atributo
runat="server". También puede establecer el atributo id del elemento para
disponer de una manera de hacer referencia al control mediante
programación. A continuación, se establecen atributos para declarar
argumentos de propiedades y enlaces de eventos en las instancias del control
de servidor.

1.6 Ejecución del Código

Esta sección es la encargada de ejecutar el código declarado en el bloque

delimitado por <script>.

8
2. Instalación del Internet Information Server

Antes de iniciar con la creación 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 ejecutándose como servidor en
nuestra PC.

Antes de entrar en detalles, en cuanto a la instalación del Internet

Information Server también 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 versión 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 páginas Web tanto local como remotamente (servidor web).

El servidor web se basa en varios módulos que le dan capacidad para

procesar distintos tipos de páginas, por ejemplo Microsoft incluye los de
Active Server Pages (ASP) y ASP.NET. También 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 código
ASP.NET de la aplicación Web.

9
Para instalarlo debemos tener a la mano el CD de instalación 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 instalación de Windows a la unidad de CD-ROM y

accedemos a Panel de control y luego a Agregar o quitar programas
seleccionamos la opción 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
continuación:

Paso 1: Accedemos a panel de control

10
Paso 2: Seleccionamos la opción 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
página similar a esta:

13
3. Instalación 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 versión de la plataforma la
cuales pueden encontrarse paquetes previos o paquete redistribuible
completo. En este caso elegimos el de paquetes previos, porque, resulta
mucho más cómodo, ya que, el programa de instalación analiza y determina
los componentes a instalar automáticamente descargándolos desde Internet.
Paso a seguir para su instalación:

Paso 1: Una vez que obtenemos el archivo. Lo ejecutamos y se inicia la

instalación.

14
Paso 2: En este punto el programa descargara desde Internet los archivos
necesarios para la instalación. Si poseemos una velocidad de 56 Kbps
debemos esperar cerca de 2 hras.

15
Paso 3: Culminada la descarga se inicia la instalación de los componentes.

4. Elección de un Entorno de desarrollo integrado

Una vez instalado los principales requisitos para la elaboración de la

aplicación Web en ASP.NET, IIS y .NET Framework, sólo nos hace falta
un editor que nos permite escribir código 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 creación de un
formulario Web con ASP.NET, incluso, podemos agregarle una hoja CSS
que nos permita darle estilo. Para ello sólo elegimos nuevo proyecto en el
menú de archivo. Seleccionamos en tipo de página ASP.NET C# y
cualquier diseño entre otros parámetros de la página 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 creación de un nuevo documento.

El siguiente paso será configurar

nuestro sitio para que el IIS sea capaz
de ejecutar el código 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
dirección 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 tecnología 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 automáticamente que IIS está instalado en el equipo y
determinara la ruta.

5. Creación de una plantilla CSS

Para la creación de un formulario en ASP.NET no es necesario el uso de

una plantilla CSS, pero la misma nos permitirá dividir la página Web en
secciones que nos permita una distribución más ordenada y vistosa de los
distintos elementos del formulario. Para ello debemos tener en mente como
queremos que luzca, es decir, un diseño que nos permita tener una noción
de la distribución 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 diseño.

Primero se inicia con el bosquejo o maquetación 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 estarán “encerrados” por así decirlo, en
una gran caja lo cual se le llamara contenedor, dentro de este contenedor
estarán definidas el resto de las cajas: encabezado, contenido y pie de página,
con los id: encabezado, contenido y pie_de_pagina respectivamente. La caja,
con el id: contenido, será dividida en otras 6 secciones:
• Id=”Sección1”: contendrá los controles Textbox para el nombre y
apellido.
• Id=”Sección2”: contendrá los controles Textbox para el día,
DropDownList para el mes y Textbox para el año de nacimiento.
• Id=”Sección3”: le dará estilo a los controles Checkbox para el sexo.
• Id=”Sección4”: para el controles DropDownList el cual determinara
el estado civil.

20
 • Id=”Sección5”: mostrara un botón. Esta sección no es obligatoria
dado que no es necesario asignarle un estilo a un botón, 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 código HTML tendrá un

aspecto parecido a este:

Ahora se aplicara el estilo, para ello utilizaremos el código CSS necesarios el

cual le dará color a la cajas creadas. Si desea conocer más acerca de CSS
visite la siguiente dirección: http://www.cssya.com.ar/

21
Cuando vallamos a utilizar código CSS nos colocamos en la sección 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 código que se muestra a
continuación 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 página Web será similar a este:

23
Ya hemos aplicado una plantilla CSS.

6. Implementación de ASP.NET en el código HTML

Ahora es necesaria la aplicación de la lógica de programación que hará que
el formulario funcione y así como ocurre con el diseño CSS no existen dos
personas que piensen igual en cuanto a la programación 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 código ASP.NET debemos indicarle al navegador
que dicha sección no será ejecutada por él, sino, por el servidor para ello lo
indicamos con <form runat="server" id="formulario"> </form> dicha
operación.
Los principales controles ASP.NET que se utilizaran el formulario son:
Textbox, DropDownList y CheckBox. Su ejecución la indicamos con la
etiqueta <asp:>. Por ejemplo: <asp:CheckBox ID="hombre" runat="server" />
donde asp:CheckBox es la ejecución 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 implementación del ASP.NET en el
cuerpo del HTML procedemos a escribir el código fuente C#, para ello
indicamos con la directiva: <%@ Page Language="C#" %> antes del código
HTML y con ello indicamos que lenguaje se esta usando. Seguido por las
etiquetas <script runat="server"> </script> dentro de las cuales escribamos el
código.

24
La parte C# del formulario seria similar a esta:

25
26
La parte HTML CSS y ASP.NET sería similar a esta:

27
28
29
30
El aspecto final del formulario sería:

7. Pruebas a la aplicación Web

¡Ya hemos terminado con el formulario! sólo resta realizar pruebas al

formulario, corregir errores de lógica. 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 programación rápida.

• ASP.NET permite el uso e integración de componentes ya existentes.
• Facilita la programación Web y las pruebas con el Internet
Information Server, ya que, no es necesario hacer uso de
herramientas más complejas.
• ASP.NET ofrece un nuevo nivel de abstracción dado que permite
crear con facilidad aplicaciones Webs.

32
 Webgrafía

1. Wikipedia. Internet Information Server [en línea].

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

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

del 2008]
3. Microsoft. Directivas para las páginas Web ASP.NET [en línea].

< http://msdn.microsoft.com/es-es/library/t8syafc7(VS.80).aspx>
[Consultada: 14 de junio del 2008].
4. Microsoft. Bloques de declaración de código [en línea].

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

33