Agregar código a un formulario Web Form con Microsoft ASP.NET.

24
Agregar código a un formulario Web Form con Microsoft ASP.NET

Transcript of Agregar código a un formulario Web Form con Microsoft ASP.NET.

Page 1: Agregar código a un formulario Web Form con Microsoft ASP.NET.

Agregar código a un formulario Web Form

con Microsoft ASP.NET

Page 2: 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

Page 3: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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

Page 4: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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

Page 5: Agregar código a un formulario Web Form con Microsoft ASP.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>

Page 6: Agregar código a un formulario Web Form con Microsoft ASP.NET.

¿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

Page 7: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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() { … } }

Page 8: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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

Page 9: Agregar código a un formulario Web Form con Microsoft ASP.NET.

¿Qué son los procedimientos de evento?

Acciones en respuesta a la interacción de un usuario con los controles de la página

Page 10: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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

Page 11: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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">

Page 12: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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

Page 13: Agregar código a un formulario Web Form con Microsoft ASP.NET.

Multimedia: eventos en el lado del cliente y en el lado del servidor

Page 14: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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

Page 15: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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

Page 16: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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";

Page 17: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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

Page 18: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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

Page 19: Agregar código a un formulario Web Form con Microsoft ASP.NET.

Multimedia: el proceso de postback

Page 20: Agregar código a un formulario Web Form con Microsoft ASP.NET.

Demostración: gestionar eventos

Page 21: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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

Page 22: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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}

Page 23: Agregar código a un formulario Web Form con Microsoft ASP.NET.

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

Page 24: Agregar código a un formulario Web Form con Microsoft ASP.NET.

Demostración: vincular controles

Vincular un control Label a un control ListBox