Clase 6Clase 6•Curso Microsoft .NETCurso Microsoft .NET

•I.S.F.T. N° 182I.S.F.T. N° 182

AgendaAgenda WebFormsWebForms

GeneralidadesGeneralidades ControlesControles EventosEventos Ciclo de vidaCiclo de vida

AgendaAgenda WebFormsWebForms

GeneralidadesGeneralidades ControlesControles EventosEventos Ciclo de vidaCiclo de vida

Formulario Web Formulario Web (ASP.NET web form)(ASP.NET web form) Es una página expresada en lenguaje de marcas Es una página expresada en lenguaje de marcas

(HTML) que es compilada y ejecutada (HTML) que es compilada y ejecutada dinámicamente en el servidor para generar la dinámicamente en el servidor para generar la salida solicitada por el cliente (explorador ó salida solicitada por el cliente (explorador ó dispositivo).dispositivo).

Code BehindCode Behind Es el código que se ejecuta del lado del servidor Es el código que se ejecuta del lado del servidor

para lograr el comportamiento deseado en un para lograr el comportamiento deseado en un formulario web.formulario web.

Partial ClassPartial Class Un nuevo concepto, que es aplicado en ASP.NET Un nuevo concepto, que es aplicado en ASP.NET

para vincular las páginas aspx (la interfaz del para vincular las páginas aspx (la interfaz del usuario) con su Code Behind (comportamiento).usuario) con su Code Behind (comportamiento).

WebForms - GeneralidadesWebForms - Generalidades

Controles de ServidorControles de Servidor

Componentes que se ejecutan en el lado del Componentes que se ejecutan en el lado del servidorservidor

Encapsulan partes de la interface de usuariosEncapsulan partes de la interface de usuarios Poseen el atributo runat=“server”Poseen el atributo runat=“server” Mantienen su “estado” entre postbacks al servidor – Mantienen su “estado” entre postbacks al servidor –

ViewStateViewState Poseen un modelo de objetos comúnPoseen un modelo de objetos común

Ej.: todos tienen las propiedades Id y TextEj.: todos tienen las propiedades Id y Text Generan HTML especifico según el browser clienteGeneran HTML especifico según el browser cliente

Equivalencias de ControlesEquivalencias de Controles

Botón HTML “clásico” (No es de Botón HTML “clásico” (No es de

Servidor)Servidor)

Control de Servidor HTMLControl de Servidor HTML

Control de Servidor WebControl de Servidor Web

<INPUT type="button" value="Buscar">

<INPUT type="button" value="Buscar" id="cmdBuscar" runat="server" NAME="button1">

<asp:Button id="cmdBuscar" runat="server" Text="Buscar"/>

Controles de Servidor - EjemplosControles de Servidor - Ejemplos

WebControlWebControl HTML equivalenteHTML equivalente

<asp:button><asp:button> <input type=submit><input type=submit>

<asp:checkbox><asp:checkbox> <input type=checkbox><input type=checkbox>

<asp:hyperlink><asp:hyperlink> <a href="…"> </a><a href="…"> </a>

<asp:image><asp:image> <img src="…"><img src="…">

<asp:imagebutton><asp:imagebutton> <input type=image><input type=image>

<asp linkButton><asp linkButton>

<asp:label><asp:label> <span> </span><span> </span>

<asp:panel><asp:panel> <div> </div><div> </div>

<asp:radiobutton><asp:radiobutton> <input type=radiobutton><input type=radiobutton>

<asp:table><asp:table> <table> </table><table> </table>

<asp:textbox><asp:textbox> <input type=text><input type=text>

<asp:listbox><asp:listbox> <select size="5"> </select><select size="5"> </select>

Son elementos ocultos que validan las Son elementos ocultos que validan las entradas de datos contra algún patrónentradas de datos contra algún patrón

El proceso de validación puede ser llevado El proceso de validación puede ser llevado en:en: ClienteCliente

El browser cliente debe soportar lenguaje El browser cliente debe soportar lenguaje scriptscript

Le da al usuario un feedback inmediatoLe da al usuario un feedback inmediato Reduce el número de postbacksReduce el número de postbacks

ServidorServidor Repite la validación del lado del clienteRepite la validación del lado del cliente Permite validar contra datos almacenados Permite validar contra datos almacenados

por ej. en una base de datospor ej. en una base de datos

Son elementos ocultos que validan las Son elementos ocultos que validan las entradas de datos contra algún patrónentradas de datos contra algún patrón

