tutorial para crear formulario asp(fátima Álvarez)

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


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


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


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


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


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


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


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


<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


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

P á g i n a | 10


<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


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


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


6. Resultados

Vista final del formulario.aspx

P á g i n a | 14


Llamado del formulario.aspx por el servido IIS

P á g i n a | 15


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.

tutorial para crear formulario asp(fátima Álvarez)

Documents