Post on 11-Jan-2015
Agregar código a un formulario Web Form
con Microsoft ASP.NET
Descripción
Uso de las páginas de código subyacente
Agregar procedimientos de evento a controles de servidor Web
Uso de eventos de página
Lección: uso de las páginas de código subyacente
Cómo implementar código
Escribir código en línea
¿Qué son las páginas de código subyacente?
Entender cómo funcionan las páginas de código subyacente
Cómo implementar código
Tres métodos para agregar código:
Ubicar el código en el mismo archivo que el contenido (mezclado)
Ubicar el código en una sección distinta del archivo de contenido (código en línea )
Ubicar el código en un archivo distinto (páginas de código subyacente)
Las páginas de código subyacente son el método predeterminado de Visual Studio .NET
Escribir código en línea
Código y contenido en el mismo archivo
Distintas secciones en el archivo para el código 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="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>
<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 páginas de código subyacente?
Separación de código y contenido
Los desarrolladores y los diseñadores de la interfaz de usuario pueden trabajar independientemente
Form1.aspxForm1.aspx Form1.aspxForm1.aspx Form1.aspx.vbForm1.aspx.vbo Form1.aspx.cso Form1.aspx.cs
<tags><tags> códigocódigo
códigocódigo
Archivos distintosUn archivo
Cómo funcionan las páginas de código subyacente
Crean archivos distintos para la interfaz de usuario y la lógica de la interfaz
Utilizan la directiva @ Page para enlazar los dos archivos
Pre-compilación o compilación JIT
Page1.aspx
<% @ Page Language="c#"Inherits="Project.WebForm1" Codebehind="Page1.aspx.cs" Src = "Page1.aspx.cs" %>
Page1.aspx.cs public class WebForm1 { private void cmd1_Click() { … } }
Lección: agregar procedimientos de evento a controles de servidor Web
¿Qué son los procedimientos de evento?
Demostración: 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
Práctica 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 interacción de un usuario con los controles de la página
Demostración: uso de eventos
Abrir una página 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 ejecución de los eventos en el lado del cliente y en el lado del servidor
En el explorador, visualizar el código fuente de la página
En el editor, visualizar el código del procedimiento de evento
Procedimientos de evento en el lado del cliente
Internet Páginas .HTM
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">
Procedimientos de evento en el lado del servidor
Utilizados tanto con controles de servidor Web como HTML
El código 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">
Internet.Páginas .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
El uso de la palabra clave Handles agrega a un evento varios procedimientos de evento
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)
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)
Protected WithEvents cmd1 As System.Web.UI.WebControls.ButtonPrivate Sub cmd1_Click(ByVal s As System.Object, _
ByVal e As System.EventArgs) Handles cmd1.Click
Protected WithEvents cmd1 As System.Web.UI.WebControls.ButtonPrivate Sub cmd1_Click(ByVal s As System.Object, _
ByVal e As System.EventArgs) Handles cmd1.Click
Práctica 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 más 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
Respuestas de salida a otros controles de servidor Web
lblGreeting.Text = "new text"lblGreeting.Text = "new text"
strGreeting = "Hello " & txtName.TextstrGreeting = "Hello " & txtName.Text
strGreeting = "Hello " + txtName.Text;strGreeting = "Hello " + txtName.Text;
lblGreeting.Text = "new text";lblGreeting.Text = "new text";
Lección: uso de los eventos de página
Ciclo de vida de un evento de página
Multimedia: el proceso PostBack
Demostración: gestionar eventos
Práctica: ordenar los eventos
Gestión de los eventos Page.IsPostback
Vínculo de dos controles
Demostración: vincular controles
Ciclo de vida de los eventos de página
Page_LoadPage_Load
Page_UnloadPage_Unload
Textbox1_ChangedTextbox1_Changed
Button1_ClickButton1_Click
La página se gestiona
Page_InitPage_Init
Eventos Eventos controlcontrol
Eventos de cambioEventos de cambio
Eventos de acciónEventos de acción
Multimedia: el proceso de postback
Demostración: gestionar eventos
Práctica: ordenar los eventos
Los estudiantes:
En determinados escenarios, enumerarán los eventos que ocurrirán y el orden en que se producirán
Tiempo: 5 minutos
Gestión de los eventos Page.IsPostback
Page_Load se invoca en cada solicitud
Utilizar Page.IsPostBack para ejecutar lógica condicional
Page.IsPostBack evita la recarga en cada postback
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 requestEnd Sub
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 requestEnd Sub
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 void Page_Load(object sender, System.EventArgs e){ if (!Page.IsPostBack)
{ // executes only on initial page load}
//this code executes on every request}
Vínculo de dos controles
Vincular un control con otro resulta útil para obtener valores de cuadros de lista o listas desplegables
Enlace de datos
<asp:DropDownList id="lstOccupation" autoPostBack="True" runat="server" >You selected: <asp:Label id="lblSelectedValue" Text="<%# lstOccupation.SelectedItem.Text %>" runat="server" />
<asp:DropDownList id="lstOccupation" autoPostBack="True" runat="server" >You selected: <asp:Label id="lblSelectedValue" Text="<%# lstOccupation.SelectedItem.Text %>" runat="server" />
private void Page_Load(object sender, System.EventArgs e){ lblSelectedValue.DataBind();}
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
Sub Page_Load(s As Object, e As EventArgs) Handles MyBase.Load lblSelectedValue.DataBind()End Sub
Demostración: vincular controles
Vincular un control Label a un control ListBox