Controles Avanzados ASP.Net LDP / DUOC-AV. Controles de Navegación (repaso)... 1 Control SiteMapPath... 1 Control Menu...

Transcripción

1 En esta guía: Controles Avanzados ASP.Net LDP / DUOC-AV Controles de Navegación (repaso)... 1 Control SiteMapPath... 1 Control Menu... 2 Presentación estática y presentación dinámica...2 Definir el contenido del menú...3 Páginas Principales MasterPage... 4 Página Principal... 4 Marcadores de posición de contenido reemplazables...5 Página de Contenido... 5 Ventajas de las Páginas Principales... 6 Comportamiento en tiempo de ejecución... 7 Control FileUpload... 8 Control Image... 10

2 Controles de Navegación (repaso) ASP.Net 2.0 provee de un set de controles de navegación, para facilitar las tareas de navegabilidad del sitio web en construcción. Estos controles proveen una interfaz más intuitiva para el manejo del redireccionamiento entre las página, entregando además información respecto del contexto de navegación. Los controles web que se disponen para estas tareas son: SiteMapPath: Muestra un conjunto de hipervínculos de texto o imagen que permite a los usuarios explorar un sitio Web más fácilmente, utilizando una cantidad mínima de espacio de la página.. Menu: Muestra un menú en una página de formularios Web Forms.. TreeView: Muestra datos jerárquicos, como una tabla de contenido, en una estructura de árbol.. A continuación se describe cada una de estos controles. Se proveerá de una actividad de trabajo con cada uno de ellos. Control SiteMapPath El control SiteMapPath muestra una ruta de desplazamiento que indica al usuario la ubicación de la página actual y muestra los vínculos como una ruta de retorno a la página principal. El control proporciona muchas opciones para personalizar el aspecto de los vínculos. El control SiteMapPath obtiene los datos de desplazamiento de un mapa del sitio. Estos datos incluyen información sobre las páginas del sitio Web, como la dirección URL, el título, la descripción y la ubicación en la jerarquía de exploración. Si los datos de desplazamiento se almacenan en un solo lugar, será más fácil agregar y quitar elementos en los menús de desplazamiento del sitio Web. En el ejemplo de código siguiente se muestran datos del mapa del sitio que está incluido en un archivo Web.sitemap. <sitemap> <sitemapnode title="inicio" description="página Principal" url="~/inicio.aspx" > <sitemapnode title="servicios" description="servicios ofrecidos" url="~/servicios.aspx"> <sitemapnode title="entrenamiento" description="clases que se dictan" url="~/entrenamiento.aspx" /> <sitemapnode title="consultoría" description="servicio de Consultoría" url="~/consultoria.aspx" /> </sitemapnode> </sitemapnode> </sitemap> Sólo las páginas que aparecen en el mapa del sitio pueden mostrar los datos de desplazamiento en el control SiteMapPath. Si sitúa un control SiteMapPath en una página que no aparece en el mapa del sitio, el control no mostrará nada al cliente. Puede agregar un control SiteMapPath a la página de ejemplo Entrenamiento.aspx mediante el código siguiente. Página 1

