Visual Studio .net Framework 3.5 Para Profesionales - Maximiliano Firtman-librosvirtual.pdf 312v32

  • ed by: Nicolás Ron
  • 0
  • 0
  • July 2020
  • PDF

This document was ed by and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this report form. Report r6l17


Overview 4q3b3c

& View Visual Studio .net Framework 3.5 Para Profesionales - Maximiliano Firtman-librosvirtual.pdf as PDF for free.

More details 26j3b

  • Words: 83,580
  • Pages: 371


Todos los controles de lista ahora tienen algunas propiedades nuevas y muy útiles a la hora de desarrollar aplicaciones. La primera de ellas es AppendDataBoundItems, que puede tener los valores True o False. Por defecto, esta propiedad está apagada y, en caso de que tengamos ítems definidos por código aspx y un enlace a datos, sólo quedarán visibles los que se enlacen con el origen de datos. Si encendemos esta propiedad, entonces los ítems del origen de datos se anexarán al final de los ítems definidos en forma estática.

Visual Studio - Firtman, Natale

Alfaomega

254

6- ASP.NET

Fig. 6-21. Aquí vemos en acción el nuevo control BulletedList. Podemos usarlo para mostrar información estática o para generar vínculos automáticamente.

Esta opción es muy útil para, por ejemplo, crear un DropDownList de opciones obtenidas de alguna tabla de la base de datos y poner una opción inicial que diga Seleccione de la lista. De esta forma, esta última opción se agrega como un ítem estático declarado por etiqueta y el resto se incorpora desde un origen de datos. Otra propiedad importante incorporada a todos los controles de lista es DataTextFormatString, que permite definir un patrón para mostrar los textos de los ítems. Por ejemplo, si queremos que todos los ítems tengan un guión delante y no tener que agregarlo en la base de datos, podemos definir esta propiedad con “- {0}”.

GridView La evolución del DataGrid Todos hemos utilizado la grilla en ASP.NET 1.x y lo hemos visto como el “gran control” para mostrar datos de una consulta. Todo era muy bonito hasta que Alfaomega

Visual Studio - Firtman, Natale

Trabajando con Datos

255

empezábamos a pedir algunas funciones extras, que son necesarias en la funcionalidad de una grilla de datos, como paginación u ordenamiento de columnas. Si bien el control las soportaba, teníamos que escribir siempre el mismo código de servidor para efectuar realmente estas operaciones. Por ello, empezaron a salir clones del DataGrid como controles personalizados gratuitos y pagos, que tenían mucha mayor funcionalidad sin escribir código. Además, si intentábamos habilitar el modo edición, realmente era muy complejo tomar los datos para escribir la consulta de actualización. Por todo esto, apareció un nuevo control en ASP.NET 2.0, que está vigente todavía: GridView. Este control ofrece, en principio, la misma funcionalidad que el DataGrid y mucho más. No sólo tenemos ahora ordenamiento por columnas y paginación automática, sin escribir ni una sola línea de código, sino que también tendremos opción a editar registros y toda la actualización se realizará automáticamente en el origen de datos, sea una base de datos SQL, un origen XML o un objeto de negocios. El control Básicamente, el control muestra en pantalla una grilla de datos, donde cada fila es un registro del origen de datos y cada columna, un miembro, campo o atributo. Veamos las propiedades más útiles de este control: Propiedad

Descripción

AllowPaging

Permite activar (True) el sistema de paginación de datos automático.

AllowSorting

Permite activar (True) el sistema de ordenamiento de columnas automático.

AutoGenerateColumns

Define si las columnas son creadas automáticamente con todos los campos del origen de datos (True) o en forma manual (False).

AutoGenerateDeleteButton

Define si automáticamente se genera una columna con un link que elimina la fila.

AutoGenerateEditButton

Define si automáticamente se genera una columna con un link que le da la posibilidad de editar la fila al .

AutoGenerateSelectButton

Define si automáticamente se genera una columna con un link que le permite seleccionar una fila al para alguna acción.

EmptyDataText

Una función muy solicitada, permite definir un texto que se mostrará cuando no haya registros disponibles en el origen de datos.

Visual Studio - Firtman, Natale

Alfaomega

256

6- ASP.NET

EnablePagingAndSortingCallbacks

Si se activa esta opción (True) la paginación y el reordenamiento se realizará utilizando Callbacks (tecnología conocida como AJAX).

SortDirection

Es una propiedad de sólo lectura que permite saber si el ordenamiento actual es ascendente o descendente.

SortExpression

Permite saber la expresión de ordenamiento actual.

SummaryViewColumn

Define el nombre de la columna que será utilizada como link para ver el resto de las columnas cuando el control se ve en un dispositivo móvil.

Paginación Si activamos la propiedad EnablePaging, automáticamente tendremos funcionando el sistema de paginación (si el origen de datos lo permite), repartiendo los resultados en n cantidad de páginas y mostrando la cantidad de registros por página definida en PageSize. Las opciones para definir el tipo de paginación que vamos a querer son varias y las podemos resumir en la siguiente tabla: Propiedad

Descripción

Mode

Permite definir Numeric, que muestra los números de páginas, NextPrevious (con link a página anterior y siguiente), NextPreviousFirstLast y NumericFirstLast, que incorporan links a la primera y última página.

PageButtonCount

Cantidad máxima de páginas que muestra en estado Numeric.

Position

Permite tener la fila de paginación abajo (Bottom), arriba (Top) o en ambas posiciones (TopAndBottom).

FirstPageText

Define el texto que se ha de usar en el link para la Primera Página.

FirstPageImageUrl

Define una imagen que se usará como link para la Primera Página.

LastPageText

Define el texto que se ha de usar en el link para la Última Página.

LastPageImageUrl

Define una imagen que se usará como link para la Última Página.

NextPageText

Define el texto que se ha de usar en el link para la Próxima Página.

NextPageImageUrl

Define una imagen que se usará como link para la Próxima Página.

PreviousPageText

Define el texto que se ha de usar en el link para la Página Anterior.

PreviousPageImageUrl Define una imagen que se usará como link para la Página Anterior.

Alfaomega

Visual Studio - Firtman, Natale

Trabajando con Datos

257

Fig. 6-22. Activar la paginación permite tener en pocos segundos, y sin tener que escribir ningún código VB ni C#, nuestro GridView paginado, utilizando LINQ u otro origen.

Ordenamiento Activar el ordenamiento de columnas es tan simple como poner en True la propiedad EnableSorting. Sin escribir ningún código adicional, ahora en los títulos de las columnas tenemos un link para solicitar ordenar por esa columna. Automáticamente, si el hace clic sobre la columna por la cual actualmente están ordenados los datos, el orden se invertirá. Edición y Eliminación Al activar las opciones de edición y eliminación de datos, o al insertar campos de tipo botón manualmente, podremos darle al la opción de editar los datos (todo el proceso se realiza en forma automática) o de eliminar registros. Para ello, necesitamos tener definidos los UpdateCommand (o UpdateMethod en ObjectDataSource) y DeleteCommand con los parámetros incluidos. Los parámetros deben tener exactamente el mismo nombre que los campos para actualizar, para que todo funcione correcta y automáticamente. Visual Studio - Firtman, Natale

Alfaomega

258

6- ASP.NET

Fig. 6-23. Al habilitar el modo edición, automáticamente ASP.NET reemplazará los textos del registro actual por TextBox o Checkboxs, según el tipo de datos para actualizar.

Opciones Avanzadas El mundo del GridView merece mucho más espacio que el que podemos dedicarle en este libro, pero mencionemos que existen dos plantillas (templates) disponibles para definir: EmptyDataTemplate, para cuando no hay datos en el origen y PagerTemplate, para definir una fila de paginación manualmente. Existen decenas de propiedades y subetiquetas que podemos definir para darle diseño visual a nuestra GridView según nuestra conveniencia. Si queremos definir las columnas manualmente, seguro que la mejor opción será utilizar el editor de columnas de Visual Studio, donde podremos definir columnas de los siguientes tipos: BoundField para campos de base de datos, ButtonField para crear un comando, CheckBoxField para campos de tipo lógico o booleano, CommandField para comandos específicos –como Edit, Delete y Select–, HyperLinkField que permite definir vínculos hacia otras páginas, enviando como parámetros uno o varios campos de la fila, ImageField que permite mostrar una imagen, ya sea tomando el archivo o la Alfaomega

Visual Studio - Firtman, Natale

Trabajando con Datos

259

URL del mismo desde un campo de datos y TemplateField para definir un contenido personalizado con código HTML y código de enlace. Con el nuevo Framework 3.5 SP1 y los controles dinámicos de datos, también podremos utilizar los nuevos controles DynamicControl y DynamicValidator, que veremos más adelante. Para definir las columnas debemos desactivar la opción AutoGenerateColumns y definir las columnas dentro de la colección columns, como en el siguiente ejemplo:

DetailsView ¿Qué es? Algo que seguramente nos estaremos preguntando es: ¿Por qué GridView todavía no tiene la opción de insertar un nuevo registro? Para resolver este tema, y también para trabajar con un registro a la vez en pantalla, existe DetailsView o Vista Detalle. La vista detalle es una tabla de dos columnas, donde en la primera tenemos los nombres de los campos y en la segunda, los valores. En el caso de que habilitemos el modo edición, la segunda columna se convertirá en controles de ingreso, que serán utilizados para guardar el registro. Para todos los procesos de actualización en GridView o DetailsView es primordial definir la propiedad DataKeyNames, que incluye todos los campos o atributos (separados por coma) que son parte de la clave primaria.

Visual Studio - Firtman, Natale

Alfaomega

260

6- ASP.NET

Fig. 6-24. DetailsView nos permitirá trabajar con un solo registro a la vez, teniendo todas las opciones disponibles en un GridView.

Sintaxis Su sintaxis es similar a un GridView, por ejemplo:

Alfaomega

Visual Studio - Firtman, Natale

Trabajando con Datos

261

Notemos que en lugar de ahora tenemos y el resto es muy parecido. Si queremos definir el nombre que aparece en la primera columna de cada campo, debemos definir el HeaderText de cada uno de ellos. A los ya conocidos y mencionados AutoGenerateEditButton y AutoGenerateDeleteButton, ahora sí se nos incorpora un AutoGenerateInsertButton, que permite ingresar un nuevo registro a la base de datos. Y el AutoGenerateRows le dice al control que automáticamente utilice todos los campos de la base de datos, en caso de definirlo en True. La propiedad DefaultMode indica en qué modo se iniciará el control apenas se inicia la primera vez, si en modo normal de lectura (ReadOnly), en modo edición (Edit) o en modo inserción de nuevo registro (Insert). Combinando GridView, un DataSource parametrizado y un DetailsView, podemos generar un sistema de maestro detalle, donde al seleccionar un registro de la grilla podamos verlo completo y editarlo en detalle. Paginación Analizando el control Web, también tenemos la opción AllowPaging y nos preguntamos: ¿Paginación en un DetailsView? Sí. Y su función es poder navegar entre los registros, siempre de a uno por vez. Así, podemos ir pasando de un registro a otro y, si activamos EnablePagingCallback, el cambio de un registro a otro se realizará sin refrescar la página. Aunque luego veremos que el framework ASP.NET AJAX nos ayudará en esta tarea.

FormView La vista de formulario o FormView es similar a DetailsView, con la diferencia de que todo lo que se muestra lo debemos definir nosotros en plantilla y no muestra nada por su cuenta. Así, FormView posee las siguientes plantillas que debemos editar: ItemTemplate, EditItemTemplate, InsertItemTemplate. Por defecto, si no editamos las plantillas el control está vacío y no dibuja nada. Al insertar un control de este tipo en Visual Studio, debemos recordar que haciendo clic derecho en Editar Plantillas, podremos elegir qué plantilla queremos editar en cada momento. Además, al seleccionar un origen de datos para utilizar, Visual Studio y VWD automáticamente generan código en todas las plantillas para simplificarnos la tarea. Recordemos que en este control debemos crear todo el formulario nosotros mismos y nos permitirá crear un formulario de ingreso y edición de datos más complejo, con DropDownLists, y más columnas, aprovechando mejor la página que si usáramos DetailsView (que siempre lo hace en dos columnas). Visual Studio - Firtman, Natale

Alfaomega

262

6- ASP.NET

Fig. 6-25. Con FormView podemos crear formularios de trabajo, con datos más complejos y personalizados al diseño que queremos darle al ingreso.

Un FormView queda definido por la siguiente sintaxis <EditItemTemplate>

ListView El control Vista de Lista (List View), fue incorporado en ASP.NET 3.5 y permite, además de todas las funciones automáticas de alto nivel del GridView –como edición, eliminación, ordenación, paginación e inserción–, un completo control sobre el código HTML y CSS, que se genera al navegador, eliminando mucho código no estándar, o considerado intrusivo por mucha gente, que el GridView y el DetailsView generan. Los pasos para trabajar con este control son, primero diseñar el HTML que queremos utilizar y luego utilizarlo en las más de diez plantillas que posee el control.

Alfaomega

Visual Studio - Firtman, Natale

Trabajando con Datos

263

Fig. 6-26. Con ListView se pueden generar vistas mucho más atractivas y menos matriciales que con GridView.

Plantillas Básicas Las dos plantillas básicas de un ListView son LayoutTemplate (plantilla de disposición) e ItemTemplate (plantilla de elemento). La primera define el diseño del contenedor completo de la lista, colocando un control, generalmente un PlaceHolder, donde queremos colocar los elementos. El PlaceHolder se utiliza en lugar de otros controles para no generar código HTML de más. Y la plantilla de elemento define cómo se dibujará cada uno de los elementos dentro del PlaceHolder. También la plantilla EmptyDataTemplate define el contenido para cuando no existen datos en el origen. El control que usemos en LayoutTemplate debe tener obligatoriamente el ID= ”itemPlaceholder”, salvo que definamos la propiedad del ListView ItemPlaceHolderID, definiendo de esta manera el identificador del control. Veamos un ejemplo:

Visual Studio - Firtman, Natale

Alfaomega

264

6- ASP.NET

