Introducción a

ASP.NET
Yuri Pando Fernandez
Consultor Independiente
Descripción
 Introducciòn a la Web
 Introducción al .NET Framework
 Descripción de ASP.NET
 Descripción de la aplicación del
laboratorio
 Recursos
Evolucion
Próximo paso evolutivo de Internet

XML
TM L
H
g ía C P / IP
n o lo T
Tec
Standard Conectivid Presentac Programabi
Inno
vac FTP, E-mad ión lidad
ión ail, G
op
he r
Web
Page
s
Web
Navegar serv
ices
La Web Programa
r
Aplicaciones Web
 Porque surgieron?
 Tipos de Aplicaciones para Internet:
 Aplicaciones Web
 Servicios Web
 Aplicaciones habilitadas a Internet
 Aplicaciones Peer-to-Peer
El servidor web
 Que es un servidor web?
 Microsoft IIS
 Características de IIS
 Directorios Virtuales
Que es un servidor web
 El conjunto de todas sus páginas web
se denomina sitio web.
 Para que otros puedan ver su trabajo,
usted debe publicar su sitio web.
 Para publicar su trabajo, usted debe
copiar su sitio a un servidor web.
Que es un servidor web
 Un servidor web debe soportar los protocolos
estándar en la Internet.
 HTTP (protocolo de transferencia de hipertexto)
 Para publicar una página se suele utilizar un
protocolo más antiguo, el FTP (Protocolo de
transferencia de archivos).

CLIENTE SERVIDOR WEB

WWWROOT

 Cuando instalamos Internet Information

Server, por defecto la raíz del servidor
Web se crea en:
Creación de un Directorio Virtual

 Para crear un directorio virtual en

IIS podemos:
 En la consola de Administración de IIS
utilizar el asistente
 Grabar la carpeta directamente en el
WWWROOT
 Por código
 Creación de un Directorio Virtual
Consola de Administración
7.
1. Finaliza
5. leeldamos
Levantamos
Ahora la la
Asistente.
consola
ruta física
dede la
Presionamos
Administración
carpeta en donde y se
Terminar
ubicamosoelFinish.
encuentran nuestros
Sitio Web
archivos.
por defecto
No(Default
Web Site)
necesariamente tiene
que estar en el
2. Hacemos click con
WWROOT
el botón derecho sobre
el Default Web Site y
elegimos Nuevo (New)/
6. Luego
Directorio
debemos Virtual
darle
(Virtual Directory)
los permisos
correspondientes

3. Se inicia el 4. Debemos darle un nombre al directorio virtual,

asistente, avanzamos el nombre que los usuarios digitarán para llegar a
con él él por la Web. No necesariamente tiene que ser
igual al nombre físico.
Creación de un Directorio Virtual
Copiar Carpeta

También podemos crear un directorio

virtual copiando la carpeta directamente
en el WWWROOT; pero debemos darle
los permisos y propiedades necesarias
manualmente en la consola de
Administración
Introducción al .NET Framework

 ¿Qué es el .NET Framework?

 ¿Qué problemas soluciona .NET?
 Componentes del .NET Framework
 Beneficios de usar el .NET
Framework
 Visual Studio .NET: la herramienta
para el desarrollo .NET
¿Qué es el .NET Framework?

Herramienta Client
s del es
desarrollado
r

Aplicacion
Bases de es Web
datos ASP.NET

Servicios Experienc
.NET Web XML ias del
Framew usuario
ork
¿Qué problemas soluciona .NET??

 Incluso con Internet, la mayoría de

aplicaciones y dispositivos tienen
problemas comunicándose entre
sí
 Los programadores terminan por
escribir infraestructura en lugar de
aplicaciones
 Los programadores han tenido
que limitar su alcance o aprender
continuamente nuevos lenguajes
Componentes del .NET Framework

Visual
Basic C++ C# Perl Python …

Servicios Web XML

Interfaz
Interfaz de usuario
ASP.NET

ADO.NET y XML

Biblioteca de clases de .NET Framework

Common Language Runtime

COM+
Message
(Transacciones, Particiones,IIS WMI
Queuing
Agrupación de objetos)

Win32
Ventajas de usar el .NET Framework
 Basado en estándares y prácticas Web
 La funcionalidad de las clases .NET está
disponible de forma universal
 El código está organizado en clases y