3 <asp:sitemappath ID="SiteMapPath1" Runat="server"></asp:SiteMapPath> Cuando un cliente ve la página Entrenamiento.aspx, el control SiteMapPath mostrará algo como lo siguiente, donde Inicio y Servicios se representan como hipervínculos: Inicio > Servicios > Entrenamiento Puede utilizar el control SiteMapPath para crear la exploración del sitio sin código y sin enlaces de datos explícitos. El control puede leer y representar la información del mapa del sitio automáticamente. El control SiteMapPath permite a los usuarios desplazarse hacia atrás desde la página actual a las páginas superiores en la jerarquía del sitio. Sin embargo, el control SiteMapPath no le permite desplazarse hacia delante desde la página actual a otra página más profunda en la jerarquía del sitio. Por ejemplo, puede utilizar el control SiteMapPath en aplicaciones de grupos de noticias o mensajería para permitir que los usuarios vean la ruta de acceso al artículo que están explorando. SiteMapPath se compone de nodos. Cada elemento de la ruta se denomina nodo y está representado por un objeto SiteMapNodeItem. El nodo que delimita la ruta y representa la base del árbol jerárquico se denomina nodo raíz. El nodo que representa la página actualmente mostrada es el nodo actual. Cualquier otro nodo entre el nodo actual y el nodo raíz es un nodo primario. La tabla siguiente describe estos tres tipos de nodo. Tipo nodo raíz primario actual Descripción Nodo que delimita un conjunto jerárquico de nodos. Nodo que tiene uno o varios nodos secundarios pero no es el nodo actual. Nodo que representa la página que se muestra actualmente. Control Menu El control Menu de ASP.NET le permite agregar funcionalidad a las páginas Web que se utiliza a menudo para permitir la exploración. El control Menu admite un menú principal y submenús, y le permite definir menús dinámicos. El control Menu de ASP.NET permite desarrollar tanto estática como dinámicamente los menús presentados en las páginas Web ASP.NET. Puede configurar el contenido del control Menu directamente en el control o puede especificar el contenido enlazando el control a un origen de datos. Presentación estática y presentación dinámica El control Menu tiene dos modos de presentación: estática y dinámica. Presentación estática significa que el control Menu permanece completamente desplegado todo el tiempo. Se ve la estructura completa y el usuario puede hacer clic en cualquier parte. En un menú presentado dinámicamente, sólo son estáticas las partes que especifique, mientras sus elementos de menú secundarios se presentan cuando el usuario sitúa el puntero del mouse (ratón) sobre el nodo primario. Página 2

4 Definir el contenido del menú El contenido del control Menu puede definirse de dos maneras: agregando objetos MenuItem individuales (mediante declaración o mediante programación) y enlazando los datos del control a un origen de datos XML. Agregar manualmente los datos del menú Para agregar elementos de menú individuales al control debe especificarlos en la propiedad Items. La propiedad Items es una colección de objetos MenuItem. En el ejemplo siguiente se muestra el formato declarativo de un control Menu con tres elementos, cada uno de ellos con dos elementos secundarios: <asp:menu ID="Menu1" runat="server" StaticDisplayLevels="3"> <Items> <asp:menuitem Text="Archivo" Value="Archivo"> <asp:menuitem Text="Nuevo" Value="Nuevo"></asp:MenuItem> <asp:menuitem Text="Abrir" Value="Abrir"></asp:MenuItem> </asp:menuitem> <asp:menuitem Text="Editar" Value="Editar"> <asp:menuitem Text="Copiar" Value="Copiar"></asp:MenuItem> <asp:menuitem Text="Pegar" Value="Pegar"></asp:MenuItem> </asp:menuitem> </Items> </asp:menu> Enlace de datos a un origen de datos XML El enlace a un archivo XML permite controlar el contenido del menú mediante modificaciones al archivo en lugar de utilizar el diseñador. Esto permite actualizar el aspecto de exploración del sitio sin necesidad de volver a visitar el control Menu o editar el código. Si tiene un sitio cuyo contenido suele cambiar, puede utilizar un archivo XML para organizarlo y enlazar el archivo al control Menu para garantizar que los usuarios del sitio Web puedan tener acceso al contenido. Apariencia y comportamiento El comportamiento del control Menu se puede ajustar a través de sus propiedades. Además, puede controlar el comportamiento de la presentación dinámica, incluida la cantidad de tiempo que un nodo del menú permanece visible una vez que se muestra. Por ejemplo, para cambiar la orientación del control Menu de horizontal a vertical, puede establecer la propiedad Orientation del modo siguiente: Menu.Orientation = Orientation.Vertical; Al establecer la propiedad en Orientation.Horizontal la orientación vuelve a cambiar a horizontal. Puede establecer propiedades individuales del control Menu para especificar el tamaño, el color, la fuente y otras características de su apariencia. Además, puede aplicar máscaras y temas al control Menu. Página 3

