Formularios Web

Ingeniería de Sistemas
José Sulla Torres
 Agenda
• Introducción
• Anatomía de una aplicación ASP.NET
• Clases de control HTML
• La clase pagina
• Configuración ASP.NET
 Anatomía de una aplicación ASP.NET
• Cada aplicación ASP.NET comparte un conjunto común de
recursos y configuraciones que se ejecuta dentro de un
dominio de aplicación separado.
• Los dominios de aplicación están aislados en áreas de
memoria, de este modo aseguran que si alguna aplicación
web causa un error fatal, no afectará a otra aplicación.
Anatomía de una aplicación ASP.NET
Tipos de archivos ASP.NET

Archivo Descripción
nombre.aspx Son las paginas web
nombre.ascx Son los controles de usuario
web.config Archivo XML con configuraciones de seguridad,
gestión de memoria,.
global.asax Archivo de aplicación global.
nombre.cs Archivo con código C#.
Ejemplo: Conversor de monedas
Controles de servidor

• ASP.NET permite convertir las etiquetas estáticas HTML en

objetos llamados controles de servidor que se puede
programar en el servidor.
Controles de servidor
• ASP.NET provee dos controles servidor:
• Controles de servidor HTML: Son equivalentes a los elementos
estándar HTML.
• Controles Web: Son objetos enriquecidos con propiedades y
detalles de estilo y formatos (listas, tablas, etc…)
Controles de servidor HTML
• Cuando se pega el contenido en HTML, este debería
sobrescribir todo lo correspondiente al código HTML,
excepto la directiva de pagina.
• La directiva de pagina da información básica de ASP.NET
acerca de cómo compilar la pagina.
Controles de servidor HTML
• Se necesita añadir:
• atributo runat="server" a cada etiqueta que se desea
transformar en un control servidor.
• atributo id a cada control que se necesite interactuar
con el código.
Controles de servidor HTML – Site.master
Clases de Control HTML
• Todos los controles HTML de servidor se definen en el
espacio de nombres System.Web.UI.HtmlControls.

• Cada control tiene una clase separada.

Clases de Control HTML
Nombre de clase Etiqueta HTML
HtmlForm <form>
HtmlImage <img>
HtmlInputButton <input type="button">
HtmlInputSubmit <input type="submit">
HtmlInputCheckBox <input type="checkbox">
HtmlInputRadioButton <input type="radio">
HtmlGenericControl Cualquier otro elemento HTML
Clases de Control HTML
Clases de Control HTML
• Para agregar funcionalidad a la aplicación, se necesita añadir
código ASP.NET.

• Los Web forms son basados en eventos, lo que significa que

cada pieza de código actúa en respuesta a un evento.

• El HtmlInputButton permite que reaccione a esta acción

manejando el evento ServerClick.
Clases de Control HTML
• Para mostrar el resultado de un calculo se puede utilizar
la etiqueta <div>

• La etiqueta <div> es un modo de insertar un bloque de

texto formateado dentro de una pagina web.
Clases de Control HTML
• Otros controles de servidor:
• Un formulario (HtmlForm). Este es el único control que no se
necesita acceder en el código.
• Una caja de texto de entrada (HtmlInputText).
• Un botón submit (HtmlInputButton).
• Una etiqueta <div> (HtmlGenericControl).
Clases de Control HTML
Clases de Control HTML – Site.master.cs
Clases de Control HTML
 Detrás de escena del programa ASP.NET
Petición Web

¿está el archivo
IIS registrado en ASP.NET? Maneja la petición internamente,
No o lo pasa a otro servicio
Si

¿La instancia de la
ASP.NET App ha sido creada? Instancia la aplicación, crea variables
No y eventos globales (dominio de aplic.)
Si
¿La página ha sido
Compilada? Compila y lo guarda en la caché la
No página
Si

Ejecuta el código de los PageLoad()

manejadores de eventos

Responde Web Traduce la pagina a HTML

Lista drop-down
• Se va a agregar múltiples opciones de cambio de
monedas.
• Para ello se necesita un control lista drop-down.
• Una lista drop-down se representa por un elemento
<select> que contiene uno o mas elementos <option>.
• Cada elemento <option> corresponde a un elemento
en la lista.
Lista drop-down