espacios de nombres jerárquicos
 Independiente del lenguaje

MFC/ATL
Windows .NET
Visual Basic
API Framework
ASP
1980s 1990s 2000s
Visual Studio .NET: la herramienta para
el desarrollo .NET
Herramie Herramient
ntas Web as Windows
Forms Forms

Múltipl Visual Studio Proces

es o de
Lengua .NET errore
jes s
Herramien Acceso
tas a
Servicios datos
Web

DiseñarDesarrollarDepurarImplantar
Descripción de ASP.NET

 ¿Qué es ASP.NET?
 Aplicación Web ASP.NET
 Multimedia: modelo de ejecución
ASP.NET
 ¿Qué es ASP.NET?

 El sucesor y evolución de Active Server

Pages, más flexible
 Páginas Web dinámicas que pueden acceder
a recursos del servidor
 Procesamiento de formularios Web Forms en
el lado servidor
 Los Servicios Web XML permiten crear
aplicaciones Web distribuidas
 Independiente del navegador
 Independiente del lenguaje
Aplicación Web ASP.NET
Servidor Web
Client ASP.NET
es Web

Caché de Salida
Forms
Page Web
1. Página .
aspx s confi
código g
Page machi
Inter
Inter 2. traser
global. ne.
net
net aspx o
asax config

Servicios Dato Base de Componentes

Web s datos
XML
Como Trabajan las Aplicación Web
ASP.NET
Lee HTML
Request
Web
Web Server
Server
“Ejecuta código
servidor”
Internet
Explorer
internet
information
server

DCOM Base de datos

Netscape
Navigator
HTTP
Escribe HTML
? Active Server Pages(página Dinámica)
(ASP)
Script engine
Multimedia: modelo de ejecución de
ASP.NET
 Uso de
Microsoft
Visual Studio .NET
Descripción

 Descripción de Visual Studio .NET

 Crear un proyecto de aplicación
Web ASP.NET
Descripción de Visual Studio .NET

 ¿Por qué Visual Studio .NET?

 Página de inicio
 Plantillas de proyecto disponibles
 Práctica: Seleccionar la plantilla del
proyecto
 Integrated Development Environment
(IDE)
 Demostración: Uso del IDE de Visual
Studio .NET
 Práctica: Uso del IDE de Visual Studio
.NET
¿Por qué Visual Studio .NET?

 Un IDE para múltiples lenguajes y múltiples

tipos de proyectos
 Múltiples lenguajes en un proyecto
 Múltiples tipos de proyectos en una solución
 Navegador integrado
 Soporte de depuración
 Interfaz personalizable
Página de inicio
 Acceso de soporte en línea
 Proyectos recientes
Plantillas de proyectos disponibles
 La lista de plantillas de proyectos disponibles
se basa en las selecciones del Perfil y Tipos de
proyectos
Práctica: selección de la plantilla de
proyecto
 Demo -Seleccionarán la platilla de
proyecto correcta para un
determinado escenario
 Entorno integrado de desarrollo
(IDE)
Explorad
Cuadro deEditor/Navegador or
herramient de
as solucion
es

Explorador
de servidores

Propiedade

Lista de tareas
Crear un proyecto de aplicación Web
ASP.NET
 El proceso de desarrollo
 Archivos de la aplicación Web
 Estructura de los archivos de la aplicación Web
 Demostración: Crear un proyecto de aplicación
Web
El proceso de desarrollo
Crear una especificación
de diseño

Crear un Crear la interfaz Probar y

nuevo proyecto y escribir código depurar

Generar
Visual Studio .NET
Implementar
Archivos en aplicaciones Web
 Archivos de solución (.sln, .suo)
 Archivos de proyecto (.vbproj, .csproj)
 Archivos de aplicación Web
 Formularios Web Forms ASP.NET(.aspx)
 Servicios Web ASP.NET (.asmx)
 Clases, páginas de código subyacente (.vb
o .cs)
 Clases de aplicaciones globales (.asax)
 Archivo Web.config
 Ensamblado del proyecto (.dll)
 Estructura de los archivos de una
aplicación Web
Mis
Mis Documentos
Documentos Inetpub
Inetpub

Visual
Visual Studio
Studio
wwwroot
wwwroot
projects
projects

Solution
Solution ProjectA
ProjectA