El proceso de validación puede ser llevado El proceso de validación puede ser llevado en:en: ClienteCliente

El browser cliente debe soportar lenguaje El browser cliente debe soportar lenguaje scriptscript

Le da al usuario un feedback inmediatoLe da al usuario un feedback inmediato Reduce el número de postbacksReduce el número de postbacks

ServidorServidor Repite la validación del lado del clienteRepite la validación del lado del cliente Permite validar contra datos almacenados Permite validar contra datos almacenados

por ej. en una base de datospor ej. en una base de datos

Controles de Servidor - Controles de Servidor - ValidaciónValidación

ASP.NET proporciona 6 controlesASP.NET proporciona 6 controles RequiredFieldValidatorRequiredFieldValidator. Valor requerido.. Valor requerido. CompareValidatorCompareValidator. Valida contra un valor . Valida contra un valor

constante o contra otro control.constante o contra otro control. RangeValidatorRangeValidator. Valor dentro de un rango de . Valor dentro de un rango de

tipos.tipos. RegularExpressionValidatorRegularExpressionValidator. Valida contra . Valida contra

un patrón o expresión regular.un patrón o expresión regular. CustomValidatorCustomValidator. Lógica de validación . Lógica de validación

proporcionada por nosotros.proporcionada por nosotros. ValidationSummaryValidationSummary. No es un validador, . No es un validador,

sino que muestra mensajes de error sino que muestra mensajes de error “agrupados”.“agrupados”.

ASP.NET proporciona 6 controlesASP.NET proporciona 6 controles RequiredFieldValidatorRequiredFieldValidator. Valor requerido.. Valor requerido. CompareValidatorCompareValidator. Valida contra un valor . Valida contra un valor

constante o contra otro control.constante o contra otro control. RangeValidatorRangeValidator. Valor dentro de un rango de . Valor dentro de un rango de

tipos.tipos. RegularExpressionValidatorRegularExpressionValidator. Valida contra . Valida contra

un patrón o expresión regular.un patrón o expresión regular. CustomValidatorCustomValidator. Lógica de validación . Lógica de validación

proporcionada por nosotros.proporcionada por nosotros. ValidationSummaryValidationSummary. No es un validador, . No es un validador,

sino que muestra mensajes de error sino que muestra mensajes de error “agrupados”.“agrupados”.

Controles de Servidor - Controles de Servidor - ValidaciónValidación

Tipos de Controles de ServidorTipos de Controles de Servidor

Por default, los Por default, los elementos HTML no elementos HTML no son accesibles desde son accesibles desde código del lado del código del lado del servidorservidor

Agregando Agregando runat=“server” y el runat=“server” y el atributo id, se atributo id, se convierten en convierten en Controles de Servidor Controles de Servidor HTMLHTML

Por default, los Por default, los elementos HTML no elementos HTML no son accesibles desde son accesibles desde código del lado del código del lado del servidorservidor

Agregando Agregando runat=“server” y el runat=“server” y el atributo id, se atributo id, se convierten en convierten en Controles de Servidor Controles de Servidor HTMLHTML

Controles Controles de de

Servidor Servidor HTMLHTML

Controles Controles de de

Servidor Servidor WebWebConocidos como Conocidos como

WebControlsWebControlsSolo accesibles del Solo accesibles del lado del servidorlado del servidorMuchos tiposMuchos tipos IntrínsecosIntrínsecos ValidaciónValidación ““Ricos”Ricos” Del tipo lista de Del tipo lista de

datosdatos

No tienen una No tienen una relación 1:1 con relación 1:1 con elem. HTMLelem. HTML

Conocidos como Conocidos como WebControlsWebControlsSolo accesibles del Solo accesibles del lado del servidorlado del servidorMuchos tiposMuchos tipos IntrínsecosIntrínsecos ValidaciónValidación ““Ricos”Ricos” Del tipo lista de Del tipo lista de

datosdatos

No tienen una No tienen una relación 1:1 con relación 1:1 con elem. HTMLelem. HTML

Controles con lógica de IU compleja Controles con lógica de IU compleja encapsulados de forma sencillaencapsulados de forma sencilla

Ejemplos:Ejemplos: AdRotatorAdRotator. Permite mostrar anuncios . Permite mostrar anuncios

publicitarios (banners) de una secuencia publicitarios (banners) de una secuencia predeterminada o aleatoria.predeterminada o aleatoria.

