Escolar Documentos
Profissional Documentos
Cultura Documentos
ndice
Descripcin 1
Leccin: uso de las pginas de cdigo
subyacente 2
Leccin: agregar procedimientos de evento a
controles de servidor Web 9
Leccin: uso de eventos de pgina 22
Agregar cdigo a un formulario Web Form con Microsoft ASP.NET 1
Descripcin
***************************** use******************************
Introduccin En este mdulo, estudiaremos los distintos mtodos que pueden utilizarse para
agregar cdigo a nuestra aplicacin Web con Microsoft ASP.NET. Tambin
estudiaremos los procedimientos de evento para los controles de servidor Web,
cmo utilizarlos y el orden en que funcionan. Estudiaremos el uso de las pginas
de cdigo subyacente, que son el mtodo preferido de Microsoft Visual Studio
.NET para agregar cdigo a pginas Web. Finamente, estudiaremos cmo se
utilizan los eventos de pgina, en particular al evento Page_Load.
Objetivos En este mdulo, aprenderemos a:
Utilizar pginas de cdigo subyacente en una aplicacin Web.
Crear procedimientos de evento para controles de servidor Web.
Utilizar eventos de pgina en una aplicacin Web.
2 Agregar cdigo a un formulario Web Form con Microsoft ASP.NET
***************************** use******************************
Introduccin En esta leccin, estudiaremos cmo implementar cdigo con Visual Studio .NET.
Tambin estudiaremos cmo se utilizan las pginas de cdigo subyacente y en
qu se diferencian del cdigo en lnea.
Objetivos de la leccin En esta leccin, aprenderemos a:
Identificar tres formas de implementar cdigo en un formulario Web Form
ASP.NET.
Utilizar las pginas de cdigo subyacente.
Agregar cdigo a un formulario Web Form con Microsoft ASP.NET 3
***************************** use******************************
Implementar cdigo Podemos agregar cdigo a nuestro formulario Web Form de los siguientes
modos:
Cdigo mezclado. El cdigo se encuentra en el mismo archivo que el
contenido Web, entremezclado con el contenido Hypertext Markup Language
(HTML). Este mtodo es el menos elegido, ya que es difcil leer y trabajar
con un archivo de este tipo. Sin embargo, es un mtodo utilizado con
frecuencia en pginas Active Server Pages (ASP).
Cdigo en lnea. El cdigo se encuentra en el mismo archivo en una seccin
SCRIPT distinta, al igual que el contenido HTML.
Cdigo subyacente. El cdigo se encuentra en un archivo distinto del
contenido HTML. El archivo de cdigo se denomina pgina de cdigo
subyacente. Cuando se utiliza Visual Studio .NET, el mtodo predeterminado
es ubicar todo el cdigo en una pgina de cdigo subyacente.
4 Agregar cdigo a un formulario Web Form con Microsoft ASP.NET
<HTML>
<HTML>
<asp:Button
<asp:Button id="btn"
id="btn" runat="server"/>
runat="server"/>
</HTML>
</HTML>
<SCRIPT
<SCRIPT Language="c#" runat="server">
Language="c#" runat="server">
private
private void
void btn_Click(object
btn_Click(object sender,
sender, System.EventArgs
System.EventArgs e)
e)
{{
.. .. ..
}}
</SCRIPT>
</SCRIPT>
***************************** use******************************
C#
Agregar cdigo a un formulario Web Form con Microsoft ASP.NET 5
<HTML>
<asp:Button id="btn" runat="server" />
...
</HTML>
cdigo
<tags> cdigo
<tags>
***************************** use******************************
***************************** use******************************
Introduccin Para que las pginas de cdigo subyacente funcionen, cada pgina .aspx debe
estar asociada a una pgina de cdigo subyacente, y esa pgina de cdigo
subyacente debe estar compilada antes de que la informacin se enve de vuelta a
un navegador cliente que la solicite.
Aunque cada pgina Web Form est formada por dos archivos distintos (la
pgina .aspx y la pgina de cdigo subyacente), ambos archivos forman una
nica unidad cuando se ejecuta la aplicacin Web. La pgina de cdigo
subyacente puede ser precompilada por Visual Studio .NET cuando generamos el
proyecto de aplicacin Web, o puede ser compilada just-in-time (JIT) la primera
vez que un usuario accede a la pgina.
Enlazar los dos archivos La pgina .aspx debe estar asociada a la pgina de cdigo subyacente.
Visual Studio .NET agrega los tres atributos siguientes a la directiva @ Page de
la pgina .aspx para conseguir esta asociacin:
Codebehind. Es el atributo que Visual Studio .NET utiliza internamente para
asociar los archivos.
Src. Este atributo es el nombre de la pgina de cdigo subyacente, y se utiliza
si la aplicacin Web no est precompilada.
Inherits. Este atributo permite a la pgina .aspx heredar clases y objetos de la
pgina de cdigo subyacente.
Compilacin JIT Cuando una pgina est compilada JIT, las pginas de cdigo subyacente se
compilan la primera vez que un cliente solicita la pgina .aspx. Tras la primera
peticin, las siguientes utilizan el archivo compilado existente. Por tanto, la
primera peticin de una pgina dura ms, pero las siguientes peticiones son ms
rpidas.
Si se desea utilizar la compilacin JIT para una pgina, debera utilizarse el
atributo Src de la directiva @ Page.
Ejecucin Cuando un usuario solicita la pgina .aspx, el archivo DLL procesa la peticin
entrante y responde creando el cdigo HTML y el scripting adecuados y
devolvindolos al navegador solicitante.
Precompilacin Si omitimos el atributo Src de la directiva @ Page en un archivo .aspx, la pgina
se precompila cuando generamos la aplicacin en Visual Studio .NET. De modo
predeterminado, Visual Studio .NET no agrega el atributo Src; por ello, todas las
pginas de cdigo subyacente en los formularios Web Forms de un proyecto se
compilan cuando se genera el proyecto. Este proceso ahorra un tiempo
considerable de proceso en el servidor Web.
Precompilar pginas de cdigo subyacente tambin simplifica la implantacin del
sitio Web ya que no es necesario implantar las pginas de cdigo subyacente
junto con las pginas .aspx.
***************************** use******************************
***************************** use******************************
***************************** use******************************
Introduccin Esta demostracin puede realizarse utilizando un proyecto Visual Basic .NET o
Microsoft Visual C#. En esta demostracin, veremos cmo se ejecutan los
procedimientos de evento en el lado del cliente y en el lado del servidor en un
sitio Web.
Ejecutar la demostracin
1. En Visual Studio .NET, abrir la pgina eventorderstart.aspx en el proyecto
Demo04VB o Demo04CS que se pueden encontrar dentro del fichero
demos04.zip.
2. Visualizar la pgina en el navegador. No es necesario generar antes el
proyecto.
3. Hacer clic en los controles de la pgina. Cada control tiene un procedimiento
de evento en el lado del cliente que enva una cadena cuando se ejecuta.
4. Hacer clic en Save. Esto enva el formulario y har que se ejecuten todos los
procedimientos de evento en el lado del servidor.
5. En el navegador, visualizar el cdigo fuente de la pgina. Slo est visible el
cdigo para los procedimientos de evento en el lado del cliente.
6. Cerrar la vista de cdigo fuente de la pgina.
7. En Visual Studio .NET, abrir la pgina en la vista HTML. Hay cdigo tanto
para procedimientos de evento en el lado del cliente como en el lado del
servidor.
12 Agregar cdigo a un formulario Web Form con Microsoft ASP.NET
Internet Pginas
.HTM
***************************** use******************************
Introduccin Existen dos tipos de procedimientos de evento: en el lado del cliente y en el lado
del servidor. Ambos tienen ventajas e inconvenientes.
Procedimientos de Los procedimientos de evento en el lado del cliente son eventos gestionados en el
evento en el lado del equipo que solicita el formulario Web Form (el cliente). Cuando se genera un
cliente evento, no se enva ninguna informacin al servidor. En lugar de ello, el
navegador del cliente interpreta el cdigo y tambin realiza la accin.
Los procedimientos de evento en el lado del cliente nicamente pueden utilizarse
con controles HTML. Adems, los procedimientos de evento en el lado del
cliente nunca tienen acceso a los recursos del servidor. Por ejemplo, no podemos
utilizar scripts en el lado del cliente para acceder a una base de datos SQL Server.
Usos de los Los procedimientos de evento en el lado del cliente resultan tiles para eventos
procedimientos de que deseamos que ocurran inmediatamente porque no requieren un viaje de ida y
evento en el lado del vuelta al servidor Web (envo de informacin al servidor Web y espera de una
cliente respuesta). Por ejemplo, es posible validar informacin en un cuadro de texto
antes de enviarla al servidor. Podemos utilizar scripts en el lado del cliente para
validar la informacin rpida y eficazmente antes de enviar la informacin del
usuario al servidor Web para continuar su proceso.
Especificar Especificamos un procedimiento de evento en el lado del cliente creando un
procedimientos de bloque <SCRIPT> en la pgina Web, como muestra el siguiente cdigo:
evento en el lado del
cliente <SCRIPT language="javascript">
Agregar cdigo a un formulario Web Form con Microsoft ASP.NET 13
***************************** use******************************
Soporte de eventos Debido a que los procedimientos de evento en el lado del servidor requieren un
viaje de ida y vuelta al servidor Web, existen un nmero limitado de tipos de
eventos de control soportados. Con los procedimientos de evento en el lado del
cliente, podemos incluir cdigo para procesar eventos asociados a botones de
ratn y eventos onChange. Mientras los procedimientos de evento en el lado del
servidor soportan eventos click y una versin especial del evento onChange, no
pueden soportar eventos que ocurren frecuentemente, como eventos asociados a
botones del ratn.
14 Agregar cdigo a un formulario Web Form con Microsoft ASP.NET
***************************** use******************************
Introduccin En esta animacin, veremos cmo los procedimientos de evento en el lado del
cliente y en el lado del servidor se procesan. Para iniciar la animacin abrir el
fichero media041.swf.
1. El cliente solicita una pgina ASP.NET del servidor Web.
2. El servidor devuelve al cliente una pgina que contiene HTML y scripts. La
pgina incluye un control de cuadro de texto y un botn Submit. La pgina
tambin contiene scripting en el lado del cliente que valida el contenido del
cuadro de texto.
3. El usuario introduce informacin no vlida en el cuadro de texto, y el script
en el lado del cliente genera un cuadro de mensaje.
4. Como no se ha enviado ninguna informacin al servidor, el proceso en el lado
del cliente reduce el trfico de red y el tiempo de respuesta.
5. El usuario corrige la informacin del cuadro de texto y hace clic en el botn
Submit.
6. La informacin se valida en el lado del cliente y se enva al servidor, donde
puede iniciarse el proceso en el lado del servidor.
7. El servidor repite la validacin y almacena la informacin del cuadro de texto
en una base de datos.
8. Debido a que el script en el lado del cliente no puede acceder a recursos del
servidor, el proceso en el lado del servidor ofrece una mayor flexibilidad al
trabajar con datos.
Agregar cdigo a un formulario Web Form con Microsoft ASP.NET 15
protected
protected System.Web.UI.WebControls.Button
System.Web.UI.WebControls.Button cmd1;cmd1;
private
private void
void InitializeComponent()
InitializeComponent()
{{
this.cmd1.Click
this.cmd1.Click +=+= new
new System.EventHandler(this.cmd1_Click);
System.EventHandler(this.cmd1_Click);
this.Load
this.Load +=
+= new
new System.EventHandler(this.Page_Load);
System.EventHandler(this.Page_Load);
}}
private
private void
void cmd1_Click(object
cmd1_Click(object s, s, System.EventArgs
System.EventArgs e)
e)
Introduccin Crear un procedimiento de evento en el lado del servidor en Visual Studio .NET
implica dos pasos. En el primer paso, creamos el control que genera el evento en
el formulario Web Form. En el segundo, proporcionamos el cdigo necesario en
la pgina de cdigo subyacente para procesar el evento.
Crear un procedimiento Cuando hacemos doble clic en un control en Visual Studio .NET, Visual Studio
de evento en el lado del .NET declara una variable (con el mismo nombre que el atributo id del control) y
servidor crea una plantilla para el procedimiento de evento. Cuando utilizamos
Visual Basic .NET, Visual Studio .NET tambin agrega la palabra clave
Handles, que adjunta el procedimiento de evento al control. La palabra clave
Handles permite crear mltiples procedimientos de evento a un nico evento.
El siguiente cdigo HTML muestra un formulario Web Form que tiene un nico
botn con un atributo id igual a cmd1; el evento click del botn se gestionar en
el servidor:
<form id="form1" method="post" runat="server">
<asp:Button id="cmd1" runat="server"/>
</form>
16 Agregar cdigo a un formulario Web Form con Microsoft ASP.NET
Argumentos del evento Todos los eventos pasan dos argumentos al procedimiento de evento: el remitente
del evento y una instancia de la clase que guarda los datos del evento.
Normalmente, este ltimo es del tipo EventArgs, y a menudo no contiene
ninguna informacin adicional; sin embargo, para algunos controles, es de un
tipo que es especfico para ese control.
Por ejemplo, para un control Web ImageButton, el segundo argumento es de
tipo ImageClickEventArgs, que incluye informacin sobre las coordenadas
donde el usuario ha hecho clic. El siguiente procedimiento de evento enva las
coordenadas de la ubicacin donde ocurre un clic en un control Label:
Sub img_OnClick(ByVal s As System.Object, _
ByVal e As System.Web.UI.ImageClickEventArgs) _
Handles ImageButton1.Click
Label1.Text = e.X & ", " & e.Y
End Sub
***************************** use******************************
Introduccin Esta prctica dirigida por el instructor puede realizarse utilizando archivos de
Visual Basic .NET o archivos de Visual C#.
En esta prctica, veremos cmo agregar un procedimiento de evento a un control
Web utilizando Visual Studio .NET.
Ejecutar la prctica
1. En Visual Studio .NET, agregar un nuevo formulario Web Form denominado
events.aspx al proyecto Mod05VB o Mod05CS, en la solucin 2310Demos.
2. Abrir la pgina events.aspx.
3. Ubicar un control Web Form Button y uno Label en el formulario.
Se asigna a los controles un ID predeterminado que podemos ver y modificar
en la ventana Propiedades.
4. En la vista Diseo, hacer doble clic en el control Button para abrir la pgina
de cdigo subyacente y crear un procedimiento de evento Click.
En la pgina de cdigo subyacente, ver la variable declarada y la plantilla de
procedimiento creada por Visual Studio .NET.
5. Introducir el siguiente cdigo en el procedimiento de evento Click:
Visual Basic .NET Label1.Text = "You clicked the button"
strGreeting
strGreeting == "Hello
"Hello "" && txtName.Text
txtName.Text
strGreeting
strGreeting == "Hello
"Hello "" ++ txtName.Text;
txtName.Text;
lblGreeting.Text
lblGreeting.Text == "new
"new text"
text"
lblGreeting.Text
lblGreeting.Text == "new
"new text";
text";
***************************** use******************************
Cuando el usuario hace clic en el botn, podemos leer el texto que el usuario ha
escrito en el cuadro de texto. El siguiente cdigo asigna la variable de cadena
strGreeting a una concatenacin del texto Hello y el texto del cuadro de texto
txtName:
Visual Basic .NET Dim strGreeting As String = "Hello " & txtName.Text
El siguiente cdigo en el lado del servidor asigna la propiedad Text del control
de servidor Web lblGreeting a una cadena de texto:
Visual Basic .NET lblGreeting.Text = "new text"
***************************** use******************************
Introduccin En esta leccin, estudiaremos cmo utilizar los eventos de pgina. En primer
lugar, estudiaremos el ciclo de vida de los eventos de pgina. A continuacin,
veremos cmo funciona el proceso de postback, y estudiaremos el orden de los
eventos. Tambin veremos cmo trabajar con el evento Page_Load. La leccin
finaliza con el vnculo de controles.
Objetivos de la leccin En esta leccin, aprenderemos a:
Describir el ciclo de vida de los eventos de pgina.
Utilizar formularios postback.
Enlazar un control con otro control.
Agregar cdigo a un formulario Web Form con Microsoft ASP.NET 23
Page_Init
Page_Init
Page_Unload
Page_Unload
La pgina se gestiona
***************************** use******************************
Introduccin Cuando se solicita una pgina ASP.NET, se producen una serie de eventos de
pgina. Estos eventos siempre ocurren en el mismo orden, denominado ciclo de
vida de los eventos de pgina.
Ciclo de vida de los El ciclo de vida de los eventos de pgina consta de los siguientes eventos de
eventos de pgina pgina, que ocurren en el siguiente orden:
1. Page_Init. Este evento de pgina inicializa la pgina creando e inicializando
los controles de servidor Web de la pgina.
2. Page_Load. Este evento de pgina se ejecuta cada vez que se solicita la
pgina.
3. Eventos Control. Este evento de pgina incluye eventos de cambio (por
ejemplo, Textbox1_Changed) y eventos de accin (por ejemplo,
Button1_Click).
4. Page_Unload. Este evento de pgina ocurre cuando la pgina se cierra o
cuando el control pasa a otra pgina.
El final del ciclo de vida de los eventos de pgina incluye el borrado de la pgina
en memoria.
La mayora de eventos de control no ocurren hasta que el formulario Web Form
se enve de nuevo al servidor. Por ejemplo, los eventos Change se gestionan en
orden aleatorio en el servidor despus de que el formulario haya sido enviado. En
cambio, los eventos Click pueden hacer que el formulario sea enviado al servidor
inmediatamente.
Por ejemplo, si un usuario introduce texto en varios controles de un formulario y
hace clic en un botn Submit, los eventos Change de los controles de texto no se
procesarn hasta que el evento Click enve el formulario al servidor.
Nota Para ms informacin sobre los eventos de pgina, ver Pgina (miembros
24 Agregar cdigo a un formulario Web Form con Microsoft ASP.NET
***************************** use******************************
***************************** use******************************
Introduccin Esta demostracin puede realizarse utilizando un proyecto Visual Basic .NET o
un proyecto Visual C#.
En esta demostracin, veremos cmo los controles HTML y los controles de
servidor Web pueden soportar eventos tanto en el lado del cliente como en el lado
del servidor.
El cdigo completo para esta demostracin se encuentra en la pgina:
Visual Basic .NET Demo04VB\eventorderFinal.aspx.
C# Demo04CS\eventorderFinal.aspx.
Estas pginas y sus correspondientes proyectos se pueden encontrar dentro del
fichero demos04.zip.
Agregar cdigo a un formulario Web Form con Microsoft ASP.NET 27
Ejecutar la demostracin
1. En Visual Studio .NET, visualizar la pgina eventorderstart.aspx del proyecto
Demo04VB o Demo04CS en el navegador.
Escribir un nombre en el campo Name, hacer clic en un valor en el cuadro de
lista Profession, seleccionar la casilla de verificacin y hacer clic en Save.
La pgina tiene procedimientos de evento en el lado del cliente y en el lado
del servidor para el cuadro de texto, el cuadro de lista, la casilla de
verificacin, el botn y la pgina.
2. En Visual Studio .NET, editar la pgina en la vista HTML y cambiar la casilla
de verificacin a un control de servidor Web, agregando un atributo Text,
como muestra el siguiente cdigo:
<asp:checkbox onclick="checkClick()"
onserverclick="checkServerClick"
onserverchange="checkServerChange"
runat="server"
id="Checkbox1"
Text="Certified Professional"/>
Los estudiantes:
z En determinados escenarios, enumerarn
los eventos que ocurrirn y el orden en
que se producirn
Tiempo: 5 minutos
***************************** use******************************
____________________________________________________________
____________________________________________________________
30 Agregar cdigo a un formulario Web Form con Microsoft ASP.NET
_____________________________________________________________
_____________________________________________________________
_____________________________________________________________
_____________________________________________________________
Agregar cdigo a un formulario Web Form con Microsoft ASP.NET 31
Sub
Sub Page_Load(s
Page_Load(s As
As Object,
Object, ee As
As EventArgs)
EventArgs) Handles
Handles MyBase.Load
MyBase.Load
lblSelectedValue.DataBind()
lblSelectedValue.DataBind()
End
End Sub
Sub
***************************** use******************************
***************************** use******************************
Introduccin Esta demostracin puede realizarse utilizando los archivos del proyecto Visual
Basic .NET o del proyecto Visual C#.
En esta demostracin, veremos cmo vincular controles.
El cdigo completo para esta demostracin se encuentra en la pgina:
Visual Basic .NET Demo04VB\binding.aspx.
C# Demo04CS\binding.aspx.
Estas pginas y sus correspondientes proyectos se pueden encontrar dentro del
fichero demos04.zip.
Ejecutar la demostracin
1. En Visual Studio .NET, editar la pgina beforebinding.aspx del proyecto
Mod05. Contiene un control DropDownList y un control Label. Visualizar el
cdigo HTML de la pgina. Observar el atributo AutoPostBack de
DropDownList.
2. Vincular el control Label al control DropDownList estableciendo su atributo
Text, como muestra el siguiente cdigo de ejemplo:
<asp:label id="lblListValue"
Text="<%# lstTitle.SelectedItem.Text %>" runat="server"/>
Agregar cdigo a un formulario Web Form con Microsoft ASP.NET 35