tutorial para la creación de un formula rio 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

RONALD MITRE

ESTUDIANTE

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

IV AÑO

FECHA DE ENTREGA

16/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.

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

P á g i n a | 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.

P á g i n a | 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).

P á g i n a | 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

http://asp.com-e.net/template_permalink.asp?id=97

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

http://www.asp.net/

P á g i n a | 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:

P á g i n a | 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.

P á g i n a | 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

http://www.elguille.info/NET/ASPNET/sitio_web_version_net_35.aspx

P á g i n a | 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

P á g i n a | 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.

http://programacion.com/asp/

P á g i n a | 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>

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.

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

Solo se puede tomar una opción

a la vez

http://www.manualdeasp.com/


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.

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

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.

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:ListItem Value="1">Enero</asp:ListItem>

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>

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

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.

P á g i n a | 15


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

onclick="Guardar_Click" /> </p>

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}

Plantilla con la hoja de estilos

css

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

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.

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

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

           &nbs

p;         Mes

           &nbs

p; Año </p>

<p> <asp:TextBox ID="dia" 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>

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

programar la función Guardar_Click en C#

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.

http://msdn.microsoft.com/es-es/library/aa187916.aspx

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.

P á g i n a | 20


6. Resultados

Vista final del formulario.aspx

P á g i n a | 21


Llamado del formulario.aspx por el servido IIS

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.

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 ]

http://programacion.com/asp/

http://201.224.58.205/nr/cwp/documentos/Terminos_y_Condiciones%20Freedom.pdf

http://asp.com-e.net/default.asp





http://www.w3schools.com/ASPNET/default.asp


http://www.elguille.info/NET/ASPNET/indiceASPNET.aspx


http://es.wikipedia.org/wiki/ASP.NET


http://es.wikipedia.org/wiki/ASP/Active_Server_Pages


www.LaLibreriaDigital.com%20%20


tutorial para la creación de un formula rio asp(fátima Álvarez)

Documents