UNIVERSIDAD DE PANAM CENTRO REGIONAL UNIVERSITARIO DE VERAGUAS FACULTAD DE INFORMTICA, ELECTRONICA Y COMUNICACIN INGENIERIA EN INFORMTICA

Tutorial para la creacin de un sitio Web con un formulario ASP.NET

PROFESOR DIEGO SANTIMATEO

ESTUDIANTE FTIMA DEL R. LVAREZ 9-722-549

IV AO FECHA DE ENTREGA 9/5/2008

Pgina |1

TABLA DE CONTENIDO

Pg. INTRODUCCIN ........................................................................ 1 1. Verificar contar con las extensiones ASP y IIS ............................ 2 2. Creando un proyecto ASP.NET con Visual Studio 2008 ........... 3 3. Construyendo la pgina.aspx con Visual Studio 2008................ 4 4. Escribiendo el Cdigo C# ........................................................... 11 5. Ejecutando nuestra pgina Web con ASP ................................. 12 6. Resultados ................................................................................. 13 CONCLUSIONES....................................................................... 15

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET

Pgina |1

Introduccin a la programacin en ASP

ASP (Active Server Pages) es la tecnologa para la creacin de pginas dinmicas del lado del servidor desarrollada por Microsoft. El tipo de servidores que emplean este lenguaje son aquellos que funcionan con sistema operativo de la familia de Windows NT. Afortunadamente, tambin podemos visualizar pginas ASP sobre Windows 95/98. Para escribir pginas ASP utilizamos un lenguaje de scripts, que se colocan en la misma pgina web junto con el cdigo HTML. En ASP, al estar programando pginas del lado del servidor, utilizaremos Visual C#.NET del lado del servidor y en esta gua nos centraremos en comenzar a crear un formulario Web con ASP.NET voy a explicar de forma sencilla cmo crear una aplicacin Web que utilice un formulario Web (Web Form).

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET

Pgina |2

1. Verificando contar con las extensiones ASP y IIs

Utilizare Visual Studio 2008 para la creacin de mi pgina Web con ASP.NET una de las ventajas de Visual Studio es el framework 3.5 trae integrada los lenguajes ASP.NET y AJAX, no requiriendo las instalaciones de extras de estas aplicaciones, pero de igual forma puedes utilizar cualquiera versin de Visual Studio siempre que tengas las extensiones instaladas para estos lenguajes; es importante resaltar que ASP es parte del Internet Information Server (IIS) desde la versin 3.0 y permite el uso de diferentes scripts y componentes en conjunto con el tradicional HTML para mostrar pginas generadas dinmicamente. Si cuentas con Windows XP solo debe activarlo as: 1. Panel de control ->Agregar y quitar programas 2. En la columna izquierda ->Agregar o quitar componentes de Windows. 3. Agregar los Servicios de Internet information Server(IIS)

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET

Pgina |3

2. Creando un proyecto ASP.NET con Visual Studio .NET 2008

Iniciamos Visual Studio y seguimos los siguientes pasos. a. New ->proyect