5 Páginas Principales MasterPage En el punto y actividad anterior, hemos incorporado los controles de navegación basados en un SiteMap, con el cual podemos tener información de nuestra ubicación en las páginas (SiteMapPath) o proveer de un menú de opciones, con el mapa de nuestra aplicación web (Menú). Para poder tener esta información presente en todas las páginas, nos vimos en la necesidad de copiar estos controles y su configuración en todas las páginas donde era requerido, esto conlleva un alto costo de mantenimiento, si se necesita cambiar algo en los controles (Nota: el SiteMap es común para todos). Una forma de abordar este tipo de problemas (elementos comunes entre páginas), es con el elemento Master Page que nos provee ASP.Net, con el cual tendremos un área (o varias) que serán comunes para todas las páginas que se creen haciendo referencia a esta Master Page. Una MasterPage de ASP.NET permite crear un diseño coherente para las páginas del sitio Web. Se puede definir el aspecto, el diseño y el comportamiento estándar que desea que tengan todas las páginas (o un grupo de páginas) de la aplicación en una sola página como MasterPage. A continuación, puede crear páginas de contenido individuales que incluyan el contenido que desea mostrar. Cuando los usuarios solicitan las páginas de contenido, éstas se combinan con la página principal para dar como resultado una página con el diseño de la página principal y el contenido de la página de contenido, como se muestra en el siguiente diagrama: MasterPage.master Inicio.aspx <%@ Master %> <%@ Page MasterPage- File="Site.master" %> <asp:content ContentPlaceHolderID= "Main" RunAt="server" /> <asp:contentplaceholder ID="Main" RunAt="server" /> </asp:content> El resultado final se componen en realidad de dos partes, la propia MasterPage ó página principal y una o varias páginas de contenido. Página Principal Una página principal es un archivo de ASP.NET con la extensión.master (por ejemplo, MiSitio.master) que tiene un diseño predefinido que puede incluir texto estático, elementos HTML y controles de servidor. La página principal se identifica mediante una Master especial que reemplaza la Page utilizada en las páginas.aspx ordinarias. El aspecto de la directiva es el siguiente: Página 4

6 Master Language="C#" %> La Master puede contener prácticamente las mismas directivas que una Control. Por ejemplo, la directiva de la página principal siguiente incluye el nombre de un archivo de código subyacente y asigna un nombre de clase a la página principal: <%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> Además de la Master, la página principal también incluye todos los elementos HTML de nivel superior de una página, como html, head y form. Por ejemplo, en una página principal se podría utilizar una tabla HTML para el diseño, un elemento img para el logotipo de la compañía, texto estático para el aviso de copyright y controles de servidor para crear la navegación estándar en el sitio. Puede utilizar cualquier elemento HTML y ASP.NET en la página principal. Marcadores de posición de contenido reemplazables Además del texto estático y los controles que aparecerán en todas las páginas, la página principal también incluye uno o varios controles ContentPlaceHolder. Estos controles PlaceHolder definen las regiones que incluirán contenido reemplazable. A su vez, el contenido reemplazable se define en las páginas de contenido. Página de Contenido Para definir el contenido de los controles PlaceHolder de la página principal, creamos páginas de contenido individuales, que son páginas ASP.NET (archivos.aspx y, opcionalmente, archivos de código subyacente) que están enlazadas a una página principal concreta. El enlace se establece en la Page de la página de contenido al incluir un atributo MasterPageFile que apunta a la página principal que se va a utilizar. Por ejemplo, una página de contenido podría tener la siguiente Page, que la enlaza con la página Master1.master. <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Pagina de Inicio"%> En la página de contenido, cree el contenido agregando los controles Content y asignándolos a los controles ContentPlaceHolder de la página principal. Por ejemplo, la página principal podría tener marcadores de posición de contenido denominados Main y Footer. En la página de contenido, puede crear dos controles Content, uno asignado al control ContentPlaceHolderMain y el otro asignado al control ContentPlaceHolderFooter, como se muestra en el código siguiente. Página 5

