Tutorial para la creación de un sitio Web con un formulario
ASP.NET
UNIVERSIDAD DE PANAMÁ
CENTRO REGIONAL UNIVERSITARIO DE VERAGUAS
FACULTAD DE INFORMÁTICA, ELECTRONICA Y COMUNICACIÓN
INGENIERIA EN INFORMÁTICA
PROFESOR
DIEGO SANTIMATEO
ESTUDIANTE
FÁTIMA DEL R. ÁLVAREZ 9-722-549
IV AÑO
FECHA DE ENTREGA
9/5/2008
P á g i n a | 1
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
TABLA DE CONTENIDO
Pág.
INTRODUCCIÓN ........................................................................ 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 página.aspx con Visual Studio 2008................ 4
4. Escribiendo el Código C# ........................................................... 11
5. Ejecutando nuestra página Web con ASP ................................. 12
6. Resultados ................................................................................. 13
CONCLUSIONES....................................................................... 15
P á g i n a | 1
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
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).
P á g i n a | 2
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
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.
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
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
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
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
Quedará una ventana como esta para poder comenzar a codificar nuestra página
3. Construyendo la página .aspx en el Visual Studio .NET 2008
a. Enlace a mi página una hoja_css con los estilos de mi página 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
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
Observación: El estilo CSS puede incluirse en el código 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 página agregaremos 4 TextBox, 2
RadioButton, 2 DropDownList, 1 Button, 1 Label, de modo que el diseño 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
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
identifique que ambos RadioButton pertenecen al mismo grupo y en el momento
de la ejecución de la página 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 cumpleaños se añaden a la
lista los campos que me interesan colocar, en esta ocación los 12 meses del
año.
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 opción edit Items damos click y entramos a la ventana de edición.
P á g i n a | 7
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
3. 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.
4. 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>
<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
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
<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
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
2. El text es casado o soltero y value(valor)es el mismo campo.
e. Mi código 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
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
<p>Fecha de Nacimiento</p>
<p>Día
&nbs
p; Mes
&nbs
p; Año </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>
<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> </p>
<p><asp:Button ID="Guardar" Text="Guardar" runat="server"
onclick="Guardar_Click" /> </p>
<p> </p>
<p align="left">
<asp:Label runat="server" ID="salida" /> </p>
<h1> </h1>
</form>
</body>
</html>
P á g i n a | 11
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
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.
P á g i n a | 12
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
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#:
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.
P á g i n a | 13
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
6. Resultados
Vista final del formulario.aspx
P á g i n a | 14
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
Llamado del formulario.aspx por el servido IIS
P á g i n a | 15
Fátima Álvarez Tutorial para la creación de un formulario Web con ASP.NET IV año-Ing. Informática
CONCLUSIONES
Bueno con este aporte he tratado de plasmar de alguna manera como crear y un
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 artículo sirva de mucho en sus primeros pasos con
ASP.NET.
Top Related