Solution.sln ProjectA.vbproj
WebForm1.aspx
Archivos de desarrollo WebForm1.aspx.vb
(página de código subyacente)

Archivos de Bin
Bin

ensamblado Generar ProjectA.dll

Demostración: creación de un
proyecto de aplicación Web
 Poblar el formulario Web Form
ASP.NET
 Agregar un nuevo formulario
Web Form ASP.NET
 Agregar un nuevo proyecto
 Escribir código para el botón
 Generar y depurar la solución
ASP .NET
Conceptos Centrales
 Plataforma de Desarrollo Web
 Nuevo Modelo de Programacion
Cliente Web

Aplicaciones
IIS
ASP .Net

.Net
Framework

Sistema Operativo
Conceptos Centrales de Asp
 Separar presentación de lógica del
negocio
 Usar servicios provistos por el .NET
Framework
 El código es compilado la primera vez
que se accede a una página
 Administración de estado
 Utilización de cualquier lenguaje
 Integración entre varios
 ¡Actualizar archivos mientras se está
ejecutando la aplicación!
Net Framework - Arquitectura
.NET Framework

ASP.NET
Windows Forms
Web Forms Servicios Web

Marco de Servicios

Base Datos Depuración ...

Common Language Runtime

Servicios del Sistema

 Modelo de Ejecucion
“Parser” Compilador

Output Cache

Memoria Caché de Assembly

IL de Assembly
IL de Assembly
Execute

HTTPRuntime
IL de Assembly
IL de Assembly

Cliente Servidor
Que Son Web Forms…?
 Páginas con extensión .aspx
 Que incluyen la directiva @ Page
 <%@ Page Language="vb“ %>
 Utiliza el modelo de objeto del .Net
Framework
 Contiene código HTML y declaraciones de
controles del lado del servidor
 Puede incluir Script del lado del cliente
 Puede incluir código del lado del servidor
 Pero es mejor “ponerlo separado”
 Y que son Controles al
Lado del Servidor
 Objetos programables que se ejecutan en
el servidor Web
 Exponen interfaces con propiedades y
métodos
 Se encargan de generar el código HTML
correcto (“Rendering”)
 Son capaces de generar distinto HTML de
acuerdo al Navegador
 Se identifican por el atributo
runat=“server”
 Tipos de Controles de
Lado del Servidor
• HTML
 Son los controles comunes de
páginas HTML, pero capaces de
utilizar el atributo runat=server
 Se encuentran definidos como
objetos dentro del Namespace
• System.Web.UI.HtmlControls

<input type="text" id="txtNombre" runat="server">

<span id="spnInicio" runat="server">Inicio</span>
 Tipos de Controles de
Lado del Servidor
• Web Controls
 Son objetos que se ejecutan del lado
del servidor
 Poseen mayor funcionalidad, y
pueden contener otros objetos
 Dependen del Namespace
• System.Web.UI.WebControls

<asp:TextBox id="txtNombree" runat="server"

Text="[Ingrese su nombre]"/>
 Como Trabajan los
Controles del Servidor
• Al procesarse la página, y encontrar un
atributo runat=“server”
 Se genera el código HTML representativo
del control, con sus propiedades
 Asignándole a cada uno, un id único
 Se agrega al formulario un cuadro de texto
oculto, para almacenar el “estado” de la
página (“__VIEWSTATE”)
Creando Script en una Pagina

• Se debe indicar el lenguaje a

utilizar
 <script language="VB"
runat="server">
 <script language="C#"
runat="server">
•<SCRIPT
Las LANGUAGE="VB"
funciones yrunat="server">
procedimientos
Sub Ingreso()
se ‘Proceso
declaran acorde al lenguaje
de autenticación
End Sub
</SCRIPT>
Vinculando eventos a Proc.
• Asigne al evento “del servidor” el
nombre del procedimiento
• <input type="submit" value=“Enviar"
onServerClick=“Saludo" runat="server">
• Defina el procedimiento
 Recibiendo SIEMPRE 2 argumentos
• Quien envía el evento (Object)
• Argumentos del evento (EventArgs)
•
Sub Saludo(s As Object, e As EventArgs)
spnSaludo.InnerHTML = “Hola " & _
txtName.Value
End Sub
 Demo
Controles Html
Controles Asp
 Usando