7 <asp:content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:content> <asp:content ID="Main" ContentPlaceHolderID="ContentPlaceHolderMain" Runat="Server"> <p> Area de Cabecera </p> </asp:content> <asp:content ID="Footer" ContentPlaceHolderID="ContentPlaceHolderFooter" Runat="Server"> <p> Area de Pie de Página </p> </asp:content> Después de crear los controles Content, agrégueles texto y controles. En una página de contenido, todo lo que no esté dentro de los controles Content (excepto los bloques de script del código del servidor) producirá un error. En una página de contenido puede realizar las mismas tareas que en una página de ASP.NET. Por ejemplo, puede generar el contenido de un control Content utilizando controles de servidor y consultas de base de datos u otros mecanismos dinámicos. La Page enlaza la página de contenido a una página principal concreta y define un título para la página que se combinará en la página principal. Tenga en cuenta que la página de contenido no incluye otro marcado fuera de los controles Content. (La página principal debe contener un elemento head con el atributo runat="server" para que se pueda combinar la configuración del título en tiempo de ejecución.) Puede crear varias páginas principales para definir diseños distintos en secciones diferentes del sitio, y un conjunto diferente de páginas de contenido para cada página principal. Ventajas de las Páginas Principales Las páginas principales proporcionan una funcionalidad que tradicionalmente los programadores creaban copiando el código, el texto y los elementos de control existentes repetidamente, mediante conjuntos de marcos, archivos de inclusión de elementos comunes, controles de usuario de ASP.NET, etc. Entre las ventajas de las páginas principales se incluyen las siguientes: Permiten centralizar las funciones comunes de las páginas, para que las actualizaciones puedan llevarse a cabo en un solo lugar. Facilitan la creación de un conjunto de controles y código, y aplican los resultados en un conjunto de páginas. Por ejemplo, puede utilizar los controles en la página principal para crear un menú que se aplique a todas las páginas. Proporcionan un control más preciso sobre el diseño de la página final, al permitir controlar el modo en que se representan los controles PlaceHolder. Página 6

8 Proporcionan un modelo de objetos que permite personalizar la página principal a partir de páginas de contenido individuales (Page.Master). Comportamiento en tiempo de ejecución En tiempo de ejecución, las páginas principales se controlan en la secuencia siguiente: 1. Los usuarios solicitan una página escribiendo la dirección URL de la página de contenido. 2. Cuando se obtiene la página, se lee la Page. Si la directiva hace referencia a una página principal, también se lee la página principal. Si las páginas se solicitan por primera vez, se compilan las dos páginas. 3. La página principal con el contenido actualizado se combina en el árbol de control de la página de contenido. 4. El contenido de los controles Content individuales se combina en el control ContentPlaceHolder correspondiente de la página principal. 5. La página combinada resultante se representa en el explorador. Desde la perspectiva del usuario, la combinación de las páginas principales y de contenido da como resultado una única página. La dirección URL de esta página es la de la página de contenido. Desde la perspectiva del programador, las dos páginas actúan como contenedores diferentes para sus respectivos controles. La página de contenido actúa como un contenedor de la página principal. Sin embargo, se puede hacer referencia a los miembros públicos de una página principal a partir del código de la página de contenido, tal y como se describe en la sección siguiente. Página 7

