4. Agregar Codigo A Los Formularios Web Form

6,754 views
6,537 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
6,754
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
149
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

4. Agregar Codigo A Los Formularios Web Form

  1. 1. Agregar código a un formulario Web Form con Microsoft ASP.NET
  2. 2. Descripción <ul><li>Uso de las páginas de código subyacente </li></ul><ul><li>Agregar procedimientos de evento a controles de servidor Web </li></ul><ul><li>Uso de eventos de página </li></ul>
  3. 3. Lección: uso de las páginas de código subyacente <ul><li>Cómo implementar código </li></ul><ul><li>Escribir código en línea </li></ul><ul><li>¿Qué son las páginas de código subyacente? </li></ul><ul><li>Entender cómo funcionan las páginas de código subyacente </li></ul>
  4. 4. Cómo implementar código <ul><li>Tres métodos para agregar código: </li></ul><ul><ul><li>Ubicar el código en el mismo archivo que el contenido (mezclado) </li></ul></ul><ul><ul><li>Ubicar el código en una sección distinta del archivo de contenido (código en línea ) </li></ul></ul><ul><ul><li>Ubicar el código en un archivo distinto (páginas de código subyacente) </li></ul></ul><ul><li>Las páginas de código subyacente son el método predeterminado de Visual Studio .NET </li></ul>
  5. 5. Escribir código en línea <ul><li>Código y contenido en el mismo archivo </li></ul><ul><li>Distintas secciones en el archivo para el código y HTML </li></ul><HTML> <asp:Button id=&quot;btn&quot; runat=&quot;server&quot;/> </HTML> <SCRIPT Language=&quot;vb&quot; runat=&quot;server&quot;> Sub btn_Click(s As Object, e As EventArgs) Handles btn.Click ... End Sub </SCRIPT> <HTML> <asp:Button id=&quot;btn&quot; runat=&quot;server&quot;/> </HTML> <SCRIPT Language=&quot;c#&quot; runat=&quot;server&quot;> private void btn_Click(object sender, System.EventArgs e) { . . . } </SCRIPT>
  6. 6. ¿Qué son las páginas de código subyacente? <ul><li>Separación de código y contenido </li></ul><ul><ul><li>Los desarrolladores y los diseñadores de la interfaz de usuario pueden trabajar independientemente </li></ul></ul>Form1.aspx Form1.aspx Form1.aspx.vb o Form1.aspx.cs <tags> <tags> código código Archivos distintos Un archivo
  7. 7. Cómo funcionan las páginas de código subyacente <ul><li>Crean archivos distintos para la interfaz de usuario y la lógica de la interfaz </li></ul><ul><li>Utilizan la directiva @ Page para enlazar los dos archivos </li></ul><ul><li>Pre-compilación o compilación JIT </li></ul>Page1.aspx <% @ Page Language=&quot;c#&quot; Inherits=&quot;Project.WebForm1&quot; Codebehind=&quot;Page1.aspx.cs&quot; Src = &quot;Page1.aspx.cs&quot; %> Page1.aspx.cs public class WebForm1 { private void cmd1_Click() { … } }
  8. 8. Lección: agregar procedimientos de evento a controles de servidor Web <ul><li>¿Qué son los procedimientos de evento? </li></ul><ul><li>Demostración: uso de eventos </li></ul><ul><li>Procedimientos de evento en el lado del cliente </li></ul><ul><li>Procedimientos de evento en el lado del servidor </li></ul><ul><li>Multimedia: eventos en el lado del cliente y en el lado del servidor </li></ul><ul><li>Crear procedimientos de evento </li></ul><ul><li>Práctica dirigida por el profesor: crear un procedimiento de evento </li></ul><ul><li>Interactuar con controles en procedimientos de evento </li></ul>
  9. 9. ¿Qué son los procedimientos de evento? <ul><li>Acciones en respuesta a la interacción de un usuario con los controles de la página </li></ul>
  10. 10. Demostración: uso de eventos <ul><li>Abrir una página ASP.NET con controles y procedimientos de evento en el lado del cliente y en el lado del servidor </li></ul><ul><li>Hacer clic en los controles para visualizar la ejecución de los eventos en el lado del cliente y en el lado del servidor </li></ul><ul><li>En el explorador, visualizar el código fuente de la página </li></ul><ul><li>En el editor, visualizar el código del procedimiento de evento </li></ul>
  11. 11. Procedimientos de evento en el lado del cliente Internet Páginas .HTM <ul><li>Normalmente, se utilizan únicamente con controles HTML </li></ul><ul><li>Interpretado por el navegador y se ejecuta en el cliente </li></ul><ul><li>No tiene acceso a los recursos del servidor </li></ul><ul><li>Utiliza <SCRIPT language=&quot; lenguaje &quot;> </li></ul>
  12. 12. Procedimientos de evento en el lado del servidor <ul><li>Utilizados tanto con controles de servidor Web como HTML </li></ul><ul><li>El código se compila y ejecuta en el servidor </li></ul><ul><li>Tienen acceso a recursos del servidor </li></ul><ul><li>Utilizan <SCRIPT language=&quot;vb&quot; runat=&quot;server&quot;> o <SCRIPT language=“cs&quot; runat=&quot;server&quot;> </li></ul>Internet .Páginas .ASPX
  13. 13. Multimedia: eventos en el lado del cliente y en el lado del servidor
  14. 14. Crear procedimientos de evento <ul><li>Visual Studio .NET declara variables y crea una plantilla de procedimiento de evento </li></ul><ul><li>El uso de la palabra clave Handles agrega a un evento varios procedimientos de evento </li></ul>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.Button Private Sub cmd1_Click(ByVal s As System.Object, _ ByVal e As System.EventArgs) Handles cmd1.Click
  15. 15. Práctica dirigida por el profesor: crear un procedimiento de evento <ul><li>Crear un formulario Web Form utilizando Visual Studio .NET </li></ul><ul><li>Agregar controles al formulario Web Form </li></ul><ul><li>Hacer doble clic en uno o más controles para agregar procedimientos de evento </li></ul><ul><li>Generar y examinar </li></ul>
  16. 16. Interactuar con controles en procedimientos de evento <ul><li>Leer las propiedades de los controles de servidor Web </li></ul><ul><li>Respuestas de salida a otros controles de servidor Web </li></ul>lblGreeting.Text = &quot;new text&quot; strGreeting = &quot;Hello &quot; & txtName.Text strGreeting = &quot;Hello &quot; + txtName.Text; lblGreeting.Text = &quot;new text&quot;;
  17. 17. Lección: uso de los eventos de página <ul><li>Ciclo de vida de un evento de página </li></ul><ul><li>Multimedia: el proceso PostBack </li></ul><ul><li>Demostración: gestionar eventos </li></ul><ul><li>Práctica: ordenar los eventos </li></ul><ul><li>Gestión de los eventos Page.IsPostback </li></ul><ul><li>Vínculo de dos controles </li></ul><ul><li>Demostración: vincular controles </li></ul>
  18. 18. Ciclo de vida de los eventos de página <ul><li>La página se gestiona </li></ul>Page_Load Page_Unload Textbox1_Changed Button1_Click Page_Init Eventos control Eventos de cambio Eventos de acción
  19. 19. Multimedia: el proceso de postback
  20. 20. Demostración: gestionar eventos
  21. 21. Práctica: ordenar los eventos <ul><li>Los estudiantes: </li></ul><ul><ul><li>En determinados escenarios, enumerarán los eventos que ocurrirán y el orden en que se producirán </li></ul></ul><ul><li>Tiempo: 5 minutos </li></ul>
  22. 22. Gestión de los eventos Page.IsPostback <ul><li>Page_Load se invoca en cada solicitud </li></ul><ul><ul><li>Utilizar Page.IsPostBack para ejecutar lógica condicional </li></ul></ul><ul><ul><li>Page.IsPostBack evita la recarga en cada postback </li></ul></ul>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 private void Page_Load(object sender, System.EventArgs e) { if (!Page.IsPostBack) { // executes only on initial page load } //this code executes on every request }
  23. 23. Vínculo de dos controles <ul><li>Vincular un control con otro resulta útil para obtener valores de cuadros de lista o listas desplegables </li></ul><ul><li>Enlace de datos </li></ul><asp:DropDownList id=&quot;lstOccupation&quot; autoPostBack=&quot;True&quot; runat=&quot;server&quot; > You selected: <asp:Label id=&quot;lblSelectedValue&quot; Text=&quot; <%# lstOccupation.SelectedItem.Text %> &quot; runat=&quot;server&quot; /> 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
  24. 24. Demostración: vincular controles <ul><li>Vincular un control Label a un control ListBox </li></ul>

×