b. Web->ASP.NET(C#) Application:

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET

Pgina |4

Quedar una ventana como esta para poder comenzar a codificar nuestra pgina

3. Construyendo la pgina .aspx en el Visual Studio .NET 2008

a. Enlace a mi pgina una hoja_css con los estilos de mi pgina web.
body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #CC3366; margin: 0; padding: 0; color: #FFFFFF; } .Estilo1 {color: #FFFFFF}

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET

Pgina |5

Observacin: El estilo CSS puede incluirse en el cdigo HTML, pero para mayor orden, yo lo enlace la hoja de estilo css de esta forma: <link href="hoja_css.css" rel="stylesheet" type="text/css" />

b. En el Visual Studio creamos un nuevo proyecto en C# con el nombre de formulario.aspx y en nuestra pgina agregaremos 4 TextBox, 2 RadioButton, 2 DropDownList, 1 Button, 1 Label, de modo que el diseo de nuestra pagina quede de la siguiente manera: Con respecto a los RadioButton, en su propiedad GroupName deben tener unas
Id nombre modificaciones, Hombre y Mujer deben tener el valor Sexo o cualquier nombre que

Id Nombre

Id Apellido Id Mujer Id Hombre

Fecha de nacimiento Id casado o Id soltero Button

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET

Pgina |6

identifique que ambos RadioButton pertenecen al mismo grupo y en el momento de la ejecucin de la pgina solo uno de los dos puedan ser seleccionados.
<p> Hombre <asp:RadioButton ID="Hombre" runat="server" Checked="True" GroupName="sexo"/> Mujer <asp:RadioButton ID="Mujer" runat="server" GroupName="sexo"/> </p>

c. ao.

Para editar el DropDownList de el mes de cumpleaos se aaden a la lista los campos que me interesan colocar, en esta ocacin los 12 meses del

Los campos se editarian de esta manera: 1. Se inserta el DropDownList en el formulario, se escribe el Id esta vez Id=mes. 2. Luego al pasar el mouse sobre el boton se despliga un menu que muestra la tercera opcin edit Items damos click y entramos a la ventana de edicin.

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET

Pgina |7

3.

En la ventana de edicin damos click en add y en text escribimos el nombre de nuestro items, por Ejemplo Enero, es importante resaltar que el value(valor) de mi items puede ser igual a Enero, pero en esta ocasin el value de mi items sera 1 porque representa el primer mes del ao y esto me facilita la comparacin con la fecha actual para realizar el calculo de la edad en mi funcin.

4.

Cdigo ASP de mi DropDownList: El value representa el nmero de cada mes.

<asp:DropDownList ID="mes" runat="server"> <asp:ListItem Value="1">Enero</asp:ListItem> <asp:ListItem Value="2">Febrero</asp:ListItem> <asp:ListItem Value="3">Marzo</asp:ListItem> <asp:ListItem Value="4">Abril</asp:ListItem>

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET

Pgina |8
<asp:ListItem Value="5">Mayo</asp:ListItem> <asp:ListItem Value="6">Junio</asp:ListItem> <asp:ListItem Value="7">Julio</asp:ListItem> <asp:ListItem Value="8">Agosto</asp:ListItem> <asp:ListItem Value="9">Septiembre</asp:ListItem> <asp:ListItem Value="10">Octubre</asp:ListItem> <asp:ListItem Value="11">Noviembre</asp:ListItem> <asp:ListItem Value="12">Diciembre</asp:ListItem> </asp:DropDownList>

d. 1.

Para editar el DropDownList del estado civil. Se siguen los pasos 1 y 2 de la parte C.

Paso. 1

Paso. 2
Ftima lvarez IV ao-Ing. Informtica Tutorial para la creacin de un formulario Web con ASP.NET

Pgina |9

2.

El text es casado o soltero y value(valor)es el mismo campo.

e.

Mi cdigo final XHTML y ASP para crear y modelar el formulario:

<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Formulario F&aacutetima</title> <link href="hoja_css.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div> <div align="center"><strong>Formulario </strong></div> </div> <p class="Estilo1">Indique los siguientes datos<span class="Estilo1">:</span><img src="glasses_gleam_lrgWHT.gif" alt="formulario" width="117" height="90" /></p> <p>Nombre</p> <p><asp:TextBox ID="Nombre" runat="server" /> </p> <p align="left">Apellido</p> <p> <asp:TextBox ID="Apellido" runat="server" /> </p> <p> Hombre <asp:RadioButton ID="Hombre" runat="server" Checked="True" GroupName="sexo"/> Mujer <asp:RadioButton ID="Mujer" runat="server" GroupName="sexo"/> </p>

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET

P g i n a | 10
<p>Fecha de Nacimiento</p> <p>Da &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Mes &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p; Ao </p> <p> <asp:TextBox ID="dia" runat="server" /> &nbsp; &nbsp; <asp:DropDownList ID="mes" runat="server"> <asp:ListItem Value="1">Enero</asp:ListItem> <asp:ListItem Value="2">Febrero</asp:ListItem> <asp:ListItem Value="3">Marzo</asp:ListItem> <asp:ListItem Value="4">Abril</asp:ListItem> <asp:ListItem Value="5">Mayo</asp:ListItem> <asp:ListItem Value="6">Junio</asp:ListItem> <asp:ListItem Value="7">Julio</asp:ListItem> <asp:ListItem Value="8">Agosto</asp:ListItem> <asp:ListItem Value="9">Septiembre</asp:ListItem> <asp:ListItem Value="10">Octubre</asp:ListItem> <asp:ListItem Value="11">Noviembre</asp:ListItem> <asp:ListItem Value="12">Diciembre</asp:ListItem> </asp:DropDownList> &nbsp;&nbsp;&nbsp; <asp:TextBox ID="ano" runat="server"></asp:TextBox> </p> <p>Estado Civil <asp:DropDownList ID="Estado_Civil" runat="server"> <asp:ListItem value="Soltero"></asp:ListItem> <asp:ListItem value="Casado"></asp:ListItem> </asp:DropDownList></p> <p>&nbsp;</p> <p><asp:Button ID="Guardar" Text="Guardar" runat="server" onclick="Guardar_Click" /> </p> <p>&nbsp;</p> <p align="left"> <asp:Label runat="server" ID="salida" /> <h1>&nbsp;</h1> </form> </body> </html> </p>

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET

P g i n a | 11

4.

Escribiendo el cdigo C# Comenzamos escribiendo el cdigo C# para la funcin en donde haremos el despliegue de resultado de nuestro formulario:
<%@ Page Language="C#" %>

Especificamos el lenguaje que vamos a

utilizar. En ASP los script representan las funciones as que declaramos la etiqueta
<script runat="server">

que correra del lado del servidor.

Cuando demos click en guardar entonces se ejecutara esta funcin este cdigo pertenece al lenguaje C#:
protected void Guardar_Click(object sender, EventArgs e) {

En este segmento calcularemos la edad del usuario de acuerdo a su fecha de nacimiento,para ello utilizamos la funcin DateTime que me permite tomar la fecha y hora del ordenador para realizar mis calculos siempre actualizados:
String estado=""; int d=int.Parse(dia.Text); int edad = 2008 - int.Parse(ano.Text); if ((int.Parse(mes.Text) > DateTime.Today.Month)||(int.Parse(mes.Text) == DateTime.Today.Month && d<DateTime.Today.Day)) edad--;

La salida de mi formulario requiere la correcta escritura de los trminos de acuerdo al sexo del usuario que se est atendiendo, ya que si notas en el formulario se muestran opciones en forma genrica (casado, soltero) la entrada no permite escribir la salida de acuerdo al sexo del usuario por ello ser realizan esta comparaciones.

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET

P g i n a | 12
if(Estado_Civil.SelectedItem.Text=="Casado") { if(Mujer.Checked) estado="Casada"; else estado="Casado"; } else { if(Estado_Civil.SelectedItem.Text=="Soltero") { if(Mujer.Checked) estado="Soltera"; else estado="Soltero"; } }

Con el siguiente cdigo obtenemos la salida de nuestro formulario, salida es un label que se encuentra en mi cdigo asp de esta forma <asp:Label
runat="server" ID="salida" /> .

Salida cdificada en C#:

salida.Text= "Su nombre es "+Nombre.Text+" "+Apellido.Text+" ,cumples el "+dia.Text+" del "+mes.Text+" ,tienes "+edad+" aos de edad, " +" tu estado civil es "+estado+"."; } </script>

5.

Ejecutando nuestra pgina web con ASP

En puedes pgina diseando visual que con estudio la estas solo

ejecutar

marcar Ctrl+F5.

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET

P g i n a | 13

6.

Resultados
Vista final del formulario.aspx

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET

P g i n a | 14

Llamado del formulario.aspx por el servido IIS

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET

P g i n a | 15

CONCLUSIONES
Bueno con este aporte he tratado de plasmar de alguna manera como crear y un pgina Web no solo utilizando el Visual Studio 2008 sino que empleando el ASP.NET y C# para la creacin de un formulario Web, adems este formulario se pueden emplear como si fueran un componente local dentro de su aplicacin... Bueno espero que este artculo sirva de mucho en sus primeros pasos con ASP.NET.

Ftima lvarez IV ao-Ing. Informtica

Tutorial para la creacin de un formulario Web con ASP.NET