Controles HTML
Controles HTML
• Estos controles son uno de los
tipos de controles intersecos que
podemos encontrar dentro de los
controles ASP .Net

<input type = “elementoHTML“

id = “identificador”
runat = "server">
 Demo
Controles Html
Controles HTML
• HtmlButton, Generara la etiqueta <button> de
HTML, esta estiqueta pertenece a la
especificacion 4.0 HTML, y unicamente es
soportada por el navegador Web Internet
Explorer 4.0 0 superior.
• HtmlForm, Generara la etiqueta <form> en el
servidor, es la que permite definir un Web Form,
que va a realizar la labor de contenedor de una
serie de controles de servidor dentro de una
pagina ASP .NET.
Controles HTML
• HtmlGenericControl, Esta clase se
utilizara para representar las
etiquetas HTML que no poseen una
correspondencia directa con las clases
del .NET Framework, como puede
suceder con las etiquetas <Span>,
<Div> o <Body>, entre otras.
 Demo
HtmlGenericControl
Controles HTML
• Html Image, Esta clase permite utilizar
la etiqueta <Img> de HTML en el
servidor, es decir, el control <img
runat=“server”>. Nos permite por lo
tanto manejar imágenes.
 Demo
Html Image
 Usando
Controles WEB
Controles WEB
• Estos controles ASP .NET cumplen la misma
funcionalidad que los de HTML.
• Los controles Web ofrecen un mayor nivel de
abstracción que los controles HTML.
• Cuando la pagina se carga en el navegador, e
control Web determina el tipo de navegador que ha
realizado la petición y de acuerdo con esta
informacion genera el codigo HTML apropiado,
podemos decir que en este espacio se trata de
controles inteligentes.

<asp:nombrecontrol id = “identificador“
runat = "server">
</asp:nombrecontrol>
 Demo
Controles WEB
Controles Web Intrinsecos
• Los beneficios que se desprenden de utilizar
controles Web intrinsecos sobre los controles
HTML son:
 Se ofrece una convencion de nomenclatura para los
controles similares.
 Existe propiedades comunes para todos los controles,
ofreciendose un modelo de objeto mas robusto.
 Se incluyen propiedades fuertemente tipadas
especificas de los controles.
 Se genera codigo HTML especifico para cada
navegador Web
Controles Web Intrinsecos
• Los Controles Web deben de ser utilizados
en las siguientes situaciones:
 Preferimos un modelo de programación similar a
Visual Basic ó C#.
 Estamos escribiendo Web Forms que deben ser
mostrados por varios tipos de navegadores.
 Se necesita una funcionalidad especifica, como
puede ser un calendario o un rotador de anuncios,
que se corresponden a los controles ricos, o bien
necesitamos realizar algún tipo de validación o
presentación de datos.
Controles Web Intrinsecos
• Los Controles HTML deben de ser
utilizados en las siguientes situaciones:
 Preferimos un modelo de objetos similar al lenguaje
HTML.
 Estamos trabajando con paginas Web existentes y
las queremos migrar a Web Forms.
 El control debe de interactuar con script de cliente y
de servidor, en lo que al tratamiento de eventos se
refiere.
Controles Web Intrinsecos
• Proveen nombres estándar, con
propiedades comunes a los
controles
<asp:RadioButton BackColor="red" Text=" "... />
• <asp:CheckBox BackColor="red" Text=" "... />
• Incluyen propiedades específicas
<asp:CheckBox Checked="True" ... />
•
• Generan HTML acorde al navegador
que llama a la página.
<span>
<input type="checkbox" id="ctrl1"
checked="true" name="ctrl1">
<label for="ctrl1">Standard</label>
</span>
Controles Web Intrinsecos
• Button, Este control Web representa
un botón, es decir, un botón que envia
el contenido de un formulario al
servidor. Esta clase se corresponde
con el control <asp:Button>.
 Demo
Control Button
Controles Web Intrinsecos
• CheckBox, Este control Web tiene dos
tratamientos distintos dentro de un
WebForm, como un control de entrada
de datos del usuario (valor Verdadero
o Falso); y el segundo
comportamiento lo tendrá si
espesificamos el valor true en la
propiedad AutoPostBack.
 Demo