Clientes k1o2q

  • <%# Eval("NombreCliente") %>
  • <EmptyDataTemplate>

    No hay clientes



    Paginando resultados Para mostrar solo n cantidad de elementos en un ListView y lograr una navegación en páginas, existe el también nuevo control DataPager, que debemos insertarlo en cualquier lugar de la página ASP.NET donde queramos que la paginación aparezca y definir la propiedad PagedControlID como el id del ListView y PageSize con el tamaño de elementos por página. Para que el paginador agregue controles de navegación, es necesario agregar campos. Los campos incluidos con el framework son los siguientes: NextPreviousPagerField, que permite navegar una página a la vez con siguiente y anterior, NumeriagerField, que permite al seleccionar una página a la vez y TemplatePagerField, que nos deja la posibilidad de definir el diseño del navegador de páginas. Cada uno de estos controles de navegación tiene propiedades para definir cómo se visualizan y son simples de comprender analizando la Ventana de Propiedades. Entonces, por ejemplo, podríamos paginar el anterior ListView con el siguiente código:

    Alfaomega

    Visual Studio - Firtman, Natale

    Trabajando con Datos

    265

    Plantillas Avanzadas El ListView también tiene otras plantillas, a saber: ItemSeparatorTemplate, que define el código que se ha de utilizar entre cada elemento; SelectedItemTemplate, que define el diseño que se ha de utilizar cuando el elemento está seleccionado (a través de la propiedad SelectedIndex); AlternatingItemTemplate,que define el diseño para las filas pares (siendo ItemTemplate el de las impares); EditItemTemplate, para un elemento en edición e InsertItemTemplate, para un elemento que se estaría insertando en el origen de datos. Trabajando con grupos Otra gran y, a veces, un poco confusa funcionalidad del ListView es la posibilidad de agrupar los elementos. Los grupos permiten agrupar los elementos cada n cantidad y definir algún separador de grupo más una cabecera particular. No se han visto grandes usos de esta opción, pero un buen ejemplo es en un foro de discusión, donde podemos colocar una publicidad cada cinco mensajes o noticias, o hacer un diseño en tablas en tres columnas. Para ello, el ListView posee el atributo GroupItemCount, que define cada cuántos elementos se trabajará con un nuevo grupo y las plantillas GroupTemplate, para el diseño de cada grupo, GroupSeparatorTemplate, para el separador entre grupos y EmptyItemTemplate, que define el diseño del grupo para cuando el mismo no tiene elementos. Cuando trabajamos con grupos, el LayoutTemplate no tendrá enlazado un ItemTemplate a través de id=”itemPlaceholder”, sino que el Layout estará enlazado al GroupTemplate a través del id=”groupPlaceholder” y la plantilla de grupo enlazada a la de elemento. Veamos entonces un ejemplo, mostrando los datos en una tabla de tres columnas:
    Visual Studio - Firtman, Natale

    Alfaomega

    266

    6- ASP.NET

    <%# Eval("Nombre") %> 5tr6p



    Controles de Visualización ImageMap Este control permite incluir una imagen (por ello posee todas las mismas propiedades que el control Image), con la diferencia de que podemos definir zonas sobre la imagen que actuarán en forma distinta según se cliqueen. Estas zonas podrán generar un postback o dirigir al a una URL específica por cada una. Por ejemplo, podemos tener un mapa geográfico y permitirle al hacer clic en una zona y nosotros saber en qué zona han cliqueado. Este control posee la misma estructura que Image con las propiedades HotSpotMode y una colección de HotSpots. El modo (HotSpotMode) puede ser PostBack, Navigate o Inactive. El primer modo permite que cada zona al ser cliqueada genere un postback al servidor, el segundo que sea dirigido a una URL y el último no reacciona ante los clics del (puede ser usado para ejecutar código de cliente). Existen tres tipos de HotSpot (zonas): Círculos (CircleHotSpot), rectángulos (RectangleHotSpot) y polígonos (PolygonHotSpot). Cada HotSpot tiene a su vez propiedades generales, como su propio HotSpotMode (es posible definir algunas zonas PostBack y otras Navigate), AlternateText, para el texto alternativo que se ha de mostrar, NavigateUrl y Target, con la URL a donde dirigir al (sólo modo Navigate) y PostBackValue con un valor que luego consultaremos para saber qué zona se ha cliqueado (sólo modo PostBack). Luego, las zonas circulares tienen las propiedades X, Y y Radius (radio del círculo) para la ubicación y tamaño de la zona, las zonas rectangulares tienen las propiedades Bottom, Top, Left y Right y los polígonos una colección de coordenadas de vértices en Coordinates. Veamos un ejemplo:

    Alfaomega

    Visual Studio - Firtman, Natale

    Trabajando con Datos

    267



    HiddenField Este control permite guardar datos en la página Web que no serán visibles al . Se puede utilizar para guardar datos cuando el ViewState está apagado, por ejemplo. Hay que tener cuidado con guardar aquí datos privados, dado que no tiene seguridad ni encriptación y la información puede ser vista por el , revisando el código fuente HTML. El control tiene una sola propiedad útil, Value, que permite acceder desde código de servidor a lectura y escritura del valor que guarda. Lo que guarda siempre es un objeto String. La sintaxis es muy simple y solamente es:

    Literal Este control es muy simple y viene heredado de ASP.NET 1.x Mobile Controls, ya obsoleto. Lo único que hace el control es enviar un texto dado en la propiedad Text directamente al navegador, pudiendo incluir código HTML, Javascript o cualquier cosa que queramos enviar. No tiene opciones de formato y no agrega ninguna etiqueta antes de enviarlo –a diferencia de Label, que incorpora una etiqueta span y opciones de formato–. La únicas propiedades disponibles son Visible (ya conocida) y Mode, que permite elegir entre tres modos: Transform, Through y Encode. La primera opción y, por defecto, envía el texto como está, si ingresa un navegador XHTML y lo transforma a código compatible cuando entra un navegador de un teléfono celular u otro dispositivo que no soporte alguna etiqueta. La segunda opción envía el texto y códigos como se definan y la última hace un encoding para que pueda ser visto correctamente por cualquier navegador. Por ejemplo, si usamos la opción Transform, el siguiente texto <mietiqueta>hola será transformado a “hola” cuando ingresa un navegador WML o que no soporta etiquetas del estilo. La propiedad Visual Studio - Firtman, Natale

    Alfaomega

    268

    6- ASP.NET

    Text puede ser definida declarativamente, por código de servidor, o implícitamente entre la etiqueta de apertura y cierre. Un ejemplo, podría ser: Este es el texto a enviar

    File Este control representa el proceso de publicación de archivos por parte del hacia el servidor. En ASP.NET 1.x estaba cubierto por un control HTML, que convertíamos a control de servidor, pero no era exactamente un control Web. El control File no tiene ninguna propiedad particular y con sólo arrastrar el componente, o definir su ID, ya lo tenemos funcionando:

    Lo importante en este caso es poder guardar el archivo en el disco una vez que el hace un (publicación) del archivo al servidor. Para ello, luego de algún evento de postback donde estemos recibiendo el archivo (por ejemplo, el clic de un botón), debemos acceder al control mediante su nombre y, con el método SaveAs(rutacompleta), podremos guardarlo en algún lugar del servidor. Otras propiedades útiles son FileName, que define el nombre que tenía el archivo en el equipo del , y PostedFile, que nos da a un objeto con información del archivo, como ser tipo de archivo (PostedFile.ContentType) o tamaño (PostedFile.ContentLength). Wizard Un Wizard, o Asistente, nos representa un clásico asistente de los entornos de escritorio, que le permite al realizar una acción dividida en n pasos y puede ir pasando entre todos ellos hasta finalizar y confirmar la operación. Podemos pensar en un asistente como una zona en una página Web, que posee distintas vistas según en qué paso del asistente el se encuentre. Apenas ingrese el se encontrará en el Paso 1 y podrá, así, continuar al Paso 2 y luego al 3 hasta llegar al último paso donde podrá Finalizar la 2SHUDFLyQ. Este control es muy útil para crear formularios de ingreso de datos que, por organización conceptual y por cantidad de controles, es preferible agruparlos en distintas pantallas.

    Alfaomega

    Visual Studio - Firtman, Natale

    Trabajando con Datos

    269

    Fig. 6-27. Con un Wizard una operación larga se torna más fácil de seguir por el , al dividirla en n cantidad de pasos.

    Cuando el cambia de página (hacia adelante o hacia atrás), se genera un postback en el servidor y podemos capturar el evento ActiveStepChanged cuando se cambia un paso (step). Antes de ver en detalle las propiedades y eventos del control, analicemos su estructura. Existe un paso inicial, que contiene los controles propios de ese paso del asistente, y un botón de Siguiente (Next). Luego, existen pasos intermedios (la cantidad que querramos ubicar), que poseen navegación en ambas direcciones ($WUiV y Adelante). Por último, existe un paso final, que posee la opción de volver al paso anterior (Previous) o finalizar la operación. Un Wizard visualmente se divide en tres porciones: La SideBar (barra lateral), el contenido y la barra de botones. En la primera se ubican todos los pasos disponibles en el asistente para guía y seguimiento del . En el contenido, podemos ubicar todo el contenido HTML, controles Web o código que necesitemos en cada paso y, por último, en la barra de botones se ubican los botones $WUiV, Siguiente, Finalizar o Cancelar, según el paso en el que nos encontremos.

    Visual Studio - Firtman, Natale

    Alfaomega

    270

    6- ASP.NET

    El botón de Cancelar es opcional y podemos activarlo con la propiedad DisplayCancelButton que, por defecto, está desactivada.

    Fig. 6-28. Así se ve un Wizard de sólo 2 pasos en Visual Studio. Notemos la ubicación de la SideBar y de la barra de botones.

    Veamos los eventos de servidor que podremos capturar en un Wizard: Evento

    Descripción

    ActiveStepChanged

    Cuando se cambia de paso, no importa el método (secuencial o aleatorio).

    CancelButtonClick

    Cuando se presiona el botón de Cancelar en cualquier paso.

    FinishButtonClick

    El evento seguramente más utilizado, capturamos el momento en que el dio el consentimiento de la finalización de la operación.

    NextButtonClick

    Cuando el se mueve a un siguiente paso.

    PreviousButtonClick

    Cuando el se mueve a un paso anterior.

    SideBarButtonClick

    Cuando el cambia de paso seleccionándolo de la SideBar.

    El control Wizard tiene muchas propiedades y estilos que podemos definir para cada zona y cada botón. Veamos las propiedades más utiles: Atributo HeaderText

    Descripción Define el texto que se ha de utilizar como cabecera del Wizard.

    DisplayCancelButton

    Es el índice del paso que está actualmente mostrándose. Si no queremos dirigir al a una URL cuando cancela. Define si aparece o no el botón de Cancelar.

    DisplaySideBar

    Define si aparece o no la barra lateral.

    FinishDestinationPageUrl

    Si queremos dirigir al a una URL cuando finaliza el proceso.

    ActiveStepIndex CancelDestinationPageUrl

    Además, existen algunas propiedades relativas a todos los tipos de botones que serán ubicados en el asistente. Así, existen las propiedades (boton) ButtonImageUrl, que indica el nombre de la imagen que queremos que tenga Alfaomega

    Visual Studio - Firtman, Natale

    Trabajando con Datos

    271

    el botón en lugar de un botón textual, (boton)ButtonText, que es el texto que queremos que tenga el botón y (boton)ButtonType, que permite elegir el tipo de botón para utilizar entre Button, Image o Link. En las propiedades antes citadas, (boton) puede ser reemplazado por alguno de los siguientes: Botón

    Descripción

    Cancel

    Es el botón de Cancelar Proceso.

    FinishComplete

    Es el botón de Finalizar Proceso.

    FinishPrevious

    Es el botón de Anterior que se ubica en el último paso.

    StartNext

    Es el botón de Siguiente que se ubica en el primer paso.

    StepNext

    Es el botón de Siguiente que se ubica en los pasos intermedios.

    StepPrevious

    Es el botón Anterior que se ubica en los pasos intermedios.

    Cuando utilizamos VS o VWD para crear el asistente, automáticamente tendremos, como Smart Tasks, la posibilidad de elegir qué paso queremos editar, agregar un nuevo paso al asistente o convertir un paso a una plantilla (donde nosotros tendremos que crear todos los controles).

    Fig. 6-29. En Visual Web Developer tenemos Smart Tasks para trabajar fácilmente con Wizards en nuestra página Web.

    Un asistente, a su vez, tiene una colección de WizardStep, que corresponden a cada paso del asistente y que pueden ser declarados en el archivo aspx en forma de etiquetas con el contenido de cada paso dentro. Existen dos tipos de Steps: WizardStep, como estuvimos viendo, y TemplatedWizardStep, que es un paso basado en plantillas, para tareas avanzadas. Cada paso del asistente tiene algunas propiedades de utilidad, como Title, que define el título del paso (que se utiliza en la SideBar), AllowReturn, que permite definir si permitimos al volver al paso una vez que lo hizo y StepType, que define el tipo de paso que es (Auto, Complete, Finish, Start o Step). Visual Studio - Firtman, Natale

    Alfaomega

    272

    6- ASP.NET

    Veamos entonces un wizard con tres pasos, dos de ingreso de datos y un último de confirmación de la información ingresada: <%@ Page Language="C#" %> <script runat="server"> protected void Wizard1_ActiveStepChanged(object sender, EventArgs e) { if (Wizard1.ActiveStepIndex == 2) { (VWR\HQHO~OWLPRSDVRDFWXDOL]RODEHOV lblNombre.Text = txtNombre.Text; lblDireccion.Text = txtDireccion.Text; } }
    <WizardSteps> Bienvenido al Asistente para Ingresar al Sistema.

    Ingrese su nombre:
    $KRUDLQJUHVHVXGLUHFFLyQSRVWDOEU! DVS:L]DUG6WHSUXQDW VHUYHU7LWOH &RQ¿UPDFL Q! Sus datos fueron:
    Nombre:
    'LUHFFLyQ

    Alfaomega

    Visual Studio - Firtman, Natale

    Trabajando con Datos

    273



    &RQ¿UPHRFDPELHVXVGDWRV <StepStyle VerticalAlign="Top" /> <SideBarStyle VerticalAlign="Top" />


    Fig. 6-30. Aquí vemos nuestro Wizard en acción, utilizando un autoformato de Visual Studio para darle un mejor aspecto. Vemos claramente las zonas diferenciadas.

    MultiView Un control MultiView podría verse como una simplificación del Wizard (o un Wizard una especialización del MultiView). Una vista múltiple es un control que permite tener distintas vistas (View) posibles, pero sólo una de ellas puede Visual Studio - Firtman, Natale

    Alfaomega

    274

    6- ASP.NET

    estar viéndose en un momento determinado. Desde el código de servidor, podemos cambiar la vista según algún evento que haya ocurrido. Así, por ejemplo, podemos querer mostrar información sobre un producto y tenemos distintas vistas que el puede seleccionar, los datos comerciales, la ficha técnica, las fotos o el precio. Cada una de estas opciones podría ser una vista distinta. La propiedad ActiveViewIndex permite cambiar la vista actual. Veamos entonces cómo quedaría la sintaxis: Este es el contenido de la Vista1 Este es el contenido de la Vista2 Multiview1 View2 View1

    Fig. 6-31. Así se ve un MultiView en Visual Studio o VWD. Recordemos que debemos insertar un MultiView y luego un View por cada vista distinta que querramos tener.

    Substitution Este control no genera ningún código visual al y sirve para sustituir información en páginas que están utilizando caché. Sabemos que si utilizamos caché de páginas, por defecto, toda la página es cacheada, pero ¿qué sucede si tenemos alguna pequeña porción de información que sí debe ser actualizada por cada solicitud, sin perder el caché de todo el resto? Allí aparece el control Substitution, que automáticamente llama ante cada petición a algún método que nosotros definamos en la propiedad MethodName y utiliza la información que dicho método devuelve para incluirla en la página Web como información dinámica, que sí se actualiza a pesar del caché. El método debe ser estático (static en C#, Shared en VB), recibir un objeto HttpContext como parámetro y devolver un string con el texto que se ha de ubicar donde ahora está el control Substitution. Veamos un ejemplo donde incluimos la hora por medio de la sustitución y donde la incluimos por medio del código de renderización, directamente en la página, y veremos que una se actualiza y la otra, por dos minutos (120 segundos), quedará siempre igual: Alfaomega

    Visual Studio - Firtman, Natale

    Controles de Navegación

    275

    <%@ Page Language="VB" %> <%@ OutputCache Duration="120" VaryByParam="None" %> <script runat="server"> Public Shared Function DarFecha(ByVal context As_ HttpContext) As String Return DateTime.Now.ToString() End Function

    <% Response.Write(DateTime.Now.ToString()) %>


    Localize Este es un nuevo control que extiende a Literal y nos permite definir un texto que será localizado según el idioma o ubicación geográfica del , simplificando esta tarea. Para ello, debemos utilizar las herramientas de recursos de localización que ASP.NET nos provee.

    Controles de Navegación Ya habíamos visto el control SiteMapDataSource y el que nos daba un origen de datos al archivo Web.sitemap. Ahora veremos en qué controles podremos utilizar este origen de datos y también el origen de XML

    TreeView El control vista de árbol, o TreeView, es uno de los controles ricos más útiles de los incorporados en ASP.NET. Nos permite visualizar una estructura jerárquica en un formato de árbol, pudiendo configurar fácilmente la apariencia visual e incluyendo varios formatos visuales muy útiles, como viñetas, os de MSN, flechas, tablas de contenido, árboles de carpetas, etc.

    Visual Studio - Firtman, Natale

    Alfaomega

    276

    6- ASP.NET

    El origen de datos debe ser jerárquico, como en el caso de XmlDataSource o SiteMapDataSource. El podrá abrir o cerrar la rama de cada árbol haciendo clic en la imagen que acompaña a cada nodo y esta opción puede ser desactivada mediante ShowExpandCollapse. Con ShowLines podemos habilitar o deshabilitar que se vean líneas conectoras entre todos los nodos. Automáticamente, el control genera código de cliente para poder dar la funcionalidad de abrir o cerrar nodos, pero si el cliente no soporta esta opción se realiza mediante postbacks. La propiedad ExpandDepth nos permite definir con qué profundidad vamos a mostrar el árbol la primera vez, pudiendo dar un número o definiendo FullyExpand para mostrar todo el árbol abierto.

    Fig. 6-32. Aquí vemos un TreeView obteniendo datos de un archivo XML y utilizando un formato gráfico conocido para todos los s de Windows.

    Alfaomega

    Visual Studio - Firtman, Natale

    Controles de Navegación

    277

    Fig. 6-33. Como vemos, el puede expandir o contraer cada rama de la estructura sin mayor problema.

    Una opción muy interesante es la posibilidad de activar casillas de verificación CheckBoxs para los nodos. De esta forma, el podrá seleccionar uno o más nodos y así, luego desde el código de servidor, podremos recorrer la estructura para saber qué seleccionó. Esta opción se puede activar de distintas formas en ShowCheckBoxes.

    Fig. 6-34. Podemos activar la opción de que el pueda seleccionar nodos, pudiendo elegir todos los nodos, las ramas o la raíz. Visual Studio - Firtman, Natale

    Alfaomega

    278

    6- ASP.NET

    También podremos definir los nodos en forma estática (que no obtengan los datos de un origen de datos), a través del editor de nodos que ofrece Visual Studio. Un código de ejemplo, sería el siguiente:

    Fig. 6-35. Editando nodos en forma estática podremos crear una estructura y definir opciones particulares para cada nodo. Alfaomega

    Visual Studio - Firtman, Natale

    Controles de Navegación

    279

    SiteMapPath Este es un control muy fácil de utilizar y extremadamente útil para cualquier sitio Web. El mismo expone el camino absoluto que ha seguido el hasta llegar a la página Web, comenzando desde la Home Page. Este comportamiento es también conocido como “Migajas de Pan”, en alusión al cuento de Hansell y Gretel. Si estamos en la página principal, por ejemplo veremos el siguiente texto: Home Page

    Ahora, si entramos a la sección Productos y de ahí a Monitores, tendríamos: Home Page > Productos > Monitores

    Y mejor todavía, Home Page y Productos tendrán un link para volver a cada una de esas páginas. Sin escribir nada de código. Lo único que necesitamos es tener el archivo Web.sitemap con la estructura del sitio y, automáticamente, ASP.NET hará todo el trabajo de este control. Podremos definir estilos distintos para el nodo principal (Root Node), para los nodos intermedios (Parent Node) y para el nodo actual (Current Node). Algunas propiedades interesantes para mencionar son: PathDirection, con la opción de seleccionar que se muestre desde la home hacia la página actual (RootToCurrent) o al revés (CurrentToRoot); PathSeparator, para definir el carácter que separará cada nodo (por defecto >); RenderCurrentNodeAsLink, que permite definir si la página actual donde está el tendrá link o no; ParentLevelsDisplayed, con el número máximo de nodos para mostrar (o -1 para todos) y SiteMapProvider, en el caso de que usemos un proveedor desarrollado por nosotros para crear la estructura.

    MenU Este control genera menús de navegación desplegables para instalar en cualquier página Web. Las opciones del menú las podemos obtener automáticamente del archivo Web.sitemap, de un archivo XML o podemos definirlas, en forma estática, con el editor de nodos o vía código de servidor. Automáticamente ASP.NET generará todo el código JavaScript para que el control funcione correctamente en todos los navegadores. Este control tiene decenas de propiedades dignas de ser estudiadas por separado para lograr los efectos visuales que queremos en nuestro menú de navegación, pero seguramente nuestra opción principal será Orientation, pudiendo elegir un menú Horizontal o un menú Vertical. Visual Studio - Firtman, Natale

    Alfaomega

    280

    6- ASP.NET

    Fig. 6-36. Aquí vemos nuestro control en acción dentro de la estructura de un sitio Web. Fácilmente podemos adaptar el diseño del control a nuestro sitio.

    Fig. 6-37. En Visual Studio o Visual Web Developer podremos tener una vista previa de cómo se verá nuestro menú dentro de la página.

    Alfaomega

    Visual Studio - Firtman, Natale

    Identificación de s

    281



    Si bien desde el archivo Web.sitemap o en cada opción (con NavigateUrl) podemos tener definidas las URLs a dónde dirigir al , podemos capturar el evento de servidor MenuItemClick para realizar alguna acción o saber qué opción eligió el recibiendo por parámetro el Item seleccionado, cuando no definimos ninguna URL por defecto en una opción.

    Identificación de s Introducción Ya en ASP.NET 1.x existía el concepto de autenticación y autorización en páginas Web ASP.NET, que permitían que ciertas páginas en nuestro sitio estén restringidas solamente a s registrados, a algún en particular o a un que pertenezca a un rol. Los conceptos se mantienen y seguimos teniendo autenticación basada en Windows, basada en formularios y basada en Microsoft port, agregando soporte para Windows Cardspace. Autenticación por Formularios El concepto sigue siendo el mismo, pudiendo definir en un archivo :HEFRQ¿J la seguridad que se ha de aplicar en distintas carpetas, por ejemplo: FRQ¿JXUDWLRQ! <system.Web>

    Visual Studio - Firtman, Natale

    Alfaomega

    282

    6- ASP.NET

    <deny s="?" /> FRQ¿JXUation>

    En este archivo estamos denegando a todos los s anónimos (no autenticados) que intenten ingresar a la carpeta actual. Desde ASP.NET 2.0 aparecen algunas opciones adicionales a la autenticación por formularios, como ser cookieless, que permite guardar los datos del en la URL, enableCrossAppRedirects, que permite pasar la actual autenticación del hacia otra aplicación .NET y requiere SSL para obligar a identificarse mediante este método. Recordemos que con Url indicamos a dónde dirigir al cuando intenta ingresar a una página privada.

    Podemos definir s diferenciados por roles, como por ejemplo: <deny s="*" />

    Y recordemos que en .aspx, cuando verificamos que el y la contraseña son válidos, debemos invocar al siguiente método para que el sistema registre la autenticación: FormsAuthentication.RedirectFromPage(nombre_, cookie_pesistente)

    Sin embargo, en breve veremos que ahora ya ni necesitaremos hacer esto con los nuevos controles disponibles.

    hip Clase hip La clase hip pertenece al namespace System.Web.Security y provee de métodos para crear y almacenar información de s del sistema (que son de clase hip). Esta clase, junto con un proveedor de datos, puede ocuparse por su cuenta de istrar los s (no Alfaomega

    Visual Studio - Firtman, Natale

    Identificación de s

    283

    necesitamos crear esta tabla en nuestra base de datos siquiera, salvo que lo necesitemos), para validar las credenciales de ingreso y para trabajar con la contraseña. Se pueden crear s desde código de servidor, a través de la clase hip, por ejemplo con el método Create, que tiene distintas sobrecargas para enviarles más o menos datos. Por ejemplo, hip.Create("", "contraseña", "email");

    Otra opción es utilizar el Web de ASP.NET, que nos permitirá crear y istrar los s desde la interfaz Web. Recordemos que accedemos a esta opción desde Visual Studio o Visual Web Developer en el menú Website, $631(7&RQ¿JXUDWLRQ. ASP.NET viene con dos proveedores que le pueden brindar el almacenamiento de los registros: ActiveDirectoryhipProvider, para conectarnos a un servidor de directorio activo de Microsoft, y SqlhipProvider, que nos permite almacenar toda la información en SQL Server o Access. Esta configuración se hace en el :HEFRQ¿J o utilizando el Web. Algunas propiedades interesantes son EnableReset, que permite definir si vamos a autorizar reiniciar la contraseña, EnableRetrieval, para definir si permitimos recuperar la contraseña, MaxInvalidAttemps, para la cantidad máxima de intentos de ingreso de claves erróneas antes de bloquear la cuenta, MinRequiredLength, para la cantidad de caracteres mínimos de la contraseña y IsOnlineTimeWindows, para la cantidad de minutos de inactividad en que se considera al desconectado. Los métodos que más vamos a utilizar, que son simples de reconocer por su nombre, son: Create, Delete, FindsByEmail, FindsByName, Generate (que genera contraseña al azar), GetAlls, GetNumerOfsOnline, Get y Validate. Clase hip Esta clase representa y almacena a un registrado en el proveedor de datos de hip. Los atributos más comunes de un son los siguientes: Atributos

    Descripción

    Comment

    Comentario sobre el .

    CreationDate

    Fecha y Hora de creación.

    Visual Studio - Firtman, Natale

    Alfaomega

    284

    6- ASP.NET

    Email

    Dirección de correo electrónico.

    IsApproved

    Si esta opción está en falso, el no puede loguearse.

    IsLockedOut

    Si esta opción está en verdadero, el fue bloqueado.

    IsOnline

    Dice si el está conectado.

    LastDate

    Última fecha de .

    Question

    Pregunta que definió el para recuperar su contraseña.

    Name

    Devuelve el nombre de .

    Los métodos que más utilizaremos son Change, que cambia la contraseña del , Reset, para reinicializar la contraseña y Unlock, para desbloquear un que ha sido bloqueado por intentos erróneos de contraseña.

    Roles El sistema de membresía también incluye una istración de roles (la clase Roles). Un rol simplemente es un nombre conceptual al que luego podemos asignarle s y, ante alguna operación o a algún Webform, podemos definir a qué roles habilitamos.

    Controles Más allá de que tengamos una clase hip que se ocupa de todo, ¿qué más ha cambiado desde ASP.NET 1.x? Para saber eso, veamos la lista de controles de , que ahora harán todo automáticamente comunicándose con la clase hip.

    Este es el control principal que usaremos si utilizamos los servicios de hip. Es un control Web que representa la casilla de identificación de en el sitio Web. Posee dos campos de texto, para y contraseña, una casilla de verificación para definir si queremos ser recordados la próxima vez y un botón de . Cuando el ingresa sus datos automáticamente es el sistema de hip el que lo valida y el que valida las credenciales del .

    Alfaomega

    Visual Studio - Firtman, Natale

    Identificación de s

    285

    Fig. 6-38. Aquí vemos el control sin ninguna propiedad especial configurada. Con este control ya tenemos un sistema de identificación de s funcionando.

    Algunas propiedades útiles para tener en cuenta son: Propiedad FailureText

    Descripción Texto que se ha de mostrar cuando los datos de identificación son inválidos.

    InstructionText

    Texto que se muestra por encima de los controles de ingreso, dando instrucciones al de cómo debe proceder.

    ButtonImageUrl

    Si queremos que el botón de sea una imagen, aquí va la URL.

    ButtonText

    Texto que se ha de mostrar en el botón.

    ButtonType

    Puede ser Button, Image o Link.

    Label

    Etiqueta que se ha de usar para mencionar la contraseña.

    MeText

    Texto de “Recordarme la próxima vez”.

    TitleText

    Título para mostrar en la tabla.

    Name

    Nombre de que se ha de utilizar por defecto.

    NameLabel DestinationPage DisplayMe Orientation TextLayout

    Etiqueta que se ha de usar para mencionar el nombre de . La URL a dónde dirigir al cuando se loguea correctamente. Permite definir si mostramos o no al la opción de que el sistema lo recuerde. Permite definir una orientación horizontal o vertical de los datos. Define si las etiquetas de los controles de ingreso se muestran a la izquierda (TextOnLeft) o arriba (TextOnTop).

    RequiredErrorMessage Mensaje de error cuando no ingresa la contraseña. NameRequiredErrorMessage Mensaje de error cuando no ingresa el .

    Visual Studio - Firtman, Natale

    Alfaomega

    286

    6- ASP.NET

    También, tenemos disponibles propiedades para generar links adicionales en el control. Estas propiedades son <nombre>Text con el nombre que se ha de mostrar en el link, <nombre>Url con la dirección a dónde enviar al y <nombre>Icon con la Url de un ícono opcional para utilizar en el link. Donde dice <nombre> podemos reemplazarlo por Create para el link destinado a que el se cree una nueva cuenta; HelpPage para el link de ayuda; y Recovery para el link que lleve al a recuperar su contraseña. Name Este control es realmente muy simple pero útil. Muestra el nombre del logueado, si es que está identificado, y no genera ningún código HTML si el todavía no está identificado. Su única propiedad fuera de las propiedades de formato, es FormatString, que permite definir un texto adicional, por ejemplo : {0}, donde se reemplazará el nombre de donde está el {0}. Status Este control permite generar vínculos para loguear o desloguear al . Es útil para ubicar en todas las páginas Web y, según el estado de identificación del , muestra uno y otro link. El texto de los links lo podemos cambiar en Text y Text o, si queremos utilizar imágenes, ImageUrl y ImageUrl. También debemos definir cuál es la página encargada de hacer el (eliminar la identificación) en PageUrl y qué queremos hacer una vez que el se desloguea (Action), si refrescar la misma página (Refresh), redirigir al a la página que definimos anteriormente (Redirect) o reenviar al a la página de (RedirectToPage). View La vista de , o View, es un control que hereda comportamiento del control View y permite definir distinto contenido (vistas) según si el está identificado o no. También, en el caso de que lo esté, es posible definir vistas según el rol al que pertenezca el . De esta manera, cuando arrastramos un control de esta clase a un Webform, veremos que Visual Studio nos da automáticamente dos vistas disponibles para editar: AnonymousTemplate para cuando el no está identificado y LoggedInTemplate para cuando sí lo está.

    Alfaomega

    Visual Studio - Firtman, Natale

    Identificación de s

    287

    Fig. 6-39. En Visual Studio o VWD podemos elegir la vista que se ha de utilizar, ya sea para s anónimos o para s registrados.

    El entorno de trabajo nos da la posibilidad, también, de agregar una vista adicional por cada grupo de roles que querramos definir. Un ejemplo sería: Es del rol (VWi/RJXHDGRFRQHOXVXDULR 1RHVWiORJXHDGR

    Recovery El control Recovery (Recuperación de Contraseña) ofrece toda la funcionalidad para que el pueda recuperar la contraseña si la ha olvidado, enviándosela por e-mail en caso de que cumpla con los requisitos. El control se basa en tres plantillas: Name, que le pide el nombre de para enviar la contraseña, Question, que le pide la pregunta y respuesta privada para garantizar que es quien dice ser y Sucess, que le avisa al que la contraseña le fue enviada por e-mail. Así como el control , podemos cambiar todos los textos y nombres de los botones. Recordemos que la funcionalidad se realiza automáticamente y no Visual Studio - Firtman, Natale

    Alfaomega

    288

    6- ASP.NET

    necesitaremos ningún código de servidor para que funcionen; automáticamente usan el servicio de hip. Change Otro control que realiza toda su funcionalidad automática es el cambio de contraseña o Change. Este control automáticamente le pide al su contraseña actual y que ingrese una nueva dos veces, realiza la verificación de estos datos y, si fue existoso, pasa a una vista de Sucess, donde le avisa al que el cambio fue realizado. Tendremos varias propiedades para definir todos los textos en nuestro idioma y las propiedades CancelDestinationPageUrl y ContinueDestinationPageUrl para definir los nombres de las páginas si el cancela o hace el cambio de contraseña, respectivamente.

    Fig. 6-40: Así se ve el control para cambiar la contraseña, editando las propiedades que definen el nombre de cada componente

    CreateWizard Este control es un asistente para registrar un nuevo en el sistema, con dos pasos ya diseñados por el control: Sign Up (con los datos para registrarse) y Complete para informar al que ha sido dado de alta. Este control es tan complejo en la cantidad de propiedades y estilos que podemos definir hasta lograr la apariencia que deseamos, que excede el espacio que podemos dedicarle en este libro. Tengamos en cuenta que si queremos podemos también definir nuevos pasos para información adicional. Por defecto, los campos que solicita al son: Nombre de , Contraseña, E-mail, Pregunta y Respuesta (para recuperar la contraseña). Si definimos en True a Created, automáticamente el será identificado después de crearse y si activamos DisableCreated, el no podrá identificarse en el sistema hasta tanto no sea habilitado por el . Con FinishDestinationPageUrl definiremos la dirección a dónde enviar al luego de crear su nueva cuenta.

    Alfaomega

    Visual Studio - Firtman, Natale

    Identificación de s

    289

    Es importante que mencionemos un objeto 0DLO'H¿QLWLRQ dentro del CreateWizard, que permite definir distintas opciones relativas al e-mail de confirmación de alta que recibirá el cuando se cree su cuenta. Entre ellas tenemos From (dirección remitente), IsBodyHTML (define si el cuerpo es en formato HTML), Subject (asunto) y BodyFileName, que especifica el nombre de un archivo (de texto o HTML) que contiene el cuerpo del mensaje que se le enviará al . También podemos enviarle archivos adjuntos a través de EmbeddedCollection. El archivo que tiene el cuerpo del mensaje podrá contener expresiones del tipo <%Name%> y <%%> para ser reemplazados por el y contraseña recién creados.

    Fig. 6-41. El clásico formulario de registro de s ahora lo tenemos disponible con sólo arrastrarlo y, sin escribir nada de código, funcionará solo gracias al servicio de hip.

    Visual Studio - Firtman, Natale

    Alfaomega

    290

    6- ASP.NET

    Fig. 6-42. Visual Web Developer nos ofrece una lista extensa de Smart Tasks para el control CreateWizard.

    Perfiles de ¿Qué es un Perfil? El perfil de un es un conjunto de atributos que queremos almacenar por cada registrado en nuestro sitio. Estas propiedades se definen en un archivo :HEFRQ¿J y, luego, en ASP.NET podemos accederlos a través del objeto instanciado 3UR¿OH dentro de cualquier página. ASP.NET automáticamente toma el esquema que se definió en :HEFRQ¿J y genera la clase con sus propiedades públicas, como cualquier clase. Si bien la idea de 3UR¿OH es almacenar información de s registrados, también podemos hacerlo con s anónimos a través de la opción $QRQ\PRXV,GHQWL¿FDWLRQ. Luego, si se identifican o registran podemos migrarlos a perfiles autenticados. A través del 3UR¿OH0DQDJHU podemos istrar los perfiles de s, consultar estadísticas, saber la cantidad que no ha actualizado su perfil en un período de tiempo o eliminar perfiles por unidad o por antigüedad.

    Alfaomega

    Visual Studio - Firtman, Natale

    WebParts

    291

    Definición de los Perfiles Veamos rápidamente de qué se trata mirando un ejemplo de :HEFRQ¿J: <system.Web> SUR¿OHHQDEOHG WUXHGHIDXOW3URYLGHU 4XLFN6WDUW3UR¿OH6TO3URY LGHULQKHULWV 8VHU'H¿QHG3UR¿OH&ODVV! <properties> DGGQDPH &RORU'H7LSRJUD¿D3UHIHULGRW\SH 6\VWHP Drawing.Color" allowAnonymous="true" serializeAs="Binary"/> SUR¿OH!

    Accediendo al perfil Si queremos acceder a una propiedad, tenemos a 3UR¿OH3URSLHGDG para leer o escribir una propiedad desde cualquier página. A través de IsAnonymous podremos saber si el es anónimo o autenticado y LastActivityDate nos da la posibilidad de saber la última fecha de actividad en el perfil (lectura o escritura).

    WebParts Qué son El último paso que ha incorporado ASP.NET 2.0 en cuanto a personalización son los WebParts. Es una serie de controles Web que permiten tener contenido dinámico y personalizado en una página, en donde el puede decidir en qué lugar colocar cada contenido, qué contenido quiere ver y la posibilidad de personalizar cada uno de los módulos de contenido. Por ejemplo, podemos tener una página Web con información del clima, información financiera, noticias, etc. o una página principal de una intranet don-

    Visual Studio - Firtman, Natale

    Alfaomega

    292

    6- ASP.NET

    de ofrecemos noticias de la empresa, al calendario de eventos, a un módulo para pedir comida al restaurant de la empresa y hasta a un módulo para analizar las ventas del empleado. Todos estos módulos podrían ser editados por cada , entendiendo por editar la posibilidad de cambiar preferencias de cada uno, cambiarlos de lugar, de tamaño o eliminar módulos y agregar otros. Todo esto queda registrado debidamente en el sistema para que cuando el vuelva en otro momento, sus preferencias se mantengan vigentes. Esto es WebParts en ASP.NET. Y agregamos la idea de que el manejo de los controles tiene una interfaz muy agradable y similar a la que utilizan sitios de este tipo, como Windows Live, Google Personalizad o My Yahoo! La información de personalización se guarda automáticamente por y es él quien puede mover el contenido en la página, arrastrando y soltando, generando un efecto visual en la interfaz.

    Conceptos Una página Web con WebParts contiene lo siguiente: 1. Distintos WebParts (módulos de contenido) que no son más que controles Web o controles personalizados, que trabajarán en conjunto con las zonas y el de WebParts. 2. Zonas de WebParts, que son el método para organizar los módulos de contenido en regiones dentro de la página. 3. El de WebParts (WebPartManager), que istra el estado de personalización de las partes, coordina el movimiento y comunicación entre las partes y las zonas. Es obligatorio tener un control de éstos en una página. Además, existirá un catálogo de WebParts, que indicará un listado de módulos de contenido que estarán disponibles para que cada agregue o quite de su página personalizada.

    Controles El uso de WebParts podría llevarnos todo otro libro completo, por lo que vamos a nombrar los controles Web que tenemos disponibles para trabajar con esta funcionalidad y dejamos por cuenta del lector aumentar la profundidad de estos temas.

    Alfaomega

    Visual Studio - Firtman, Natale

    293

    Nuevos frameworks

    Control Web

    Descripción

    WebPartManager

    Es el control del sistema de WebParts y es obligatoria su inclusión.

    ProxyWebPartManager

    Permite definir una conexión estática cuando estamos incluyendo un WebPartManager en una página Maestra.

    WebPartZone

    Representa una zona en la página donde se podrán incluir WebParts.

    CatalogZone

    Representa una zona donde se le ofrece al la lista de módulos de información disponibles para agregar.

    DeclarativeCatalogPart

    Permite agregar controles de servidor al catálogo.

    PageCatalogPart

    Contiene referencia a las WebParts que el ha cerrado previamente.

    ImportCatalogPart

    Permite importar la referencia a una WebPart desde un archivo.

    EditorZone

    Es una zona que se utiliza cuando cualquier intenta editar cualquier WebPart. Aquí el define todas las propiedades.

    AppearanceEditorZone

    Deriva de EditorZone y permite definir propiedades respecto de la apariencia de un módulo.

    BehaviourEditorZone

    Deriva de EditorZone y permite definir propiedades respecto del comportamiento de un módulo.

    LayoutEditorZone

    Deriva de EditorZone y permite definir propiedades respecto de la estructura de visualización.

    PropertyGridEditorZone

    Permite definir propiedades personalizadas por el .

    ConnectionZone

    Permite que las WebParts se puedan conectar entre ellas y enviarse información.

    Nuevos frameworks Dynamic Data ASP.NET Dynamic Data (Datos Dinámicos o Campos Dinámicos) es un nuevo framework incorporado en 3.5 SP1, que nos permite generar un sitio basado en un origen de datos (generalmente una base de datos) que cubra la mayor parte de la funcionalidad básica de estos sitios, a saber: s s s s

    Consulta de Registros. Búsqueda de Registros. Filtrado de Registros. Manejo de Relaciones Maestro > Detalle.

    Visual Studio - Firtman, Natale

    Alfaomega

    294

    s s s s s s

    6- ASP.NET

    Manejo de Relaciones Padre > Hijo, por ejemplo, Categorias y sus Productos. Manejo de Relaciones Hijo > Padre, por ejemplo, Producto y la categoría a la que pertenece. Edición de Registros. Eliminación de Registros. Inserción de Registros. Validación de la edición e ingreso de datos.

    Fig. 6-43. Aquí vemos un ejemplo de sitio Web de campos dinámicos, sin escribir una sola línea de código.

    Y la mejor parte de todo esto, es que el framework se encarga de todo. Lo único que tenemos que poseer es un modelo de datos consistente y bien armado, por ejemplo, LINQ To SQL.

    Alfaomega

    Visual Studio - Firtman, Natale

    Nuevos frameworks

    295

    Creando un proyecto Los pasos para poder trabajar en forma simple y rápida con este framework son: s

    Crear un nuevo proyecto o sitio Web de tipo FDPSRVGLQiPLFRV (para LINQ to SQL) o de tipo HQWLGDGHV GH FDPSRV GLQiPLFRV (para Entity Framework).

    s

    Crear la base de datos en SQL Server, con todas las claves primarias, todas las relaciones armadas con restricción de clave foránea, correctamente definidos los campos que aceptan nulos.

    s

    Crear el modelo LINQ to SQL o Entity Framework (según el caso). Para el primer caso, en Visual Studio, no es más que crear un nuevo elemento de tipo Clases de LINQ to SQL y arrastrar todas las tablas del SQL Server al diseñador.

    s

    Editar el archivo global.asax, descomentar la línea indicada, indicar el tipo de datos DataContext, que en LINQ to SQL sabemos que será (nombre)DataContext.

    s

    En global.asax definir ScaffoldAllTables = true.

    s

    Ejecutar la aplicación Web.

    Al crear el proyecto, el sistema ya nos creará una serie de archivos, entre ellos el global.asax y una carpeta DynamicData con varias plantillas y archivos que podremos editar. En el global.asax debemos encontrar una línea que aparece comentada así en Visual Basic: ' model.Context(GetType(YourDataContextType), New ConWH[W&RQ¿JXUDWLRQ :LWK^6FDIIROG$OO7DEOHV )DOVH`

    En C#: //model.Context(typeof(YourDataContextType), new ConWH[W&RQ¿JXUDWLRQ ^6FDIIROG$OO7DEOHV IDOVH`

    Debemos descomentar la línea en cuestión, cambiar YourDataContextType por el nombre de la clase DataContext que LINQ to SQL nos generó, que debería ser nombreDataContext. Por ejemplo, si al modelo creado le llamamos Ventas, el tipo sería VentasDataContext. Por defecto, el sistema no habilita el trabajo sobre todas las tablas, a no ser que cambiemos el atributo ScaffoldAllTables por verdadero.

    Visual Studio - Firtman, Natale

    Alfaomega

    296

    6- ASP.NET

    Fig. 6-44. Así se ve la primera pantalla de un sitio Web de campos dinámicos.

    Si navegamos por el sitio, veremos que tendremos disponible un vínculo por cada tabla y en cada tabla, la posibilidad de editar, eliminar, insertar y filtrar. Todo sin escribir una sola línea de código.

    Fig. 6-45. Podemos verificar que, en el caso de claves foráneas, automáticamente al editar se utiliza un DropDownList para la selección del dato. Alfaomega

    Visual Studio - Firtman, Natale

    297

    Nuevos frameworks

    Maestro-Detalle Si en lugar de tener todas las operaciones (listar, detalle, edición e inserción) sobre la misma página, quisiéramos cambiar a un modelo Maestro Detalle, para eso comentaríamos o eliminaríamos las siguientes líneas: routes.Add(New DynamicDataRoute("{table}/{action}.aspx")_ With { _ .Constraints = New RouteValueDictionary(New With_ {.Action = "List|Details|Edit|Insert"}), _ .Model = model})

    Y descomentaríamos las siguientes: routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx") { Action = PageAction.List, ViewName = "ListDetails", Model = model }); routes.Add(new DynamicDataRoute("{table}/ListDetails.aspx") { Action = PageAction.Details, ViewName = "ListDetails", Model = model });

    Funcionamiento Si intentamos analizar un poco del código del método Routes en el global.asax, el cual es invocado por el evento Application_Start, vemos que lo que realiza es una cierta registración de algo llamado Ruta Dinámica. Una ruta dinámica es una URL inexistente físicamente en el directorio de la aplicación Web, pero que es capturada por un nuevo framework de rutas y redirigida a la función correspondiente. Por eso, cuando probamos nuestro proyecto de campos dinámicos veremos que al entrar a una tabla, por ejemplo, Clientes, vemos una URL del estilo: http://dominio/Clientes/List.aspx

    Visual Studio - Firtman, Natale

    Alfaomega

    298

    6- ASP.NET

    Fig. 6-46. También podemos separar la lista del detalle.

    Y si revisamos en la carpeta de archivos, no existe ninguna subcarpeta con el nombre Clientes. Este es el concepto de ruteo dinámico. El sistema automáticamente relaciona algo/List.aspx a una operación de listado, siendo algo, el nombre de la Tabla. Personalización básica La primera personalización que podemos hacer a un sitio Dynamic Data es modificar sus estilos, y para ello podemos encontrar en la carpeta raíz los archivos Site.master y Site.css, siendo la página principal (Master Page) y la hoja de estilos CSS, respectivamente. Luego encontraremos en la carpeta DynamicData/PageTemplates varias páginas ASPX, que son las plantillas que se utilizan para cada operación del sitio Web, a saber:

    Alfaomega

    Visual Studio - Firtman, Natale

    299

    Nuevos frameworks

    Archivo

    Propósito

    Details.aspx

    Muestra el detalle de un registro.

    Edit.aspx

    Muestra la edición en detalle de un registro.

    Insert.aspx

    Muestra la inserción en detalle de un registro.

    List.aspx

    Muestra las operaciones de listado.

    ListDetail.aspx

    Muestra las operaciones de listado cuando estamos en el formato maestro-detalle.

    En la carpeta DynamicData/FieldTemplates encontraremos distintos controles de ASCX, que se utilizan automáticamente para cada tipo de datos, en versión visualización (como Boolean.ascx) y en versión edición (como Boolean_Edit.ascx). Allí se pueden editar, y también agregar, cómo queremos que se dibuje cada campo, según el tipo de datos definido en el origen de datos.

    Fig. 6-47. Aquí vemos la carpeta FieldTemplates con cada control representando un tipo de datos.

    Por último, en DynamicData/Content encontraremos controles que se utilizan en la paginación de registros y en el filtrado del contenido de las tablas. Personalización avanzada El framework de campos dinámicos es mucho más complejo e interesante. Recomendamos ampliamente visitar el sitio www.asp.net/dynamicdata y revisar toVisual Studio - Firtman, Natale

    Alfaomega

    300

    6- ASP.NET

    dos los videos y ejemplos de cada funcionalidad que podemos aplicar al sitio Web, sin ingresar código intrusivo, es decir, sin terminar haciendo un sitio Web complejo. Por ejemplo, es posible definir qué tablas van a ser editables, definir una página existente distinta por cada una, en lugar de utilizar ruteos dinámicos. También, a través de metadatos sobre las clases del modelo, es posible modificar: s s s s

    s s

    Nombres visibles de las tablas. Nombres visibles de cada atributo. Qué control Web utilizar para mostrar y/o editar cada campo, por ejemplo, un control de texto rico para un campo comentarios. Agregar reglas de validación adicionales, como por ejemplo, una expresión regular para una dirección de correo, un rango válido de un campo numérico o una regla de negocio propia de un campo. Definir campos de sólo lectura. Utilizar AJAX y controles ricos para los campos.

    Estos temas escapan al alcance de este libro, pero vale mencionar que estas opciones no se modifican en un ASPX o en una plantilla, sino directamente sobre el origen del dato y sobre las clases que representan a cada tabla, lo que lo hace totalmente orientado a objetos y muy simple y sencillo de modificar. Esto es gracias a que, por ejemplo en LINQ to SQL, cada clase que representa a una tabla (Cliente por ejemplo), está definida como una clase parcial. Esto implica que podemos agregar un nuevo archivo Cliente.cs o Cliente.vb, también parcial, e incorporarle a la clase metadatos (atributos), nuevos atributos, métodos de lógica y todo lo que queramos. El framework Dynamic Data lee, mediante reflexión, estos metadatos y con ello modifica el comportamiento del sitio Web. Por ejemplo, con definir en la clase parcial el nombre de una clase extra de metadatos alcanza para que Dynamic Data cambie su comportamiento: >0HWDGDWD7\SHW\SHRI&OLHQWH0HWDGDWD @ public partial class Cliente { } // Sirve para proveerle de metadatos a Dynamic Data sobre la // clase Cliente Public class ClienteMetadata { // Con colocar object como tipo de datos, alcanza. // Solo importa que el nombre del atributo concuerde con // el atributo en Cliente >'LVSOD\1DPH1RPEUHGHO&OLHQWH @ >5HTXLUHG(UURU0HVVDJH (OQRPEUHHVREOLJDWRULR @ public object Nombre; }

    Alfaomega

    Visual Studio - Firtman, Natale

    Nuevos frameworks

    301

    El código anterior habilitaría a Dynamic Data a colocar “Nombre del Cliente” como encabezado y una validación de campo obligatorio sobre el atributo Nombre de la clase Cliente, y como mensaje de error colocaría “El nombre es obligatorio”. Otros atributos de uso común sobre los atributos son RegularExpression, Range, UIHint, DataType, DisplayFormat y StringLength. La lista de posibles atributos que se pueden definir sobre las tablas y/o sobre los atributos las encontramos en System.ComponentModel y System. ComponentModel.DataAnnotations. También DynamicData define algunos métodos parciales, que podemos implementar en nuestra porción de la clase para capturar cambios en las tablas y cambios en cada uno de los atributos, lo que nos permitirá definir una lógica más compleja de validación, auditoría y aceptación de cambios. El código anterior es totalmente no intrusivo respecto de la visualización y operación de las páginas Web y queda claro que modifica sólo la capa de lógica de negocios. Manualmente dinámicos Si bien no es habitual, también es posible utilizar los controles del framework de datos dinámicos en un sitio ASP.NET común y manejar toda la lógica manualmente. Para ello, el framework incorporó los controles DynamicDataManger, que es la clase organizadora de esta metodología y obligatoria para el uso del resto, DynamicControl, que representa un control Web dinámico según el tipo de datos del campo que se ha de mostrar y DynamicValidator, que agrega validación automática según las reglas de negocio y metadatos asociados al atributo en cuestión.

    URL Routing Este framework disponible en el namespace System.Web.Routing permite utilizar las técnicas de ruteo dinámico vistas en Dynamic Data y que quedan por ver en ASP.NET MVC, para nuestras propias aplicaciones con nuestra lógica. Esto permite trabajar con URLs dinámicas y, entre las ventajas, además de encapsular la dirección física de los formularios Web y sus parámetros, permite realizar lo que se conoce como URLs amigables o friendly URLs, que ayudan a que los motores de búsqueda indexen mejor nuestra Web, cambiando URLs del tipo dominio.com/producto.aspx?id=2344 por URLs del tipo dominio.com/monitores/pantalla-lcd/samsung-syncmaster-740. Antes de este framework era posible realizar esta tarea a través de HTTP Handlers con ASP.NET.

    Visual Studio - Firtman, Natale

    Alfaomega

    302

    6- ASP.NET

    Ruteo por IIS Para una técnica de ruteo dinámico más estática, que se pueda expresar por reglas definidas por expresiones regulares, el equipo del servidor Internet Information Server (IIS) lanzó un agregado gratuito para IIS 7 llamado URL Rewrite, que emula de cierta forma la ya conocida metodología del servidor Apache para realizar la misma tarea. Este módulo agregado puede ser descargado desde el sitio iis.net.

    Controles Silverlight Ya sabemos que Silverlight es un nuevo modelo de desarrollo de aplicaciones Web ricas en el cliente, equiparable en alguna medida con Adobe Flash, utilizando .NET Framework y varios lenguajes, entre ellos C#, Visual Basic y JavaScript, compatible con varios navegadores y sistemas operativos. Descargando Silverlight SDK desde silverlight.net, podremos no sólo crear aplicaciones Silverlight desde Visual Studio y desde Visual Web Developer Express, sino que también se nos agregarán controles ASP.NET para trabajar con contenido de este tipo. Estos controles se agregan en el namespace System.Web.UI.Silverlight Controls y requieren que se disponga de un ScriptManager, control de ASP. NET AJAX, que veremos en el próximo capítulo. MediaPlayer Es un nuevo control ASP.NET, que nos permitirá generar un reproductor multimedia en nuestro sitio Web. Podremos reproducir cualquier archivo compatible con el runtime de Silverlight, entre ellos WMV (Windows Media Video), WMA (Windows Media Audio), MP3 o un contenido distribuido por un Windows Media Server. Sólo debemos elegir el origen de datos y elegir de una lista de skins o temas predefinidos para el reproductor creados en formato XAML. Aquí vemos un ejemplo de código.

    Alfaomega

    Visual Studio - Firtman, Natale

    Nuevos frameworks

    303

    Fig. 6-48. Crear un reproductor de video es cuestión de segundos con Silverlight y ASP.NET.

    Contenido Silverlight El control Silverlight permite incluir un contenido RIA (aplicación rica de Internet) desarrollado con tecnología Silverlight fácilmente. Utilizar el control simplemente se realiza definiendo el archivo origen, tamaño del control y versión del player de Silverlight requerido.

    También es posible integrarse con JavaScript, capturar eventos y crear controles Silverlight que interactúen con ASP.NET.

    Web Platform Installer En el afán de simplificar la tarea de crear aplicaciones ASP.NET, Microsoft creó los Starter Kits o kits de iniciación, que no son más que aplicaciones ASP.NET completas y funcionales, con todo lo necesario para ponerla en funcionamiento. Existen sitios personales, foros, sitios de e-commerce y pueden ser descargadas gratuitamente desde www.asp.net/s. Para darle un apoyo todavía más fuerte a la instalación de paquetes prearmados de sitios Web en ASP.NET, Microsoft creó el Web PI (Platform Installer o instalador de plataforma). Visual Studio - Firtman, Natale

    Alfaomega

    304

    6- ASP.NET

    El Web Platform Installer es un paquete gratuito que incluye las últimas versiones de: s

    Internet Information Server.

    s

    SQL Server Express.

    s

    .NET Framework.

    s

    Visual Web Developer.

    s

    Aplicaciones Web populares ASP y PHP, como Wordpress o DotNetNuke.

    Lenguajes Dinámicos Una incorporación todavía no finalizada al momento de editar este libro es la de lenguajes dinámicos, no estrictos ni compilados, en el framework de ASP.NET. Por ello existe el sitio www.asp.net/dynamiclanguages, donde es posible descargarse la última versión y adosarla a ASP.NET. El lenguaje disponible es IronPython, una implementación del clásico lenguaje Python para ASP.NET, que permitiría escribir sitios Web más rápidos (con las ventajas y desventajas de cualquier lenguaje dinámico). En el futuro se piensa incluir IronRuby, Managed Visual Basic (similar al viejo VBScript) y JScript (similar a JavaScript).

    Alfaomega

    Visual Studio - Firtman, Natale

    ASP.NET AJAX

    AJAX y MVC

    305

    7

    ASP.NET AJAX AJAX y RIA El framework Historia Microsoft no quiso quedarse atrás en el mundo de las aplicaciones ricas de Internet y de AJAX en concreto y, luego del lanzamiento de ASP.NET 2.0, comenzó a trabajar en el proyecto con nombre en código “Atlas”, un framework unido a los formularios Web de ASP, que permite trabajar con la modalidad de refresco parcial de un formulario, entre otras características. Así, a principios de 2007 surgió el hoy llamado ASP.NET AJAX, compuesto por una librería de cliente –Microsoft AJAX Library– compatible con cualquier lenguaje de servidor, un conjunto de controles de servidor, AJAX ASP.NET Extensions y una serie de controles y adaptadores de servidor de código abierto y ASP.NET AJAX Control Toolkit. ASP.NET AJAX está disponible como una descarga independiente para Visual Studio 2005 y .NET 2.0 y está incluido desde Visual Studio 2008 y .NET 3.5, por lo que ahora es parte integral de la plataforma .NET y evoluciona en conjunto con el resto de los componentes. AJAX Éste no pretende ser un libro de AJAX; para profundizar en esta técnica, recomendamos el libro “AJAX. Web 2.0 para Profesionales”, de esta misma editorial, y cuyo autor, Visual Studio - Firtman, Natale

    Alfaomega

    306

    7- AJAX y MVC

    el Lic. Maximiliano Firtman, es uno de los autores de este libro de Visual Studio. Para resumir, diremos que AJAX (Asynchronous JavaScript and XML, es decir, JavaScript Asincrónico con XML), es una técnica que involucra JavaScript, XML (aunque estrictamente XML se empezó a dejar de usar a cambio de JSON o de HTML) y un objeto hoy llamado XMLHttpRequest, invento original de Internet Explorer (y hoy compatible con el resto de los navegadores), que permite realizar una petición desde JavaScript hacia el servidor y recibir la respuesta sin necesidad de cambiar la página que el está viendo, ni realizar un POST o modificar el historial del navegador. La mayoría de los sitios Web 2.0, ágiles y rápidos (como Facebook, GMail, Google Maps, Windows Live Mail), están desarrollados utilizando esta técnica.

    Fig. 7-1. Libro “AJAX. Web 2.0 para Profesionales”, de Maximiliano Firtman.

    Librería de Cliente La librería conocida como Microsoft AJAX Library es un conjunto de funcionalidades que se agregan al lenguaje JavaScript para darle soporte de características propias de .NET. Esta librería es compatible con todos los navegadores y cualquier plataforma en el servidor, como ser PHP. Entre los agregados a JavaScript se encuentran: s

    Extensiones al tipo String: Funciones endsWith, format, startsWith, trim, trimEnd, trimStart, localeFormat. s Extensiones al tipo Object: Funciones getType, getTypeName. s Extensiones al tipo Number: Funciones format, localeFormat, parseLocale y parseInvariant. s Extensiones al DOM: $get y funciones addCssClass, containsCssClass , removeCssClass , getLocation , setLocation, getBounds. s Extensiones de tipo Eventos: Funciones addHandler, removeHandler, clearHandlers, preventDefault, stopPropagation. s Extensiones al tipo Date: Funciones format, localeFormat, parseLocale y parseInvariant. s Extensiones al tipo Array: Funciones add, addRange, clone, contains, dequeue, forEach, indexOf, insert, parse, enqueue, remove, removeAt. s Incorporación de conceptos de espacio de nombres, para agrupación de objetos y clases. Alfaomega

    Visual Studio - Firtman, Natale

    ASP.NET AJAX

    s s

    307

    Incorporación de Sys.Application, emitiendo los eventos init, load, unload y disposing. Incorporación de Sys.WebForms.PageRequestManager, emitiendo los eventos initializeRequest, beginRequest, pageLoading, pageLoaded, endRequest.

    window

    Application

    PageRequestManager

    onload

    pageload init

    load

    initializeRequest

    beginRequest

    pageLoading

    pageLoaded onunload endRequest pageUnload unload

    disposing

    Fig. 7-2. El nuevo modelo de eventos disponible en una página desde el punto de vista de JavaScript, utilizando Microsoft AJAX Library. Visual Studio - Firtman, Natale

    Alfaomega

    308

    7- AJAX y MVC

    Librería de Servidor Si bien es posible utilizar la librería de cliente sin necesidad de ASP.NET, lo cierto es que si trabajamos con esta plataforma de servidor, es muy probable que no necesitemos escribir JavaScript para utilizarla. Eso es debido a que el framework incluye unos controles de servidor que facilitan la tarea de implementar soluciones AJAX en nuestros desarrollos Web, conocidos como las Extensiones AJAX para ASP.NET. El framework no sólo es un framework más de AJAX disponible en el mercado; es el único que puede convertir cualquier sitio Web en AJAX en razón de 30 segundos, mientras que esté desarrollado en ASP.NET 2.0 o superior. Y esto se debe a que la naturaleza de los formularios y controles Web de ASP.NET, el PostBack y otras características propias de ASP hicieron que sea no intrusiva la incorporación de técnicas AJAX.

    Configuración Si estamos utilizando Visual Studio 2008 (o Visual Web Developer 2008 Express), así como .NET Framework 3.5 o superior, no necesitaremos nada especial para hacer uso de este framework. Simplemente, incluiremos en nuestro formulario Web los controles de AJAX que veremos a continuación y funcionará sin problemas. Si, en cambio, estamos todavía utilizando Visual Studio 2005, necesitaremos descargar ASP.NET AJAX Extensions desde el sitio Web www.asp.net/ajax y configurar en el :HEFRQ¿J las extensiones. Al instalar lo que es el agregado, Visual Studio tendrá una plantilla de creación de sitio Web que configurará automáticamente las extensiones. Desde 2008, esto ya no es necesario, aunque es posible descargar las plantillas por compatibilidad con proyectos viejos. Para poder hacer uso de estas extensiones, en cada formulario Web donde queremos hacer uso de AJAX, debemos disponer de un control ScriptManager. Veamos entonces cómo trabajar con estos nuevos controles. ScriptManager El ScriptManager ( de Scripts) es un control Web no visual indispensable para utilizar el resto de los controles. Su tarea principal es proveer de la inclusión en el HTML de los archivos JavaScript externos necesarios para el funcionamiento del framework de AJAX. Sólo puede haber un control ScriptManager por formulario Web (y por HTML resultante) y debe estar obligatoriamente definido antes que cualquier otro control que lo requiera. Por eso, generalmente acostumbramos a colocarlo al inicio del formulario Web, donde queremos hacer uso de

    Alfaomega

    Visual Studio - Firtman, Natale

    ASP.NET AJAX

    309

    técnicas AJAX. Podremos arrastrar el control desde el Cuadro de Herramientas en la categoría Extensiones AJAX. Desde Visual Studio 2008, dado que forma parte de la plataforma, se utiliza la etiqueta asp:ScriptManager. En versiones anteriores, es común encontrar el uso de otro prefijo, como ajax:ScriptManager. No obstante, se trata del mismo control con algunas mejoras y soluciones de problemas. En la mayoría de los casos utilizaremos el control en su condición mínima:

    Sobre este control podremos definir la propiedad AsynostBackTimeout, un valor entero en milisegundos, que será el tiempo máximo en el que el framework de cliente esperará a una respuesta del servidor ante una petición AJAX. Pasado este tiempo, se generará un error y se cancelará la petición. Por defecto, el ScriptManager se quedará esperando hasta que el servidor devuelva la respuesta o defina un error. La propiedad ScriptPath nos permite definir una ruta virtual para la que se generarán los scripts hacia el navegador para aprovechar los mecanismos de caché. Así, aún cuando utilicemos muchas carpetas distintas en nuestra aplicación, el navegador utilizará la misma versión del framework JavaScript, sin repetir la descarga. El control también nos permite definir cuáles archivos JavaScript queremos incluir y el framework se encarga de hacer la inclusión, asegurándose de que nuestros archivos JavaScript se cargarán luego de que la librería Microsoft AJAX Library esté cargada. Para ello, la colección Scripts nos permite definir nuestra colección: <Scripts>

    Por defecto, todos los archivos JavaScript (los propios del framework y los nuestros) se emiten en modo automático. Esto quiere decir que pueden emitirse en versiones de depuración (debug) como final (release), según la propiedad debug en el :HEFRQ¿J. Si queremos forzar a un cambio, podemos utilizar la propiedad ScriptMode disponible tanto en el control ScriptManager, como en ScriptReference. Esta propiedad acepta los valores Auto, Release o Debug. En el caso de los ScriptReference, al definir una versión de debug, el sistema buscará un archivo que posea .debug.js como sufijo del nombre –en nuestro ejemplo, controlador.debug.js–. La diferencia radica en los comentarios, mensajes de error y propiedades de depuración que podemos utilizar.

    Visual Studio - Firtman, Natale

    Alfaomega

    310

    7- AJAX y MVC

    También es posible incluir, a través de la colección de Scripts, archivos JavaScript embebidos en un compilado DLL, utilizando las propiedades Name y Assembly en lugar de Path, en el control ScriptReference. Estos recursos pueden estar localizados y así manipular textos JavaScript en distintos idiomas de una forma sencilla. Y para simplificar el desarrollo para múltiples países, ScriptManager acepta la propiedad lógica EnableScriptGlobalization que, al definirlo en true, nos permitirá localizar fechas y números en distintos idiomas desde JavaScript. Control de errores Otro tema importante que se incorpora cuando utilizamos técnicas AJAX es el control de errores. Pueden ocurrir diversos errores durante una petición asincrónica que se haga por AJAX: Puede ser que el servidor no responda, que se le haya cortado la conexión a Internet al , que el script en el servidor haya generado una excepción, etc. En una situación sin AJAX, el error se vería directamente en el navegador, pero en una situación asíncrona, es desde JavaScript donde necesitamos capturar este evento. Para ello, podremos capturar el evento JavaScript endRequest del objeto P a g e R e q u e s t M a n a g e r o s i m p l e m e n t e d e f i n i r l a p r o p i e d a d AsynostBackErrorMessage del control de servidor ScriptManager. Si usamos esta última opción, el recibirá ese mensaje en una alerta de JavaScript en el navegador. También podremos capturar el evento de servidor OnAsynostBackError del ScriptManager y decidir qué hacer o qué mensaje entregarle al cliente. Como última opción al control de errores asíncronos, podremos definir la propiedad AllowCustomErrorsRedirect en true, en el control ScriptManager y, de esta manera, cuando ocurra un error de servidor el perderá el dibujado parcial AJAX y se redirigirá a la clásica pantalla de excepciones que vemos sin AJAX. Decíamos que por defecto el mensaje de error (genérico o personalizado) se muestra en una clásica ventana de alerta de JavaScript. Para modificar ese comportamiento, podemos capturar el error en JavaScript y mostrar el mensaje de otra manera (en un DIV, por ejemplo). Para capturar el error el código sería el siguiente: <script type="text/javascript" language="javascript"> Sys.WebForms.PageRequestManager.getInstance().add_ endRequest(EndRequestHandler); function EndRequestHandler(sender, args) { LIDUJVJHWBHUURU XQGH¿QHG

    Alfaomega

    Visual Studio - Firtman, Natale

    ASP.NET AJAX

    311

    { // Hubo un error en la petición asincrónica var mensaje; if (args.get_response().get_statusCode() == '200') { mensaje = args.get_error().message; } else { // Ocurrió otro tipo de error PHQVDMH $QXQVSHFL¿HGHUURURFFXUUHG } // Le decimos al framework que nos encargamos // nosotros de manejar el error args.set_errorHandled(true); // TODO: Tomar acción con el error el mensaje } }

    ScriptManagerProxy ¿Qué sucede cuando trabajamos con Master Pages (Páginas Principales) y queremos hacer uso de AJAX, tanto en dicha plantilla como en cada página de contenido? Si colocamos un ScriptManager en la Página Maestra o Principal y un ScriptManager en el Formulario Web ASPX, recibiremos un error porque no puede haber dos es coexistiendo. Para ello, existe el control ScriptManagerProxy. El objetivo es colocar un ScriptManager en la página maestra y un ScriptManagerProxy en cada página de contenido donde queramos utilizar AJAX o definir alguna propiedad adicional. Este control posee las mismas propiedades que el anteriormente visto, pero se aplicará solo al .aspx en cuestión y no a todos los que utilicen la página maestra. Esta misma condición se aplica cuando programamos controles personalizados que usen este framework. Utilizaremos un ScriptManagerProxy para realizar un puente hacia el único ScriptManager que existirá en el formulario Web o página maestra. Su uso es idéntico al anterior, por lo que alcanzará con definirlo de la siguiente manera:

    Visual Studio - Firtman, Natale

    Alfaomega

    312

    7- AJAX y MVC

    Métodos de Página Uno de los más útiles agregados que tenemos disponible en ASP.NET AJAX es la posibilidad de poder ejecutar, desde JavaScript, cualquier método de nuestra página Web y recibir su resultado de forma asíncrona y sin depender de ningún control Web. Esta técnica se conoce como Page Methods o métodos de página. Para poder utilizarlo, sólo debemos crear un método estático (static en C# o Shared en VB) en nuestra clase parcial del formulario Web y agregarle el atributo WebMethod, como si se tratara de un servicio Web. Hecho esto, desde JavaScript estará disponible un objeto llamado PageMethods, que poseerá funciones JavaScript ya disponibles para cada uno de los métodos de página definidos. Esta función JavaScript recibirá la misma cantidad y tipo de parámetros del método .NET y tres parámetros opcionales más: Una función de callback, para cuando la operación se realizó correctamente, otra función para cuando generó error y un parámetro opcional, llamado contexto, que se enviará tal cual a la función de callback. .NET se encargará de convertir los parámetros y devolución desde y hacia JavaScript y .NET e, incluso, podremos generar excepciones en el servidor y recibirlas de esta manera en el cliente. Para poder hacer uso de los métodos de página, también es necesario explicitar el atributo EnablePageMethods en true del ScriptManager. Veamos un ejemplo para entender mejor el concepto: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> Suma con PageMethods 5c3o2b <script type="text/javascript"> function sumar() { var a = $get("a").value; var b = $get("b").value; PageMethods.Sumar(a, b, sumaOK); } function sumaOK(valor) { alert("La suma es " + valor); }



    Alfaomega

    Visual Studio - Firtman, Natale

    ASP.NET AJAX

    313

    +


    Using System.Web.Services public partial class _Default : System.Web.UI.Page { [WebMethod] public static int Sumar(int a, int b) { return a + b; } }

    Para el caso que fuera Visual Basic, el código Code Behind sería el siguiente:

    Imports System.Web.Services Public Partial Class _Default Inherits System.Web.UI.Page <WebMethod()> _ Public Shared Function Sumar(ByVal a As Integer, ByVal b As_ Integer) As Integer Return a + b End Function End Class

    El ejemplo toma dos valores y los suma, llamando vía AJAX a un método de página llamado Sumar. El framework se encarga de la petición asincrónica para lograrlo.

    Visual Studio - Firtman, Natale

    Alfaomega

    314

    7- AJAX y MVC

    Fig. 7-3. Aquí vemos nuestra petición AJAX realizada, vista en Internet Explorer 8.

    Si quisiéramos capturar los errores, cambiamos el código JavaScript por el siguiente: function sumar() { var a = $get("a").value; var b = $get("b").value; PageMethods.Sumar(a, b, sumaOK, sumaError); } function sumaOK(valor) { alert("La suma es " + valor); } function sumaError(result) { alert("No se pudo ejecutar la suma: " + result.get_message()); }

    Alfaomega

    Visual Studio - Firtman, Natale

    ASP.NET AJAX

    315

    Fig. 7-4. Aquí vemos el mensaje de error de la excepción generada en el servidor, capturado por JavaScript.

    Servicios Web Los métodos de página, en realidad, son una forma particular de la llamada asincrónica a Servicios Web (Web Services), que nos provee el framework de ASP.NET AJAX. Esta metodología nos permite invocar a cualquier servicio Web definido en nuestro servidor en formato asmx desde código JavaScript, de forma sencilla. Para poder hacer uso de esta función, necesitamos que nuestra clase servicio Web posea el atributo ScriptService. Esto permitirá que el framework genere las clases proxy en JavaScript, para acceder a todos los métodos públicos de dicho servicio Web. Además, debemos agregar nuestro servicio Web con extensión ASMX en la colección Services del control ScriptManager. Esto se puede hacer manualmente en el código ASP.NET o utilizando el asistente provisto por Visual Studio para tal fin. Veamos un ejemplo de código: Visual Studio - Firtman, Natale

    Alfaomega

    316

    7- AJAX y MVC

    <Services>

    Fig. 7-5. Aquí vemos el asistente de Visual Studio para agregar servicios Web al ScriptManager.

    Además, nuestro servicio Web deberá verse como el siguiente. Notemos el atributo ScriptService: [WebService(Namespace = "http://itmaster.es/")] >:HE6HUYLFH%LQGLQJ&RQIRUPV7R :VL3UR¿OHV%DVLF3UR¿OHB @ [System.Web.Script.ScriptService] public class WebService : System.Web.Services.WebService { … [WebMethod] public string HelloWorld() { return "Hola a todos"; } }

    Alfaomega

    Visual Studio - Firtman, Natale

    ASP.NET AJAX

    317

    Para el caso de VB, el código quedaría: <System.Web.Script.Services.ScriptService()> _ <WebService(Namespace:="http://tempuri.org/")> _ :HE6HUYLFH%LQGLQJ&RQIRUPV7R :VL3UR¿OHV%DVLF3UR¿OHB !B _ Public Class WebService Inherits System.Web.Services.WebService <WebMethod()> _ Public Function HelloWorld() As String Return "Hola a todos" End Function End Class

    Al hacer esto, desde JavaScript tendremos una clase ya creada con el mismo nombre del servicio Web, que hará de puente para invocar cada método del servicio Web y convertir la respuesta hacia JavaScript nuevamente. Esta función de JavaScript poseerá, primero, la misma cantidad de parámetros que el método en el servicio Web y, luego, se le agregarán tres parámetros no obligatorios de tipo función o callback: La función que queremos que se ejecute cuando la respuesta del servicio Web llegue, una función para capturar errores y una función para capturar un timeout o fin de espera de respuesta del servidor. Por defecto, la clase que crea se incluye como un JavaScript aparte. Podemos evitar esto con la propiedad InlineScript en true, dentro de la definición de cada servicio Web. Veamos un ejemplo completo de un conversor de grados Celsius a Fahrenheit, utilizando servicios Web y ASP.NET AJAX: Conversor.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Conversor.aspx.cs" Inherits="_Default" %> Conversor de Temperaturas 733t3q <script type="text/javascript"> function convertir() {

    Visual Studio - Firtman, Natale

    Alfaomega

    318

    7- AJAX y MVC

    var c = $get("c").value; var f = $get("f").value; if ((c=="") && (f=="")) { DOHUW'HEHHVSHFL¿FDUDOPHQRVXQDWHPSHUDWXUD } else if ((c!="") && (f!="")) { DOHUW'HEHHVSHFL¿FDUVyORXQDWHPSHUDWXUD } else if (c!="") { Conversor.CelsiusToFahrenheit(c, fahOK, error); } else { Conversor.FahrenheitToCelsius(f, cenOK, error); } } function fahOK(valor) { $get("f").value = valor; } function cenOK(valor) { $get("c").value = valor; } function error(result) { alert("No se pudo ejecutar la conversión: " + result.get_message()); }

    Conversor de Temperaturas 1e5a2k

    <Services> º C º F


    Alfaomega

    Visual Studio - Firtman, Natale

    ASP.NET AJAX

    319

    Conversor.asmx <%@ WebService Language="C#" CodeBehind="~/App_Code/Conversor. cs" Class="Conversor" %>

    Conversor.asmx.cs using using using using using using using

    System; System.Collections; System.Linq; System.Web; System.Web.Services; System.Web.Services.Protocols; System.Xml.Linq;

    /// <summary> /// Convierte de grados Fahrenheit a Celsius y Viceversa /// [WebService(Namespace = "http://conversor.itmaster.es/")] >:HE6HUYLFH%LQGLQJ&RQIRUPV7R :VL3UR¿OHV%DVLF3UR¿OHB @ [System.Web.Script.Services.ScriptService] public class Conversor : System.Web.Services.WebService {

    [WebMethod] public double CelsiusToFahrenheit(double celsius) { return (celsius * 9 / 5) + 32; } [WebMethod] public double FahrenheitToCelsius(double fahrenheit) { return (fahrenheit - 32) * 5 / 9; } }

    JSON Además del uso de los servicios Web antes mencionados junto al framework de ASP.NET AJAX, con ASP.NET 3.5 también es posible generar servicios Web utilizando WCF (Windows Communication Foundation) que den su respuesta en formato JSON (JavaScript Object Notation). Este formato es muy utilizado en la actualidad en servicios y APIs de proyectos Web 2.0, en reemplazo de XML o SOAP. El uso de esta modalidad escapa al alcance de este libro, pero basta con mencionar que podemos crear un servicio con extensión svc y agregarlo a la colección Services como en el ejemplo anterior. Visual Studio - Firtman, Natale

    Alfaomega

    320

    7- AJAX y MVC

    Fig. 7-6. Nuestro conversor de temperaturas AJAX en funcionamiento.

    Actualización Parcial Introducción Uno de los platos más fuertes de ASP.NET AJAX es, sin duda, la actualización parcial (partial updates). Esta técnica implica definir una zona de nuestro formulario Web donde todos los postback al servidor se hagan, automática y mágicamente, por peticiones asincrónicas AJAX y el resultado se actualice en la zona definida, sin que el perciba cambios en el historial del navegador o haya un refresco total de la página. Esta posibilidad está automáticamente habilitada en el ScriptManager y, si no vamos a hacer uso de la técnica, conviene desactivar la opción para reducir el código generado. Esta opción está disponible en EnablePartialRendering y, por defecto, está definida en true. El control Web que permite estas actualizaciones parciales es el de actualización (Update). Update El control Update equivale visualmente a un , agrupa una serie de controles y HTML en una zona definida mediante un nombre. La gran diferencia radica en que, por defecto, todos los controles que generaban un PostBack normalmente (esto es, refrescar toda la página vía POST y ejecutar el ciclo de vida de la página en el servidor), ahora lo realizarán mediante la técnica provista por AJAX. Así de simple: Sin escribir nada de código JavaScript, ni modificar nada de nuestros controles Web ni del código C# o VB que manipula los eventos de la página. Alfaomega

    Visual Studio - Firtman, Natale

    Actualización Parcial

    321

    Con poseer un ScriptManager y colocar un Update con un contenido dentro, tendremos una funcionalidad AJAX sobre el contenido. El framework se encargará de ejecutar todo el ciclo de vida, como si de un PostBack normal se tratara, notificar de los cambios en el HTML en la zona contenida en el Update y actualizarnos en el navegador. Ahora bien, el contenido del Update debe ser insertado en la plantilla ContentTemplate. Si utilizamos la técnica de arrastrar y soltar en la vista Diseño de Visual Studio, sólo copiaremos el contenido dentro del Update y el ContentTemplate se generará solo. Veamos un calendario que genera distintos eventos de tipo PostBack, inserto en un Update, funcionando con AJAX:

    Si probamos el ejercicio anterior, veremos un calendario común y corriente, pero que al cambiar de mes o seleccionar una fecha no veremos el clásico refresco de la página, sino que se actualizará solo. De esta manera, si abrimos cualquier formulario Web ASP.NET y encerramos todos los controles en un Update, tendremos una funcionalidad AJAX de todo el sitio. Esto funciona pero también es peligroso. Hay que tener en cuenta que el framework de ASP.NET transmite todo el contenido del Update, desde el servidor hacia el navegador, y no sólo aquella porción que se haya modificado. Por eso, si encerramos todo en un de actualización, se transferirá igual toda la página, sólo que sin refrescar el navegador. De esta manera, es importante pensar exactamente cuál o cuáles deberían ser las zonas de actualización parcial, para reducir el envío de código de más y mejorar la velocidad de respuesta. Por defecto, todo aquel control que esté fuera de un Update seguirá funcionando con los clásicos PostBacks y refrescará la página entera, incluso las zonas de actualización. El Update configura su propiedad RenderMode en Block, generando de esta manera una etiqueta
    en HTML. Podremos cambiar esta propiedad por el valor Inline y convertirlo así en una etiqueta <span>, pudiendo de esta manera actualizarse sólo una porción de un párrafo o zona de contenido. Como un podremos colocarlo visible o invisible a través de la propiedad Visible.

    Visual Studio - Firtman, Natale

    Alfaomega

    322

    7- AJAX y MVC

    Fig. 7-7. Con Firefox y Firebug podemos ver las peticiones AJAX que se realizan entre el navegador y el servidor, lo mismo que con IE8 y las herramientas para desarrolladores.

    Algo interesante que podemos definir son los desencadenadores o triggers. Por defecto, todos los controles hijos del Update generan postbacks asincrónicos, o sea, por AJAX. Esto se puede desactivar utilizando la propiedad ChildrenAsTriggers, definiéndola en false. Hecho esto, ahora podremos especificar manualmente qué controles, y qué eventos de cada uno, queremos que se realicen de manera asincrónica. Para ello, podremos definir la colección Triggers del Update, creando explícitamente objetos PostBackTrigger (para postbacks normales) o AsynostBackTrigger (para postbacks por AJAX). Ambos definen la propiedad ControlID como el identificador del control que queremos definir y para los asincrónicos podemos especificar exactamente qué evento queremos hacer por AJAX, a través de la propiedad EventName. Algo importante para tener en cuenta, y que simplifica el desarrollo AJAX, es la posibilidad de trabajar con desencadenadores externos. Los controles que definamos en los desencadenadores pueden estar tanto dentro como fuera del Update. De esta forma, podemos definir un Update como zona de actualización parcial, pero que el desencadenador de dicha actualización AJAX Alfaomega

    Visual Studio - Firtman, Natale

    Actualización Parcial

    323

    sea un control (como un botón) fuera de dicha zona. Así se puede combinar la creación de postbacks asincrónicos y normales para adaptarse a todas nuestras necesidades.

    Fig. 7-8. Creando triggers desde el diseñador de Visual Studio.

    es múltiples Una página Web puede contener la cantidad de es de actualización que queramos, cada uno encerrando una zona de actualización distinta dentro del mismo formulario Web. Así, las zonas de la página que nunca se van a modificar según un evento quedan fuera de los procesos de actualización y reducimos ampliamente el tráfico entre el servidor y el navegador. Si revisamos las peticiones AJAX emitidas cuando hay más de un de actualización, y generamos un postback en una de esas zonas, veremos que en la respuesta del servidor también se recibe el contenido actualizado (o igual al anterior) de las otras zonas de actualización. Veamos un ejemplo sencillo: <%@ Page Language="C#" AutoEventWireup="true"

    Visual Studio - Firtman, Natale

    Alfaomega

    324

    7- AJAX y MVC

    CodeFile="MultipleUpdate.aspx.cs" Inherits="MultipleUpdate" %> Página sin título 4c3270
    Este es el Update 1 Este texto está fuera de las zonas de actualización Este es el Update 2


    Esto se debe a que, por defecto, el control Update viene con la propiedad UpdateMode en Always. Esto implica que siempre que se genera un postback asincrónico vía AJAX, el de actualización se refrescará, haya cambiado o no, haya sido el causante del postback o no. Por ello, salvo algún caso particular, siempre se debe cambiar la propiedad UpdateMode al valor Conditional. Al pasarlo a modo condicional, el Update sólo será refrescado si el postback fue generado por un trigger o desencadenador de su propiedad o si nosotros invocamos explícitamente una actualización a través del método Update() del Update en cualquier evento de servidor.

    Alfaomega

    Visual Studio - Firtman, Natale

    Actualización Parcial

    325

    Fig. 7-9. Aquí vemos cómo la respuesta del servidor, luego de un postback asincrónico, incluyó el contenido de ambos Update.

    Esto nos permite manipular exactamente qué contenido actualizar y cuándo. Con este nuevo modo en mente, podemos definir una zona de actualización que no tenga ningún trigger –por ejemplo, simplemente un Label– y, desde cualquier desencadenador de cualquier otra zona, definir en un momento dado qué queremos cambiar (el contenido o las propiedades de dicha zona). Veamos un ejemplo: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultipleUpdate2.aspx.cs" Inherits="MultipleUpdate" %> Página sin título 4c3270


    Visual Studio - Firtman, Natale

    Alfaomega

    326

    7- AJAX y MVC

    Este texto está fuera de las zonas de actualización
    public partial class MultipleUpdate : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) { texto.Text = "Actualizando otro Update"; Update2.Update(); } }

    Aviso de Progreso Mientras una petición asincrónica se está realizando para un refresco parcial de la página, el no recibe ningún aviso de que debe esperar una respuesta del servidor. Para poder darle un aviso al , existe el control UpdateProgress (progreso de actualización). Este control visual es un invisible que, habiendo pasado medio segundo del inicio de la petición asincrónica y no habiendo recibido todavía respuesta del servidor, se convierte en visible. Dentro de este control podemos colocar un mensaje de Cargando... o una imagen animada indicando al que espere. Al colocar un UpdateProgress, se da el aviso para todas las peticiones asincrónicas que se realicen en la página. Podemos especificar que dicho aviso sea sólo para una zona de actualización a través de la propiedad AssociatedUpdateID. De esta manera, podemos tener un aviso por un o varios que no posean aviso y que hagan las peticiones sin que el las note. Los avisos de progreso pueden estar ubicados en cualquier lugar de la página Web y es allí donde se mostrarán, a no ser que utilicemos CSS para ubicarlo en otro lugar. Alfaomega

    Visual Studio - Firtman, Natale

    Actualización Parcial

    327

    A través de la propiedad DisplayAfter se podrá definir luego de cuántos milisegundos colocar el aviso. No se recomienda poner un valor más bajo de 500 milisegundos (medio segundo) porque, en peticiones que respondan muy rápido, el casi no verá el aviso y notará una imagen que aparece y se va, sin comprender el significado. En los siguientes dos ejemplos veremos cómo ubicar un aviso de progreso al estilo aplicaciones de Google, con CSS, y otro ejemplo con una imágen clásica de carga:
    Cargando...


    Fig. 7-10. Aquí vemos un aviso de progreso en funcionamiento.

    Cronómetro El último control incluido en las extensiones AJAX para ASP.NET es el cronómetro o Timer. Este control en sí mismo se puede utilizar sin AJAX, pero su utilidad radica en usarlo dentro de un Update o definir su evento Tick como desencadenador de un Update. Este control lo que hace es ejecutar un postback cada n milisegundos. El evento que genera se llama Tick y si lo utilizamos como un postback asincrónico, podremos actualizar alguna zona de actuaVisual Studio - Firtman, Natale

    Alfaomega

    328

    7- AJAX y MVC

    lización con novedades periódicas, sin que el realice una acción activa de actualización. Veamos un ejemplo, para entender la idea en VB, que actualiza un reloj cada un minuto. Hay que tener cuidado con este tipo de actividades, que pueden llegar a saturar el servidor si nos abusamos como en ejemplos como éste, que podrían reemplazarse por un simple JavaScript: <%@ Page Language="VB" %> <script runat="server"> Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) lblHora.Text = DateTime.Now.ToString("t") End Sub Página sin título 4c3270


    Alfaomega

    Visual Studio - Firtman, Natale

    Actualización Parcial

    329

    AJAX Control Toolkit ¿Qué es? Junto con el framework de ASP.NET AJAX, Microsoft trabajó con la comunidad en un proyecto de código abierto conocido como Control Toolkit. Este set de controles es gratuito y se descarga desde www.asp.net/ajax/ajaxcontroltoolkit. El set está compuesto de algunos controles ricos visuales, que no tienen existencia en el framework de ASP.NET, y algunos extensores. Los extensores son controles que no actúan por sí mismos, sino que modifican el comportamiento y aspecto visual de otros controles clásicos del framework de ASP.NET, dando en este caso comportamientos visuales ricos (con JavaScript y CSS) y comportamientos asincrónicos a través del framework de AJAX. Los controles se van actualizando y se van agregando nuevos periódicamente, por lo que es recomendable ingresar al sitio Web y consultar nuevas versiones que resuelven errores y agregan funcionalidades. En el sitio Web encontraremos una demostración de cada uno de los controles con una explicación y ejemplos de uso. También existen instrucciones y ejemplos para crear nuestro propio control rico, utilizando el framework o nuestro propio extensor. Y por eso existen en Internet algunos otros controles de código abierto disponibles para utilizar, que no forman parte de este kit. Requisitos Para poder utilizarlo, podemos descargar una versión que sea compatible con el Framework 2.0 o con el Framework 3.5, según el que queramos utilizar. En las descargas encontraremos cuatro versiones, siendo XX el número de framework para el cual es compatible: AjaxControlToolkit-FrameworkXX.zip: Incluye ejemplos, documentación, instalador para Visual Studio y Visual Web Developer y código fuente de todos los controles. Dentro del archivo comprimido encontraremos un archivo con extension vsi (Visual Studio Installer) y ese es el que debemos utilizar para instalar los controles en Visual Studio. AjaxControlToolkit-FrameworkXX-NoSource.zip: Igual al anterior, evitando la descarga del código fuente de los controles. Probablemente, sea el paquete más adecuado para descargar. AjaxControlToolkit-FrameworkXX-DllOnly.zip: Sólo incluye el compilado DLL de todos los controles. Manualmente podremos colocar el DLL en la carpeta Bin de nuestro proyecto o sitio Web y agregar la referencia manualmente en cada página.

    Visual Studio - Firtman, Natale

    Alfaomega

    330

    7- AJAX y MVC

    AjaxControlToolkit-ScriptFilesOnly.zip: Sólo incluye el código JavaScript para el funcionamiento de cada control.

    Fig. 7-11. Así se ve la página de demostración de los controles ricos del Control Toolkit.

    Fig. 7-12. Aquí vemos el cuadro de herramientas con los nuevos controles del Toolkit. Alfaomega

    Visual Studio - Firtman, Natale

    Actualización Parcial

    331

    Controles Entre los controles nuevos disponibles en el Control Toolkit, al momento de escribir este libro, se encuentran: s

    Accordion: Permite crear es que se abren y retraen, simulando un efecto de acordeón. Debemos utilizar AccordionPane como cada uno de los es que se abren y cierran.

    s

    NoBot: Permite reducir el spam y el uso de robots para completar formularios.

    s

    Rating: Permite al darle un puntaje a algún elemento con un diseño clásico de sitios Web 2.0, capturando el evento vía AJAX en el servidor del voto del .

    s

    ReorderList: Permite al cambiar el orden de los elementos de una lista, utilizando arrastrar y soltar. Posee distintas plantillas para trabajar.

    s

    TabContainer: Permite crear un diseño en pestañas mostrando de a un (TabContainer) a la vez. Desde Visual Studio podremos trabajar sin problemas en vista diseño con este nuevo control.

    Fig- 7.13. Aquí vemos una combinación de diseño con pestaña de efecto acordeón, utilizando Control Toolkit.

    Extensores Un extensor (extender en inglés) es una clase de .NET que a simple vista se define como cualquier control, con la diferencia de que no actúa por sí mismo, sino que extiende la funcionalidad de otro control del framework de ASP.NET, como ser una caja de texto.

    Visual Studio - Firtman, Natale

    Alfaomega

    332

    7- AJAX y MVC

    Fig. 7-14. Aquí vemos el asistente de extensores para un TextBox, que nos permite agregar fácilmente una funcionalidad extendida del Control Toolkit.

    Fig. 7-15. Cuando un control tiene uno o más extensores creados, encontraremos sus atributos en la ventana de Propiedades, en la sección Extenders.

    Alfaomega

    Visual Studio - Firtman, Natale

    Actualización Parcial

    333

    Todos los extensores tienen la propiedad TargetControlID, que especifica el identificador del control destino de la extensión que se ha de aplicar. Los extensores disponibles son: s

    AlwaysVisibleControl: Permite dejar visible todo el tiempo a un control (un , por ejemplo), aunque el desplace el cursor vertical u horizontalmente. Ideal para menús de navegación.

    s

    AutoComplete: Permite generar un comportamiento de tipo autocompletar en una caja de texto. Consulta un servicio Web por las sugerencias para mostrarle al según lo que va escribiendo.

    s

    Calendar: Permite generar un calendario emergente sobre una caja de texto, ya sea al hacer clic en la caja de texto o en un ícono a su derecha.

    s

    CascadingDropDown: Permite extender a un DropDownList con una funcionalidad en cascada para elegir datos en jerarquía, por ejemplo, elección de País, luego Provincia, luego Ciudad.

    s

    Collapsible: Permite contraer y expandir el contenido de un dinámicamente.

    s

    &RQ¿UP%XWWRQ: Extiende a un botón para que el confirme la operación mediante una ventana modal antes de hacer el postback.

    s

    Drag: Extiende a un otorgándole la habilidad de ser arrastrado por toda la página o por zonas definidas.

    s

    DropDown: Permite generar una lista desplegable con el contenido de un control.

    s

    DropShadow: Ofrece un diseño de sombreado a cualquier control.

    s

    Dynamiopulate: Reemplaza el contenido de un control por el resultado de una llamada a un servicio Web o método de página.

    s

    FilteredTextBox: Filtra los caracteres que se pueden insertar en una caja de texto, impidiendo el ingreso de caracteres inválidos.

    s

    HoverMenu: Permite adosar a cualquier control un menú desplegable, que aparece cuando el posa el cursor sobre el control.

    s

    ListSearch: Permite extender un ListBox o DropDownList, pudiendo el ingresar una búsqueda con el teclado dentro de la lista de opciones.

    s

    MaskedEdit: Extiende una caja de texto, pudiendo decidir el formato o máscara de entrada de los datos, por ejemplo, DD/MM/AAAA o $ 9999,99, obligando al a seguir ese formato.

    s

    ModalPopUp: Muestra un contenido de forma modal, bloqueando el al resto de los controles hasta que se cierre o cancele la ventana modal.

    Visual Studio - Firtman, Natale

    Alfaomega

    334

    7- AJAX y MVC

    s

    MultiHandleSlider: Es un selector de valores numéricos múltiplos. Ideal para rangos numéricos, por ejemplo, selección de rango de precio, donde el arrastra los controles hasta definir el rango deseado.

    s

    MutuallyExclusiveCheckBox: Permite definir cajas de selección exclusivas. Así, si seleccionamos un CheckBox otro obligatoriamente se deselecciona.

    s

    NumericUpDown: Agrega a un campo de texto la posibilidad de que el seleccione un valor numérico con botones.

    s

    PagingBulletedList: Permite que una lista con viñetas se divida en páginas automáticamente, por ejemplo, por orden alfabético

    s

    Strenght: Permite adosarse a un campo de texto utilizado como ingreso de contraseñas y que el vea la seguridad de la contraseña que está ingresando.

    s

    PopUpControl: Permite colocar cualquier control como popup al hacer clic sobre otro.

    s

    ResizableControl: Permite al cambiar las dimensiones de un control dinámicamente.

    s

    RoundedCorners: Permite dar bordes redondeados a un control.

    s

    Sliders: Permite al seleccionar un valor numérico arrastrando una imagen sobre un eje fijo horizontal o vertical.

    s

    SlideShow: Permite crear una galería de imágenes a partir de un control Image y botones para moverse opcionalmente. La galería puede funcionar de forma automática.

    s

    TextBoxWatermark: Deja una marca de agua en un campo de texto sin completar.

    s

    ToggleButton: Extiende un CheckBox, pudiendo cambiar su visualización por la de íconos de encendido y apagado.

    s

    UpdateAnimation: Permite asignar animaciones visuales antes de hacer una petición y después de que la respuesta del servidor llegue en una petición asincrónica de un Update.

    s

    ValidatorCallout: Extiende a los validadores existentes, otorgándoles un diseño de globo de diálogo sobre el campo que posee el error.

    Una vez instalado el paquete para Visual Studio, todos los controles Web que poseen extensores disponibles aparecen automáticamente en el ícono de tareas rápidas como un directo: Agregar Extensor y otros s para eliminar, Quitar Extensor y tareas rápidas para los extensores ya definidos. Otra forma de utilizar un extensor es arrastrarlo desde el Cuadro de Herramientas y soltarlo sobre el control al cual queremos aplicarlo. Alfaomega

    Visual Studio - Firtman, Natale

    Actualización Parcial

    335

    Fig. 7-16. Distintos extensores a campos de texto.

    Fig. 7-17. El control ModalPopUp permite crear ventanas modales atractivas. Visual Studio - Firtman, Natale

    Alfaomega

    336

    7- AJAX y MVC

    Fig. 7-18. ValidatorCallout permite crear validadores mucho más vistosos y con opciones de sugerencias al .

    Framework de Animación A través del extensor AnimationExtender es posible crear animaciones simples y combinatorias, que se pueden ejecutar automáticamente ante un evento (OnClick, OnLoad, OnMouseOver, OnMouseOut, OnHoverOver, OnHoverOut) en el navegador. El framework de animación requiere la generación de una secuencia de animación en XML ante un evento en particular. Partícipes de la animación pueden ser efectos de aparición, desaparición, manejo de transparencia, movimiento, cambios de tamaño, cambios de color, así como también ejecución de scripts, modificación de propiedades y otras operaciones, que se pueden combinar en secuencia (una detrás de la otra) o en paralelo (en simultáneo). Cada efecto tiene propiedades comunes, como ser Duration, expresada en segundos con decimal, Fps, indicando cuántos cuadros por segundo queremos que el efecto tenga, así como propiedades particulares de cada tipo de efecto. Consultando la guía online de Animator encontraremos todos los detalles. Alfaomega

    Visual Studio - Firtman, Natale

    Actualización Parcial

    337

    jQuery ¿Qué es? jQuery es una librería de AJAX de cliente, liviana, rápida y sencilla de codificar. Su sitio Web oficial es jquery.com y ofrece, en 19Kb (comprimido), toda su funcionalidad compatible con todos los navegadores conocidos del mercado. Entre las funciones que incluye podemos mencionar: s

    Soporte del evento ready, que se ejecuta cuando el DOM se encuentra completamente cargando sin las imágenes.

    s

    Manejo de eventos sencillo a través de funciones.

    s

    Efectos visuales con poco código.

    s

    Soporte de cadena de ejecución con la posibilidad de ejecutar múltiples instrucciones en una sola línea.

    s

    Manipulación de documentos con CSS 1, 2 y 3.

    s

    Soporte de algunos estándares de Prototype como $ y $$, incorporando expresiones XPath.

    s

    Soporte de nuevos plug ins.

    Algunos ejemplos con jQuery: // Trae todos los radiobuttons seleccion var radio = $("input[@type=radio][@checked]"); // Le agrega la clase CSS texto a todos los párrafos $("p").addClass("texto"); // Pone a todos los links para que se abran en ventana nueva $("a").attr({ target: "_blank", title: "Se abrirá en ventana nueva" }); $JUHJDXQDLPDJHQOXHJRGHFDGD¿QGHSiUUDIR S DIWHULPJVUF ¿QMSJ ! 'H¿QHODIXQFLyQDHMHFXWDUVHHQHOFOLFGHOERWyQ $("btnEnviar").click(function() { alert("Gracias por enviar los datos") }); // Anima un div $("divContenido").fadeIn("slow"); // Hace una petición AJAX

    Visual Studio - Firtman, Natale

    Alfaomega

    338

    7- AJAX y MVC

    $.ajax({ type: "POST", url: "guardar.php", data: "nombre=Juan&apellido=Gomez", success: function(mensaje){ alert(mensaje); } }); // Hace algo si es Internet Explorer if ($.browser.msie) { } // Itera entre una colección $.each( [2, 4, 6], function(i, total) { alert(i) }); // Busca todos los párrafos que sean de clase "copete", // les agrega la clase "deportes" y los muestra con un efecto lento $("p.copete").addClass("deportes").show("slow");

    Relación con ASP.NET Si bien jQuery es una librería de cliente y se puede utilizar con cualquier lenguaje de servidor, Microsoft anunció a fines de 2008 la integración de la librería con su framework de ASP.NET, por lo que en futuras versiones la librería ya estará incluida en el framework. Ella contendrá soporte de Intellisense en Visual Studio, documentación y ayuda, así como también creará controles ricos basados en jQuery para el framework de ASP.NET. Esto implica que jQuery se está convirtiendo en un estándar de mercado y que es importante conocer las funciones de la librería, ya sea para utilizarla manualmente o para futuras versiones de ASP.NET, donde la librería será parte integral de la plataforma.

    Futuro de ASP.NET AJAX El futuro del framework ASP.NET AJAX es cada vez más promisorio y, entre las ventajas que ya se anunciaron o que están disponibles en betas y ejemplos, al editar este libro podemos mencionar que en futuras versiones tendremos un excelente soporte para manejar y capturar el historial del navegador (History), así como también crear extensores no intrusivos, que directamente se configuren en el XHTML y no requieran de un control Web para su utilidad. Esto será muy beneficioso para incorporar funcionalidades AJAX al framework ASP.NET MVC, Alfaomega

    Visual Studio - Firtman, Natale

    ASP.NET MVC

    339

    las cuales veremos en breve. De esta manera, podremos crear plantillas que actualicen información y se enlacen automáticamente a un origen de datos desde el XHTML sin escribir ni código de script, ni código de servidor. Por ejemplo, el siguiente código sería el necesario para mostrar una lista de links:

    La lista podría enlazarse automáticamente con un servicio Web, utilizando el framework ASP.NET AJAX o con una acción de un controlador de ASP.NET MVC. Este otro ejemplo, sería el equivalente a un campo de texto con dos extensores no intrusivos, un autocompletador y una marca de agua: ... ...

    El código anterior es el que quedaría en el navegador y es válido para XHTML, porque se definen los espacios de nombre del XML. El framework será el encargado de convertir esas referencias en el XHTML en comportamientos adecuados.

    ASP.NET MVC El framework ASP.NET MVC (Modelo Vista Controlador o Model View Controller) es una alternativa, no un reemplazo, a Formularios Web ASP.NET. Permite crear aplicaciones, utilizando este patrón de diseño de separación de funcionalidades, y ofrece los beneficios de una separación clara (y obligatoria) de las responsabilidades en el código: Extrema facilidad en la posibilidad de realizar pruebas sobre Visual Studio - Firtman, Natale

    Alfaomega

    340

    7- AJAX y MVC

    el código, control fino sobre el HTML y JavaScript generado, un sistema de URLs más intuitivo y una metodología simple para crear APIs compatibles con Web 2.0.

    El patrón MVC Es un patrón de diseño definido en 1979 (sí, hace más de treinta años), originalmente para aplicaciones SmallTalk. Hoy se usa para todo tipo de aplicaciones, especialmente para aplicaciones Web. Según Wikipedia, el patrón de diseño MVC se define como: “Un patrón de arquitectura de software que separa los datos de una aplicación, la interfaz de y la lógica de control en tres componentes distintos. El patrón MVC se ve frecuentemente en aplicaciones Web, donde la vista es la página HTML y el código que provee de datos dinámicos a la página. El modelo es el Sistema de Gestión de Base de Datos y la Lógica de negocio y el controlador es el responsable de recibir los eventos de entrada desde la vista”. Luego de esta definición, observamos que el modelo de formularios Web de ASP.NET tiene algo de esta idea. Tenemos el Code-Behind, el ASPX y podríamos llegar a tener un modelo de clases. Sin embargo, esto no es obligatorio y no cumple exactamente con la definición y las ventajas que puede tener un modelo MVC. Por ello, Microsoft nos ofrece este framework alternativo, disponible como descarga independiente en ASP.NET 3.5 y como parte de la plataforma desde 4.0. Modelo El modelo es el encargado de mantener el estado de la aplicación en todo momento. En general, cuando hablamos de ASP.NET el modelo estará almacenado en una base de datos y, más específicamente, podría estar almacenado en un modelo LINQ To SQL o Entity Framework, con toda la lógica de negocios que le queramos agregar a cada clase. Entonces, en el modelo estarán todos los objetos de negocio, su lógica de trabajo y su lógica de almacenamiento y recupero de fuentes de persistencia, como una base de datos. El modelo no tiene permitido modificar ni consultar nada de la vista. De esta manera, aquí nos olvidamos de mostrar textos, de HTML, de Response.Write y de capturar cualquier tipo de evento de . Vista La vista representa a todos los componentes que conforman la interfaz visual con la que el interactúa y donde el ve la información y actualización del estado del sistema. En nuestro caso, las vistas estarán conformadas por plantillas en HTML con JavaScript.

    Alfaomega

    Visual Studio - Firtman, Natale

    ASP.NET MVC

    341

    Controlador El controlador es el encargado de recibir notificaciones de actualización y eventos desde la vista y, si fuera necesario, avisar y notificar al modelo de un cambio. El modelo podrá o no modificar su estado, según estas acciones avisadas por el controlador y será el controlador el que decidirá si corresponde o no notificar al con alguna vista. El controlador entonces es el que une a la vista con el modelo, decidiendo qué hay que hacer, cómo hay que hacerlo (es el modelo el que sabe) y cómo hay que mostrarlo (es la vista la responsable).

    Framework ASP.NET MVC es un framework alternativo que puede ser descargado gratuitamente desde el sitio Web www.asp.net/mvc. Podríamos escribir todo un libro completo sólo dedicado a este nuevo framework. Sin embargo, en este libro, daremos las bases del nuevo marco de trabajo y dejamos libertad al lector para su profundización. Ruteo dinámico Cuando creamos un proyecto de tipo MVC en Visual Studio, tendremos un modelo de carpetas totalmente distinto al conocido y automáticamente estarán configuradas opciones de ruteo dinámico, donde ya no estaremos ingresando a archivos ASPX, sino que estaremos invocando acciones de un controlador determinado. Esta acción podría recibir parámetros y, según ellos, el controlador determinar qué acción devolver. Las nuevas direcciones, o URLs de nuestro proyecto, tendrán el siguiente formato, comenzando en la raíz de la aplicación: /Controlador/Controlador/Accion /Controlador/Accion?parametros/Controlador/Accion/ParametroID

    Por ejemplo: /Clientes /Clientes/Insertar /Clientes/Listar?formato=json/Clientes/Editar/125

    Estas URLs, que son inexistentes físicamente, invocarían a un controlador llamado Clientes, que veremos que se tratará de una clase llamada ClientesController. Este controlador tendría una acción por defecto (en el caso 1), una acción llamada Insertar y una acción llamada Editar, que recibe un parámetro numérico. Visual Studio - Firtman, Natale

    Alfaomega

    342

    7- AJAX y MVC

    ¿Qué puede hacer un controlador? Un controlador, en cada una de sus acciones, puede decidir: s

    Entregar una vista. Para el caso se tomará una Vista a elección y se le podrán completar parámetros en la plantilla HTML.

    s

    No generar resultado.

    s

    Redirigir al a una nueva URL.

    s

    Devolver un resultado JSON para ser utilizado por una aplicación AJAX u otra aplicación.

    s

    Devolver un script JavaScript.

    s

    Devolver un texto.

    s

    Devolver un archivo.

    Incluso, la misma acción según un parámetro podría dar resultados distintos. Por ejemplo, los siguientes ejemplos podrían darnos un listado de clientes en una página Web, un listado de clientes en JSON para una aplicación AJAX que lo requiera o un listado de clientes convertido a Excel. /Clientes/Listar /Clientes/Listar/JSON /Clientes/Listar/Excel

    El controlador no sabrá cómo generar la lista de clientes, sólo le dirá al modelo que lo genere y la lista de Clientes se la pasará como parámetro a la vista que sabrá cómo dibujarlo, o la convertirá a JSON o a un archivo de Excel.

    Creando un sitio MVC Introducción Para crear un sitio utilizando ASP.NET MVC, debemos estar trabajando con ASP. NET 3.5 o superior y descargar el agregado ASPNETMVCx.msi desde asp.net/ mvc, donde X es la versión del framework. Este instalador de Visual Studio 2008, VWD 2008 Express o superior, instalará las plantillas de generación de proyectos bajo MVC. Una vez instalado, debemos crear un proyecto de tipo Aplicación Web ASP. NET MVC o ASP.NET MVC Web Application, ya sea en Visual Basic o C#.

    Alfaomega

    Visual Studio - Firtman, Natale

    Creando un sitio MVC

    343

    Fig. 7-19. Al instalar las plantillas encontraremos el nuevo tipo de proyecto MVC.

    Fig. 7-20. Estructura de archivos y carpetas creadas luego de generar el proyecto. Visual Studio - Firtman, Natale

    Alfaomega

    344

    7- AJAX y MVC

    En el archivo global.asax encontramos el sistema de ruteo dinámico utilizado por defecto y estamos libres para modificarlo: public static void Routes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Home", action = "Index", id = "" } // Parameter defaults ); } protected void Application_Start() { Routes(RouteTable.Routes); }

    En la carpeta Content encontraremos extras utilizados por las plantillas, como imágenes u hojas de estilo CSS; en la carpeta Controllers, los controladores de nuestra aplicación; en la carpeta opcional Models, los modelos; en la carpeta Scripts, todos los JavaScript que vamos a utilizar (está incluido jQuery y Microsoft AJAX) y en la carpeta Views, las vistas como archivos ASPX separados en subcarpetas por el nombre del controlador. En la plantilla de Visual Studio ya tenemos dos controladores con sus respectivas vistas, un controlador llamado (Cuenta), que istra la autenticación de s y un controlador llamado Home (Inicio), sin contenido, que es el controlador que se toma por defecto. Estos controladores, aunque no los utilicemos, podemos tanto dejarlos como quitarlos. Defininiendo el modelo El modelo puede ser estrictamente un conjunto de clases de lógica de datos y negocios o podemos utilizar algunos de los frameworks provistos por ASP. NET, como LINQ To SQL o Entity Framework, tal como se vio en capítulos pasados. Todas las clases se pueden colocar en la carpeta Models y así estar en el namespace NombreProyecto.Models. Defininiendo los controladores Un controlador es una clase que hereda de System.Web.Mvc.Controller y que, por convención, debe tener como sufijo la palabra Controller. Así, si quisiéramos crear el controlador Clientes, la clase se llamaría ClientesController. Para Alfaomega

    Visual Studio - Firtman, Natale

    Creando un sitio MVC

    345

    crear un controlador basta con agregar un nuevo elemento en la carpeta Controllers de tipo MVC Controller Class o Clase Controlador MVC. La forma más simple es hacer clic derecho sobre la carpeta controllers y en menú Agregar encontraremos a Controller.

    Fig. 7-21. Al trabajar con el menú contextual de las carpetas, tendremos s directos a la creación de archivos controladores o vistas.

    En C# nuestra clase nos quedaría así: using using using using using using

    System; System.Collections.Generic; System.Linq; System.Web; System.Web.Mvc; System.Web.Mvc.AJAX;

    namespace MvcApplication1.Controllers { public class ClientesController : Controller { // // GET: /Clientes/ public ActionResult Index() { return View(); } } }

    Visual Studio - Firtman, Natale

    Alfaomega

    346

    7- AJAX y MVC

    Notemos que nos crea un método (o acción) Index que por defecto es el invocado cuando en la URL no se identifica a ninguna acción. Notemos que el método devuelve un objeto de clase ActionResult. Esta clase será la encargada de decidir qué acción tomará el controlador, según vimos anteriormente. En este ejemplo simple creado automáticamente devuelve View(). Lo que hace este método es buscar en la carpeta /Views/Clientes (notemos la convención de tomar el nombre de la clase sin Controller) un archivo llamado Index.aspx y devolver esa plantilla. Existe una sobrecarga que nos permite cambiar el nombre y entregar una vista con un nombre en particular utilizando View(nombre). Definiendo las vistas Para poder definir la vista de la acción Index del controlador Clientes, debemos entonces crear la carpeta Clientes en Views y dentro crear una nueva vista llamada Index. Para eso, podemos utilizar el menú contextual de nuestra nueva carpeta Clientes y seleccionar Agregar > View o utilizar Agregar nuevo elemento, y seleccionar del tipo MVC View Page o MVC View Content Page si utilizamos Master Page. Al agregar una vista podremos elegir una página principal (Master Page) y crear una vista fuertemente tipada (strongly-typed), lo que permite que la vista posea propiedades a las que poder definir desde el controlador de manera tipada. Por defecto, podremos igualmente definir valores en la plantilla a través de propiedades string.

    Fig. 7-22. El asistente para agregar una nueva vista.

    Alfaomega

    Visual Studio - Firtman, Natale

    Creando un sitio MVC

    347

    Ya existe una página principal creada automáticamente disponible para cambiar en /Views/Shared/Site.Master. Al ver la vista finalizada, vemos que tenemos un ASPX que hereda de System.Web.Mvc.ViewPage, que no tiene Code-Behing ni código de servidor y donde no vamos a utilizar controles de servidor. Si bien es posible, no está pensado para eso, sino para utilizar HTML y zonas de reemplazo de contenido. <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ Site.Master" Inherits="System.Web.Mvc.ViewPage" %> Index

    Index j3043



    Desde un método del controlador, si accedemos al menú contextual de la clase, encontraremos dos s directos: Add View..., que nos permite crear una nueva vista para este controlador, y Go To View (Ir a Vista), que nos permite abrir automáticamente la vista asociada a la acción donde estamos parados. Desde la vista también tendremos a un menú contextual Go To Controller (Ir a Controlador) para abrir el controlador asociado a la vista actual.

    Fig. 7-23. Si abrimos el sistema, podemos ver cómo acceder a la acción Index de Clientes.

    Visual Studio - Firtman, Natale

    Alfaomega

    348

    7- AJAX y MVC

    Creando otra acción Ahora vamos a crear una nueva acción (Nuevo) en Clientes, que nos pida el nombre del cliente y el correo electrónico para insertar en una supuesta base de datos. Para ello creamos un nuevo método en el controlador de la siguiente manera: public ActionResult Nuevo() { return View(); }

    Este método sólo retornará el formulario para insertar un nuevo cliente, cuya vista la vamos a crear en Views/Clientes/Nuevo.aspx: <% @ Page Title="Insertar Nuevo" Language="C#" MasterPageFile="~/ Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> Nuevo Cliente

    Nuevo Cliente i194d




    Notemos el action del formulario HTML. En lugar de enviarlo a un formulario Web, lo enviamos a una nueva acción llamada Insertar del controlador Clientes, en la carpeta actual. Ahora, entonces, agreguemos la acción Insertar y notemos lo simple que es: public ActionResult Insertar(string nombre, string email) { // TODO: Llamo al modelo e inserto el cliente // Devuelvo una acción del tipo redirección a otra acción return RedirectToAction("Index"); }

    Alfaomega

    Visual Studio - Firtman, Natale

    Creando un sitio MVC

    349

    Con simplemente recibir parámetros, el sistema se encarga de tomar esos parámetros por el nombre del QueryString recibido desde el formulario con GET, guardamos el nuevo estado en el modelo y luego podemos devolver un View, mostrando un mensaje o una acción de tipo redirect enviando al a la lista. A través de atributos, se puede especificar que sólo se acepta acepta Post, por ejemplo. HTML Helpers Para simplificar la tarea, existen los ayudantes de HTML o HTML Helpers. Son funciones que devuelven strings y nos ayudan en la construcción de los códigos HTMLs más comunes. Por ejemplo, en lugar de escribir la etiqueta input podríamos reemplazarlo por: <%= Html.TextBox("email") %>

    Entre los ayudantes disponibles, tenemos: ActionLink, BeginForm, CheckBox, DropDownList, EndForm, Hidden, ListBox, , RadioButton, TextArea y TextBox. Datos de la Vista Otra funcionalidad extremadamente útil son los datos de la vista o ViewData. Es una colección de tipo diccionario disponible en todas las vistas, que nos permite pasarle datos desde el controlador a la vista para su visualización. Por ejemplo, desde el controlador podríamos haber colocado: public ActionResult Nuevo() { ViewData["titulo"] = "Creando un nuevo cliente"; // En VB seria ViewData("titulo") return View(); }

    Y en la vista, donde queremos colocar el título:

    <%= ViewData("titulo") %> 2921x



    También es posible pasar colecciones y, desde el ASPX de la vista, generar una instrucción de tipo For Each y dibujar así manualmente una tabla HTML. Un ejemplo en Visual Basic:









    <% For Each Registro In ViewData("coleccion") %> Visual Studio - Firtman, Natale Alfaomega 350 7- AJAX y MVC <% Next %>
    <%= Registro.Nombre %> <%= Registro.Email %>


    Algunos pueden pensar que pareciera que estamos volviendo a un modelo como ASP 3 (Clásico), pero hay que tener en cuenta la clara separación en capas que debemos lograr y la vista ASPX no debería escaparse de estas pequeñas cuestiones. Mostrar información y, como mucho, recorrer una colección no debería tomar demasiadas decisiones más que estas sencillas cosas. Como dijimos antes, también es posible crear vistas fuertemente tipadas y devolver la colección para mostrar directamente como parámetro de la vista. Devolviendo JSON Si estamos haciendo una aplicación AJAX podemos pedirle a una acción que nos devuelva un JSON con una colección de datos, por ejemplo: public ActionResult ListarJSON() { return Json(from c in bd.Clientes orderby c.Nombre select c); }

    Eso nos devolvería, en lugar de una vista HTML, simplemente un JSON representando el objeto pasado por parámetro. Seguir con MVC Esto fue sólo una introducción al framework ASP.NET MVC. Invitamos al lector a visitar el sitio Web asp.net/mvc y consultar todo el gran potencial que, además de lo visto, posee este nuevo framework. Entre los temas que escaparon a este libro, se encuentran: Vistas fuertemente tipadas, tipos extra de resultados, creando rutas personalizadas, creando HTML Builders, validando los datos de entrada, manejo de errores, manejo de filtros de acción, caché de resultados, seguridad y pruebas (testing). ASP.NET MVC es un nuevo mundo por descubrir y desde aquí abrimos la puerta de entrada hacia la investigación y para saber qué proyectos son los ideales para ASP.NET MVC y cuáles lo son para ASP.NET Webform.

    Alfaomega

    Visual Studio - Firtman, Natale

    Related Documents 171j1w

    Visual Studio .net Framework 3.5 Para Profesionales - Maximiliano Firtman-librosvirtual.pdf 312v32
    July 2020 0
    Visual Studio .net 6c1s5p
    December 2020 0
    Guia Visual Studio Net 195n4c
    August 2022 0
    Net Framework 4y2h72
    May 2022 0
    .net Framework 6o203t
    March 2021 0
    Guia De Ejercicios Visual Studio .net d3qr
    December 2019 30

    More Documents from "Nicolás Ron" 452445

    2c82t
    December 2019 162
    Como Convertir Un Documento A Pdf Yahoo i6v3a
    December 2022 0
    Examination Paper Of Cbse Class Xii 341g3v
    February 2021 0
    Presupuesto Logistico 3l1m13
    April 2021 0
    2c82t
    January 2021 0
    Como Convertir Archivo Word Para Pdf 1x657
    June 2021 0