Download - 4. Agregar Codigo A Los Formularios Web Form
![Page 1: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/1.jpg)
Agregar código a un formulario Web Form
con Microsoft ASP.NET
![Page 2: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/2.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/3.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/4.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/5.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/6.jpg)
¿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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/7.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/8.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/9.jpg)
¿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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/10.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/11.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/12.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/13.jpg)
Multimedia: eventos en el lado del cliente y en el lado del servidor
![Page 14: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/14.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/15.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/16.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/17.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/18.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/19.jpg)
Multimedia: el proceso de postback
![Page 20: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/20.jpg)
Demostración: gestionar eventos
![Page 21: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/21.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/22.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/23.jpg)
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: 4. Agregar Codigo A Los Formularios Web Form](https://reader034.vdocuments.co/reader034/viewer/2022052303/5479c0f6b4af9fce158b48ca/html5/thumbnails/24.jpg)
Demostración: vincular controles
Vincular un control Label a un control ListBox