Control CheckBox
Controles Web Intrinsecos
• CheckBoxList, Este control Web permite
utilizar una lista de selección múltiple
de los elementos de Checkbox. Este
objeto posee una colección de Items
que contiene todos los objetos
Checkbox. Se puede especificar a
traves de las propiedades
RepeatLayout la distribucion de los
CheckBox en la pagina.
Controles Web Intrinsecos
• DropDownList, Este control Web
representa una lista desplegable.
También posee la porpiedad
AutoPostBack, si establecemos a True
esta propiedad al seleccionar un
elemento de la lista se enviará el
formulario al servidor.
• Image, Este control Web representa
una imagen dentro de una pagina ASP
.Net. Para indicar la imagen que
deseamos mostrar se utilizara la
propiedad image URL.
 Demo
Control
DropDownList
y
Image
Controles Web Intrinsecos
• ImageButton, Este control Web es
muy similar al image, pero además de
mostrar una imagen posee la
característica adicional de funcionar
como un botón, se envía los
contenidos del formulario al servidor.
• LinkButton, Este control Web va a
representa un estilo similar a los
enlaces, este representa a los
HiperLink y ofrece la misma
funcionalidad que el control Button.
 Demo
Control
ImageButton
Controles Web Intrinsecos
• ListBox, Este control Web representa
una lista de de selección sencilla o
múltiple, es similar al control
DropDownList, pero en este caso se
muestran varios elementos de la lista
y se permite la selección multiple.
En la propiedad Rows indicamos el
numero de filas visibles que va a
mostrar el control y en la propiedad
SelectionMode indicamos si se permite
selección Multiple.
 Demo
Control ListBox
Controles Web Intrinsecos
• Panel, Este control Web se utiliza para agrupar
controles y realizar la funcion de contenedor de
los mismos. El control Panel posee una
propiedad llamada Controls que es una colección
que contiene todos los controles incluidos dentro
del objeto Panel.
• PlaceHolder, Este control Web se utiliza tambien
como contenedor de controles Web. Se utiliza
para añadir controles Web de forma dinamica en
la pagina ASP .Net en un punto determinado,
para ello se utiliza su propiedad Controls.
 Demo
Control Panel
Controles Web Intrinsecos
• RadioButton, Este control Web
representa un botón de opción,
permite seleccionar una opción dentro
de un mismo grupo de opciones. Las
opciones se agrupan mediante la
propiedad GroupName.
 Demo
Radio Button
y
RadioButtonList
Controles Web Intrinsecos
• Table, TableRow, TableCell, Estos
controles Web se encuentran muy
relacionados entre si, mediante la
utilizacion de todos ellos podremos
generar tablas en HTML.
Demo
Propiedades de Controles Web
• Una de las formas de utilizar estilos
con controles web es a traves de una
serie de propiedades que presentan
los propios controles web.
 Demo

Propiedades
Propiedades CssClass
• Otra forma de aplicar estilos a un
control Web es mediante la propiedad
CssClass, a esta propiedad le
asignaremos el nombre de clase que
define al estilo que se desea aplicar
sobre el control Web correspondiente.
 Demo

CssClass
Propiedades Style
• Mediante la propiedad style, que es
una colección que nos permite asignar
valores a las distintas propiedades del
estilo de control.
Demo

Style
Ciclo de Ejecucion Pagina
Page_Init
Page_Init

Page_Load
Page_Load

Textbox1_Changed
Textbox1_Changed

Button1_Click
Button1_Click

Page_Unload
Page_Unload

Se Descarta la página
Controlando Ciclo de Pagina

• La página “recuerda” su estado en

“__VIEWSTATE”
• El Page_OnLoad se ejecuta CADA vez
que se llama a la página
 Aún cuando se haga para “atrapar” un
evento
• Por ello, es necesario preguntar por
IsPostBack, para saber si es o no la
primera vez que se accede a una
página
Demo
Varios
 Usando
Web Controls
Controles Disponibles
 HTML
 Web Controls
 Intrínsecos
 asp:list, asp:button, asp:checkbox, asp:table
 De Validación
 asp:RangeValidator,
asp:RegularExpressionValidator
 Controles “ricos”
 asp:calendar, asp:adrotator
 Listas vinculables a Datos
 asp: datagrid, asp:repeater, asp:datalist
 Demo
AdRotador
Los Eventos
 En principio, sólo los eventos “Clic”
