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