9 Control FileUpload Este es un control integral, que nos presenta un área de texto donde se indica la ruta y nombre del archivo que se cargará, y un botón de exploración para realizar la búsqueda del recurso en el sistema de archivos. FileUpload muestra un control de cuadro de texto y un botón de búsqueda que permiten a los usuarios seleccionar un archivo en el cliente y cargarlo en el servidor Web. El usuario especifica el archivo que desea cargar escribiendo su ruta de acceso completa en el equipo local (por ejemplo, C:\MyFiles\TestFile.txt) en el cuadro de texto del control. También puede seleccionar el archivo haciendo clic en el botón Examinar y buscándolo después en el cuadro de diálogo Elegir archivo. El control FileUpload no guarda automáticamente un archivo en el servidor después de que el usuario lo seleccione para cargarlo. Se debe proporcionar explícitamente un control o un mecanismo que permita al usuario enviar el archivo especificado. Por ejemplo, un botón donde el usuario pueda hacer clic para cargar el archivo. El código que se escribe para guardar el archivo especificado debe llamar al método SaveAs, que guarda el contenido de un archivo en una ruta especificada del servidor. Normalmente, se llama al método SaveAs en un método de control de eventos para un evento que inicia una devolución de datos al servidor. Por ejemplo, si se un botón que permite enviar un archivo, podría incluir un código para guardar el archivo en el método de control del evento hacer clic. Antes de llamar al método SaveAs para guardar el archivo en el servidor, se puede comprobar por medio de la propiedad HasFile si el control FileUpload contiene un archivo. Si la propiedad HasFile devuelve true, se puede llamar al método SaveAs de manera segura. Si devuelve false, mostrar un mensaje al usuario que indica que el control no contiene un archivo. Cuando se llama al método SaveAs, se debe especificar la ruta de acceso completa del directorio en el que deba guardarse el archivo cargado. Si no se especifica explícitamente una ruta de acceso en el código de su aplicación, se producirá una excepción cuando un usuario intente cargar un archivo. Este comportamiento ayuda a mantener seguros los archivos del servidor, al impedir que los usuarios puedan escribir en ubicaciones arbitrarias de la estructura de directorios de la aplicación y, a la vez, evitar el acceso a los directorios raíz protegidos. El método SaveAs escribe el archivo cargado en el directorio especificado. Por consiguiente, la aplicación ASP.NET debe tener derechos de escritura en el directorio del servidor. La aplicación dispone de dos medios para obtener acceso de escritura. Se puede otorgar explícitamente acceso de escritura a la cuenta bajo la cual se ejecuta la aplicación, en el directorio donde desee guardar los archivos cargados. O bien, puede aumentar el nivel de confianza que se concede a la aplicación ASP.NET. Para obtener acceso de escritura al directorio de ejecución de la aplicación, ésta debe otorgar al objeto AspNetHostingPermission un nivel de confianza establecido en el valor System.Web.AspNetHostingPermissionLevel.Medium. Un aumento del nivel de confianza aumenta el acceso de la aplicación a los recursos del servidor. Se debe tener en cuenta que esta estrategia no es segura, puesto que un usuario malintencionado que se haga con el control de la aplicación también podrá trabajar con este nivel de confianza superior. El procedimiento recomendado es ejecutar una aplicación ASP.NET en el contexto de un usuario con los privilegios mínimos necesarios para que se ejecute la aplicación. Página 8

