DA2 - 02 - FormWeb New - Acr

Agenda
Anatomía de una aplicación ASP.NET

Clases de control HTML
La clase pagina
Configuració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.
Tipos de archivos ASP.NET
Archivo Descripción
nombre.aspx Son las paginas web
nombre.ascx Son los controles de usuario
nombre.asmx Son los servicios web
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#.
Nombre.sln Solución del proyecto.
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
Caso de estudio: Conversor de monedas
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.
Se necesita añadir el atributo runat="server" a

cada etiqueta que se desea transformar en un
control servidor.
Se debería añadir también un atributo id a
cada control que se necesite interactuar con el
código.
El atributo id asigna el nombre único que se
usará para referirse al control en el código.
Las 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.
Nombre de clase Etiqueta HTML

HtmlAnchor <a>
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
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.
En el ejemplo el evento ocurre cuando el
usuario hace clic en el botón submit.
El HtmlInputButton permite que reaccione a
esta acción manejando el evento
ServerClick.
El ejemplo tiene cuatro 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 denominada US
(HtmlInputText).
à Un botón submit denominado Convert
(HtmlInputButton).
à Una etiqueta <div> denominada Result
(HtmlGenericControl).
<body>
<form method="post" runat="server">
<div>
Convertir:
<input type="text" id="US" runat = "server"> U.S.
dolares a soles;
<br /><br />
<input type="submit" id="Convert" value="OK" runat="server"
OnServerClick = "Convert_ServerClick">
<br /><br />
<div style="font-weight: bold" id="Result" runat="server">
</div>
</form>
</body>
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
public partial class _Default : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Convert_ServerClick(Object sender, EventArgs e)
{
decimal USMonto = decimal.Parse(US.Value);
decimal solesMonto = USMonto * 2.8M;
Result.InnerText = USMonto.ToString() + " US dolares ";
Result.InnerText += solesMonto.ToString() + " soles";
}
}
Detrás de escena del programa ASP.NET
1. La petición de la pagina se envía web server.

2. El web server determina que archivo .aspx se
ha registrado con ASP.NET y lo pasa al
proceso trabajador ASP.NET.
3. Si es la primera vez que la pagina realiza su
petición, ASP.NET automáticamente crea el
dominio de aplicación.
Detrás de escena del programa ASP.NET
4. Si el archivo .aspx. Nunca ha sido ejecutado,

ASP.NET lo compila y almacena (cache)
5. El archivo compilado actúa como un programa
en miniatura. Este empieza lanzando eventos
(Page.Load).
6. Cuando el código finaliza, ASP.NET pregunta a
cada control en la pagina web para colocarlo
dentro del correspondiente etiqueta HTML.
7. La pagina final se envía al usuario, y la aplicación
finaliza.
Mejorando la aplicación
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.
Convertir:
<input type="text" id="US" runat = "server">
U.S. dolares a:
<select id = "Monedas" runat="server" > </select>
<br /><br />


{
if (this.IsPostBack == false)
{
Monedas.Items.Add("Soles");
Monedas.Items.Add("Euro");
Monedas.Items.Add("Yen Japones");
Monedas.Items.Add("Dolar Canadiense");
}
}
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.
lista
{
{
Monedas.Items.Add(new ListItem("Soles", "2,8"));
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"));
}
}
lista
{
decimal monto = decimal.Parse(US.Value);
ListItem item = Monedas.Items[Monedas.SelectedIndex];
decimal nuevoMonto = monto * Decimal.Parse(item.Value);

Result.InnerText = monto.ToString() + " US dolares =";
Result.InnerText += nuevoMonto.ToString() + item.Text;
}
lista
Agregando imágenes enlazadas
Se va a mostrar en un grafico para cada

conversor de moneda.
Para proporcionar esta característica, el

programa necesita de un control botón
<input type="submit“> y un control imagen
<img>.
<div>
//…
<input type="submit" id="Convert" value="OK" runat="server"
OnServerClick = "Convert_ServerClick">
<input type="submit" value="Mostrar Figura" id="MostrarFigura"

OnServerClick = "MostrarFigura_ServerClick" runat="server">
<br /><br />
<img id="Figura" runat="server" >
<div style="font‐weight: bold" id="Result" runat="server">

</div>
Como la imagen no se refiere a una figura

cuando se carga, hay que ocultarlo.
{
{
Monedas.Items.Add(new ListItem("Soles", "2,8"));
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"));
}
Figura.Visible = false;
}
protected void MostrarFigura_ServerClick(Object

sender, EventArgs e)
{
Figura.Src = "Pic" + Monedas.SelectedIndex.ToString() + ".png";
Figura.Alt = "Figura de la Moneda";
Figura.Visible = true;
}
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”] =
“Valordeatributo”;
Fijando estilos
Por ejemplo se podría enfatizar con un color

