Você está na página 1de 24

Agregar cdigo a un

formulario Web Form


con Microsoft ASP.NET
Descripcin

Uso de las pginas de cdigo subyacente


Agregar procedimientos de evento a controles de
servidor Web
Uso de eventos de pgina
Leccin: uso de las pginas de cdigo subyacente

Cmo implementar cdigo


Escribir cdigo en lnea
Qu son las pginas de cdigo subyacente?
Entender cmo funcionan las pginas de cdigo
subyacente
Cmo implementar cdigo

Tres mtodos para agregar cdigo:


Ubicar el cdigo en el mismo archivo que el contenido
(mezclado)
Ubicar el cdigo en una seccin distinta del archivo de
contenido (cdigo en lnea )
Ubicar el cdigo en un archivo distinto (pginas de
cdigo subyacente)
Las pginas de cdigo subyacente son el mtodo
predeterminado de Visual Studio .NET
Escribir cdigo en lnea

Cdigo y contenido en el mismo archivo


Distintas secciones en el archivo para el cdigo y HTML
<HTML>
<asp:Button id="btn" runat="server"/>
</HTML>
<SCRIPT Language="vb" runat="server">
Sub btn_Click(s As Object, e As EventArgs) Handles btn.Click
...
End Sub
</SCRIPT>

<HTML>
<asp:Button id="btn" runat="server"/>
</HTML>
<SCRIPT Language="c#" runat="server">
private void btn_Click(object sender, System.EventArgs e)
{
. . .
}
</SCRIPT>
Qu son las pginas de cdigo subyacente?

Separacin de cdigo y contenido


Los desarrolladores y los diseadores de la interfaz de
usuario pueden trabajar independientemente
Un archivo Archivos distintos

cdigo
<tags> cdigo
<tags>

Form1.aspx Form1.aspx Form1.aspx.vb


o Form1.aspx.cs
Cmo funcionan las pginas de cdigo subyacente

Crean archivos distintos para la interfaz de usuario y la


lgica de la interfaz
Utilizan la directiva @ Page para enlazar los dos archivos
Pre-compilacin o compilacin JIT

Page1.aspx.cs
Page1.aspx
<% @ Page Language="c#" public class WebForm1
{
Inherits="Project.WebForm1" private void cmd1_Click()
Codebehind="Page1.aspx.cs" {
Src = "Page1.aspx.cs" %>
}
}
Leccin: agregar procedimientos de evento a
controles de servidor Web

Qu son los procedimientos de evento?


Demostracin: uso de eventos
Procedimientos de evento en el lado del cliente
Procedimientos de evento en el lado del servidor
Multimedia: eventos en el lado del cliente y en el lado
del servidor
Crear procedimientos de evento
Prctica dirigida por el profesor: crear un
procedimiento de evento
Interactuar con controles en procedimientos de evento
Qu son los procedimientos de evento?

Acciones en respuesta a la interaccin de un usuario


con los controles de la pgina
Demostracin: uso de eventos

Abrir una pgina ASP.NET con controles


y procedimientos de evento en el lado del
cliente y en el lado del servidor
Hacer clic en los controles para visualizar
la ejecucin de los eventos en el lado del
cliente y en el lado del servidor
En el explorador, visualizar el cdigo
fuente de la pgina
En el editor, visualizar el cdigo del
procedimiento de evento
Procedimientos de evento en el lado del cliente

Normalmente, se utilizan nicamente con


controles HTML
Interpretado por el navegador y se ejecuta en el
cliente
No tiene acceso a los recursos del servidor
Utiliza <SCRIPT language="lenguaje">

Internet Pginas
.HTM
Procedimientos de evento en el lado del servidor

Utilizados tanto con controles de servidor Web como


HTML
El cdigo se compila y ejecuta en el servidor
Tienen acceso a recursos del servidor
Utilizan <SCRIPT language="vb" runat="server"> o
<SCRIPT language=cs" runat="server">

.Pginas
Internet
.ASPX
Multimedia: eventos en el lado del cliente y en el lado
del servidor
Crear procedimientos de evento

Visual Studio .NET declara variables y crea una plantilla


de procedimiento de evento
Protected WithEvents cmd1 As System.Web.UI.WebControls.Button
Private Sub cmd1_Click(ByVal s As System.Object, _
ByVal e As System.EventArgs) Handles cmd1.Click

protected System.Web.UI.WebControls.Button cmd1;


private void InitializeComponent()
{
this.cmd1.Click += new System.EventHandler(this.cmd1_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
private void cmd1_Click(object s, System.EventArgs e)

El uso de la palabra clave Handles agrega a un evento


varios procedimientos de evento
Prctica dirigida por el profesor: crear un
procedimiento de evento

Crear un formulario Web Form utilizando


Visual Studio .NET
Agregar controles al formulario Web
Form
Hacer doble clic en uno o ms controles
para agregar procedimientos de evento
Generar y examinar
Interactuar con controles en procedimientos de evento

Leer las propiedades de los controles de servidor Web

strGreeting = "Hello " & txtName.Text

strGreeting = "Hello " + txtName.Text;

Respuestas de salida a otros controles de servidor Web

lblGreeting.Text = "new text"

lblGreeting.Text = "new text";


Leccin: uso de los eventos de pgina

Ciclo de vida de un evento de pgina


Multimedia: el proceso PostBack
Demostracin: gestionar eventos
Prctica: ordenar los eventos
Gestin de los eventos Page.IsPostback
Vnculo de dos controles
Demostracin: vincular controles
Ciclo de vida de los eventos de pgina

Page_Init

Eventos control Page_Load

Eventos de cambio Textbox1_Changed

Eventos de accin Button1_Click

Page_Unload

La pgina se gestiona
Multimedia: el proceso de postback
Demostracin: gestionar eventos
Prctica: ordenar los eventos

Los estudiantes:
En determinados escenarios, enumerarn
los eventos que ocurrirn y el orden en
que se producirn
Tiempo: 5 minutos
Gestin de los eventos Page.IsPostback

Page_Load se invoca en cada solicitud


Utilizar Page.IsPostBack para ejecutar lgica condicional
private void Page_Load(object sender, System.EventArgs e)
{ if (!Page.IsPostBack)
{
// executes only on initial page load
}
//this code executes on every request
}

Private Sub Page_Load(ByVal s As System.Object, _


ByVal e As System.EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
'executes only on initial page load
End If
'this code executes on every request
End Sub
Page.IsPostBack evita la recarga en cada postback
Vnculo de dos controles

Vincular un control con otro resulta til para obtener


valores de cuadros de lista o listas desplegables
<asp:DropDownList id="lstOccupation"
autoPostBack="True" runat="server" >
You selected: <asp:Label id="lblSelectedValue"
Text="<%# lstOccupation.SelectedItem.Text %>"
runat="server" />

Enlace de datos
private void Page_Load(object sender, System.EventArgs e)
{
lblSelectedValue.DataBind();
}

Sub Page_Load(s As Object, e As EventArgs) Handles MyBase.Load


lblSelectedValue.DataBind()
End Sub
Demostracin: vincular controles

Vincular un control Label a un control ListBox