ASP.NET UNIVERSIDAD DE PANAM CENTRO REGIONAL UNIVERSITARIO DE VERAGUAS FACULTAD DE INFORMTICA, ELECTRONICA Y COMUNICACIN INGENIERIA EN INFORMTICA
PROFESOR DIEGO SANTIMATEO
ESTUDIANTE FTIMA DEL R. LVAREZ 9-722-549
IV AO FECHA DE ENTREGA 9/5/2008
P g i n a | 1
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica 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
P g i n a | 1
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica
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).
P g i n a | 2
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica 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)
P g i n a | 3
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica 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:
P g i n a | 4
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica 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}
P g i n a | 5
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica 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 modificaciones, Hombre y Mujer deben tener el valor Sexo o cualquier nombre que Id nombre Id Apellido Id Mujer Id Nombre Button Id casado o Id soltero Id nombre Fecha de nacimiento Id Hombre P g i n a | 6
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica 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. 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 ao. 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.
P g i n a | 7
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica 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> P g i n a | 8
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica <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. Para editar el DropDownList del estado civil. 1. Se siguen los pasos 1 y 2 de la parte C.
Paso. 1
Paso. 2 P g i n a | 9
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica 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átima</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> P g i n a | 10
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica <p>Fecha de Nacimiento</p> <p>Da &nbs p; Mes &nbs p; Ao </p> <p> <asp:TextBox ID="dia" runat="server" /> <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> <asp:TextBox ID="ano" runat="server"></asp:TextBox> </p>
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica 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#:
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.
P g i n a | 12
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica 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 visual estudio puedes ejecutar la pgina que estas diseando con solo marcar Ctrl+F5.
P g i n a | 13
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica 6. Resultados Vista final del formulario.aspx
P g i n a | 14
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica Llamado del formulario.aspx por el servido IIS
P g i n a | 15
Ftima lvarez Tutorial para la creacin de un formulario Web con ASP.NET IV ao-Ing. Informtica 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.