Upload
dane-cobb
View
19
Download
2
Embed Size (px)
Citation preview
ASP.NET
[ASP.NET] El contenido de este tutorial fue obtenido a travs de las pginas Web: http://www.desarrolloweb.com http://www.aspnetya.com.ar/index.php http://es.wikipedia.org
Tutorial ASP.NET
1
Contenido del Tutorial
Evolucin de ASP.NET respecto al ASP clsico 02
Uso actual de ASP.NET .. 03
Qu debo saber primero? 04
Mi primera aplicacin ASP.NET . 05
Cmo probamos nuestra primera aplicacin? 06
Estructura de nuestra aplicacin web. . 09
Creacin, lectura y escritura de archivos de texto. 13
Clases SQLConnection y SQLCommand (ABM - Altas, Bajas y Modificaciones) 19
Control GridView.. 28
Crear una pgina de login, autenticacin y seguridad 37
Master Page ..... 40
AJAX con ASP.Net 46
Tutorial ASP.NET
2
Evolucin de ASP.NET respecto al ASP clsico
En el modelo de desarrollo web basado en pginas activas, con respecto a la
programacin ASP.NET actual tiene diversas limitaciones:
Para que todo ocurra en una pgina web, es habitual escribir una gran cantidad de
cdigo para resolver necesidades sencillas. ASP.NET incorpora un modelo
declarativo a la programacin web: los controles de servidor funcionan en una
pgina Web simplemente declarndolos. Cuando se carga la pgina ASP.NET, se
instancian los controles listados en la pgina ASP y es responsabilidad del control
emitir cdigo HTML que el navegador pueda entender.
ASP clsico es un tanto desorganizado. En una pgina ASP podemos incluir casi
todo: HTML plano, cdigo script, objetos COM y texto. No hay una distincin
formal entre el contenido de una pgina y su comportamiento: simplemente,
insertamos cdigo en la pgina, y a ver qu pasa. ASP.NET impone un cierto
orden sobre el modelo de programacin estndar ASP. En cierto modo, esta
"desorganizacin" puede evitarse fcilmente usando el sentido comn y algunas
de las nuevas tecnologas. Por ejemplo, podemos escribir en nuestras pginas ASP
nicamente cdigo VBScript. Dicho cdigo generara un mensaje XML, que luego
sera interpretado por un archivo XSLT. De esta forma conseguimos evitar el
llamado "cdigo spaguetti", aumentando la claridad del cdigo y la velocidad de
ejecucin de las pginas ASP. Sin embargo, en la medida en que el programador
deba trabajar con cdigo escrito por otros, se enfrentar a menudo con las malas
prcticas que son en gran medida acentuadas por la permisividad del ASP clsico.
La tercera limitacin en el desarrollo con ASP es que con el tradicional utilizamos
lenguajes de scripting no tipados como VBScript o JScript. Podemos instalar otros
motores de scripting que impongan verificacin de tipos; sin embargo, no son
universalmente conocidos o utilizados como los anteriores. ASP.NET claramente
separa la porcin basada en script de una pgina web de su contenido.
ASP.Net, puede decirse que es un nuevo nivel de abstraccin en la construccin de
sitios web, porque se pueden crear rpidamente aplicaciones web, basndose en
los controles incluidos en el frameWork o muchos gratuitos que hay en la red,
ocultando el cdigo de mucho Ej: Puedes crear fcilmente un grid o tabla, y sta se
auto-ordena, pgina, etc, obteniendo sus datos desde cualquier base de datos.
Incluye una gran herramienta para la construccin de reportes, y esto incluyen
medios automticos para exportarlos a XLS o PDF, y de igual forma incluye
Tutorial ASP.NET
3
CristalReport. Adems permite separar completamente la interfaz de la lgica de
negocio. Excelente para desarrollo de aplicaciones multicapas.
Es muy sencilla la creacin de pginas con AJAX, slo incluyendo unos controles,
as como descargar gratuitamente el ToolKit de ASP.Net Ajax.
Uso actual de ASP.NET
En la actualidad una aplicacin ASP.NET puede ejecutarse de dos formas distintas:
Aplicaciones cliente/servidor: Estas aplicaciones estn tpicamente en formato
de ejecutables compilados. Estos pueden integrar toda la riqueza de una interfaz de
usuario, tal es el caso de las aplicaciones de desempeo y productividad, pero no se rene
la lgica de negocio como un recurso que se pueda reutilizar. Adems acostumbran ser
menos gestionables y escalables que las dems aplicaciones.
Aplicaciones que utilizan el navegador: Dichas aplicaciones estn caracterizadas por
contar con una interfaz de web rica y muy til. La interfaz grfica integra varias
tecnologas, las cuales son el HTML, XHTML, scripting, etc; siempre y cuando el
navegador que se est utilizando soporte estas tecnologas.
Tutorial ASP.NET
4
Qu debo saber primero?
ASP.NET es un modelo de desarrollo Web unificado creado por Microsoft para el
desarrollo de sitios y aplicaciones web dinmicas con un mnimo de cdigo. ASP.NET
forma parte de.NET Framework que contiene las libreras necesarias para la codificacin.
Se pueden usar distintos lenguajes de programacin para realizar aplicaciones web en
ASP.NET, pero nosotros nos vamos a enfocar en el lenguaje C# (C Sharp) que es el ms
utilizado para este tipo de desarrollos.
Requisitos de desarrollo ASP.NET
Para desarrollar aplicaciones ASP.NET, es necesario tener:
Un editor de cdigo.
.NET Framework.
Un servidor Web como IIS (Servicios de Internet Information Server)
Adicionalmente a la programacin web es necesario en muchos casos contar con algn
soporte para el almacenamiento de datos. Lo ideal es contar con un motor de base de
datos (SQL Server, Oracle, etc.)
Editor de cdigo
Para programar pginas en ASP.NET alcanza con tener un editor de texto estndar
(Notepad, Notepad++) pero existen herramientas con un entorno de desarrollo integrado
(IDE) que nos facilita el acceso a las libreras del Framework y nos brinda un entorno
amigable para la creacin de aplicaciones web en ASP.NET como el Visual Studio
.NET Framework
Es un conjunto de clases que actuarn de soporte de las aplicaciones ASP.NET que
tengamos instaladas en nuestro equipo. Es de distribucin gratuita y se puede descargar
desde la pgina de Microsoft. (Incluido al Visual Studio .NET).
Servidores Web
Una aplicacin ASP.NET adems de contar con el .NET Framework instalado necesita de
un Servidor Web. Vamos a utilizar el IIS (Internet Information Server). El IIS viene como
complemento de instalacin de Windows; si dentro de nuestros servicios en ejecucin no
contamos con Internet Information Server debemos agregarlo al equipo donde
instalaremos nuestras aplicaciones.
Tutorial ASP.NET
5
Mi primera aplicacin ASP.NET
protected void btnAceptar_Click(object sender, EventArgs e) { lblResultado.Text = txtNombre.Text; txtNombre.Text = string.Empty;
}
Mi primera aplicacion - Maestros del Web
Tutorial ASP.NET
6
Cmo probamos nuestra primera aplicacin?
1.- Abrimos el Bloc de Notas, copiamos el cdigo.
2.- Guardamos el archivo con el nombre Default.aspx
http://www.maestrosdelweb.com/images/2010/11/image0012.pnghttp://www.maestrosdelweb.com/images/2010/11/image0012.pnghttp://www.maestrosdelweb.com/images/2010/11/image003.pnghttp://www.maestrosdelweb.com/images/2010/11/image003.pnghttp://www.maestrosdelweb.com/images/2010/11/image0012.pnghttp://www.maestrosdelweb.com/images/2010/11/image003.pnghttp://www.maestrosdelweb.com/images/2010/11/image0012.pnghttp://www.maestrosdelweb.com/images/2010/11/image003.png
Tutorial ASP.NET
7
3.- Creamos nuestro espacio virtual en el IIS
a.- Abrimos el IIS y creamos un nuevo directorio virtual.
b.- Ingresamos el nombre que tendr nuestra aplicacin web.
http://www.maestrosdelweb.com/images/2010/11/image007.pnghttp://www.maestrosdelweb.com/images/2010/11/image007.pnghttp://www.maestrosdelweb.com/images/2010/11/image005.pnghttp://www.maestrosdelweb.com/images/2010/11/image007.pnghttp://www.maestrosdelweb.com/images/2010/11/image005.pnghttp://www.maestrosdelweb.com/images/2010/11/image007.png
Tutorial ASP.NET
8
c.- Indicamos el directorio donde guardamos nuestra pgina web Default.aspx.
Seguimos hasta el final para que quede creado nuestro directorio virtual. Listo, ya
tenemos nuestra primera aplicacin ASP.NET instalada para probar. Ahora abrimos
nuestro browser y escribimos en la barra de direccin:
http://localhost/MiPrimeraAplicacionWeb/Default.aspx
http://www.maestrosdelweb.com/images/2010/11/image011.pnghttp://www.maestrosdelweb.com/images/2010/11/image011.png
Tutorial ASP.NET
9
Estructura de nuestra aplicacin web.
La estructura de nuestra primera aplicacin es la ms simple.
1.- Contiene una directiva:
Le estamos indicando que la pagina usar lenguaje C# (C Sharp)
2.- Cdigo en lnea:
1 2 3 4 5 6 7
protected void btnAceptar_Click(object sender, EventArgs e) { lblResultado.Text = txtNombre.Text; txtNombre.Text = string.Empty; }
El tag script est indicando que el cdigo se ejecutar del lado del servidor. En esta
porcin del cdigo van las acciones que ejecutaremos en nuestra aplicacin; en este caso
slo tenemos una nica accin asociada al botn Aceptar.
3.- Cdigo HTML para la creacin de objetos en pantalla.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
Mi primera aplicacion - Maestros del Web
Tutorial ASP.NET
10
En pantalla vemos tres objetos
1. Un TextBox llamado txtNombre (Para ingresar un nombre).
2. Un Botn llamado btnAceptar y con el evento OnClick definido (Ejecutamos la accin
de pegar contenido).
3. Un label de resultados llamado lblResultado. (Mostramos los resultados luego de
ejecutar el evento del botn).
Creacin de un proyecto ASP.NET con Visual Studio
1.- Abrimos Visual Studio .NET y creamos un nuevo proyecto web.
2.- Seleccionamos el tipo de proyecto que deseamos realizar.
http://www.maestrosdelweb.com/images/2010/11/image013.pnghttp://www.maestrosdelweb.com/images/2010/11/image013.pnghttp://www.maestrosdelweb.com/images/2010/11/image015.pnghttp://www.maestrosdelweb.com/images/2010/11/image015.pnghttp://www.maestrosdelweb.com/images/2010/11/image013.pnghttp://www.maestrosdelweb.com/images/2010/11/image015.pnghttp://www.maestrosdelweb.com/images/2010/11/image013.pnghttp://www.maestrosdelweb.com/images/2010/11/image015.png
Tutorial ASP.NET
11
Seleccionamos ASP.NET Web Site
Indicamos la ruta donde vamos a guardar el proyecto: c:\MaestrosDelWeb\GuiaASPNET
Determinamos el lenguaje que vamos a utilizar. Visual C#.
Por ltimo presionamos el botn OK para crear la solucin.
3.- Una vez creada la solucin el IDE genera el primer template.
En la pantalla de edicin de cdigo copiamos y pegamos el cdigo anterior y ya tenemos
nuestra primera pgina web dentro del entorno de desarrollo integrado.
http://www.maestrosdelweb.com/images/2010/11/image017.pnghttp://www.maestrosdelweb.com/images/2010/11/image017.pnghttp://www.maestrosdelweb.com/images/2010/11/image019.pnghttp://www.maestrosdelweb.com/images/2010/11/image019.pnghttp://www.maestrosdelweb.com/images/2010/11/image017.pnghttp://www.maestrosdelweb.com/images/2010/11/image019.pnghttp://www.maestrosdelweb.com/images/2010/11/image017.pnghttp://www.maestrosdelweb.com/images/2010/11/image019.png
Tutorial ASP.NET
12
Para ejecutar la aplicacin dentro del entorno de desarrollo presionamos la tecla F5 y nos
pregunta si deseamos habilitar el modo de debug. Presionamos OK.
A continuacin se abre nuestro Browser predeterminado ejecutando la aplicacin en
modo debug. Al trabajar con un entorno de desarrollo no es necesario crear un espacio
virtual en el IIS ya que la misma aplicacin se encarga de preparar el ambiente.
http://www.maestrosdelweb.com/images/2010/11/image021.pnghttp://www.maestrosdelweb.com/images/2010/11/image021.pnghttp://www.maestrosdelweb.com/images/2010/11/image021.png
Tutorial ASP.NET
13
Creacin, lectura y escritura de archivos de texto.
En muchas situaciones es necesario almacenar informacin en el servidor, tenemos dos alternativas, si la cantidad de datos a almacenar es pequea podemos utilizar un archivo de texto para ello (en la prxima clase veremos como almacenar en una base de datos) Un archivo de texto no requiere grandes recursos del servidor.
Creacin y carga del archivo de texto.
Confeccionaremos un libro de visitas de un sitio web. La pgina principal dispondremos de dos hipervnculos (HyperLink), el primero ir al formulario de carga y el segundo al listado del contenido del archivo. La pgina Default.aspx:
El primer control HyperLink nos lleva al formulario web que permite cargar el nombre del visitante, su pas y los comentarios. El formulario web requiere tres objetos de la clase TextBox, al tercero donde se ingresan los comentarios debemos inicializar la propiedad TextMode con el valor MultiLine. Disponemos un control de tipo HyperLink para poder retornar a la pgina principal.
Tutorial ASP.NET
14
Cuando se presiona el botn confirmar procedemos a almacenar los datos del formulario en el archivo de texto, si existe los agregamos al final, en caso que no exista se crea el archivo. Mostramos finalmente en una label que se almacenaron los datos. El cdigo completo para registrar los datos es:
Imports System.IO Partial Class Default2 Inherits System.Web.UI.Page Protected Sub Button1_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Button1.Click Dim arch As New StreamWriter(Me.Server.MapPath(".") & "/" & "visitas.txt", True) arch.WriteLine("Nombre:" & Me.TextBox1.Text) arch.WriteLine("") arch.WriteLine("Pais:" & Me.TextBox2.Text) arch.WriteLine("") arch.WriteLine("Comentarios") arch.WriteLine(Me.TextBox3.Text) arch.WriteLine("") arch.WriteLine("") arch.Close() Me.Label1.Text = "Datos Registrados" End Sub End Class
Primero importamos el espacio de nombres donde est declarada la clase StreamWriter: Imports System.IO
Cuando se presiona el botn confirmar creamos un objeto de la clase StreamWriter y le pasamos en el constructor el path y nombre del archivo a abrir o crear segn sea el caso.
Para obtener el directorio actual utilizamos el mtodo MapPath del objeto Server:
Dim arch As New StreamWriter(Me.Server.MapPath(".") & "/" &
"visitas.txt", True)
El valor true que le pasamos en el constructor significa que si el archivo no existe en el servidor en la carpeta especificada se procede a su creacin y en el caso que si existe se procede a su apertura y posicionado del puntero de archivo al final del mismo.
Tutorial ASP.NET
15
El mtodo WriteLine de la clase StreamWriter permite almacenar una lnea en el archivo de texto y el posterior ingreso en forma automtica del salto de lnea: arch.WriteLine("Nombre:" & Me.TextBox1.Text)
arch.WriteLine("")
arch.WriteLine("Pais:" & Me.TextBox2.Text)
arch.WriteLine("")
arch.WriteLine("Comentarios")
arch.WriteLine(Me.TextBox3.Text)
arch.WriteLine("")
arch.WriteLine("")
Cuando finalizamos de trabajar con el archivo procedemos a cerrarlo: arch.Close()
Lectura del archivo de texto.
Creamos una pgina donde mostraremos todos los datos almacenados en el archivo de texto visitas.txt. El archivo de texto almacena los datos de los visitantes y las marcas HTML bsicas para hacer los saltos de lnea y lneas separadoras entre comentarios, solo nos queda leer el archivo e ir almacenndolo en la Label para que lo muestre. Podemos disponer un control de tipo HyperLink para retornar a la pgina principal.
Tutorial ASP.NET
16
El cdigo necesario para leer y cargar los datos en la Label1 es:
Imports System.IO
Partial Class Default3
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
Dim arch As New StreamReader(Me.Server.MapPath(".") &
"/" & "visitas.txt")
Dim linea As String
linea = arch.ReadLine
Do While Not linea Is Nothing
Me.Label1.Text = Me.Label1.Text & linea
linea = arch.ReadLine
Loop
arch.Close()
End Sub
End Class
Importamos el espacio de nombres donde est declarada la clase StreamReader: Imports System.IO
Procedemos a realizar la apertura del archivo, indicando el camino donde se encuentra: Dim arch As New StreamReader(Me.Server.MapPath(".") &
"/" & "visitas.txt")
Antes de la estructura repetitiva procedemos a leer la primera lnea del archivo:
Dim linea As String
linea = arch.ReadLine
El mtodo ReadLine de la clase StreamReader retorna el contenido de toda una lnea del archivo de texto. En caso que no haya ms lneas en el archivo de texto el mtodo ReadLine retorna el valor Nothing. El while nos permite recorrer todo el archivo y cargar cada lnea leda en la Label1:
Do While Not linea Is Nothing
Me.Label1.Text = Me.Label1.Text & linea
linea = arch.ReadLine
Loop
Finalmente procedemos a cerrar el archivo: arch.Close()
Tutorial ASP.NET
17
Contador de pginas vistas.
Confeccionaremos ahora un simple contador de pginas utilizando un archivo de texto de una sola lnea. Cada vez que un navegador solicite la pgina mostraremos el contador.
Disponemos una Label para mostrar el valor del contador que se almacena en el archivo de texto. En el evento Page_Load hacemos todo el algoritmo:
Imports System.IO
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
If File.Exists(Me.Server.MapPath(".") & "/" &
"contador.txt") Then
Dim arch1 As New StreamReader(Me.Server.MapPath(".")
& "/" & "contador.txt")
Dim conta As Integer
conta = arch1.ReadLine
conta = conta + 1
arch1.Close()
Dim arch2 As New StreamWriter(Me.Server.MapPath(".")
& "/" & "contador.txt")
arch2.WriteLine(conta)
arch2.Close()
Me.Label1.Text = conta
Else
Dim arch As New StreamWriter(Me.Server.MapPath(".")
& "/" & "contador.txt")
arch.WriteLine("1")
arch.Close()
Me.Label1.Text = "1"
End If
End Sub
End Class
Tutorial ASP.NET
18
Mediante un if verificamos si existe el archivo que almacena el contador (la clase File tiene un mtodo esttico llamado Existe que retorna true si existe el archivo en la carpeta indicada): If File.Exists(Me.Server.MapPath(".") & "/" &
"contador.txt") Then
En caso que el archivo existe procedemos a abrirlo con el objetivo de leer su nica lnea: Dim arch1 As New
StreamReader(Me.Server.MapPath(".") & "/" & "contador.txt")
Dim conta As Integer
conta = arch1.ReadLine
conta = conta + 1
arch1.Close()
Luego procedemos a crearlo nuevamente y almacenar el valor que acabamos de leer, previo a incrementarlo en uno (mostramos en la Label el valor del contador actual): Dim arch2 As New
StreamWriter(Me.Server.MapPath(".") & "/" & "contador.txt")
arch2.WriteLine(conta)
arch2.Close()
Me.Label1.Text = conta
Si el archivo no existe procedemos a crearlo almacenando el valor 1: Dim arch As New
StreamWriter(Me.Server.MapPath(".") & "/" & "contador.txt")
arch.WriteLine("1")
arch.Close()
Me.Label1.Text = "1"
Tutorial ASP.NET
19
Clases SQLConnection y SQLCommand (ABM - Altas, Bajas y Modificaciones)
Con ASP.Net podemos comunicarnos a distintos gestores de base de datos como pueden ser SQL Server, Oracle, Access, MySQL etc. Nosotros trabajaremos con el gestor de base de datos SQL Server, uno por ser el ms empleado cuando se utiliza la tecnologa de ASP.Net en el desarrollo de sitios web dinmicos. En esta clase especificaremos todo el cdigo necesario para acceder al gestor de base de datos, desde la cadena de conexin hasta la implementacin de los comandos SQL a enviar.
ABM (Altas, Bajas y Modificaciones)
Crearemos una base de datos en SQL Server llamada: administracin y dentro de la misma definiremos una tabla llamada usuarios con tres campos: nombre varchar(30) Clave primaria
clave varchar(30)
mail varchar(30)
Crearemos un sitio web en el Visual Studio 2008 llamado abm1. La primer pgina solo tendr los hipervnculos a otras pginas que tendrn por objetivo efectuar una el alta de usuarios, otra la baja, otra las modificaciones y por ltimo otra la consulta:
Para crear esta interface insertaremos cuatro objetos de la clase HyperLink, como mnimo debemos inicializar las propiedades text (es el texto que mostrar el hipervnculo
Tutorial ASP.NET
20
en el navegador y la propiedad NavigateUrl que indica el nombre de la pgina que debe cargar el navegador cuando se presione el hipervnculo) Como todava no tenemos creada las otras cuatro pginas no podemos inicializar la propiedad NavigateUrl de cada HyperLink. Como segundo paso creemos las cuatro pginas, para ello desde el men: Archivo -> Nuevo archivo seleccionamos la plantilla Web Forms y en la parte inferior definimos el nombre del archivo aspx. Los nombres de las cuatro pginas a crear sern: altausuario.aspx
consultausuario.aspx
bajausuario.aspx
modificacionusuario.aspx
Una vez que hemos creado las cuatro pginas aspx podemos proceder a enlazar la propiedad NavigateUrl de cada control HyperLink. Cuando seleccionamos la propiedad NavigateUrl aparece un dialogo que nos permite seleccionar la pgina aspx a enlazar. Una vez inicializada la propiedad NavigateUrl podremos ver que el texto aparece subrayado (indicando que se trata de un hipervnculo)
Definicin de la cadena de conexin con la base de datos en el archivo web.config
Web.config es el archivo principal de opciones de configuracin para una aplicacin web en ASP.NET. El archivo es un documento XML que define informacin de configuracin concerniente a la aplicacin web. El archivo web.config contiene informacin que controla la carga de mdulos, configuraciones de seguridad, configuraciones del estado de la sesin, opciones de compilacin y el lenguaje de la aplicacin. El archivo web.config contiene tambin la cadenas de conexin a la base de datos. Debemos modificar la seccin:
y remplazarlo por:
Tutorial ASP.NET
21
Como vemos en la propiedad connectionString indicamos en Initial Catalog el nombre de la base de datos que hemos creado en SQL Server.
Altas
Activemos desde el Visual Studio 2008 la pestaa altausuario.aspx para elaborar la interface visual que nos permita efectuar la carga de datos de usuarios:
Como podemos ver disponemos tres controles de tipo TextBox, el que solicita el ingreso de la clave modificamos la propiedad TextMode con el valor Password, los otros dos los dejamos con el valor SingleLine. Disponemos un objeto de la clase Button y una Label donde mostraremos un mensaje si el alta se efectu correctamente. Por ltimo disponemos un objeto de la clase HyperLink configurando la propiedad NavigateUrl con la direccin de la pgina principal (Default.aspx) Ahora codificamos el evento clic del botn de alta:
Imports System.Data.SqlClient
Partial Class altausuario
Inherits System.Web.UI.Page
Protected Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles
Button1.Click
Try
Dim s As String
s =
ConfigurationManager.ConnectionStrings("administracion").Conn
ectionString
Dim conexion As New SqlConnection(s)
conexion.Open()
Tutorial ASP.NET
22
Dim comando As New SqlCommand("insert into
usuarios(nombre,clave,mail) values('" _
& Me.TextBox1.Text & "','" & Me.TextBox2.Text &
"','" _
& Me.TextBox3.Text & "')", conexion)
comando.ExecuteNonQuery()
Me.Label1.Text = "Se registr el usuario"
conexion.Close()
Catch ex As SqlException
Me.Label1.Text = ex.Message
End Try
End Sub
End Class
Lo primero que debemos hacer es importar el espacio de nombres donde se encuentra definida la clase SqlException:
Imports System.Data.SqlClient Al presionar el botn, primero extraemos la cadena de conexin que tenemos almacenada en el archivo web.config:
s =
ConfigurationManager.ConnectionStrings("administracion").Conn
ectionString
Creamos un objeto de la clase SQLConnection indicando como parmetro la cadena de conexin que rescatamos anteriormente: Dim conexion As New SqlConnection(s)
Abrimos la conexin: conexion.Open()
Creamos un objeto de la clase SqlCommand crendolo con los datos cargados en los controles TextBox: Dim comando As New SqlCommand("insert into
usuarios(nombre,clave,mail) values('" _
& Me.TextBox1.Text & "','" & Me.TextBox2.Text &
"','" _
& Me.TextBox3.Text & "')", conexion)
Pedimos a SQL Server que ejecute el comando especificado anteriormente comando.ExecuteNonQuery()
Cerramos la conexin: conexion.Close()
Tutorial ASP.NET
23
Todo esto lo hacemos capturando la excepcin SQLException. En caso de dispararse un error ser capturado por el Catch y procederemos a mostrar en una Label el mensaje de error respectivo: Catch ex As SqlException
Me.Label1.Text = ex.Message
End Try
Consultas
Seleccionamos del Explorador de soluciones la pgina consultausuario.aspx y procedemos a elaborar la siguiente interface visual (disponemos un TextBox, un Button, una Label y un HyperLink:
El cdigo del evento click es:
Imports System.Data.SqlClient
Partial Class consultausuario
Inherits System.Web.UI.Page
Protected Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Button1.Click
Try
Dim s As String
s =
ConfigurationManager.ConnectionStrings("administracion").Conn
ectionString
Dim conexion As New SqlConnection(s)
conexion.Open()
Dim comando As New SqlCommand("select
nombre,clave,mail from usuarios " _
& " where nombre='" & Me.TextBox1.Text & "'",
conexion)
Dim registro As SqlDataReader =
comando.ExecuteReader
Tutorial ASP.NET
24
If registro.Read Then
Me.Label1.Text = "Clave:" & registro("clave")
& "" _
& "Mail:" & registro("mail")
Else
Me.Label1.Text = "No existe un usuario con
dicho nombre"
End If
Catch ex As SqlException
Me.Label1.Text = ex.Message
End Try
End Sub
End Class
Para poder recuperar los datos lo hacemos creando un objeto de la clase SqlDataReader e inicializndolo mediante la llamada del mtodo ExecuteReader de la clase SQLCommand:
Dim registro As SqlDataReader = comando.ExecuteReader Luego recorremos el SqlDataReader (como este caso puede retornar cero o una fila lo hacemos mediante un if:
If registor.Read Then Si el mtodo Read retorna true luego podemos acceder a la fila recuperada con el select.
Bajas
Seleccionamos del Explorador de soluciones la pgina bajausuario.aspx y procedemos a elaborar la siguiente interface visual:
Luego el cdigo a ejecutar cuando se presiona el botn Borrar de la pgina es:
Imports System.Data.SqlClient
Tutorial ASP.NET
25
Partial Class bajausuario
Inherits System.Web.UI.Page
Protected Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles
Button1.Click
Try
Dim s As String
s =
ConfigurationManager.ConnectionStrings("administracion").Conn
ectionString
Dim conexion As New SqlConnection(s)
conexion.Open()
Dim comando As New SqlCommand("delete from
usuarios where nombre='" & Me.TextBox1.Text & "'", conexion)
Dim cant As Integer = comando.ExecuteNonQuery
If cant = 1 Then
Me.Label1.Text = "Se borr el usuario"
Else
Me.Label1.Text = "No existe un usuario con
dicho nombre"
End If
conexion.Close()
Catch ex As SqlException
Me.Label1.Text = ex.Message
End Try
End Sub
End Class
El mtodo ExecuteNonQuery retorna un entero y representa la cantidad de filas borradas de la tabla.
Modificaciones
Por ltimo implementaremos la modificacin de datos. Seleccionamos del Explorador de soluciones la pgina modificacionusuario.aspx y procedemos a elaborar la siguiente interface visual:
Tutorial ASP.NET
26
Para efectuar la modificacin de datos de un usuario procederemos primero a la bsqueda de los datos actuales. Luego el cdigo para los eventos clic de los dos botones es:
Imports System.Data.SqlClient
Partial Class modificacionusuario
Inherits System.Web.UI.Page
Protected Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles
Button1.Click
Try
Dim s As String
s =
ConfigurationManager.ConnectionStrings("administracion").Conn
ectionString
Dim conexion As New SqlConnection(s)
conexion.Open()
Dim comando As New SqlCommand("select
nombre,clave,mail from usuarios " _
& " where nombre='" & Me.TextBox1.Text &
"'", conexion)
Dim registro As SqlDataReader =
comando.ExecuteReader
If registro.Read Then
Me.TextBox2.Text = registro("clave")
Me.TextBox3.Text = registro("mail")
Else
Me.Label1.Text = "No existe un usuario con
dicho nombre"
End If
Catch ex As SqlException
Tutorial ASP.NET
27
Me.Label1.Text = ex.Message
End Try
End Sub
Protected Sub Button2_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles
Button2.Click
Try
Dim s As String
s =
ConfigurationManager.ConnectionStrings("administracion").Conn
ectionString
Dim conexion As New SqlConnection(s)
conexion.Open()
Dim comando As New SqlCommand("update usuarios
set " & _
"clave='" & Me.TextBox2.Text & _
"',mail='" & Me.TextBox3.Text & _
"' where nombre='" & Me.TextBox1.Text & "'",
conexion)
Dim cant As Integer = comando.ExecuteNonQuery()
If cant = 1 Then
Me.Label1.Text = "Datos Modificados"
Else
Me.Label1.Text = "No existe el usuario"
End If
conexion.Close()
Catch ex As SqlException
Me.Label1.Text = ex.Message
End Try
End Sub
End Class
El botn Buscar hace lo mismo que vimos en la consulta. Luego cuando se presiona el botn Modificar procedemos a hacer un update de la tabla usuarios con los datos cargados en los TextBox.
Tutorial ASP.NET
28
Control GridView
El control GridView del ASP.Net permite visualizar datos en una tabla en pantalla, editar, modificar y borrar registros del mismo. El GridView es un control extremadamente flexible para mostrar tablas multicolumna. Cada registro de una consulta de un select configurado en un SqlDataSource genera una fila en la grilla. Cada campo en el registro representa una columna en la grilla. El GridView es el control ms poderoso que provee el ASP.Net. Veremos que este control trae funcionalidades ya implementadas para paginacin, ordenamiento y edicin de sus datos.
Datos de una tabla
Crearemos un proyecto para probar el control GridView y las diferentes opciones que nos brinda. Luego de crear el proyecto iremos al Explorador de servidores y seleccionaremos la tabla rubros y la arrastraremos al formulario web. Veremos que se generan dos objetos sobre la pgina: Un objeto de la clase GridView llamado GridView1. Un objeto de la clase SqlDataSource llamado SqlDataSource1. Si seleccionamos el objeto SqlDataSource1 y observamos el contenido de la propiedad SelectQuery, veremos que ya est configurado el comando SELECT:
SELECT [codigo], [descripcion] FROM [rubros] El comando SELECT indica rescatar todas las filas de la tabla rubros. Podemos ver tambin que se han configurado automticamente las propiedades InsertQuery, DeleteQuery y UpdateQuery con los valores: INSERT INTO [rubros] ([descripcion]) VALUES (@descripcion)
DELETE FROM [rubros] WHERE [codigo] = @codigo
UPDATE [rubros] SET [descripcion] = @descripcion WHERE
[codigo] = @codigo
Como podemos ver hasta este momento la herramienta Visual Studio .Net nos ha configurado en forma automtica el control SqlDataSource1, solo nos queda configurar el control GridView1.
Tutorial ASP.NET
29
Seleccionamos el control GridView y presionamos el botn presente en la parte superior derecha, el mismo nos muestra una serie de las funcionalidades bsicas del control:
Como podemos ver ya est configurado el origen de datos con el objeto SqlDataSource1. Habilitemos la paginacin, ordenamiento, edicin y eliminacin. Ejecutemos el proyecto y comprobaremos que tenemos en la pgina los datos de la tabla rubros con la capacidad de modificar y borrar registros. Adems est activa la paginacin y ordenamiento por cualquiera de las dos columnas de la tabla.
Sin escribir una sola lnea de cdigo tenemos el mantenimiento de la tabla rubros (con la excepcin del alta)
Tutorial ASP.NET
30
Veamos otras caractersticas que podemos configurar en forma visual del control GridView. Desde el botn > que se encuentra en la parte superior derecha del control GridView1 podemos seleccionar la opcin Formato Automtico... para definir la presentacin de la tabla con plantillas predefinidas de color y fuente:
Luego de seleccionar el esquema para el GridView, presionamos aceptar y tenemos ya definido el nuevo formato de la grilla. Desde la ventana de propiedades configuraremos las propiedades: Caption: Es un ttulo que aparece en la parte superior del GridView. PageSize: Cantidad de registros a mostrar por pgina. Luego de esto ejecutamos nuevamente y tenemos como resultado:
Tutorial ASP.NET
31
Datos de varias tablas
Continuamos con las tablas: Tabla: articulos
codigo int Clave primaria e identidad.
descripcion varchar(50)
precio float
codigorubro int
Tabla: rubros
codigo int Clave primaria e identidad
descripcion varchar(50
Generamos un nuevo webform y seleccionamos desde el Explorador de servidores la tabla artculos y la disponemos dentro del webform. El entorno del Visual Studio .Net nos genera un objeto de la clase GridView y otro de la clase SqlDataSource. El objetivo final es mostrar el cdigo del artculo, su descripcin, su precio y finalmente la descripcin del rubro (no el cdigo de rubro) 1 - Primero seleccionamos el control SqlDataSource1 y configuramos la propiedad SelectQuery con el comando Select que rescata los datos haciendo el emparejamiento por la columna codigorubro de la tabla articulos y codigo de la tabla rubros: SELECT ar.codigo,
ar.descripcion as descriarticulo,
precio,
ru.descripcion as descrirubro
from articulos as ar
join rubros as ru on ru.codigo=ar.codigorubro
2 - Luego de configurar la propiedad SelectQuery debemos actualizar el esquema del SqlDataSource1, esto lo hacemos seleccionando el objeto sobre el formulario y seleccionamos la opcin Actualizar esquema. Con esto logramos que se refresque las columnas a mostrar en el GridView1. Si ejecutamos podemos ver que ya tenemos la tabla que rescata todos los artculos y asociado a cada artculo la descripcin del rubro al que pertenece:
Tutorial ASP.NET
32
Ahora configuraremos algunas propiedades para dar un formato y presentacin ms adecuada de los datos: A Ya vimos que seleccionando el GridView1 y mediante la opcin Formato automtico... podemos definir el estilo de presentacin de la grilla. B Ahora entramos a la opcin Editar columnas... y seleccionamos el campo a configurar:
Tutorial ASP.NET
33
Cambiemos los ttulos de las columnas de cada campo (por ejemplo en el campo descriarticulo mostraremos el ttulo Descripcin del Art. Modificando la propiedad HeaderText. De forma similar cambiar los otros ttulos de las columnas de la grilla:
C La propiedad Visible de cada columna nos permite configurar si la columna se muestra o no. D La propiedad DataFormatString nos permite configurar la apariencia de nmeros y fechas. Por ejemplo si queremos que el precio aparezca con el smbolo de moneda debemos configurar la propiedad DataFormatString con el valor: {0:C}
Tutorial ASP.NET
34
Algunos ejemplos de formato de campos:
Formato de filas individuales de acuerdo a ciertas condiciones.
Cuando se grafica la tabla podemos capturar el evento RowDataBound y configurar como graficar dicha fila de la tabla. A modo de ejemplo mostraremos de color amarillo las filas de los artculos con precio superior a 5. Para esto codificamos el evento RowDataBound del GridView1:
Protected Sub GridView1_RowDataBound(ByVal sender As Object,
_
ByVal e As
System.Web.UI.WebControls.GridViewRowEventArgs) _
Handles GridView1.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
Dim precio As Single
precio = DataBinder.Eval(e.Row.DataItem, "precio")
If precio > 5 Then
e.Row.ForeColor = System.Drawing.Color.Red
e.Row.BackColor = System.Drawing.Color.Yellow
e.Row.Font.Bold = True
End If
End If
End Sub
Con el if verificamos si el evento se dispar para una fila de datos de la grilla (ya que este mtodo se dispara cuando dibuja la cabecera (DataControlRowType.Header), el pi de grilla (DataControlRowType.Footer) etc. Luego rescatamos el valor del campo precio y verificamos con un nuevo if si el precio supera 5, en caso afirmativo modificamos el color de fondo (BackColor) y de frente de la fila.
Tutorial ASP.NET
35
Seleccin de una fila del GridView y posterior extraccin de sus datos.
En muchas situaciones es necesario que el usuario seleccione una fila de la grilla para reflejar dicho dato en otra parte de la pgina o hacer otra consulta. Para poder implementar esta caracterstica del GridView llevaremos a cabo los siguientes pasos: 1 Cambiaremos el valor de la propiedad SelectedRowStyle.BackColor por amarillo (es decir que cuando seleccionemos la fila el color de fondo de la misma se activar con este valor) 2 En el men de opciones que se despliega en la parte derecha del GridView1 activaremos el CheckBox Habilitar seleccin 3 Dispondremos una Label en el webform para mostrar el valor seleccionado de la grilla (solo a modo de ejemplo) 4 Para el evento SelectedIndexChanged del GridView1 codificaremos el siguiente cdigo:
Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged
Me.Label1.Text =
Me.GridView1.Rows(Me.GridView1.SelectedIndex).Cells(1).Text
End Sub
Tutorial ASP.NET
36
El objeto Rows del GridView almacena una coleccin de filas, mediante el valor devuelto por la propiedad SelectedIndex de la grilla podemos acceder a la celda que almacena el cdigo del artculo.
Esta informacin nos es muy til para mostrar informacin adicional sobre el registro en otro control por ejemplo.
Tutorial ASP.NET
37
Crear una pgina de login, autenticacin y seguridad
Vamos a ver como ASP.NET nos brinda controles de servidor complejos que nos facilitan
la implementacin de funcionalidades complejas en nuestras aplicaciones. Un buen
ejemplo es el control de Login.
1
Antes de comenzar a ver cmo funciona y lo simple que es hacerlo funcional, vamos a ver
las propiedades principales que ofrece para adaptarlo a nuestras necesidades.
1
2
3
4
5
Propiedades que utilizamos son:
LoginButtonText : Nos permite modificar el texto del botn.
PasswordLabelText : Texto de la solicitud de contrasea.
UserNameLabelText : Texto de la solicitud de nombre de usuario.
RememberMeText : Texto de recordatorio.
http://www.maestrosdelweb.com/images/2010/11/image029.png
Tutorial ASP.NET
38
Ahora nuestro control nos queda de esta manera.
Ahora que ya pudimos cambiar el idioma usando las propiedades que nos ofrece el
control, vamos a ver cmo le damos funcionalidad a travs de sus eventos.
El Evento principal es Authenticate ah evaluamos si el usuario y contrasea
provistos son correctos de la siguiente forma: Agregamos el
EventHandleronauthenticate="Login1_Authenticate" a nuestro control LOGIN. Ahora
quedar de esta forma en el webform.
Ahora veremos el cdigo que se ejecutar al querer autenticarse.
1
2
3
4
5
6
7
8
9
protected void Login1_Authenticate(object sender, AuthenticateEventArgs e) {
bool Autenticado = false;
Autenticado = LoginCorrecto(Login1.UserName, Login1.Password);
e.Authenticated = Autenticado; if (Autenticado) {
Response.Redirect("Default.aspx");
}
private bool LoginCorrecto(string Usuario, string Contrasena) { if (Usuario.Equals("maestros") && Contrasena.Equals("delweb"))
return true; return false;
}
http://www.maestrosdelweb.com/images/2010/11/image031.png
Tutorial ASP.NET
39
En este ejemplo estoy prefijando en el cdigo un usuario y password
(maestros,delweb). En estos casos el mtodo privado LoginCorrecto por lo general
va a una base de datos donde estn almacenados los usuarios y passwords y recin ah se
verifica si es correcto.
Otros controles relacionados a login son:
CreateUserWizard que nos da todas las facilidades para dar de alta nuevos usuarios.
http://www.maestrosdelweb.com/images/2010/11/image033.pnghttp://www.maestrosdelweb.com/images/2010/11/image035.pnghttp://www.maestrosdelweb.com/images/2010/11/image033.pnghttp://www.maestrosdelweb.com/images/2010/11/image035.png
Tutorial ASP.NET
40
Master Page
Una Master Page o Pgina Principal es una estructura base para un conjunto de pginas pertenecientes a un mismo sitio Web. Este esqueleto base se almacena en un archivo independiente y luego es heredado por otras pginas que requieren esa estructura base. Un ejemplo donde utilizar una pgina Master Page es la definicin de la cabecera y el pie del sitio, luego todas las otras pginas del sitio heredan de dicha pgina. La ventaja fundamental en este ejemplo es que si hay cambios en la cabecera del sitio solo debemos hacerlos en la pgina principal y con esto se propaga en todas las pginas que heredan de la misma.
1 Problema 1
Problema: Confeccionar un sitio que permita mostrar un conjunto de direcciones web agrupados por tema. Disponer una lista de hipervnculos con los siguientes temas: Buscadores Peridicos Blog Mostrar en la parte inferior de la pgina un mensaje de Copyright. Para crear un sitio que utilice una Master Page debemos seguir una serie de pasos: a Creamos un nuevo sitio web: Archivo -> Nuevo Sitio Web y seleccionamos la plantilla " Sitio web vaco b En la ventana del Explorador de soluciones presionamos el botn derecho del mouse y seleccionamos Agregar nuevo elemento y seleccionamos Pgina principal (en ingls Master Page) Las pginas Master Page tienen extensin master en lugar de aspx. El cdigo generado en forma automtico es el siguiente:
Tutorial ASP.NET
41
Lo primero que vemos que es distinto con un WebForm es la directiva Master en lugar de Page:
Ahora agregaremos los hipervnculos en la parte superior y el pi de pgina:
Buscadores.- Peridicos.- Blogs. Copyright 2009
Tutorial ASP.NET
42
Luego veremos que todas las pginas que hereden de esta mostrarn los tres hipervnculos en la parte superior y el mensaje de Copyright en la parte inferior. c Agregar un Web Forms que herede del Master Page que hemos creado. En la ventana del Explorador de soluciones presionamos el botn derecho del mouse y seleccionamos Agregar nuevo elemento y seleccionamos Web Forms. Es importantsimo ahora seleccionar el checkbox Seleccionar la pgina principal, tambin podemos cambiar el nombre por defecto de la pgina (podemos llamarla Default.aspx), luego de presionar el botn Agregar y si seleccionamos correctamente Seleccionar la pgina principal aparecer un nuevo dilogo para seleccionar el Master Page del cual hereda nuestro Web Form. El cdigo generado en forma automtico es el siguiente:
Como podemos observar no contiene las marcas HTML de la cabecera y el cuerpo, ya que se heredan de la Master Page. El cdigo propio de esta pgina debemos disponerlo en la marca asp:Content, en nuestro ejemplo agregaremos una lista de enlaces a los distintos buscadores:
Yahoo
Tutorial ASP.NET
43
Live
d - De igual forma creamos las otras pginas (Default2.aspx y Default3.aspx): Default2.aspx
La Nacin El Clarin La Voz
Default3.aspx:
Microsiervos Alt 1040 PuntoGeek
Ahora cuando ejecutamos y solicitamos la pgina Default.aspx el resultado es el siguiente:
Tutorial ASP.NET
44
Como podemos observar al contenido definido en el archivo Default.aspx (los tres hipervnculos a los buscadores) se ha aadido todo lo definido en la Master Page (es decir los hipervnculos a las categoras Buscadores, Peridicos y Blogs, adems del mensaje en la parte inferior de la pgina) Luego cuando solicitamos las pginas Default2.aspx y Default3.aspx vemos que todas tienen el contenido definido en el archivo MasterPage:
Tutorial ASP.NET
45
Tutorial ASP.NET
46
AJAX con ASP.Net
Hasta ahora, hemos aprendido a crear pginas web que utilizan el modelo postback. Con el postback, las pginas estn perpetuamente reenvindose al servidor web y regenerndose. Como desventaja del modelo postback tenemos que hay un parpadeo del contenido de la pgina cuando tiene que refrescarse. Adems se tiene el problema que se reenvan todos los datos al servidor. Recientemente, una nueva generacin de aplicaciones web ha comenzado a aparecer que se comportan ms como las aplicaciones de Windows que las tradicionales pginas web. Estas aplicaciones se refrescan en forma rpida y sin parpadeos. Entre los ejemplos notables incluyen el correo electrnico basado en web como Gmail y aplicaciones de la cartografa como Google Maps. Esta nueva generacin de aplicaciones web utiliza un conjunto de prcticas de diseo y tecnologas conocidas como Ajax. Una de las caractersticas fundamentales de Ajax es la capacidad para actualizar parte de la pgina, mientras que deja el resto intacto. AJAX son las siglas de Asynchronous JavaScript And XML. No es un lenguaje de programacin sino un conjunto de tecnologas (HTML-JavaScript-CSS-DHTML-PHP/ASP.NET/JSP-XML) que nos permiten hacer pginas de internet ms interactivas. La caracterstica fundamental de AJAX es permitir actualizar parte de una pgina con informacin que se encuentra en el servidor sin tener que refrescar completamente la pgina. De modo similar podemos enviar informacin al servidor. Veremos como ASP.Net nos esconde la complejidad de Ajax y nos permite una fcil transicin entre aplicaciones web tradicionales y el nuevo modelo.
ASP.NET AJAX
Hay una variedad de formas de aplicar el Ajax en cualquier aplicacin Web, incluyendo ASP.NET. Para ponerlo en prctica Ajax sin utilizar libreras, es necesario que se tenga una comprensin profunda de JavaScript, porque es el lenguaje JavaScript el que se ejecuta en el navegador, que solicita la nueva informacin del servidor web cuando sea necesario y la actualizacin de la pgina en consecuencia. Si bien JavaScript no es terriblemente complejo, es muy difcil de programar correctamente, por dos razones:
Tutorial ASP.NET
47
- La aplicacin de los principales detalles de JavaScript vara de navegador a navegador, que significa que necesita una enorme cantidad de experiencia para escribir una buena pgina web que se ejecuta igual de bien en todos los navegadores. - JavaScript es un lenguaje muy laxo que tolera muchos pequeos errores. La captura de estos errores y la eliminacin de ellos es un proceso tedioso. An peor, el error puede ser fatal en algunos navegadores y daina en otros, lo que complica la depuracin. En este captulo, usted NO va a usar JavaScript directamente. Por el contrario, utilizar un modelo de nivel superior llamado ASP.NET AJAX. ASP.NET AJAX le da un conjunto de componentes del lado del servidor y los controles ASP.NET tradicionales que puede utilizar en el diseo de su pgina web. Estos componentes hacen automticamente todos el cdigo JavaScript que necesita para obtener el efecto deseado. El resultado es que puede crear una pgina con Ajax. Por supuesto, usted no obtendr el mximo control para personalizar hasta el ltimo detalle de su pgina, pero usted recibir una gran funcionalidad con un mnimo de esfuerzo.
Extensiones Ajax
El Visual Studio .Net 2008 agrega una pestaa que agrupa los controles referidos a Ajax:
Para poder utilizar ASP.NET AJAX es necesario un control de tipo ScriptManager. Este control es el cerebro de ASP.NET AJAX, Cuando disponemos un control de tipo ScriptManager en el formulario aparece un cuadro gris, pero cuando ejecutemos dicha pgina no aparecer, es decir el control ScriptManager no genera etiquetas HTML.
Tutorial ASP.NET
48
El control ScriptManager genera todo el cdigo JavaScript necesario para las llamadas asncronas desde el navegador al servidor web. Cada pgina que utiliza ASP.NET AJAX requiere solo una instancia de la clase ScriptManager, indistintamente la cantidad de regiones que vallamos a actualizar posteriormente.
Refresco parcial de pgina.
Confeccionaremos un problema sin utilizar AJAX y luego lo resolveremos utilizando AJAX y veremos las ventajas que presenta. El problema a resolver es mostrar un video del sitio de youtube.com, dispondremos un botn que cuando se presione recuperar los comentarios existentes para dicho video (para hacer el problema ms corto evitaremos extraer los comentarios de una base de datos) Creamos un sitio web y disponemos en vista de cdigo las marcas HTML que nos provee el sitio youtube.com para insertar en nuestra pgina el video. Luego la pgina Default en vista de cdigo queda:
Tutorial ASP.NET
49
Despus del bloque del body hemos dispuesto el cdigo suministrado por youtube.com Ahora en vista de Diseo agregamos un Button y una Label.:
El cdigo a implementar al presionar el botn es:
Tutorial ASP.NET
50
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Button1_Click(ByVal sender As Object, ByVal e
As _
System.EventArgs) Handles Button1.Click
Me.Label1.Text = _
"1 - Muy buen video. 2 - Correcto. 3 - De lo
mejor."
End Sub
End Class
Es decir cargamos el contenido de la Label con los comentarios. Como podrn ver al ejecutar la aplicacin si estamos viendo el video y presionamos el botn de Ver comentarios el contenido de la pgina se recarga, es decir debemos comenzar de nuevo a ver el video (esta situacin es poco agradable para el visitante del sitio) Ahora crearemos otra pgina y utilizaremos ASP.NET AJAX para no tener que refrescar toda la pgina sino la Label donde deben aparecer los comentarios. Creamos una segunda pgina (Default2.aspx), agregamos tambin el cdigo suministrado por youtube.com. Debemos primero insertar un objeto de la clase ScriptManager y un objeto de la clase UpdatePanel. Todo lo contenido en el control UpdatePanel se refrescar sin tener que recargar la pgina por completo. Disponemos entonces dentro del UpdatePanel1 la Label y el botn para Recuperar comentarios, la interface visual creada es:
Tutorial ASP.NET
51
Para el evento click del botn realizamos el mismo cdigo hecho para la pgina anterior:
Partial Class Default2 Inherits System.Web.UI.Page Protected Sub Button1_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Button1.Click Me.Label1.Text = _ "1 - Muy buen video. 2 - Correcto. 3 - De lo mejor." End Sub End Class
Tutorial ASP.NET
52
Si ejecutamos la pgina Default2.aspx veremos que la experiencia del usuario visitante ser mejor. Probemos de iniciar el video y luego presionar el botn Ver comentarios, como observaremos el video no se detiene y luego de un corto tiempo tenemos en la pgina los comentarios dispuestos en dicho video. La idea bsica es dividir su pgina web en una o ms regiones distintas, cada una de las que se envuelve dentro de un UpdatePanel invisibles en tiempo de ejecucin. Cuando un evento ocurre en un control que se ubicado dentro de un UpdatePanel, y este evento normalmente desencadena una pgina completa postback, el UpdatePanel intercepta el evento y realiza una llamada asincrnica. Aqu est un ejemplo de cmo esto sucede:
1. El usuario hace clic en un botn dentro de un UpdatePanel. 2. El UpdatePanel intercepta en el lado del cliente el clic.
Ahora, ASP.NET AJAX realiza una llamada al servidor en lugar de una pgina completa postback.
3. En el servidor, se ejecuta su ciclo de vida en forma normal, con todos los eventos habituales.
4. ASP.NET AJAX recibe todo el HTML y se actualiza cada UpdatePanel y los cambios que no estn dentro de un UpdatePanel se ignoran.
Tutorial ASP.NET
53
[ASP.NET] El contenido de este tutorial fue obtenido a travs de las pginas Web:
http://www.desarrolloweb.com http://www.aspnetya.com.ar/index.php
http://es.wikipedia.org