Uso de controles de Servidor
· ¿Qué es un control de servidor?
· Tipos de controles de servidor
· Guardar View State
· Demostración: convertir controles HTML en controles de servidor
· Controles de servidor HTML
· Controles de servidor Web
· Práctica: identificar el código HTML generado por los controles de servidor Web
· Seleccionar el control adecuado
· Demostración: agregar controles de servidor a un formulario Web
¿Qué es un control de servidor?
A) Runat="server"
B) Los eventos ocurren en el servidor
C) View state saved
D) Have built-in functionality
E) Common object model
F) Todos tiene atributos Id y Text
G) Crear browser-specific HTML
El siguiente ejemplo es el de un control de servidor Button: <asp: Button id="Button1" runat="server" Text="Submit" />
Runat=“server”
Los controles de servidor tienen un atributo runat="server", el mismo atributo que los formularios Web Forms. Esto significa que la lógica del control se ejecuta en el servidor y no en el navegador del usuario. Los controles de servidor se diferencian de los controles HTML en que éstos últimos únicamente se ejecutan en el navegador del cliente y no realizan ninguna acción en el servidor.
Otra característica de los controles de servidor es que el estado de la vista, las opciones de configuración y la entrada de datos de usuario en el control se guardan automáticamente cuando la página viaja entre el cliente y el servidor. Los controles HTML tradicionales no tienen estado y vuelven a su configuración predeterminada cuando la página retorna del servidor al cliente.
Funcionalidad incluida
La funcionalidad de un control es lo que se produce cuando el usuario hace clic en un botón o en un cuadro de lista. A estos procesos se denominan procedimientos de eventos. Como programadores del formulario Web Form, debemos determinar los procedimientos de eventos asociados a cada control de servidor.
Modelo de objetos común
En ASP.NET, los controles de servidor se basan en un modelo de objetos común, y por tanto, comparten varios atributos entre sí. Por ejemplo, cuando deseamos establecer el color de fondo de un control, siempre utilizamos el mismo atributo BackColor, independientemente del control. El código HTML siguiente del botón de un control de servidor Web muestra algunos de los atributos típicos de un control de servidor:
<asp: Button id="Button1" runat="server" BackColor="red"
Width="238px" Height="25px" Text="Web control"></asp: Button>
Crear código HTML específico del navegador
Cuando un navegador interpreta una página, los controles de servidor Web determinan el tipo de navegador que solicita la página, y envía el código HTML adecuado.
Por ejemplo, si el navegador soporta scripting de cliente, como Internet Explorer versión 4.0 o posterior, los controles generan scripts de cliente para implementar su funcionalidad. Sin embargo, si el navegador no soporta scripting de cliente, los controles crean código del lado del servidor y requieren más viajes de ida y vuelta al servidor para obtener el mismo comportamiento.
El siguiente ejemplo es el código HTML de ASP.NET en un formulario Web Form que deberíamos escribir para crear un cuadro de texto con el texto predeterminado: "Introduzca su nombre de usuario"
<asp: Textbox id="TextBox1" runat="server" Width="238px"
Height="25px">Introduzca su nombre de usuario</asp: TextBox>
Cuando un usuario con Internet Explorer 6 accede a esta página, el CLR crea el siguiente código HTML personalizado para Internet Explorer 6:
<input name="TextBox1" type="text" value="Introduzca su nombre de usuario" id="TextBox1" style="height: 25px;width:238px" />
Como el control de servidor crea código HTML personalizado en función de las características disponibles en el navegador del cliente, podemos escribir código para las últimas versiones de navegadores sin tener que preocuparnos de que los usuarios que no estén actualizados puedan ser bloqueados por errores del navegador.
Tipos de controles de servidor
· Controles de servidor HTML
· Controles de servidor Web
· Controles intrínsecos
· Controles de validación
· Controles ricos
· Controles List-bound
· Controles Web de Internet Explorer
Controles de servidor HTML
Por defecto, el servidor no tiene disponibles los elementos HTML de una página de un formulario Web Form; los elementos HTML son tratados como texto opaco que pasa a través del navegador. Sin embargo, al agregar el atributo runat="server" se convierten los elementos HTML en controles de servidor HTML, exponiéndolos por tanto como elementos que podemos programar con código del lado del servidor.
Controles de servidor Web
Los controles de servidor Web no sólo incluyen controles de tipo formulario, como botones y cuadros de texto, sino también controles con funcionalidad especial, como el control calendario. Los controles de servidor Web son más abstractos que los controles de servidor HTML, porque su modelo de objetos no refleja necesariamente la sintaxis HTML.
Los controles de servidor Web se clasifican como:
A) Controles intrínsecos
Los controles intrínsecos concuerdan con los sencillos elementos HTML, como botones o cajas de listas. Utilizamos estos controles del mismo modo que utilizamos los controles de servidor HTML.
B) Controles de validación
Los controles de validación incorporan lógica que permite verificar la entrada de datos de un usuario. Para probar la entrada de un usuario, adjuntamos un control de validación al control de entrada
Módulo “Validar la entrada de datos de usuario”.
A) Controles ricos estándar
Los controles estándar son controles complejos que incluyen múltiples funciones. Ejemplos de controles estándar incluyen el control AdRotator, que se utiliza para mostrar una secuencia de anuncios o el control Calendar, que proporciona un calendario de citas.
B) Controles enlazados a listas
Los controles enlazados a listas pueden mostrar listas de datos en una página ASP.NET. Estos controles nos permiten mostrar, reformatear, Vclasificar y editar datos.
C) Controles Web de Internet Explorer
Los controles Web de Internet Explorer son un conjunto de controles complejos, como MultiPage, TabStrip, Toolbar y TreeView, que pueden descargarse desde Internet e integrarse en el entorno de Visual Studio .NET para ser reutilizados en cualquier aplicación Web con ASP.NET. Estos controles pueden ser interpretados en todos los navegadores utilizados habitualmente, y al mismo tiempo aprovechan las potentes características soportadas por las versiones de Internet Explorer 5.5 o superior. Podemos descargar estos controles desde:
http://msdn.microsoft.com/library/default.asp?url=/workshop/webcontrols/o verview/overview.asp.
Ejemplo de controles equivalentes
Este ejemplo muestra el código HTML de tres controles de tipo botón: un botón HTML, un botón de control de servidor HTML y un botón de control de servidor Web. Todos los controles botón parecen idénticos en el navegador del usuario. El botón HTML únicamente puede invocar eventos del lado del cliente, mientras que el botón de control de servidor HTML y el botón de control de servidor Web producen eventos del lado del servidor.
A) El siguiente es el código de un control de botón HTML:
<INPUT type="button" value="HTML Button">
B) Si agregamos el atributo runat="server" el control de botón HTML anterior se convierte en un control de servidor HTML que se ejecutará en el servidor. Además del atributo runat="server", también debemos agregar un atributo id para que el control funcione como un control de servidor.
El botón de control de servidor HTML se muestra en el siguiente ejemplo:
<INPUT type="button" value="HTML Server Control"
id="button1" runat="server">
C) El botón de control de servidor Web utiliza código HTML de ASP.NET:
<asp: Button id="Button1" runat="server" Text="Web control"/>
Guardar el estado de la vista
A) Control oculto ViewState de pares de nombre y valor almacenados en el formulario Web Form
B) De forma predeterminada, ajustable a nivel de formulario Web Form y control
Control oculto
El control _VIEWSTATE es un control oculto que contiene el valor de una cadena de pares nombre-valor que lista el nombre de cada control y el último valor de ese control.
Con cada petición, el control _VIEWSTATE se actualiza y se envía al servidor. La respuesta del servidor puede a su vez actualizar el control _VIEWSTATE, que se devuelve con la respuesta. El resultado es que la configuración de la página permanece coherente de una solicitud a la siguiente.
El siguiente ejemplo incluye el código HTML generado por un formulario Web Form y enviado al cliente:
<form name="Form1" method="post" action="WebForm1.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" value="dDw3NzE0MTExODQ7Oz4=" />
</form>
Deshabilitar y habilitar ViewState
De forma predeterminada, un formulario Web Form guarda el estado de la vista de los controles en el formulario Web Form. Para formularios Web Forms con múltiples controles, el tamaño del campo valor de las propiedades _VIEWSTATE puede ralentizar el rendimiento. Para maximizar el rendimiento de la página, podemos deshabilitar el atributo ViewState a nivel de página y habilitar ViewState únicamente para determinados controles.
Para deshabilitar el almacenamiento del estado de la vista a nivel de página Web, estableceremos el atributo EnableViewState de la directiva @Page, como se muestra en el siguiente código:
<%@ Page EnableViewState="False" %>
Para habilitar el almacenamiento del estado de la vista de un control específico, estableceremos el atributo EnableViewState del control, como se muestra en el siguiente código:
<asp:ListBox id="ListName" EnableViewState="true"
runat="server"></asp: ListBox>
Convertir controles HTML en controles de servidor
· Actualizar controles HTML a controles de servidor HTML
· Agregar un control de servidor Web
· Utilizar SmartNavigation
Visual Studio .NET facilita la conversión de controles HTML en controles de servidor.
A) Ejecutar esta demostración
1. Visualizar la página HTMLPage.aspx que convertimos de una página HTML en la demostración anterior, en la vista HTML, y agregar un atributo runat="server" a los controles de cuadro de texto, selección y el de envío.
2. Hacer clic en Guardar para guardar el proyecto.
3. Visualizar la página HTMLPage.aspx en el navegador haciendo clic con el botón derecho en la página en el Explorador de soluciones y haciendo clic en Visualizar en el navegador. No es necesario volver a generar el proyecto, ya que no se ha cambiado el código.
4. Visualizar el código fuente de la página para mostrar los cambios realizados. Se ha agregado un atributo name a cada control de servidor.
5. Cerrar la vista del código fuente HTML en el navegador.
6. En el navegador, introducir información en los controles, y hacer clic en Guardar. Los controles todavía pierden sus valores.
7. Editar la página y agregar un atributo runat="server" al formulario.
8. Guardar los cambios y visualizar la página de nuevo en el navegador. No es necesario volver a generar el proyecto ya que no se ha agregado ningún código.
9. Visualizar el código fuente de la página para mostrar los cambios realizados. Entre otros cambios, se han agregado los atributos action y method a la etiqueta del formulario y se ha creado un control oculto denominado __VIEWSTATE.
10. Cerrar la vista del código fuente HTML en el navegador.
11. Introducir información en los controles y hacer clic en Guardar. Ahora, los controles guardan sus valores.
Agregar una etiqueta al formulario Web Form
12. Editar la página y agregar un control de servidor Web Label al formulario Web Form, debajo del botón Guardar:
<asp: label id="lblMessage" runat="server">Label</asp: label>
13. Guardar los cambios y visualizar la página en el navegador.
14. Visualizar el código fuente de la página. El control de servidor Web Label genera un elemento <span>.
15. Cerrar la vista del código fuente HTML en el navegador.
Uso de SmartNavigation
16. Visualizar la página http://localhost/Demos03/HTMLPage.aspx en Internet Explorer y modificar el tamaño del navegador para que muestre verticalmente menos que la página completa. La barra de desplazamiento vertical debería estar visible.
17. Desplazarse hacia abajo y hacer clic en Guardar. Seremos redirigidos a la parte superior de la página debido al postback.
18. Cerrar el navegador.
19. Editar la página en la vista HTML y agregar SmartNavigation= "true" a la directiva @ Page.
El código HTML debería ser parecido al siguiente:
Visual Basic .NET
<%@ Page SmartNavigation="true" Language="vb"
CodeBehind="HTMLPage.aspx.vb" AutoEventWireup="false"
Inherits="Mod04.HTMLPage" %>
C#
<%@ Page SmartNavigation="true" Language="c#"
CodeBehind="HTMLPage.aspx.cs" AutoEventWireup="false"
Inherits="Mod04.HTMLPage" %>
20. Guardar los cambios y visualizar la página en otro navegador cuyo tamaño se haya modificado.
21. Desplazarse hacia abajo y hacer clic en Guardar. Esta vez, no somos redireccionados a la parte superior de la página durante el postback, la página mantiene su posición actual.
22. Visualizar el código fuente de la página en el navegador. En Internet Explorer 4.0 y posterior, el atributo SmartNavigation crea IFrames para actualizar únicamente la parte modificada de la página.
23. Cerrar la vista del código fuente HTML en el navegador.
Controles de servidor HTML
Ejemplo
El siguiente código de ejemplo muestra un sencillo cuadro de texto HTML que
el navegador procesa en el lado del cliente:
<input type="text" id="txtName" >
Si agregamos el atributo runat="server", el control se convierte en un control
de servidor HTML que ASP.NET procesa en el lado del servidor:
<input type="text" id="txtName" runat="server" />
Controles de servidor Web
Los controles de servidor Web son controles de servidor creados específicamente para ASP.NET. A diferencia de los controles de servidor
HTML, los controles de servidor Web no funcionarán si falta el atributo
runat="server".
Los controles de servidor Web se basan en un modelo de objetos común; por ello, todos los controles comparten varios atributos, incluyendo la etiqueta
<asp: TipoControl...>, y un atributo id. Los controles de servidor Web existen
en el espacio de nombres System.Web.UI.WebControls y pueden utilizarse en
cualquier formulario Web Form.
Controles de servidor Web intrínsecos
Los controles de servidor Web intrínsecos corresponden a elementos HTML simples. La siguiente tabla muestra algunos de los controles de servidor Web
intrínsecos utilizados más habitualmente.
Controles de validación
Los controles de validación son controles ocultos que validan la entrada de datos del usuario comparándolos con patrones predeterminados. La siguiente
tabla muestra algunos de los controles de validación que se utilizan más habitualmente.
Controles ricos Estándares
Los controles estándares proporcionan una rica funcionalidad a nuestro formulario Web Form insertando funciones complejas. La siguiente tabla muestra los controles ricos disponibles actualmente.
Controles enlazados a Listas
Los controles enlazados a listas pueden mostrar datos desde una fuente de datos. La siguiente tabla muestra algunos de los controles de lista que se utilizan habitualmente.