hacen que se llame nuevamente a la
página
 En alguno controles, se puede definir que llame
la página en otros eventos
 Propiedad: AutoPostBack
 Sólo soportan eventos “del lado del
servidor”
Controles de Validacion
 Permiten definir gráficamente cierto tipo de
validaciones de los datos ingresados
 RequiredFieldValidator
 El control debe tener contenido
 CompareValidator
 El control debe contener lo mismo que otro
 RangeValidator
 El valor del control debe estar dentro de un rango
 RegularExpressionValidator
 El valor del control debe cumplir un patrón (máscara)
 CustomValidator
 Se dispara un evento (Cliente o servidor) donde se
controla la validación
 ValidationSummary
 Presenta un informe del resultado de los anteriores
Controles de Validacion
 Propiedades importantes
 ControlToValidate
 Text
 ErrorMessage
 Display
 Demo
Controles de
Validacion
Accediendo a
Datos con
Ado .Net
Presentando datos Asp .Net

• Utilizando los objetos gráficos de

Visual Studio.Net
 En la caja de Herramientas
(Toolbox), en la Ficha Data, se
encuentran los objetos más
comunes
•
Objetos Visuales
 Para obtener Datos a ser mostrados en
una página
 Colocar sobre ésta un objeto DataAdapter
 Responder al asistente, para establecer
conexión, origen, etc.
 Una vez colocado, con el menú contextual,
generar el DataSet correspondiente
 Utilizar éste último para vincular los
Controles Web
Demo…
Motor de Base de Datos
 Si es SQLServer
 Es preferible utilizar ystem.Data.SqlClient
 Si es “otro”
 System.Data.OleDb
 Recordar…
 Ambos exponen interfaces comunes
 Algunos objetos dependen directamente de
 System.Data
 System.Data.Common
Vinculando Controles
 Los controles vinculables a datos
obtienen la información ANTES que la
página se entregue al Navegador
 Se “cargan” durante el proceso de
“DataBinding”
 NO Generan Data Island en la página HTML
 NO es vinculación de Datos en DHTML
Los Datos se Obtienen
cuando se necesitan
 Por definición, ningún control se
vincula a sus datos automáticamente
(a diferencia de los controles en
Visual Basic 6).
 Sólo cuando el desarrollador indica que
los datos son necesarios estos se
obtienen
 El DataAdapter debe “llenar” al Dataset
 DataAdapter.Fill(Dataset)
Aunn Cuando se Vinculan
 Se debe indicar a los controles cuando
es el momento adecuado para “cargar”
los datos
 Control.DataBind()
 De esa forma, nada sucede
“automáticamente” sino que depende
de las decisiones del desarrollador
DataView
 Aún cuando el origen de datos se
asigne a un Dataset
 El control se vincula con un DataView
 El Dataset expone uno por el método
DefaultView
 Se pueden definir otras vistas a partir del
mismo conjunto de datos
 Ordenado diferente
 Filtrado
 Sólo algunos campos….
Controles Vinculables a Datos
 Casi todos los Controles Web son
vinculables a Datos
 Algunos están preparados directamente
para presentar información
 DataGrid
 DataRepeater
 DataList
DataGrid
 Genera una Grilla de Datos
 Admite formato automático
 También permite definir estilos
distintos según se trate el tipo de
renglón. Es capaz de mostrar los
renglones con distintos controles
según sea de presentación o de edición
DataGrid…
 Vinculando a Datos
 Dos Propiedades
 DataSource
(el objeto de datos usado como origen)
 Datamember
(cuando un Dataset contiene más de
una tabla, el nombre de la que se desea
Utilizar)
 Un método
 DataBind
Demo…
 Plantilla de Presentacion
HeaderTem
HeaderTem
plate
plate

ItemTemp
ItemTemp
late
late

SeparatorTe
SeparatorTe
mplate
mplate
Alternating
Alternating
ItemTempl
ItemTempl
ate
ate

FooterTem
FooterTem
plate
plate
 Plantillas de Presentación
HeaderTem
HeaderTem
plate
plate

ItemTemp
ItemTemp
late
late

SeparatorTe
SeparatorTe
mplate
mplate
Alternating
Alternating
ItemTempl
ItemTempl
ate
ate

FooterTem
FooterTem
plate
plate