UNIVERSIDAD DE PANAMÁ

CENTRO REGIONAL UNIVERSITARIO DE VERAGUAS

FACULTAD DE INFORMÁTICA, ELECTRONICA Y
COMUNICACIÓN
INGENIERIA EN INFORMÁTICA

Tutorial para la creación de un

sitio Web con un formulario
ASP.NET

PROFESOR

RONALD MITRE

ESTUDIANTE

FÁTIMA DEL R. ÁLVAREZ 9-722-549

IV AÑO

FECHA DE ENTREGA

16/5/2008
 Página |1

TABLA DE CONTENIDO

Pág.

OBJETIVO GENERAL Y ESPECIFÍCO .................................. 1

INTRODUCCIÓN ........................................................................ 2

1. Verificar contar con las extensiones ASP y IIS ............................ 3

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

3. Construyendo la página.aspx con Visual Studio 2008................ 6

4. Escribiendo el Código C# .......................................................... 18

5. Ejecutando nuestra página Web con ASP ................................. 19

6. Resultados ................................................................................ 20

CONCLUSIONES....................................................................... 22

WEBGRAFÍA ............................................................................. 23

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 Página |1

OBJETIVOS GENERAL

Crear una página Web, modelando un formulario en ASP.NET.

OBJETIVOS ESPECIFÍCOS

Mostrar paso a paso la construcción y desarrollo de nuestra aplicación Web

es ASP y C# utilizando Visual Studio 2008.

Ayudar con este tutorial a todo los que estén interesados en la programación
ASP a iniciarse con una guía detallada y clara de la elaboración de una
página Web con ASP.NET.

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 Página |2

Introducción a la programación en ASP

ASP (Active Server Pages) es la tecnología para la creación de páginas dinámicas

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, también
podemos visualizar páginas ASP sobre Windows 95/98.

Para escribir páginas ASP utilizamos un lenguaje de scripts, que se colocan en la

misma página web junto con el código HTML.

En ASP, al estar programando páginas del lado del servidor, utilizaremos Visual
C#.NET del lado del servidor y en esta guía nos centraremos en comenzar a crear
un formulario Web con ASP.NET voy a explicar de forma sencilla cómo crear una
aplicación Web que utilice un formulario Web (Web Form).

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 Página |3

1. Verificando contar con las extensiones ASP y IIS

Utilizare Visual Studio 2008 para la creación de mi página 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 versión 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 versión 3.0 y permite el uso de diferentes scripts y componentes en
conjunto con el tradicional HTML para mostrar páginas generadas
dinámicamente. CONFIGURACIÓN DE ASP .NET

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) ver. Figura 1

Figura. 1

Más información sobre la configuración de ASP en

http://www.adrformacion.com/ASP/tutorial3.html

www.asp.net. En la parte izquierda tenemos el enlace para descargar nuestro

ASP.NET 3.5

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 Página |4

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

2008
Importante cada imagen describe la acción a seguir para desarrollar la aplicación Web.

Iniciamos Visual Studio y seguimos los siguientes pasos.

a. New ->proyect

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

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 Página |5

Quedará una ventana como esta para poder comenzar a codificar nuestra página

Práctica 1: Cree un proyecto en Visual Studio siguiendo los pasos de la sección 2 y a

continuación sigua paso a paso la sección 3 para crear la página asp en forma detallada.

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 Página |6

3. Construyendo la página .aspx en el Visual Studio .NET

2008
En el Visual Studio creamos un nuevo proyecto en C# con el nombre de
formulario.aspx y en nuestra página agregaremos 4 TextBox, 2 RadioButton,
2 DropDownList, 1 Button, 1 Label, de modo que el diseño de nuestra página
quede de la siguiente manera:

Diseño Preliminar:

Plantilla sin la hoja de estilos css

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 Página |7

Pasos para construir el formulario:

Paso 1: Nos ubicamos en la vista diseño que se encuentra en la parte inferior

de la ventana de Visual Studio para trabajar el formulario.

Paso2: Lo primero botones que insertamos en nuestro formulario son los

TextBox para registrar el nombre y apellido del usuario.

Anclamos nuestra tabla de herramientas y colocamos el cursor en donde