Convertir:
<input type="text" id="US" runat = "server“ /> dólares

<select id = "Monedas" runat="server" > </select>

Lista drop-down
protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack == false)
{
Monedas.Items.Add("Soles");
Monedas.Items.Add("Euro");
Monedas.Items.Add("Yen Japones");
Monedas.Items.Add("Dolar Canadiense");
}
}
Lista drop-down
Almacenando información en la lista
• En HTML la lista también proporciona un atributo que
se puede usar para almacenar información adicional.
• Para colocar una etiqueta con valor, se necesita crear
un objeto ListItem que accede al constructor que
permite especificar el texto y el valor al mismo tiempo
que se creo.
Almacenando información en la lista
protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack == false) Text Value
{
Monedas.Items.Add(new ListItem("Soles", "3.3"));
Monedas.Items.Add(new ListItem("Euro", "0.85"));
Monedas.Items.Add(new ListItem("Yen Japones", "110.33"));
Monedas.Items.Add(new ListItem("Dolar Canadiense", "1.2"));
}
}
Almacenando información en la lista
protected void Convert_ServerClick(Object sender, EventArgs e)
{
decimal monto = decimal.Parse(txtDolar.Value);

ListItem item = Monedas.Items[Monedas.SelectedIndex];

decimal nuevoMonto = monto * Decimal.Parse(item.Value);

Resultado.InnerText = monto.ToString() + " US dolares = ";
Resultado.InnerText += nuevoMonto.ToString() + item.Text;
}
Almacenando información en la lista
Agregando imágenes enlazadas
• Se va a mostrar un grafico para cada tipo de moneda.

• Para proporcionar esta característica, el programa

necesita de un control botón <input type="submit“>
y un control imagen <img>.
Agregando imágenes enlazadas
<div>
<!--… -->
<input type="submit" id="Convert" value=“Convertir" runat="server"
OnServerClick = "Convert_ServerClick">
<input type="submit" value="Mostrar Figura" id="MostrarFigura"
OnServerClick = "MostrarFigura_ServerClick" runat="server">
<br />
<img id="Figura" runat="server" >

<div style="font-weight: bold" id="Resultado" runat="server">

</div>
Agregando imágenes enlazadas
• Como la imagen no se refiere a una figura cuando se
carga, hay que ocultarlo.
protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack == false)
{
//…
}
Figura.Visible = false;
}
Agregando imágenes enlazadas
protected void MostrarFigura_ServerClick(Object sender, EventArgs e)
{
Figura.Src = "pic" + Monedas.SelectedIndex.ToString() + ".png";
Figura.Alt = "Figura de la Moneda";
Figura.Visible = true;
}

