Introduccin a ASP.

NET

Objetivo
Conocer las caracteristicas que ofrece ASP.NET y la plataforma Microsoft.NET para el desarrollo de aplicaciones web.

Temario
Introduccin a ASP.NET. Formularios web. Mantenimiento del estado. Configuracin. Autenticacin. Master Pages.

Temario
Introduccin a ASP.NET

Aplicaciones Web. Que es ASP.NET?. Componentes de una aplicacin ASP.NET. Servidor Web. Las aplicaciones Web ASP.NET + IIS.

Aplicaciones Web
Una aplicacin web es un conjunto de pginas HTML que se transmiten por medio del protocolo HTTP de un servidor al cliente y viceversa, brindando distintas funcionalidades a un usuario final. ASP.NET es un Marco (framework) para programar aplicaciones web, de un modo similar al que se programan las aplicaciones windows. El componente principal son los Web Forms (formularios web) que permiten, entre otras cosas, separar la interfaz del usuario de la funcionalidad de la aplicacin.

Que es ASP.NET?
ASP.NET es el framework de programacin web dentro de .NET. Permite desarrollar aplicaciones Web con un modelo similar al utilizado para aplicaciones Windows. El componente fundamental de ASP.NET es el WebForm. Permite crear pginas Web dinmicas que pueden acceder a recursos del servidor. Independencia del cliente (navegador, S.O., dispositivo fsico, etc.). Permite utilizar cualquier lenguaje .NET. Permite desarrollar Servicios Web XML.

Componentes de una aplicacin ASP.NET