decíamos insertar el TextBox , damos doble click en el TextBox de la tabla
de herramientas, listo ya tenemos nuestro primer TextBox en el
formulario. De igual forma insertamos el TextBox para el apellido.
También podemos arrastrar los botones que deseamos insertar de la tabla
de herramientas a la plantilla que estamos trabajando.

Doble click o solo arrastra

sobre la plantilla

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 Página |8

El código ASP se va generando a medida que vamos insertando los campos a la

plantilla, solo debes cambiar el ID de cada control como mostrare a continuación:

Este es el código asp generado por visual Studio el ID esta generado por
default.

<p> <asp:TextBox ID="TextBox2" runat="server" /> </p>

Solo debemos cambiar el nombre del ID para colocarle un nombre que

designe la función de nuestro control.

<p><asp:TextBox ID="Nombre" runat="server" /> </p>

<p> <asp:TextBox ID="Apellido" runat="server" /> </p>

Paso 3: Realizamos el mismo procedimientos explicados en el paso 2 para

insertar los controles RadioButton.

La ubicación de nuestros controles dependerá de nuestro diseño, lo que

hice fue ubicar los controles para hombre y mujer en la misma línea ya que
ambos están relacionados con el sexo.

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 Página |9

A los RadioButton, se le debe agregar una propiedad llamada

GroupName y relacionarla con un campo general que represente las
opciones del RadioButton, en este caso Hombre y Mujer; el campo que los
identifica es Sexo, así que ambos RadioButton pertenecen al mismo grupo
y en el momento de llenar el formulario solo uno de las dos opciones podrá
ser seleccionada.

Código ASP para el botón RadioButton:

<p>
Hombre <asp:RadioButton ID="Hombre" runat="server" Checked="True"
GroupName="sexo"/>

Mujer <asp:RadioButton ID="Mujer" runat="server" GroupName="sexo"/>

</p>

Solo se puede tomar una opción

a la vez
Observación: la propiedad GroupName debes agregarla ya que la misma no es
generada al momento del insertar el RadioButton. También recuerda cambiar el
ID.

Consulta en:

http://www.manualdeasp.com/

http://www.elguille.info/NET/ASPNET/tutorialLogin/tutorialLogin.htm

Paso4: Como añadir y editar DropDownList para el mes de cumpleaños:

Para editar el DropDownList del mes de cumpleaños se añaden a la lista los

campos que me interesan colocar, en esta ocación los 12 meses del año.

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 P á g i n a | 10

Los campos se editarian de esta manera:

Se inserta el DropDownList en la plantilla del formulario, se escribe el Id

esta vez Id=mes.

Observación: El Id se escribe en el código asp que se inserta a tu HTML en el

momento de que añades el control a tu plantilla.

<asp:DropDownList ID="mes" runat="server">

Luego al pasar el mouse sobre el boton se despliga un menu escogemos la

tercera opción edit Items damos click y entramos a la ventana de edición.

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 P á g i n a | 11

En la ventana de edición 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 ocasión el
value de mi items sera 1 porque representa el primer mes del año y esto me
facilita la comparación con la fecha actual para realizar el calculo de la edad
en mi función.

Código ASP de mi DropDownList:

El value representa el número de cada mes.

<asp:DropDownList ID="mes" runat="server">

<asp:ListItem Value="1">Enero</asp:ListItem>
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET
IV año-Ing. Informática
 P á g i n a | 12

<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>

Paso 5: Los Controles para el día y año de nacimiento son de tipo TextBox por ello
se realizan los pasos del paso 2.

Código ASP:

<asp:TextBox ID="dia" runat="server"></asp:TextBox>

<asp:TextBox ID="ano" runat="server"></asp:TextBox>

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 P á g i n a | 13

Paso 6: Para editar el DropDownList del estado civil.

Se siguen los dos primeros puntos del paso 2.

Paso. 1

Paso. 2

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 P á g i n a | 14

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

Código ASP:<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>

Paso 7: Insertamos un Button, editamos el botón dando click derecho y en

propiedades se desplegara un menú para trabajar con el botón que insertamos en
la plantilla.

En esta ocasión solo le cambiaremos el ID, pero con el menú se pueden dar efecto a
nuestro botón.

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 P á g i n a | 15

Código ASP: <p><asp:Button ID="Guardar" Text="Guardar" runat="server"

onclick="Guardar_Click" /> </p>

Observación: Onclick es el evento que me permitirá invocar a la función Guardar_Click