10 Se utiliza la propiedad FileName para obtener el nombre de un archivo de un cliente que desee cargar utilizando el control FileUpload. El nombre de archivo que devuelve esta propiedad no incluye la ruta de acceso al archivo en el cliente. La propiedad FileContent obtiene un objeto Stream que señala a un archivo para cargarlo. Utilice esta propiedad para obtener acceso al contenido del archivo en forma de bytes. Por ejemplo, se puede usar el objeto Stream devuelto por la propiedad FileContent para leer el contenido del archivo en forma de bytes y almacenarlo en una matriz de bytes. O bien, puede utilizar la propiedad FileBytes para recuperar todos los bytes del archivo. La propiedad PostedFile obtiene el objeto HttpPostedFile subyacente para el archivo que se va a cargar. Se puede utilizar esta propiedad para tener acceso a otras propiedades del archivo. La propiedad ContentLength obtiene la longitud del archivo. La propiedad ContentType obtiene el tipo de contenido MIME del archivo. También puede utilizar la propiedad PostedFile para obtener acceso a la propiedad FileName, la propiedad InputStream y el método SaveAs. El siguiente código ejemplifica el uso del control, los atributos y métodos más comunes para la tarea de subir un archivo al servidor de la aplicación: protected void btncargar_click(object sender, EventArgs e) { // Ruta donde se guardará el archivo String ruta } // Verificar que hay archivo seleccionado para proceder if (FileUpload1.HasFile) { // Obtener el nombre del archivo. String nombre = FileUpload1.FileName; // Concatenar el nombre del archive a la ruta. ruta += nombre; // Llamar al método SaveAs para cargar el archivo en el servidor FileUpload1.SaveAs(ruta); // Dar aviso al usuario de la ejecución exitosa lblestado.text = string.format("el archivo {0} fue cargado. ", nombre); } else { // Informa que no hay archive para cargar. lblestado.text = "No ha especificado un archive para subir."; } Como se indicó el método SaveAs, debe indicar la ruta completa donde se guardará el archivo incluyendo el nombre del mismo, no es obligatorio mantener el mismo nombre del archivo de subida, se puede tomar control sobre esto para hacer los ajustes que se requieran para estos fines. Página 9

11 Se debe tener en consideración que la seguridad de acceso a los recursos del servidor podría impedir el subir el archivo fuera del directorio de la aplicación. Por tal motivo es recomendable que los archivos que se carguen, sean depositados en alguno de los directorios de la aplicación destinado para estos efectos. Aquí se debe considerar que el directorio padre del servidor de aplicaciones donde se encuentra alojada nuestra aplicación Web, no siempre será una dirección fija, por tal motivo debemos utilizar algún mecanismo que nos permita con certeza poder entregar una ruta física real en base a nuestra posición relativa respecto del servidor. Para estos efectos haremos uso del método MapPath de la clase de utilidades de servidor HttpServerUtility, el cual podemos acceder por medio de la propiedad Server de nuestra página. En el siguiente ejemplo de código se devuelve la ruta de acceso física del directorio virtual que contiene el sitio Web especificado: String rutasitio; rutasitio = Server.MapPath("/WebSite1"); El siguiente ejemplo muestra su uso, para obtener la dirección física en base a la dirección relativa de un directorio de la aplicación y utilizarlo en la carga del archivo: /* Cargamos el archivo al servidor dentro del directorio Archivos */ FileUpload1.SaveAs(string.Format("{0}{1}",MapPath("~/Archivos/"),ruta)); Control Image El control Image permite mostrar imágenes en páginas Web ASP.NET y administrar estas imágenes en su propio código. Se puede especificar mediante programación el archivo de gráficos para un control Image en tiempo de diseño o en tiempo de ejecución. También se puede enlazar la propiedad ImageUrl del control a un origen de datos para mostrar gráficos procedentes de la información de una base de datos. A diferencia de la mayoría de los demás controles de servidor Web, el control Image no admite ningún evento. Por ejemplo, el control Image no responde a los clics del mouse (ratón). En su lugar, puede crear una imagen interactiva utilizando los controles ImageMap o ImageButton de servidor Web. Además de mostrar gráficos, el control Image permite especificar distintos tipos de texto para la imagen, como los siguientes: ToolTip: Éste es el texto que aparece en una información sobre herramientas en algunos exploradores. Página 10

12 AlternateText: Éste es el texto que aparece si no se puede encontrar el archivo de gráficos. Si no se especifica ninguna propiedad ToolTip, algunos exploradores utilizarán el valor AlternateText como una información sobre herramientas. GenerateEmptyAlternateText: Si esta propiedad se establece en true, el atributo alt del elemento de imagen representado se establecerá en una cadena vacía. Para agregar un control Image de servidor Web a una página de formularios Web Forms: 1. Desde la ficha Estándar del cuadro de herramientas, arrastre un control Image a la página. 2. En la categoría Apariencia de la ventana Propiedades, establezca la propiedad ImageUrl del control en la dirección URL del archivo.gif,.jpg u otro archivo de gráficos Web. Este archivo debe estar cargado en la aplicación o en otra URL a la que se tenga acceso. 3. También se pueden establecer las siguientes propiedades del control Image. Propiedad Height y Width ImageAlign Tooltip y AlternateText Descripción Reserva espacio para el gráfico en la página. Cuando se represente la página, se ajustará el tamaño de la imagen para adaptarse al tamaño reservado Alinea la imagen con respecto al texto circundante, utilizando valores como Top, Bottom, Left, Middle y Right. En el código, la alineación de la imagen se establece mediante la enumeración ImageAlign. Información para la imagen, como se indicó anteriormente Página 11