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.

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.

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.

Para editar el DropDownList del estado civil.

1.

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.

e.

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

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>

Ftima lvarez
IV ao-Ing. Informtica

</p>

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

visual

estudio

puedes

ejecutar

pgina

que

diseando

con

la
estas
solo

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