rojo la entrada indebida de un valor.
{
decimal monto = decimal.Parse(US.Value);
if (monto < 0)
{
Result.Style["color"] = "Red";
Result.InnerText = "Ingrese un valor positivo";
}
else
{
Result.Style["color"] = "Blue";
ListItem item = Monedas.Items[Monedas.SelectedIndex];
decimal nuevoMonto = monto * Decimal.Parse(item.Value);

Result.InnerText = monto.ToString() + " US dolares =";
Result.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.
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.
HtmlInputImage
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
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">.
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
Application y Esta colección mantiene el estado de
Session información en el 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.
Colección de controles
Se puede usar la colección de controles para

añadir un control dinámico.
HtmlButton ctrl = new HtmlButton();

ctrl.InnerText = "Boton dinamico";
ctrl.ID = "Dinamico";
this.Controls.Add(ctrl);
La clase HttpRequest
La clase HttpRequest encapsula toda la

información relacionada a la petición del
cliente para una pagina web.
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.
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
Caracteres especiales
Cada web server inicia con algunas

configuraciones básicas que están definidas en
dos archivos
Resumen
La creación de aplicación de sitios web en

ASP.NET.
El uso de los controles de servidor HTML.
La pagina HTML final esta ubicada en el archivo
.aspx
Configuración ASP.NET.
Practica
1. ¿Cuál es la secuencia de pasos cuando se envia

una petición de la pagina al web server?
2. Explique en que consiste la clase
HtmlContainerControl, mencione 2 clases
3. Explique en que consiste la clase
HtmlInputControl, mencione 2 clases
4. ¿Qué funciones cumple los ficheros
Machine.config y web.config?

DA2 - 02 - FormWeb New - Acr

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

DA2 - 02 - FormWeb New - Acr

Încărcat de

Drepturi de autor:

Formate disponibile

Agenda

 Anatomía de una aplicación ASP.NET

 Cada aplicación ASP.NET comparte un

 ASP.NET provee dos controles servidor:

 Cuando se pega el contenido en HTML, este

 Se necesita añadir el atributo runat="server" a

 Todos los controles HTML de servidor se

Nombre de clase Etiqueta HTML

 Para agregar funcionalidad a la aplicación, se

 El ejemplo tiene cuatro controles de servidor:

public partial class _Default : System.Web.UI.Page

1. La petición de la pagina se envía web server.

4. Si el archivo .aspx. Nunca ha sido ejecutado,

 Se va a agregar múltiples opciones de cambio

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

<br /><br />

protected void Page_Load(object sender, EventArgs e)

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

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

 Se va a mostrar en un grafico para cada

 Para proporcionar esta característica, el

<input type="submit" value="Mostrar Figura" id="MostrarFigura"

<div style="font‐weight: bold" id="Result" runat="server">

 Como la imagen no se refiere a una figura

protected void MostrarFigura_ServerClick(Object

 Cada control HTML también proporciona acceso

 Por ejemplo se podría enfatizar con un color

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

 Los controles de servidor HTML también

 Cada control HTML hereda de la clase base

 Cualquier control HTML que pueda contener

 Este control define algunas propiedades que son

 Cada pagina web es una clase personalizada

 Se puede usar la colección de controles para

HtmlButton ctrl = new HtmlButton();

 La clase HttpRequest encapsula toda la

 La clase HttpResponse permite enviar

Write(), Permiten escribir texto o contenido binario

 Cada web server inicia con algunas

 La creación de aplicación de sitios web en

1. ¿Cuál es la secuencia de pasos cuando se envia

S-ar putea să vă placă și

Anatomía de una aplicación ASP.NET

Cada aplicación ASP.NET comparte un

ASP.NET provee dos controles servidor:

Cuando se pega el contenido en HTML, este

Se necesita añadir el atributo runat="server" a

Todos los controles HTML de servidor se

Para agregar funcionalidad a la aplicación, se

El ejemplo tiene cuatro controles de servidor:

Se va a agregar múltiples opciones de cambio

Se va a mostrar en un grafico para cada

Para proporcionar esta característica, el

Como la imagen no se refiere a una figura

Cada control HTML también proporciona acceso

Por ejemplo se podría enfatizar con un color

Los controles de servidor HTML también

Cada control HTML hereda de la clase base

Cualquier control HTML que pueda contener

Este control define algunas propiedades que son

Cada pagina web es una clase personalizada

Se puede usar la colección de controles para

La clase HttpRequest encapsula toda la

La clase HttpResponse permite enviar

Cada web server inicia con algunas

La creación de aplicación de sitios web en