formularios web - programacioniiiutn
Anuncio
FORMULARIOS WEB 1.- Qué es un Formulario Web? Un formulario Web consiste en la combinación de HTML, código y controles que se ejecutan sobre un Servidor Web que tiene corriendo a Microsoft Internet Information Services (IIS). Los Formularios Web muestran una Interfaz de usuario mediante la generación de HTML que será enviado al navegador, mientras el código y los controles que generaron esa interfaz de usuario se encuentran en el servidor Web. Esta separación entre interfaz de usuario del lado del cliente y código del lado del servidor es la diferencia mas significativa de Formularios Web y las páginas Web tradicionales. Una página Web tradicional requiere que todo el código sea enviado y sea procesado por el navegador, los Formularios Web solo requieren que se envie al navegador controles de interfaz de usuario, manteniendo el proceso de la página sobre el servidor. Esta separación de Interfaz de Usuario y código incrementa el número de navegadores que soportan el código, mientras se incrementa la seguridad y la funcionalidad de las páginas Web. La extensión .aspx Los Formularios Web son comúnmente referenciados como páginas ASP.NET o páginas ASPX. Los Formularios Web tienen la extensión .aspx y trabajan como contenedores del texto y los controles que se quiere mostrar en el navegador. Las páginas ASP.NET (.aspx) y las Active Server Pages (ASP) (.asp) pueden coexistir sobre el mismo servidor. La extensión determina cuando se procesa una página ASP o una ASP.NET Los Formularios Web generalmente se componen de dos archivos: los archivos .aspx que contienen la interfaz de usuario y el llamado code-behind .aspx.cs que contiene el código de soporte. Atributos de Página La funcionalidad de un Formulario Web está definida por tres niveles de atributos. Los atributos de página que definen funciones globales, los atributos de cuerpo (body) que definen como la página va ha ser mostrada, y los atributos de formulario que definen como serán mostrados el grupo de controles que serán procesados. El tag <@ Page> define los atributos específicos de página que son usados por el parser de ASP.NET y por el compilador. Solo se puede incluir un tag <@ Page> por archivo .aspx. El siguiente es un típico tag <@ Page>: <%@ Page Language="vb" Codebehind="WebForm1.aspx.vb" SmartNavigation="true" %> Los atributos de un tag <@ Page> son: Language: El atributo Language define el lenguaje en el cual es escrito la página Web. Algunos valores de este atributo son: vb, csharp, y JScript. Codebehind El atributo Codebehind identifica la página code-behind que tiene la lógica que soporta el Formulario Web. Cuando Visual Studio .NET crea un Formulario Web, como WebForm1.aspx, este tambien crea una página de code-behind WebForm1.aspx.vb. SmartNavigation El atributo SmartNavigation en ASP.NET permite al navegador refrescar solo la sección del Formulario Web que cambio. La ventaja de Smart Navigation es que la pantalla no parpadea cuando se actualiza; en lugar de eso, la posición de las barras de scroll es mantenida asi como solo la última página histórica. Smart Navigation solo es disponible para los usuarios de Microsoft Internet Explorer 5 o superior. Atributos Body (2005) El tag <body> define la apariencia de los objetos que se muestran en el browser del cliente. El siguiente es un típico tag <body> <body ms_positioning="GridLayout"> Los atributos de el tag <body> incluyen: PageLayout: El atributo pageLayout (etiquetado como ms_positioning) determina como son posesionados los controles y el texto sobre la página. Hay dos opciones para el pageLayout: FlowLayout: En FlowLayout el texto, las imágenes y los controles se distribuyen en la pantalla dependiendo del ancho de la ventana del navegador. GridLayout: En GridLayout, el texto, las imágenes y los controles sobre la página, son fijados por coordenadas absolutas. El GridLayout es el pageLayout por defecto en Visual Studio .NET. El siguiente código muestra un ejemplo de como se implementa el GridLayout para localizar un text box: 1 <body ms_positioning="GridLayout"> <form id="Form1" method="post" runat="server"> <asp:textbox id="txtField1" style="Z-INDEX: 101; LEFT: 65px; POSITION: absolute; TOP: 98px" runat="server" Height="26px" Width="194px"> </asp:textbox> </form> </body> Atributos de Formulario El tag <form> define como serán procesados grupos de controles. El tag <form> es diferente que el Formulario Web actual que es usado para definir la página Web entera. El atributo <form> define como los controles serán procesados. Se puede tener varios formularios HTML sobre la página, pero solo se puede tener un formualrio server-side en una página .aspx. El siguiente es un típico tag <form>: <form id="Form1" method="post" runat="server"> ... </form> Los atributos del tag <form> incluyen: Method El atributo Method identifica el método para enviar valores de los controles de vuelta al servidor. Las opciones para este atributo son: Post: Los datos son pasados en pares nombre/valor dentro el cuerpo de la petición HTTP (Hypertext Transfer Protocol). Get: Los datos son pasados en una cadena de consulta (query string). Runat Una característica clave de un formulario es que el control de ejecución se realiza en el servidor. El atributo runat="server" causa el envío de la información de ejecución de la página ASP.NET vuelta al servidor donde el código de soporte se ejecuta. Si el atributo runat no es puesto a "server", el formulario trabaja como un formulario HTML común. Ejemplo Lo siguiente es el código por defecto para un Formulario Web en Visual Studio .NET que es creado para un nuevo proyecto de tipo ASP.NET Web Application: <%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>WebForm1</title> <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0"> <meta name="CODE_LANGUAGE" content="Visual Basic 7.0"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5> </head> <body MS_POSITIONING="GridLayout"> <form id="Form1""> method="post" runat="server"> 'HTML and controls go here </form> </body> </html> 2.- Creando un formulario Web con Visual Studio .NET Dependiendo de su ciclo de desarrollo, hay varias formas de crear un Formulario Web. Nueva aplicación Web Cuando usted crea un nuevo proyecto en Visual Studio .NET, automáticamente un Formulario Web es creado por defecto, con el nombre WebForm1.aspx. Para crear una nueva aplicación ASP.NET Web y un Fomulario Web: 1. En Visual Studio .Net, en el Start page, haga click sobre New Project. 2. En el cuadro de diálogo New Project, haga click sobre ASP.NET Web Application, introduzca el nombre en el campo Location, y luego presione OK. Visual Studio .NET creará una nueva Aplicación Web y con ella un Formulario Web. El formulario Web tendrá el nombre de WebForm1.aspx. Creación de Formularios Web adicionales Si usted quiere expandir un proyecto ya creado, puede hacerlo utilizando el Solution Explorer para añadir fácilmente Formularios Web a su proyecto. Para añadir Formularios Web adicionales a una aplicación Web 1. En el Solution Explorer, haga click derecho sobre el nombre del proyecto, apunte a Add, y luego haga click en Add Web Form. Un cuadro de diálogo titulado Add New Item – Nombre Proyecto aparecerá. 2. En el cuadro Add New Item – Nombre Proyecto, cambie el nombre del Formulario Web y luego haga click en Open. Un nuevo formulario será añadido al proyecto de aplicación Web. Actualizar páginas HTML Si quisiera actualizar un Web site existente, usted puede importar las páginas HTML a Visual Studio .NET y luego actualizarlas a Formularios Web. 3.- Qué es un Server Control? Estos controles son diferentes a los controles HTML porque su lógica se ejecuta en el servidor y no en el navegador del usuario. Los server control ASP.NET son componentes que se ejecutan sobre el servidor y encapsulan Interfaz de Usuario UI y otra funcionalidad relacionada. Los server controls son usados en las páginias ASP.NET y en las páginas de code-behind ASP.NET. Los server controls incluyen botones, text boxes, cuadros de lista desplegables. Tipos de Server Controls Hay numerosos tipos de sever controles que estan disponibles en ASP.NET. Algunos server controls se parecen mucho a los controles tradicionales HTML, mientras otros server controls son nuevos en ASP.NET. Este amplio rango de controles le permite personalizar sus Formularios Web para que hagan juego con sus aplicaciones que tiene creadas. HTML server controls Por defecto, los elementos HTML no estan disponibles en un Formulario Web; los elementos HTML son tratados como un texto opaco que es pasado a través del navegador. Sin embargo añadiendo, el atributo runat="server" se convierten los elementos HTML a HTML server controls, que exponen los elementos que permiten la programación del lado del servidor. Web server controls Los web server controls no solo incluyen un tipo de control como los botones y los text box, tambien incluyen controles para específicos propósitos como es un calendar. Los web server controls mas abstracto que los HTML server controls en los cuales su modelo de objeto no necesariamente refleja la sintaxis HTML. Los web server controls son clasificados de la siguiente forma: Controles de Validación Los controles de validación incorporan lógica que permite al usuario testear sus entradas. Para testear las entradas del usuario usted coloca un control de validación para el control de entrada y se especifica las condiciones para una correcta entrada de usuario. Controles Enriquecidos Los controles enriquecidos son controles complejos que inlcuyen múltiples funciones. Un ejemplo de estos controles es el control AdRotator, que es usado para mostrar una secuencia de publicidad, el control Calendar, que provee un calendario de fechas. Controles List-bound Los controles List-bound pueden mostrar una lista de datos sobre las páginas Web ASP.NET Web. Estos controles permiten que usted muestre, reformatee, ordene, y edite datos. Controles Web Internet Explorer Los controles Web Internet Explorer son un conjunto de controles complejos, como es el MultiPage, TabStrip, Toolbar y el control TreeView, que pueden ser descargados de Internet e integrados en el entorno de Visual Studio .NET para que pueden ser utilizados en cualquier página ASP.NET de una aplicación Web. Los controles Web Internet Explorer pueden ser dibujados en todos los navegadores comunmente usados sin embargo solo toman su poder ventajoso en Internet Explorer 5.5 o versiones superiores. Usted puede descargarlos en: http://msdn.microsoft.com/library/default.asp?url=/workshop /webcontrols/ overview/overview.asp 4.- GRABANDO ESTADO Uno de los problemas para cuando se configura un Web site es como hacer para salvar el estado de los controles (configuraciones y entradas de usuario) sobre la página Web en los viajes del HTML entre el servidor y el cliente. Esto es asi para cualquier tecnología basada en http, Los 3 formularios son libres de estado, lo cual significa que el servidor no retiene ninguna información entre las peticiones del cliente. Los Formularios Web ASP.NET manejan este problema mediante el almacenamiento del estado de los controles Web server añadiendo un control oculto ViewState llamado _VIEWSTATE, que graba el estado de los controles. Específicamente el control ViewState es añadido para los formularios server-side (del lado del servidor) cuando se coloca el siguiente tag <form … runat="server">, esto solo graba el estado de los controles que estan dentro de los tags <form …> </form>. Como la página viaja del servidor al cliente y del cliente al servidor, el estado del control Web server es mantenido con la página y puede ser actualizado en cualquier fin de transacción (en el cliente o en el servidor). Porque el estado de la página es mantenido junto con el formulario, la página puede ser encaminada aleatoriamente en una granja de servidores web y no necesita retornar al mismo servidor. La ventaja del control ViewState es que el programador puede enfocarse en el diseño de la páginai y no necesita construir la infraestructura para mantener un rastreo del estado de la página. Control oculto El control ViewState es un control oculto que contiene una cadena de pares de valores que listan el nombre de cada control y el último valor de este. Con cada petición el control ViewState es actualizado y enviado al servidor. La respuesta del servidor podría actualizar el control ViewState, cuya actualización sera retornada con la respuesta del servidor. El resultado es que la configuración de la página permanece consistente con los últimos cambios. Lo siguiente es el HTML que es generado por el Formulario Web y es enviado al cliente: <form name="Form1" method="post" action="WebForm1.aspx" id="Form1" runat="server" > <input type="hidden" name="__VIEWSTATE" value="dDw3NzE0MTExODQ7Oz4=" /> 'HTML here </form> Deshabilitación y habilitación del ViewState Por defecto un formulario Web almacena el estado de los controles sin embargo para un formulario con múltiples controles, el tamaño de los valores del control ViewState puede decrementar la performance. Para maximizar la performance de la página usted puede deshabilitar el ViewState a nivel página y habilitar el ViewState solo para algunos controles. Para deshabilitar el almacenamiento de estado a nivel página , ponga el atributo EnableViewState de la directiva @ Page, como se muestra en el siguiente código: <%@ Page EnableViewState="False" %> Para habilitar el almacenamiento de estado para un específico control, se pone el atributo EnableViewState del control como se muestra en el siguiente código: <asp:List id="ListName" EnableViewState="true" runat=" Controles Server HTML Los controles HTML en un Formulario Web no estan disponibles para el servidor. Convirtiendo los controles HTML a HTML server controls, usted puede exponer estos elementos a código del lado del servidor. Esta conversión le da la utilidad a los controles para lanzar eventos que seran manejados en el servidor. Los HTML server controls incluyen el atributo runat="server", y deben estar dentro del tag <form …runat="server">…</form>. La ventaja de los HTML server controls es que permiten fácilmente actualizar las páginas existentes a Formularios Web. Adicionalmente, usted puede optimizar la performance de una página seleccionando los controles que trabajaran localmente en el browser y los controles que seran procesados en el servidor. Controles Web Server Los Web server controls fueron creados específicamente para ASP.NET. A diferencia de los HTML server controls, Los Web server controls no funcionan si no esta el atributo runat="server". Como los Web server controls estan basados en un modelo de objetos común, todos los Web server controls comparten varios atributos, incluyendo el tags <asp:ControlType ...> y un atributo ID. Los Web server controls existen dentro del namespace System.Web.UI.WebControls y pueden ser usados por cualquier Formulario Web. Controles Web server intrínsecos Estos controles corresponden a elementos HTML. Algunos de los comunmente usados controles Web server son mostrados en la siguiente tabla. Validation controls Los controles de validación son controles ocultos que validan la entrada de usuario mediante un predefinido comportamiento. Algunos de los comunmente usados controles de validación son mostrados en la siguiente tabla. Control Función CompareValidator Requiere que las entradas hagan juego con una segunda entrada o con un campo de entrada existente. 5 CustomValidator Requiere que las entradas hagan juego con una condición especial como números primos o numeros pares. RangeValidator Requiere que las entradas esten en un rango determinado. RegularExpressionValidator Requiere que las entradas tengan un formato especifico como es el formato telefonico o un password con numeros y letras. RequiredFieldValidator Requiere que los usuarios introduzcan algun valor antes de pasar el control sea procesado. ValidationSummary Recolecta todos los mensajes de error de los controles de validación para mostrarlos en un lugar centralizado. Controles enriquecidos Los controles enriquecidos proveen una rica funcionalidad para sus Formularios Web insertando complejas funciones. Los controles enriquecidos actualmente disponibles son los que se muestran en la siguiente tabla. Control Función AdRotator Muestra una secuencia (predefinida o aleatoria) de imágenes. Calendar Muestra un calendario gráfico sobre el cual los usuarios pueden seleccionar fechas. Controles List-bound Los controles List-bound pueden mostrar datos de un origen de datos. Algunos de los comunmente usuados son los que se muestran en la siguiente tabla. Control Función CheckBoxList Muestra datos en una columna de check boxes. Repeater Muestra información de un conjutno de datos usando un conjunto de elementos HTML y controles especificados por usted. El control Repeater repite los elementos por cada uno de los registros en el conjunto de datos. DataList Similar al control Repeater, pero con mas opciones de formato y diseño, incluyendo la habilidad para mostrar información en tablas. El control DataList tambien permite especificar comportamiento de edición. DataGrid Muestra información que usualmente se liga a un formato tabular con columnas permitiendo la edición y la ordenación. DropDownList Muestra datos en una lista desplegable. Listbox Muestra datos en una ventana. RadioButtonList Muestra datos en una columna de radio buttons. Seleccionar el adecuado Cuando crea una página ASP.NET, usted tiene la opción de usar controles HTML server o controles Web server. Usted puede mezclar controles de diferente tipo en la misma página esto permite fácilmente actualizar las páginas HTML. Un ejemplo de esta mezcla de controles podrían incluir elementos span HTML que liste la hora local, un control HTML server botón convertido a partir de un elemento HTML, y un control Web server text box que accede a datos en el servidor. La mejor práctica es evitar los controles HTML server. Los controles Web server son más calificados y tienen un modelo de objetos más enriquecido que los controles HTML. HTML server controls Los controles HTML server son elementos modificados de HTML que corren en el servidor en lugar de en el navegador del cliente. Use controles HTML server si: Usted prefiere un modelo de objetos similar a HTML. Los controles HTML server tienen la misma funcionalidad que los controles HTML básicos. Los controles HTML server tambien tienen funcionalidad del lado del servidor igual que los controles Web server. Usted esta trabajando con páginas HTML existentes y quiere fácilmente añadir la funcionalidad de los formularios Web. Porque los controles HTML server tienen exactamente los mismos elementos HTML, usted no necesita reemplazar los controles y correr el riesgo que la sustitución implica o problemas de formateo de página. Los controles que necesitan correr tanto scripts del lado del cliente como del lado del servidor. Se puede escribir script del lado del cliente y utilizar los controles HTML comunes porque los controles son visibles en el cliente. Al mismo tiempo, puede tener código del lado del servidor porque tambien son controles server. El ancho de banda es limitado y necesita un mayor procesamiento del lado del cliente porque estos tienen un reducido ancho de banda. Controles Web server Los controles ASP.NET Web server no solo son una aproximación de los controles HTML, tambien incluyen un número de nuevos controles que no existen en HTML. Utilice controles Web server si: Usted prefiere un modelo de programación parecido a Microsoft Visual Basic®. También podra usar una programación orientada a objetos, identificando controles mediante el atributo ID, y la separación facil de la lógica de la interfaz de usuario. Con los controles Web server, usted también puede crear aplicacciones con controles anidados y capturar eventos. Se puede crear una página Web que puede ser visualizada por una variedad de navegadores. Porque la lógica dentro de los controles Web server posibilitan crear HTML enfoca a las características del navegador del cliente, puede escribir código para varios navegadores sin preocuparse de errores en los navegadores mas antiguos, dando la posibilidad a los usuarios mas antiguos de acceder a todo la funcionalidad de la página Web. Necesita específica funcinalidad, como un calendario o un rotator, que estan disponibles solo en los controles Web server. El ancho de banda no es limitado y las idas y los ciclos peticion - respuesta de los controles Web server no causará problemas con el ancho de banda. 5.- Añadir código a los Formularios Web Utilización de las páginas Code-Behind Usted puede añadir código a sus Formularios Web utilizando uno de los siguientes tres métodos: Código Mixto. El código esta en el mismo archivo que el contenido de la página Web mezclado con el HTML. Este método es el menos apropiado, porque dificulta la lectura y el trabajo con este archivo. Sin embargo éste método es usado en las Active Server Pages (ASP). Código Interno. El código está en una sección SCRIPT en el mismo archivo que contiene el HTML. Code-behind. El código se encuentra en un archivo separado del HTML. El archivo es llamado página code-behind. En Visual Studio .NET, el método por defecto para añadir código a los Formularios Web es poner todo el código en una página de code-behind. Qué son las páginas Code-Behind? El método por defecto para implementar código de lado del servidor en Visual Studio .NET es el uso de las páginas de code-behind. Cuando usa las páginas code-behind, la lógica de programación esta separada de los elementos visuales de la página. La separación de la lógica del diseño permite a los desarrolladores trabajar sobre las páginas de code-behind mientras los diseñadores gráficos trabajan sobre la interfaz de usuario (UI). Nombrar las páginas de code-behind Las páginas de Code-behind contienen toda la lógica de programación para una página Web. Cada página Web en la aplicación Web tiene su propia página de code-behind. Por defecto estas páginas tienen el mismo nombre que las páginas Web con la cual estan asociadas, pero con la extensión .aspx.vb o .aspx.cs, dependiendo del lenguaje que fue usado en la página. Por ejemplo, la pagina Web Form1.aspx tendrá un página de code-behind llamada Form1.aspx.vb o en C# Form1.aspx.cs. Nota Una página code-behind solo puede contener código en un solo lenguaje. No se puede combinar código en Visual Basic .NET y C# en la misma página de code-behind. Entendiendo como trabajan las Páginas de Code-Behind Para que las páginas de code-behind trabajen cada página .aspx page debe tener asociada una página de code-behind page, y este debe estar compilado antes que la información sea retornada al navegador cliente. Aunque cada Formulario Web contiene dos archivos separados (la página .aspx y la página code-behind), la página Web se toma como una unidad cuando la aplicación Web se está ejecutando. La página code-behind puede ser precompilada por Visual Studio .NET cuando se compila la Aplicación Web, o cuando el just-in-time (JIT) compile la primera vez que el usuario accedió a la página. Enlace entre los dos archivos 7 La página .aspx necesita ser asociada con la página code-behind page. Visual Studio.NET añade tres atributos para las directivas @ Page de la página .aspx para lograr esta asociación: Codebehind. Este atributo es usado por Visual Studio .NET para internamente asociar los archivos. Src. Este atributo es el mismo que la página de code-behind, y es usado si la aplicación Web no fue precompilada. Inherits. Este atributo permite que la página .aspx herede las clases y los objetos de las páginas de code-behind. Nota El atributo Inherits es sensible a la capitalización (case-sensitive). Un ejemplo de las directivas de @ Page para el archivo llamado Page1.aspx será mostrado en el siguiente código: <%@ Page Language="vb" Inherits="Project.WebForm1" Codebehind="Page1.aspx.vb" Src="Page1.aspx.vb" %> Compilación JIT Cuando una página es compilada por JIT el code-behind será compilado la primera vez que el cliente realiza la petición de la página .aspx page. Después de la primera petición, todas las subsecuentes peticiones utilizan el archivo compilado. De esta manera, la primera petición de la página tarda, pero las subsecuentes peticiones son rápidas. Si quiere utilizar la compilación JIT debería usar el atributo Src de las directivas de la página @ Page. Nota La compilación JIT mantendrá el tamaño del proyecto pequeño y permitirá que se actualice sin recompilar todo el site. Ejecución Cuando un usuario pide una página .aspx, el archivo DLL procesa la petición entrante y responde creando el HTML y script apropiado, y luego devuelve la petición al navegador. Pre compilación Si se omite el atributo Src en la directiva de página @ Page en un archivo .aspx, la página es precompilada cuando compila la aplicación Web en Visual Studio .NET. Por defecto, Visual Studio .NET no añade el atributo Src, por tanto todas las páginas de code-behind para los Formularios Web en un proyecto son compilados cuando se compila el mismo. Este ahorra considerablemente tiempo de proceso en el Servidor Web. La precompilación del code-behind también simplifica el deploy del Web site porque no se tiene que distribuir el code-behind con las páginas .aspx. 6.- Qué son los procedimientos Evento? Los dinámicos e interactivos Formularios Web reaccionan a las entradas del usuario. Los procedimientos eventos son usados para manejar las interacciones del usuario con el Formulario Web. Definición Cuando el usuario interactúa con un Formulario Web son generados eventos. Se diseña la aplicación Web para realizar una apropiada tarea cuando el evento es generado. Un procedimiento evento es la acción que ocurre en respuesta del evento generado. Hay dos tipos de procedimiento evento: de lado del cliente y de lado del servidor. Cada uno tiene ventajas y desventajas. Procedimientos evento de lado del cliente Estos eventos son manejados en la computadora del cliente, la que realiza la petición del Formulario Web. Cuando un evento de este tipo es generado, no se envía información al servidor. En lugar de eso el browser del cliente interpreta el código y realiza las acciones asociadas con el evento. Los eventos del lado del cliente solo pueden ser usados mediante los controles HTML, además no pueden acceder a los recursos del servidor. Por ejemplo, no podría usar script del lado del cliente para acceder a bases de datos. Usos de Eventos Cliente Los Eventos Cliente son usados por los eventos que se quiere que pasen inmediatamente, porque no requieren una ida y vuelta al servidor Web (enviar información al servidor Web y esperar la respuesta). Por ejemplo, si quisiera validar información de un text box antes que esta viaje al servidor. Usted puede usar script del lado del cliente para validar la información fácilmente, antes que esta sea enviada al servidor Web para su procesamiento. Especificando los procedimientos de eventos cliente Usted especifica estos procedimientos mediante la creación de bloques <SCRIPT> en la página Web como se muestra en el siguiente código: <SCRIPT language="javascript"> Eventos del lado del Servidor A diferencia de los eventos cliente, los eventos servidor requieren que se envíe información al servidor Web para que esta se procese. Aunque esto significa un costo en tiempo la utilización de estos eventos tiene mucho más poder que los eventos del lado del cliente. Eventos del lado del Servidor (Server-side) Los eventos Server-side consisten en código compilado que se encuentra en el Servidor Web estos procedimientos pueden ser usados para manejar eventos que son generados por los controles THML server o los controles Web Server. Los eventos Server-side tienen acceso a los recursos del servidor que normalmente no están disponibles para los eventos client-side. Usted puede especificar un evento server-side mediante el atributo runat="server" en el tag script, como se muestra en el siguiente código: <SCRIPT language="vb" runat="server"> Soporte de Eventos Porque los eventos server-side requieren una ida y vuelta del Servidor Web, los tipos de eventos soportados están limitados. Con los eventos clientside, se podía incluir código para procesar eventos de las teclas del mouse y eventos onChange. Mientras los eventos server-side soportan eventos click y una versión especial de onChange, estos no soportan eventos que ocurren con frecuencia, como los clicks del mouse. Creación de Procedimientos Evento La creación de los eventos server-side event en Visual Studio .NET involucra dos pasos. Primero necesita crear el control que generara el evento en el Formulario Web. Segundo, en la página code-behind, necesita proveer el código que es necesario para manejar los eventos. Cuando hace doble click en un control en Visual Studio .NET, Visual Studio .NET declara una variable (con el mismo nombre que el atributo id del control) y esta crea una plantilla de procedimiento. Cuando usa Visual Basic .NET, con Visual Studio .NET además se añade Handles con los controles añadidos. Los Handles permiten que cree múltiples procedimientos evento para un solo evento. Nota Por defecto, Visual Studio .NET usa los Handles porque el atributo AutoEventWireup de la directiva @ Page esta puesta en false. Si este atributo estuviera en true, los controles serían ligados a los procedimientos evento mediante un nombre específico, que es como eran manejados los eventos en Visual Basic 6. El siguiente código HTML muestra un Web Form con un solo botón con un atributo id = cmd1; el evento click del botón será manejado sobre el servidor: <form id="form1" method="post" runat="server"> <asp:Button id="cmd1" runat="server"/> </form> Argumentos de Eventos Todos los eventos pasan dos argumentos al procedimiento evento: el emisor del evento y una instancia de la clase que guarda datos sobre el evento, esta instancia es usualmente de tipo EventArgs, y a menudo no contiene ninguna información adicional; sin embargo, para algunos controles, esta es de un tipo que se especificado para el control. Por ejemplo, para el control Web ImageButton el segundo argumento es del tipo ImageClickEventArgs, quien incluye información acerca de las coordenadas donde el usuario hizo click. El siguiente procedimiento evento muestra las coordenadas en un control Label: Sub img_OnClick(ByVal s As System.Object, _ ByVal e As System.Web.UI.ImageClickEventArgs) _ Handles ImageButton1.Click Label1.Text = e.X & ", " & e.Y End Sub 9 Interactuar con controles en procedimientos Evento En varias aplicaciones Web, usted necesita leer de los controles y escribir para controles sobre un Formulario Web. Usted puede hacerlo con los procedimientos eventos del lado del servidor. Leer propiedades desde un control Web server Dentro de un procedimiento del lado del servidor, se puede leer información de un Web server control. Por ejemplo, suponga que tiene el siguiente Formulario Web con un Textbox y un Button: <FORM id="Form1" runat="server"> <asp:TextBox id="txtNombre" runat="server" /> <asp:Button id="cmd1" runat="server" /> </FORM> Cuando el usuario hace click en el botón, se puede leer el texto que él introdujo en el text nox. El siguiente código asigna a la variable strSaludo la concatenación de el texto “Hola” y el texto que se encuentra en el text box txtName: String strSaludo = "Hola " & txtNombre.Text Por ejemplo, si el usuario introduce “Juan” en el text box txtNombre, la variable strGreeting debería contener el texto “Hola Juan”. Salidas en el control Usted puede sacar información directamente en el control Web Server utilizando las propiedades del control. Por ejemplo, suponga que tiene un control Web server de tipo Label sobre una página ASP.NET como se muestra: <asp:Label id="lblGreeting" runat="server">Greeting</asp:Label> El siguiente código del lado del servidor asigna una cadena a la propiedad Text de lblGreeting como se muestra: lblGreeting.Text = "nuevo texto" Tip En ASP, se usaba la colección Request.Forms para leer las propiedades de los controles del formulario y usaba el Response.Write para la salida del texto. Sin embargo estos métodos siguen trabajando con ASP.NET, pero no son los recomendados. En lugar de esto, debe usar los controles Web server labels y spans. 7.- Eventos de Página Cuando una página ASP.NET es pedida, hay una serie de eventos que ocurre. Estos eventos siempre ocurren en el mismo orden, que esta referido en el siguiente ciclo. El ciclo consiste en los siguientes eventos, que ocurren en el siguiente orden: 1. Page_Init. Este evento de página inicializa la página con la creación e inicialización de los controles Web server. 2. Page_Load. Este evento corre cada vez que la página es solicitada. 3. Control events. Los eventos de control incluyen eventos de cambio (por ejemplo, Textbox1_Changed) y los eventos de acción (por ejemplo, Button1_Click). 4. Page_Unload. Este evento de página ocurre cuando la página es cerrada o el control es pasado a otra página. El fin del ciclo de eventos de la página incluye el desalojo de la página de memoria. La mayoría de los eventos no ocurren hasta que el Formulario Web es devuelto al servidor. Por ejemplo, el evento Change es manejado en un orden aleatorio en el servidor después que el Formulario Web es devuelto. Inversamente, el evento Click puede causar que el formulario sea enviado al servidor inmediatamente. Si, por ejemplo, un usuario introduce un número en un control y hace click en el botón Submit, el evento Change del text box no va ser procesado hasta que el Formulario Web sea enviado al servidor mediante el evento Click. Postbacks En ASP.NET, los formularios son diseñados para enviar la información con página ASP.NET para que esta sea procesada. Este proceso es llamado postback. El Postbacks puede ocurrir por ciertas acciones del usuario. Por defecto, solo el evento click del botón causa el postback del Formulario Web. Sin embargo se dispone de un conjunto de controles con la propiedad AutoPostBack, si esta en true, el postback es forzado para los eventos del control. Por ejemplo, el siguiente código HTML es un ejemplo de usar la propiedad AutoPostBack en un list box. Cada vez que el usuario cambia el valor del list box, el evento SelectedIndexChanged es lanzado sobre el servidor y actualiza el text box: <asp:DropDownList id="ListBox1" runat="server" AutoPostBack="True"> <asp:ListItem>First Choice</asp:ListItem> <asp:ListItem>Second Choice</asp:ListItem> </asp:DropDownList> Manejo de Eventos Postback El evento Page_Load corre en todas la peticiones de la página, inclusive si es la primera petición o si es un postback. Uso de Page.IsPostBack Porque el evento Page_Load corre con todas las peticiones de la página, todo el código dentro del evento Page_Load será ejecutado cada vez que la página es pedida. Sin embargo, cuando usted usa un evento postback, talvez no quiera que todo el código se ejecute nuevamente. Ligar dos controles entre si Usted puede ligar un control con el contenido de otro. Ligar dos controles es particularmente usado para mostrar valores de list boxes o drop-down lists. El siguiente código ejemplo muestra como ligar un control Label con el contenido de un drop-down list. Usando los tags de ligado <%# y %>, usted pone el atributo Text del control Label a el SelectedItem del list box: <asp:Label id="lblSelectedValue" runat="server" Text="<%# lstOccupation.SelectedItem.Text %>" /> El siguiente ejemplo muestra el código para ligar el label con el list box: <form runat="server"> <asp:DropDownList id="lstOccupation" autoPostBack="true" runat="server" > <asp:ListItem>Lider de Proyecto </asp:ListItem> <asp:ListItem>Tester</asp:ListItem> <asp:ListItem>Asistente</asp:ListItem> </asp:DropDownList> <p> You selected: <asp:Label id="lblSelectedValue" Text="<%# lstOccupation.SelectedItem.Text %>" runat="server" /> </p> </form> En el anterior código note que la propiedad AutoPostBack del drop-down list es puesta a true, lo cual causa que automáticamente se haga un postback cuando el valor del list box cambia. En el evento Page_Load, se llama al método DataBind de la página entera o solo del Label como se muestra en el siguiente código: Sub Page_Load (s As Object, e As EventArgs) _ Handles MyBase.Load lblSelectedValue.DataBind() End Sub Usted puede usar el Page.DataBind() si quiere hacer data bind para todos los elementos de la página. El anterior ejemplo de código liga solo el control Label con datos, por se puede usar la sintaxis control.DataBind() donde control es el atributo id del label . 11