WebForms (Formularios Web) Uno o ms archivos con extensin .aspx. Archivos Code-Behind Archivos asociados a WebForms que contienen cdigo del lado del servidor (Ej. VB.NET, C#, etc.). Archivos de configuracin con formato XML Un archivo Web.config por c/aplicacin. Un nico archivo Machine.config por servidor. Global.asax Eventos a nivel de aplicacin.

Componentes de una aplicacin ASP.NET

Directorio BIN

Contiene el assembly de la aplicacin (Ej.: MiAplic.dll).

Cero o ms assemblies (Componentes externos).

Permiten a la aplicacin ASP.NET enviar y recibir datos desde Servicios Web.

Enlaces a Servicios Web XML

Componentes de una aplicacin ASP.NET

Cliente Output Cache ASP.NET Web Server
WebForm1.aspx

Global.asax

WebForm1.aspx.vb

Web.config
WebForm2.aspx

Internet

BIN
WebForm2.aspx.vb

Comp. Comp.

Servicios Web Database

Servidor Web
Un servidor web es un sistema informtico conectado a una red, donde se almacenan las pginas, imgenes, etc. (que forman una aplicacin web) disponibles para ser visitadas por los usuarios de la red.
Internet Information Server (IIS), es el servidor Web de Microsoft que corre sobre plataformas Windows. Los servicios que ofrece son: FTP, SMTP, NNTP y HTTP/HTTPS

Las aplicaciones Web ASP.NET + IIS

Las aplicaciones Web solo pueden existir en una ubicacin que es publicada por IIS como un Directorio Virtual. Directorio Virtual: es un recurso compartido identificado por un alias y que representa una ubicacin fsica en el servidor. http://localhost hace referencia al directorio raz del servidor web.

Por default, http://localhost apunta a C:\Inetpub\wwwroot.

Las aplicaciones Web ASP.NET + IIS

VS.NET por default crea las aplicaciones web bajo el directorio raz, ej.:

MiAplicacion

Virtual:

http://localhost/MiAplicacion

Fsica: C:\Inetpub\wwwroot\MiAplicacion

Podemos usar IIS para definir un directorio virtual donde alojar nuestras aplicaciones Web, diferente al predeterminado.

Estructura de las aplicaciones Web

El permetro de una aplicacin Web es determinada por su estructura de directorios

Comienza por su directorio raz, el cual contiene:

La pgina o WebForm de inicio. El archivo de configuracin Web.config. El directorio BIN.

El permetro de la aplicacin termina en su ltimo directorio o cuando se encuentra el directorio raz de otra aplicacin Web.

Temario
Introduccin a ASP.NET Formularios WEB

Que es un Web Form?. Controles de servidor. Cmo implementar cdigo?. Eventos

Que es un Web Form?

Es una pgina expresada en lenguaje de marcas que es compilada y ejecutada dinmicamente en el servidor para generar la salida solicitada por el cliente (explorador dispositivo). Extensin .aspx.
<%@ Page Language="C#" CodeFile="LogIn.aspx.cs" Inherits="LogIn" %> <html> <body> <form id="Form1" method="post" runat="server"> </form> </body> </html>

Controles de Servidor
Componentes que se ejecutan en el lado del servidor. Encapsulan partes de la interface de usuarios. Poseen el atributo runat=server. Mantienen su estado entre postbacks al servidor ViewState. Poseen un modelo de objetos comn Ej.: todos tienen las propiedades Id y Text. Generan HTML especifico segn el browser cliente.

Tipos de Controles de Servidor

Controles de Servidor HTML
Por default, los elementos HTML no son accesibles desde cdigo del lado del servidor. Agregando runat=server y el atributo id, se convierten en Controles de Servidor HTML. Espacio de nombres System.Web.UI.HtmlControls.

Controles de Servidor Web

Conocidos como WebControls. Solo accesibles del lado del servidor. Muchos tipos

Intrnsecos Validacin Ricos Del tipo lista de datos

No tienen una relacin 1:1 con elementos HTML.

Espacio de nombres System.Web.UI.WebControls.

Equivalencias de Controles
Botn HTML clsico (No es de Servidor)
<INPUT type="button" value="Buscar">

Control de Servidor HTML

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

Control de Servidor Web

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

Controles de Servidor - Ejemplos

WebControl
<asp:button>

HTML equivalente
<input type=submit>

<asp:checkbox>
<asp:hyperlink> <asp:image> <asp:imagebutton> <asp linkButton> <asp:label> <asp:panel> <asp:radiobutton> <asp:table> <asp:textbox> <asp:listbox>

<input type=checkbox>
<a href=""> </a> <img src=""> <input type=image> <span> </span> <div> </div> <input type=radiobutton> <table> </table> <input type=text> <select size="5"> </select>

Cmo implementar cdigo?

Existen dos mtodos para agregar cdigo: Dentro del mismo archivo que el contenido html (inline code). En un archivo separado (code-behind). El Code-behind es la opcin por defecto del Visual Studio .NET 2005.

Escribiendo Inline Code

El cdigo y el contenido en el mismo archivo. Diferentes secciones para el cdigo y el HTML.
<%@ Page Language="C#" CodeFile="LogIn.aspx.cs" Inherits="LogIn" %> <script runat="server"> public void btn_Click(Object s, EventArgs e) { ... } </script> <html> <body> <form id="Form1" method="post" runat="server"> <asp:Button id="btn" runat="server" onclick="btn_Click"/> </form> </body> </html>

Qu es el Code-Behind?
Separacin del cdigo y el contenido Los desarrolladores y los diseadores pueden trabajar de forma independiente.
Archivo simple Archivos separados

cdigo

<tags>
Form1.aspx

<tags>
Form1.aspx

cdigo
Form1.aspx.cs

Entendiendo el funcionamiento del Code-Behind

Crea archivos separados para la grfica y la lgica de la aplicacin. Se usa la directiva @Page para unir ambos archivos. Pre-compilacin o compilacin JIT
Page1.aspx
<% @Page Language=cs" Inherits="Project.WebForm1" CodeFile="Page1.aspx.cs" %> <html>...

Page1.aspx.cs public class WebForm1() { private cmd1_Click() { } }

Procedimientos de evento del lado del cliente

Generalmente usado slo en controles HTML. Interpretado por el browser del lado del cliente. No tiene acceso a recursos del lado del servidor. Usa <SCRIPT language=javascript o vbscript">.

Internet

Pginas .HTML

Procedimientos de evento del lado del servidor

Usados en Web y HTML Controls. El cdigo se compila y se ejecuta en el servidor. Tiene acceso a recursos del lado del servidor. Usa <SCRIPT language=cs" runat="server">. Pginas .ASPX

Internet

Modelo de eventos del lado del servidor

Modelo de Eventos Web Form
Server Cliente Web mensaje Analiza el mensaje Llama al manejador apropiado

evento

manejador respuesta

Ciclo de vida de los eventos de pgina

Page_Init
Eventos de Control Eventos de Cambio Eventos de Accin

Page_Load Textbox1_Changed

Button1_Click
Page_Unload
Dispose de la pgina

Eventos de Postback
El evento Page_Load se ejecuta en cada request Inicializacin de controles. Usar Page.IsPostBack para ejecutar lgica condicional.
private void Page_Load(object sender, System.EventArgs e) { if (!Page.IsPostBack) { //slo en el primer load de la pgina } else { //se ejecuta en cada request } }

Page.IsPostBack previene el reload en cada request.

Temario
Introduccin a ASP.NET. Formularios WEB. Mantenimiento del estado

Generalidades. Global.asax. Estado de la aplicacin. Estado de la sesin. Duracin de las variables de aplicacin y sesin. View State.

Generalidades
Las pginas html de una aplicacin web se transmiten por medio del protocolo HTTP. Este protocolo es un protocolo sin estado. As, una vez que el usuario ingreso datos en el navegador, si no se mantiene el estado mediante algn mecanismo, se pierden los datos ingresados. ASP.NET proporciona mecanismos para mantener el estado de sus variables a travs de las distintas peticiones de pginas. Entre estos mecanismos se encuentran:

Application State : mecanismo de almacenamiento global accesible desde todas las pginas de la aplicacin Web Session State : mecanismo de almacenamiento limitado a la sesin actual del navegador View State :Mantiene valores entre mltiples solicitudes a la misma pgina

Administracin de estados
Sin administracin de estados
Login.aspx
Ingrese sus datos de inicio de sesin Nombre Juan Contrasea *******

Con administracin de estados

Login.aspx
Ingrese sus datos de inicio de sesin Nombre Juan Contrasea *******

Ingresar Inicio.aspx Hola Olvide quien es Ud!

Ingresar Inicio.aspx Hola Juan

Tipos de administracin de estado

Del lado del servidor
Application state
Informacin disponible para todos los usuarios de la aplicacin Web.

Del lado del cliente

Cookies
Archivos de texto que guardan informacin de estado en la PC cliente.

Session state
Informacin disponible nicamente para un usuario de una sesin especfica.

ViewState
Mantiene valores entre mltiples solicitudes a la misma pgina.

Database
En algunos casos se utiliza una base de datos para guardar la informacin de estado.

Query strings
Informacin anexada al final de la URL.

Administracin de estados - servidor

Application State es un mecanismo de almacenamiento global accesible desde todas las pginas de la aplicacin Web. Session State est limitada a la sesin actual del browser. Las sesiones ASP.NET se identifican con una cadena de caracteres ASCII y se guarda como una Cookie en el cliente.
Variables de Session y Application SessionID

Administracin de estados - cliente

Cookies para mantener el estado: Temporarias. Persistentes. Problema: el usuario puede borrarlas o deshabilitarlas. Problemas de seguridad. Espacio limitado a almacenar no ms de 4KB.

Cookie

Global.asax
Slo un archivo Global.asax por aplicacin Web. Almacenado en la raz del directorio virtual de la aplicacin Web. Administra eventos a nivel de aplicacin y sesin. Los eventos referentes a la manutencin del estado de aplicaciones web, son: Application_Start Application_End Session_Start Session_End

Global.asax
Cliente
Peticin Respuesta Servidor Web ASP.NET IIS ASP.NET HTTP Runtime Application_BeginRequest Application_AuthenticateRequest Application_AuthorizeRequest Application_ResolveRequestCache Application_EndRequest Application_UpdateRequestCache

Application_AquireRequestState
Application_PreRequestHandlerExecute

Application_ReleaseRequestState
Application_PostRequestHandlerExecute

Ejecucin de la pgina

Estado de la aplicacin
Permite almacenar informacin a nivel de aplicacin, comn a todas las sesiones. Esta informacin se almacena en una coleccin llamada Application. El acceso a esta informacin se realiza mediante el objeto intrnseco Application
protected void Application_Start() { DataSet ds = new DataSet(); try { FileStream fs = new FileStream(Server.MapPath("schemadata.xml"), StreamReader reader = new StreamReader(fs); ds.ReadXml(reader); } finally { fs.Close(); } DataView view = new DataView(ds.Tables[0]); Application["Sucursal"] = view; }

Estado de la sesin
Una sesin es una interaccin entre un navegador y un servidor web (comprende varios requests a lo largo del tiempo). Es posible almacenar informacin nicamente relevante para una sesin. El acceso a esta informacin se realiza mediante el objeto intrnseco Session.
Protected void Session_Start(object sender, EventArgs e ) { try { conn = new SqlConnection(ConfigurationManager.ConnectionStrings[ "elstring"].ConnectionString); command.Connection = conn; conn.Open(); object result = command.ExecuteScalar(); Session["codigo"] = result; } finally {conn.Close();} }

Duracin de las variables Session y Application

Las variables de sesin expiran luego del ltimo acceso. Por defecto 20 minutos despus La duracin puede ser cambiada desde el Web.config.
<configuration> <system.web> <sessionState timeout="10" /> </system.web> </configuration>

Las variables de aplicacin persisten hasta que se baja el AppDomain (modificando el web.config, modificando las dlls, reseteando el iis, etc.)

View State
Mantiene el estado de los controles, entre postback de una pgina. El View State se implementa mediante un campo oculto en el html generado y viaja en cada POST

Temario
Introduccin a ASP.NET. Formularios WEB. Mantenimiento del estado. Configuracin

El web.config. Accediendo dede cdigo al web.config.

El web.config
Es un archivo xml, donde se guarda informacin de configuracin comn a toda la aplicacin como ser: cadenas de conexin, tipo de autenticacin, etc. El archivo de configuracin posee una estructura jerrquica (xml) que permite una lectura rpida y facilita su modificacin. Secciones y grupos de secciones: appSettings, system.web, authentication, authorization. Herramienta de administracin del sitio web (Web Site Administration Tool) .

Accediendo desde el cdigo al web.config

Secciones configuracin ms simples
<configuration> <connectionStrings> <add name="northwind" connectionString="server=(local);database=Northwind;Integrated Security=SSPI" providerName="System.Data.SqlClient" /> </connectionStrings> </configuration>

Acceso de lectura/escritura a especificaciones de configuracin.

SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["elstring"].ConnectionString);

Temario
Introduccin a ASP.NET. Formularios Web (Web Forms). Mantenimiento del estado. Configuracin Autenticacin

Generalidades. Tipos de autenticacin. Autenticacin por formularios. Controles de Login.

Generalidades
Qu es Autenticacin? Es el mecanismo que permite afirmar que la persona que esta ingresando al sistema es quien dice ser. Cmo Funciona? Se aceptan las credenciales ingresadas por el usuario (usuario contrasea) y se validan contra una base de datos, el sistema operativo, un servicio web, u otro mecanismo definido segn el tipo de autenticacin.

Tipos de autenticacin
Basada en Windows Basada en Windows e IIS. La solicitud de la pgina pasa por IIS. Si IIS valida exitosamente la credencial, entonces se devuelve la pgina solicitada.
Basada en formularios Las solicitudes no autenticadas son redireccionadas a un formulario de login Despus de validar la credencial se enva al cliente una cookie de autenticacin.

Configurando la autenticacin
El tipo y las caractersticas de la autenticacin se configuran en el archivo web.config.
<system.web> <authentication mode="Forms"> <forms loginUrl="LogIn.aspx" protection="All" timeout="20" path="/"/> </authentication> <authorization> <deny users="?"/> </authorization> </system.web>

Autenticacin por formularios

La autenticacin por formularios se utiliza para validar a los usuarios contra bases de datos relaciones, Servicios Web, etc. Cmo funciona? Si las credenciales son vlidas, ASP.NET graba un ticket de autenticacin en la cookie que contiene la identidad del usuario.

Si el usuario es annimo, redirecciona las peticiones a una pgina predeterminada para validar las credenciales del usuario.

Autenticacin por formularios

1

IIS
NO Autenticado

Autenticacin basada en Formulario

Autenticado

Cliente solicita una pgina

Acceso Denegado

NO Autenticado

Usuario Gabriel Clave *********** Aceptar

4 Form de Login
(Usuario ingresa sus credenciales)

Autorizado

3
Autenticado

Cookie de autenticacin

Autorizado

Pgina Segura solicitada

Controles de Login
Control Log In
<asp:Login ID="Login1" runat="server CreateUserUrl="~/CrearUsuario.aspx" CreateUserText="Nuevo Usuario RememberMeText="Recordar mi usuario" BackColor="#F7F6F3 BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#333333"> <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White"/> <InstructionTextStyle Font-Italic="True" ForeColor="Black"/> <TextBoxStyle Font-Size="0.8em"/> <LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" /> </asp:Login>

Ejemplo del control

Controles de Login
Control de Creacin de Usuarios
<asp:CreateUserWizard ID=createUserWizard" runat="server" CreateUserButtonText="Crear Usuario CompleteSuccessText="Usuario Creado" ContinueButtonText="Finalizar ContinueDestinationPageUrl="~/Default.aspx FinishDestinationPageUrl="~/Default.aspx> <WizardSteps> <asp:CreateUserWizardStep ID=createUserWizardStep" runat="server"> </asp:CreateUserWizardStep> <asp:CompleteWizardStep ID=completeWizardStep" runat="server Title="Usuario Creado AllowReturn="true"> </asp:CompleteWizardStep> </WizardSteps> </asp:CreateUserWizard>

Ejemplo del control

Control Login - Utilizacin

Propiedades utiles

UserName Password Authe Authenticate Parmetro utilizado para validar el ingreso de datos: AuthenticateEventArgs e Authenticated (establecer true o false)

Eventos

Temario
Introduccin a ASP.NET. Formularios Web (Web Forms). Mantenimiento del estado. Configuracin Autenticacin Master Pages

Generalidades. Pginas maestras. Pginas de contenido.

Generalidades
Logran herencia visual para las pginas Web. Permite manejar reas comunes de un sitio de manera consistente En ASP.NET 1.1, el problema de la herencia visual implicaba

Copiar & Pegar Includes Herencia + User Controls

Se basan en Templates (Master Page) y en pginas de contenido (Content Page). Permiten incluir mens, encabezados, navegaciones, etc.

Master Pages
Master Page Content Page

Master Pages
Masters definen <asp:ContentPlaceHolder> Paginas definen <asp:Content>

Site.master
<%@ Master %>

default.aspx
<%@ Page MasterPageFile="Site.master" %> <asp:Content ContentPlaceHolderID= "Main" RunAt="server" />

http://.../default.aspx

<asp:ContentPlaceHolder ID="Main" RunAt="server" />

</asp:Content>

Pginas Maestras
En lugar de la directiva @Page, utiliza la directiva @Master:
<%@ Master Language="C# CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

Se trata como cualquier formulario web, con la extensin .master, y debe incluir el siguiente control:
<asp:contentplaceholder id="contenedor" runat="server> contenido por defecto </asp:contentplaceholder>

Pginas de contenido
Al crear un pgina de contenido, hay que elegir la pgina maestra. La directiva @page de la pgina sera:
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Home" %>

No repiten los tags de la pgina maestra, pero se pueden acceder desde el cdigo. Debe contener el control.
<asp:Content ID="cntDefault" ContentPlaceHolderID="contenedor" Runat="Server"> contenido de la pgina </asp:Content>

Themes - Skins
Se pueden establecer por pgina o por archivo web.config Coleccin de propiedades que definen apariencia de controles y pginas. Los temas estan constitudos de hojas de estilo (css) y de skins (skin). Skin: Contiene definicin de propiedades para web controls (Label, TextBox, Button, etc).

Los skin pueden ser: named skins: se establece la propiedad SkinID Default skins: sin el SkinID.