pic1.png
Agregando imágenes enlazadas
Fijando estilos
• Cada control HTML también proporciona acceso a atributos
de estilos CSS a través de su colección Style.
• Para usar esta colección, se necesita especificar el nombre del
atributo de estilo CSS (Cascading Style Sheets) y el valor que
se desea asignar a este.
• La sintaxis básica es:
ControlName.Style [“Nombredeatributo”] = “ValorAtributo”;
Fijando estilos
• Por ejemplo se podría enfatizar con un color rojo la entrada
indebida de un valor.
protected void Convert_ServerClick(Object sender, EventArgs e)
{
decimal monto = decimal.Parse(txtDolar.Value);
if (monto < 0) {
Resultado.Style["color"] = "Red";
Resultado.InnerText = "Ingrese un valor positivo";
}
else {
Resultado.Style["color"] = "Blue";
ListItem item = Monedas.Items[Monedas.SelectedIndex];
decimal nuevoMonto = monto * Decimal.Parse(item.Value);
Resultado.InnerText = monto.ToString() + " US dolares =";
Resultado.InnerText += nuevoMonto.ToString() + item.Text;
}
}
Fijando estilos
Una mirada profunda a las clases de control
HTML
Eventos HTML
• Los controles de servidor HTML también proporciona
uno de dos posibles eventos:
• ServerClick: es simplemente un click que se procesa en el
lado del servidor.
• ServerChange: responde cuando un cambio se ha hecho a
un control texto o selección.
Eventos HTML
Eventos Avanzados con el control
HtmlInputImage
• Los eventos estándar de .NET, indican que cada evento debería
pasar dos parámetros de información.
• El primer parámetro identifica el objeto (en este caso, el control)
que dispara el evento.
• El segundo parámetro es un objeto especial que puede incluir
información adicional acerca del evento.
Eventos Avanzados con el control
HtmlInputImage
• De hecho, solo un control de servidor HTML envía
información adicional: HtmlInputImage
• Este envía un objeto ImageClickEventArgs que da las
coordenadas X y Y representando la ubicación donde la
imagen se ha hecho click.
Eventos Avanzados con el control
HtmlInputImage
Eventos Avanzados con el control
HtmlInputImage
La clase base HtmlControl
• Cada control HTML hereda de la clase base
HtmlControl.
• Esto significa que cada control HTML soportará un
conjunto básico de propiedades.
La clase base HtmlControl
Propiedades Descripción
Attributes Atributos y valores de las etiquetas.
Controls Todos los controles que pueden contener.
Disabled Deshabilita el control .
Page Referencia a la pagina web que tiene el
control.
Parent Referencia al padre del control.
Style Estilos CSS para la pagina.
TagName Indica el nombre de la etiqueta HTML.
Visible Oculta o muestra un control
La clase HtmlContainerControl
• Cualquier control HTML que pueda contener otros elementos
HTML hereda del control HtmlContainer.
• Por ejemplo: <a>, <form>, y <div> pueden contener otros
elementos HTML .
• De otro lado, <img> y <input> no pueden contener otros
elementos.
• Entonces las clases HtmlAnchor, HtmlForm, y
HtmlGenericControl heredan de HtmlContainerControl,
mientras que HtmlImage y HtmlInput no.
La clase HtmlContainerControl

Propiedades Descripción
InnerHtml Contenido HTML entre <>
InnerText Texto contenido entre <>
La clase HtmlInputControl
• Este control define algunas propiedades que son comunes para
todos los controles HTML que están basados en la etiqueta
<input> :
• <input type="text">,
• <input type="submit">, y
• <input type="file">.

Propiedades Descripción
Type Provee el tipo de control de entrada
Value Retorna el contenido del control como string
La clase Page
• Cada pagina web es una clase personalizada que hereda
de System.Web.UI.Page.
• Por herencia de esta clase, la clase pagina web adquiere
un numero de propiedades que el código puede usar.
La clase Page
Propiedades Descripción
Application y Esta colección mantiene el estado de información en el
Session servidor.
Cache Almacena objetos para reusar en otras paginas o para
otros clientes.
Controls Todos los controles contenidos en la pagina web.
IsPostBack Indica si es la primera vez que la pagina se ha ejecutado
(false)
Request Objeto HttpRequest que contiene información sobre la
actual petición de la web.
Response Objeto HttpResponse que permite fijar las respuestas
web o redirecciona al usuario a otra pagina web.
La clase HttpRequest
• La clase HttpRequest encapsula toda la información relacionada
a la petición del cliente para una pagina web.

Propiedades Descripción
ApplicationPath y Obtiene el directorio virtual URL, el directorio
PhysicalPath físico real.
Browser Tiene un enlace a las características del
navegador como ActiveX, cookies, etc.
Cookies Obtiene los cookies enviados con la petición
La clase HttpResponse
• La clase HttpResponse permite enviar información directamente
al cliente.

Propiedades Descripción
BufferOutput Por omisión es verdadero, la pagina no envia
al cliente hasta que este completamente listo.

Write(), Permiten escribir texto o contenido binario

BinaryWrite(), directamente al flujo de respuesta o incluso a
un archivo.
y WriteFile()
Redirect() Transfiere el usuario a otra pagina o website.
La clase HttpResponse
Práctica
1. Explique la anatomía de una aplicación ASP.NET
2. ¿Cómo se agrega un evento clic a un control HtmlInputButton
con su correspondiente código en C#?