para procesar la información capturada en el formulario.

Paso 8: Puedes crear y enlazar a la página.aspx una hoja_css con los estilos que
deseas.

Código CSS de la hoja de estilos:

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #CC3366;
margin: 0;
padding: 0;

color: #FFFFFF;
}
.Estilo1 {color: #FFFFFF}

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

Plantilla con la hoja de estilos

css

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 P á g i n a | 16

Paso 9: Insertamos un label este nos desplegara la salida del formulario.

Código ASP: <asp:Label runat="server" ID="salida" />

Paso 10: Código final XHTML y ASP del 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

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 P á g i n a | 17

<asp:RadioButton ID="Hombre" runat="server" Checked="True"

GroupName="sexo"/>
Mujer
<asp:RadioButton ID="Mujer" runat="server"
GroupName="sexo"/> </p>
<p>Fecha de Nacimiento</p>
<p>Día
&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; Año </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" /> </p>
<h1>&nbsp;</h1>
</form>
</body>
</html>

Tarea 2: Construido el formulario, ahora sigue los pasos de la sección 4 para

programar la función Guardar_Click en C#

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 P á g i n a | 18

4. Escribiendo el código C#

Comenzamos escribiendo el código C# para la función 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 función este

código 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 función 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 términos de
acuerdo al sexo del usuario que se está atendiendo, ya que si notas en el
formulario se muestran opciones en forma genérica (casado, soltero) la
entrada no permite escribir la salida de acuerdo al sexo del usuario por ello
ser realizan esta comparaciones.

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 P á g i n a | 19

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 código obtenemos la salida de nuestro formulario, salida es

un label que se encuentra en mi código asp de esta forma <asp:Label
runat="server" ID="salida" /> .
Salida códificada en C#(esta es una concatenación de variables y texto):

salida.Text= "Su nombre es "+Nombre.Text+" "+Apellido.Text+" ,cumples el

"+dia.Text+" del "+mes.Text+" ,tienes "+edad+" años de edad, " +" tu
estado civil es "+estado+".";

}
</script>

5. Ejecutando nuestra página web con ASP

En visual estudio
puedes ejecutar la
página que estas
diseñando con solo
marcar Ctrl+F5.

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 P á g i n a | 20

6. Resultados

Vista final del formulario.aspx

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 P á g i n a | 21

Llamado del formulario.aspx por el servido IIS

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 P á g i n a | 22

CONCLUSIONES

Bueno con este aporte he tratado de plasmar de alguna manera como crear y
desarrollar una página Web no solo utilizando el Visual Studio 2008 sino que
empleando el ASP.NET y C# para la creación de un formulario Web, además este
formulario se pueden emplear como si fueran un componente local dentro de su
aplicación.

Bueno espero que este tutorial sirva de mucho en sus primeros pasos con
ASP.NET.

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática
 P á g i n a | 23

WEGRAFÍA

ASP Castellano, “Autenticación basada en formularios”.

http://programacion.com/asp/ [Consultada: 25 de mayo 2008 ]

ASP Blog, ”ASP en Español”, http://asp.com-e.net/default.asp

[Consultada: 25 de mayo 2008 ]

Elguille, ”Tutorial ASP.NET”,

http://www.elguille.info/NET/ASPNET/tutorialLogin/tutorialLo
gin.htm [Consultada: 28 de mayo 2008 ]

W3schools, “ASP.NET”
http://www.w3schools.com/ASPNET/default.asp [Consultada: 28
de mayo 2008 ]

Elguille, ”Tutorial para la creación de un sitio Web con autenticación

mediante formulario”
http://www.elguille.info/NET/ASPNET/indiceASPNET.aspx
[Consultada: 3 de junio 2008 ]

Wikipedia, la enciclopedia libre,” ASP.NET”

http://es.wikipedia.org/wiki/ASP.NET [Consultada: 25 de mayo
2008 ]

Wikipedia, la enciclopedia libre,” Active Server Pages”,

http://es.wikipedia.org/wiki/ASP/Active_Server_Pages
[Consultada: 25 de mayo 2008 ]

Grupo EIDO, “Programación de aplicaciones para Internet con ASP

3”,Versión 1.0.0, www.LaLibreriaDigital.com [Consultada: 25 de mayo
2008 ]

Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET

IV año-Ing. Informática