CalendarCalendar. Permite disponer de un calendario . Permite disponer de un calendario altamente personalizable.altamente personalizable.

Controles con lógica de IU compleja Controles con lógica de IU compleja encapsulados de forma sencillaencapsulados de forma sencilla

Ejemplos:Ejemplos: AdRotatorAdRotator. Permite mostrar anuncios . Permite mostrar anuncios

publicitarios (banners) de una secuencia publicitarios (banners) de una secuencia predeterminada o aleatoria.predeterminada o aleatoria.

CalendarCalendar. Permite disponer de un calendario . Permite disponer de un calendario altamente personalizable.altamente personalizable.

Controles de Servidor – Controles de Servidor – Controles “Ricos”Controles “Ricos”

Controles de UsuarioControles de Usuario Simplifican la reutilización de código y Simplifican la reutilización de código y

componentes de la IU dentro de las componentes de la IU dentro de las aplicaciones Web ASP.NETaplicaciones Web ASP.NET

Son del servidor definidos en un Son del servidor definidos en un archivo archivo .ascx.ascx

Contienen HTML pero NO los tags <HTML>, Contienen HTML pero NO los tags <HTML>, <BODY> o <FORM><BODY> o <FORM>

Contiene también código en VB.NET o C#Contiene también código en VB.NET o C#

<%@ Control Language=“cs" %><%@ Control Language=“cs" %>

WebForm2.aspx

FARMACIA

¿Por qué usar Controles de ¿Por qué usar Controles de Usuario?Usuario? Son autocontenidosSon autocontenidos Pueden ser utilizados más de una vezPueden ser utilizados más de una vez Pueden estar escritos en diferentes Pueden estar escritos en diferentes

lenguajeslenguajes

WebForm1.aspx

FARMACIA

UserControl.ascx

FARMACIA

Eventos en un WebForm (1/4)Eventos en un WebForm (1/4)

Server

Cliente Web

Analiza el mensajeevento

manejador

mensaje

respuesta

Llama al manejador apropiado

Modelo de Eventos Web FormModelo de Eventos Web Form

Eventos en un Eventos en un WebForm WebForm (2/4)(2/4)

• Eventos del lado del servidorEventos del lado del servidorCuando se trabaja con controles ASP.NET, estos Cuando se trabaja con controles ASP.NET, estos generan eventos en el servidor para responder a las generan eventos en el servidor para responder a las peticiones del usuario, produciéndose peticiones del usuario, produciéndose PostBackPostBack..

• PostBackPostBackA instancias de un formulario web mostrado en el A instancias de un formulario web mostrado en el cliente cada evento sucedido en él genera un POST cliente cada evento sucedido en él genera un POST hacia el servidor y una respuesta. Este ida y vuelta hacia el servidor y una respuesta. Este ida y vuelta dentro de un mismo formulario web se llama dentro de un mismo formulario web se llama postback.postback.

• View StateView StateEs un mecanismo que permite mantener el estado Es un mecanismo que permite mantener el estado de los controles del formulario web entre de los controles del formulario web entre postbacks. El estado de los controles viaja en el postbacks. El estado de los controles viaja en el view state por cada postback.view state por cada postback.(ver diapositiva 36)(ver diapositiva 36)

Eventos en un Eventos en un WebForm WebForm (3/4)(3/4)

Declaración de eventos en un control del lado del Declaración de eventos en un control del lado del cliente:cliente:

<asp:Button ID="btnEjemplo" runat="server" Text="Aceptar" onclick="btnEjemploClick" />

Atención del evento en el servidor ( code Atención del evento en el servidor ( code behind )behind )

Ejemplo en C#:Ejemplo en C#:protected void btnEjemploClick(object sender, EventArgs e){ if (!string.IsNullOrEmpty(txtEjemplo.Text)) { lblEjemplo.Text = txtEjemplo.Text; }}

Ciclo de vida de un WebFormCiclo de vida de un WebForm

Sucesos mas importantes del ciclo de vida de una Sucesos mas importantes del ciclo de vida de una página:página:

Inicialización de objetosInicialización de objetos Carga View StateCarga View State Procesa datos del postProcesa datos del post Carga de la páginaCarga de la página Eventos Post BackEventos Post Back Graba View StateGraba View State RenderRender UnLoadUnLoad

DemoDemo

Aplicaciones web ASP.NETAplicaciones web ASP.NET