Compartir a través de

Tutorial: Agregar la función de exploración de sitios Web

  • Artículo

Actualización: noviembre 2007

En cualquier sitio que no tenga un número muy reducido de páginas puede resultar difícil crear un sistema de navegación que permita a los usuarios desplazarse libremente por las páginas, sobre todo si se realizan cambios en el sitio. La función de navegación de sitios de ASP.NET permite crear un mapa centralizado de las páginas del sitio.

En este tutorial se muestra cómo configurar el mapa de un sitio y cómo utilizar controles que dependan del mapa del sitio para agregar funciones de navegación a las páginas del sitio Web.

Durante este tutorial aprenderá a hacer lo siguiente:

  • Crear un sitio Web que tenga páginas de ejemplo y un archivo de mapa del sitio que describa el diseño de las páginas.

  • Utilizar el control TreeView como menú de navegación que permita a los usuarios ir directamente a cualquier página del sitio.

  • Utilizar el control SiteMapPath para agregar una ruta de navegación que permita a un usuario ver la jerarquía del sitio y retroceder a niveles superiores desde la página actual.

  • Utilizar el control Menu para agregar un menú de navegación que permita a los usuarios ver un nivel de nodos a la vez. Al pausar el puntero del mouse sobre un nodo que tenga nodos secundarios, se generará un submenú de los nodos secundarios.

  • Utilizar la navegación del sitio y los controles en una página principal para que sólo tenga que definir una vez las funciones de navegación del sitio.

Requisitos previos

Para poder completar este tutorial, necesitará lo siguiente:

  • Herramienta de desarrollo Web Microsoft Visual Web Developer.

  • El entorno .NET Framework

En este tutorial se supone que sabe utilizar Visual Web Developer.

Crear un sitio Web con páginas de ejemplo y un mapa del sitio

Si ya ha creado un sitio Web en Visual Web Developer en Tutorial: Crear una página Web básica en Visual Web Developer, puede utilizar ese sitio Web e ir a la sección siguiente. De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.

Crear un sitio Web de sistema de archivos

Para crear un sitio Web del sistema de archivos

  1. Abra Visual Web Developer.

  2. En el menú Archivo, haga clic en Nuevo sitio Web (o en el menú Archivo, haga clic en Nuevo y, a continuación, haga clic en Sitio Web).

    Aparece el cuadro de diálogo Nuevo sitio Web.

  3. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.

  4. En el cuadro Ubicación situado en el extremo izquierdo, haga clic en Sistema de archivos y, en el cuadro Ubicación situado en el extremo derecho, escriba el nombre de la carpeta en la que desea mantener las páginas del sitio Web.

    Por ejemplo, escriba el nombre de carpeta C:\WebSites\SiteNavigation.

  5. En el cuadro Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

    El lenguaje de programación que elija será el lenguaje predeterminado de su sitio Web, pero también puede establecer el lenguaje de programación de cada página de forma individual.

  6. Haga clic en Aceptar.

    Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.

Crear un mapa del sitio

Para la navegación del sitio, necesita un medio de describir la disposición de las páginas en el sitio. El método predeterminado consiste en crear un archivo .xml que contenga la jerarquía del sitio, incluidos los títulos de las páginas y las direcciones URL.

La estructura del archivo .xml refleja la estructura del sitio. Cada página se representa como un elemento siteMapNode en el mapa del sitio. El nodo de nivel superior representa la página principal y los nodos secundarios representan páginas que se encuentran en un nivel más profundo en el sitio.

Para crear un mapa del sitio

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, haga clic en Agregar nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento <rutaDeAcceso>:

    1. En Plantillas instaladas de Visual Studio, haga clic en Mapa del sitio.

    2. En el cuadro Nombre, asegúrese de que el nombre es Web.sitemap.

      Nota:

      El archivo se debe denominar Web.sitemap y tiene que aparecer en la raíz del sitio Web.

    3. Haga clic en Agregar.

  3. Copie el siguiente contenido XML en el archivo Web.sitemap, de modo que se sobrescriba el contenido predeterminado.

    <siteMap>
  <siteMapNode title="Home" description="Home" url="~/home.aspx" >
    <siteMapNode title="Products" description="Our products"
         url="~/Products.aspx">
        <siteMapNode title="Hardware" 
             description="Hardware we offer" 
             url="~/Hardware.aspx" />
        <siteMapNode title="Software" 
             description="Software for sale" 
             url="~/Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services" description="Services we offer" 
        url="~/Services.aspx">
        <siteMapNode title="Training" description="Training" 
            url="~/Training.aspx" />
        <siteMapNode title="Consulting" description="Consulting" 
            url="~/Consulting.aspx" />
        <siteMapNode title="Support" description="Support" 
            url="~/Support.aspx" />
      </siteMapNode>
  </siteMapNode>
</siteMap>

    El archivo Web.sitemap contiene un conjunto de elementos siteMapNode que se anidan en tres niveles. La estructura de cada elemento es la misma. La única diferencia entre ellos radica en su ubicación dentro de la jerarquía XML.

    La dirección URL de las páginas que se definen en el archivo .xml de ejemplo es incompleta. Esto significa que todas las páginas se tratan como si tuvieran direcciones URL relativas a la raíz de la aplicación. Sin embargo, puede especificar cualquier URL para una página determinada: la estructura lógica que defina en el mapa del sitio no tiene por qué corresponder al diseño físico de las páginas en las carpetas.

  4. Guarde el archivo y ciérrelo.

Crear páginas para la navegación

En esta sección sólo creará algunas de las páginas que se describen en el mapa del sitio que definió en la sección anterior. (El mapa del sitio es más amplio para que pueda ver una jerarquía completa al probar las páginas en este tutorial).

Para crear las páginas para la navegación

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, haga clic en Agregar nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento <rutaDeAcceso>:

    1. En Plantillas instaladas de Visual Studio, haga clic en Web Forms.

    2. En el cuadro Nombre, escriba Home.aspx y, a continuación, haga clic en Agregar.

  3. Cambie a la vista Diseño.

  4. En la página Home.aspx, escriba Inicio y, a continuación, aplique el formato como Encabezado 1

    Repita este procedimiento y cree cuatro páginas adicionales con los nombres Products.aspx, Hardware.aspx, Software.aspx y Training.aspx. Utilice el nombre de la página (por ejemplo, Productos) como encabezado para poder reconocer cada página cuando se muestre en el explorador.

    No es importante qué paginas se creen específicamente. Las páginas que se enumeran en este procedimiento son sugerencias que le permitirán ver la jerarquía del sitio anidada en tres niveles.

Crear un menú de navegación con el control TreeView

Ahora que tiene un mapa del sitio y algunas páginas, puede agregar funciones de navegación al sitio. Utilizará el control TreeView como menú de navegación contraíble.

Para agregar un menú de navegación de tipo árbol

  1. Abra la página Home.aspx.

  2. Desde el Cuadro de herramientas, arrastre a la página un control SiteMapDataSource del grupo Datos.

    En su configuración predeterminada, el control SiteMapDataSource recupera la información que necesita del archivo Web.sitemap que creó anteriormente en este tutorial, en la sección "Crear un mapa del sitio", por lo que no tendrá que especificar información adicional para el control.

  3. Arrastre un control TreeView desde el grupo Navegación del Cuadro de herramientas hasta la página.

  4. En el menú Tareas de Treeview, en el cuadro Elegir origen de datos, haga clic en SiteMapDataSource1.

  5. Guarde la página.

Probar el menú de navegación de tipo árbol

Ahora puede realizar una prueba provisional del sistema de navegación.

Para probar el menú de navegación

  1. Presione CTRL+F5 para ejecutar la página Home.aspx.

    En el árbol se muestran dos niveles de nodos.

  2. Haga clic en Productos para ver la página Productos.

    • Si no creó ninguna página Products.aspx, haga clic en el vínculo de otra página que haya creado.

En el estado actual del sitio Web, el menú de navegación sólo aparece en la página principal (Inicio). Puede agregar los mismos controles SiteMapDataSource y TreeView a cada página de la aplicación para mostrar un menú de navegación en cada página. Sin embargo, verá más adelante en este tutorial cómo colocar el menú de navegación en una página principal de modo que el menú de navegación aparezca automáticamente con todas las páginas.

Mostrar el historial de navegación con el control SiteMapPath

Además de crear un menú de navegación mediante el control TreeView, en cada página puede agregar funciones de navegación que muestren dónde se encuentra la página en la jerarquía actual. Este tipo de control de navegación también se conoce como ruta de navegación. ASP.NET proporciona el control SiteMapPath que puede implementar automáticamente funciones de navegación de páginas.

Para que se muestre el historial de navegación

  1. Abra la página Products.aspx y cambie a la vista Diseño.

  2. Desde el grupo Navegación del Cuadro de herramientas, arrastre un control SiteMapPath hasta la página, coloque el cursor delante del control SiteMapPath y, a continuación, presione ENTRAR para crear una nueva línea.

    El control SiteMapPath muestra la posición de la página actual en la jerarquía de las páginas. De forma predeterminada, el control SiteMapPath representa la jerarquía que se crea en el archivo Web.sitemap. Por ejemplo, cuando muestra la página Products.aspx, el control SiteMapPath muestra la ruta de acceso siguiente:

    Inicio > Productos

  3. Repita este procedimiento para las otras páginas que ha creado en este tutorial, excepto la página principal (Inicio).

    Aunque no coloque un control SiteMapPath en todas las páginas, para la prueba necesitará un control en cada nivel de la jerarquía del sitio (por ejemplo, en las páginas Products.aspx y Hardware.aspx).

Probar el historial de navegación

Puede probar la navegación de las páginas viendo páginas que están en el segundo y tercer niveles de la jerarquía.

Para probar la navegación por las páginas

  1. Abra la página Home.aspx y, a continuación, presione CTRL+F5 para ejecutar la página.

  2. Utilice el control TreeView para desplazarse a la página Productos.

    En la ubicación de la página donde coloca el control SiteMapPath, verá una ruta de acceso similar a la siguiente:

    Inicio > Productos

  3. Haga clic en Inicio para ir a la página principal.

  4. Utilice el control TreeView para desplazarse hasta la página Hardware.

    En esta ocasión verá una ruta de acceso similar a la siguiente:

    Inicio > Productos > Hardware

Todos los nombres de página que muestra el control SiteMapPath son vínculos, excepto el último, que representa la página actual. Puede convertir el nodo actual en un vínculo si establece la propiedad RenderCurrentNodeAsLink del control SiteMapPath en true.

El control SiteMapPath permite a los usuarios retroceder a niveles superiores de la jerarquía, pero no saltar a una página que no se encuentre en la ruta de la jerarquía actual.

Crear un menú de navegación con el control Menu

Además de crear un menú de navegación mediante el control TreeView, puede utilizar el control Menu para que se muestre un menú de navegación expandible que permita a los usuarios ver un nivel de nodos a la vez. Al pausar el puntero del mouse sobre un nodo que tenga nodos secundarios, se generará un submenú de los nodos secundarios.

Para agregar un recurso de navegación de tipo menú

  1. Abra la página Products.aspx y cambie a la vista Diseño.

  2. Arrastre un control Menu desde el grupo Navegación del Cuadro de herramientas hasta la página.

  3. En el menú Tareas de menú, en el cuadro Elegir origen de datos, haga clic en NewDataSource.

  4. En el asistente Configurar origen de datos — <Datasourcename>, haga clic en Mapa del sitio y, a continuación, haga clic en Aceptar.

  5. Guarde la página.

Probar el recurso de navegación de tipo menú

Ahora puede realizar una prueba provisional del sistema de navegación.

Para probar el menú de navegación

  1. Cierre Tareas de menú.

  2. Abra la página Home.aspx.

  3. Presione CTRL+F5 para ejecutar la página Home.aspx.

    En el árbol se muestran dos niveles de nodos.

  4. Haga clic en Productos para ver la página Productos.

    • Si no creó ninguna página Products.aspx, haga clic en el vínculo de otra página que haya creado.

  5. En el menú de navegación, sitúe el puntero del mouse en el vínculo Inicio para expandir el menú.

En el estado actual del sitio Web, el menú de navegación sólo aparece en la página principal. Puede agregar los mismos controles SiteMapDataSource y Menu a cada página de la aplicación para mostrar un menú de navegación en cada página. Sin embargo, en la sección siguiente de este tutorial verá cómo colocar el menú de navegación en una página principal de modo que aparezca automáticamente con cada página.

Combinar la función de navegación del sitio con páginas principales

En las páginas que ha creado hasta ahora en este tutorial ha agregado los controles de navegación del sitio a las páginas de forma individual. Esto no resulta especialmente complejo, porque no es necesario configurar los controles de un modo distinto para cada página. Sin embargo, puede aumentar el costo de mantenimiento del sitio. Por ejemplo, si deseara cambiar la ubicación del control SiteMapPath en las páginas del sitio, tendría que cambiar individualmente cada página.

Si utiliza los controles de navegación del sitio en combinación con las páginas principales, puede crear un diseño que contenga los controles de navegación en una ubicación. Podrá mostrar páginas como contenido dentro de la página principal.

Para crear la página principal para la navegación

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, haga clic en Agregar nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento <rutaDeAcceso>:

    1. En Plantillas instaladas de Visual Studio, haga clic en Página principal.

    2. En el cuadro Nombre, escriba Navigation.master y haga clic en Agregar.

  3. Cambie a la vista Diseño.

    La página principal aparece con un control ContentPlaceHolder predeterminado.

En el procedimiento siguiente creará una página principal con un diseño sencillo para los controles de navegación. En una aplicación real es probable que utilice un formato más complejo, pero las técnicas de uso de los controles de navegación en una página principal serán similares.

Para agregar controles de navegación a la página principal

  1. Seleccione el control ContentPlaceHolder, presione FLECHA IZQUIERDA y, a continuación, presione ENTRAR.

    De ese modo se inserta una línea en blanco delante del control ContentPlaceHolder.

  2. Desde el grupo Datos del Cuadro de herramientas, arrastre un control SiteMapDataSource hasta la página principal y colóquelo sobre el control ContentPlaceHolder.

    Nota:

    No coloque el control SiteMapDataSource en el control ContentPlaceHolder.

    De forma predeterminada, el control SiteMapDataSource utilizará el archivo Web.sitemap que creó anteriormente en este tutorial, en la sección "Crear un mapa del sitio".

  3. Haga clic en el control SiteMapDataSource, presione la FLECHA DERECHA y, a continuación, presione ENTRAR.

    De este modo se inserta una línea en blanco bajo el control SiteMapDataSource.

  4. En el menú Tabla, haga clic en Insertar tabla y, a continuación, inserte una tabla que tenga una fila, dos columnas y un ancho del 100%.

  5. Desde el grupo Navegación del Cuadro de herramientas, arrastre un control TreeView hasta la celda izquierda de la tabla.

  6. En el menú Tareas de Treeview, en el cuadro Elegir origen de datos, haga clic en SiteMapDataSource1.

  7. Desde el grupo Navegación del Cuadro de herramientas, arrastre un control SiteMapPath hasta la celda derecha de la tabla.

  8. En la celda derecha, haga clic en el área en blanco y, a continuación, presione MAYÚS+ENTRAR para crear una nueva línea.

  9. Arrastre el control ContentPlaceholder hasta la celda derecha de la tabla y colóquelo bajo el control SiteMapPath.

Cuando se utiliza una página principal, las páginas del sitio se crean como páginas de contenido. Las páginas de contenido utilizan controles Content para definir el texto y los controles que se muestran en el control ContentPlaceholder de la página principal. Por consiguiente, tendrá que volver a crear las páginas Inicio, Productos, y Hardware como páginas de contenido.

Para crear las páginas de contenido del sitio

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en la página Home.aspx, haga clic en Eliminar y, a continuación, haga clic en Aceptar.

  2. Repita el paso 1 para las páginas Products.aspx, Software.aspx, Training.aspx, Hardware.aspx y cualquier otra página que haya creado.

    Volverá a crear las páginas como páginas de contenido que utilizan una página principal.

  3. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, haga clic en Agregar nuevo elemento.

  4. En el cuadro de diálogo Agregar nuevo elemento:

    1. En Plantillas instaladas de Visual Studio, haga clic en Web Forms.

    2. En el cuadro Nombre, escriba Home.aspx.

    3. Active la casilla Seleccionar la página principal.

    4. Haga clic en Agregar.

    Aparece el cuadro de diálogo Seleccionar una página principal.

  5. En Contenido de la carpeta, haga clic en Navigation.master y, a continuación, haga clic en Aceptar.

    Ha creado una página de contenido que se enlaza a la página principal que creó en la sección anterior.

  6. Cambie a la vista Diseño.

    En la vista Diseño, verá el diseño que ha creado para la página maestra, con una región editable correspondiente al control ContentPlaceHolder1 en la página maestra.

  7. Haga clic dentro de la ventana Content.

    Aquí es donde puede agregar contenido para esta página en concreto.

  8. Escriba Inicio y, a continuación, dé formato al texto como Encabezado 1.

    Ha creado el texto estático (específicamente, el encabezado) para la página Inicio.

  9. Repita los pasos 3 a 8 para crear una página de contenido Products.aspx y una página de contenido Hardware.aspx. En el paso 8, escriba Productos y Hardware, respectivamente, en lugar de Inicio.

Probar los controles de navegación en la página principal

Realizar pruebas con páginas principales y con páginas de contenido es igual que probar páginas individuales.

Para probar los controles de navegación en la página principal

  1. Abra la página Products.aspx y, a continuación, presione CTRL+F5 para ejecutar la página.

    La página de contenido Productos se combina con la página principal. En el explorador, verá una página que contiene el encabezado Productos y los controles de navegación que agregó a la página principal.

  2. En el control TreeView, haga clic en Hardware.

    La página Hardware se muestra con el mismo diseño que la página Productos, sólo que el control SiteMapPath muestra una ruta de acceso diferente.

Pasos siguientes

En este tutorial se muestra la funcionalidad básica de navegación de sitios y los controles de navegación de ASP.NET. Quizás desee probar otras características de navegación. Por ejemplo, puede hacer lo siguiente:

  • Dar formato al control SiteMapPath para personalizar su apariencia. El control admite numerosas opciones con las que administrar cómo se muestran los vínculos. Para obtener más información, vea SiteMapPath.

  • Personalizar la presentación de las páginas en el control TreeView. Por ejemplo, podría resaltar la página actual en el nodo de Treeview.

  • Trabajar mediante programación con la información de navegación del sitio. En la página actual hay disponible un control SiteMapPath que se puede utilizar para mostrar mediante programación la información de navegación.

  • Utilizar un almacén de datos diferente para la información del mapa del sitio. En lugar de utilizar el archivo XML de mapa del sitio predeterminado, quizá desee utilizar un mapa de sitio existente o almacenar información del mapa del sitio en una base de datos. Para la función de navegación de sitios de ASP.NET se utiliza un modelo de proveedor. Puede crear un componente que administre información del mapa del sitio y, a continuación, configurar su aplicación para que utilice ese componente en lugar del proveedor de mapas de sitio predeterminado. Para obtener más información, vea Proveedores de exploración del sitio de ASP.NET.

Vea también

Tareas

Tutorial: Crear una página Web básica en Visual Web Developer

Tutorial: Crear y usar páginas principales ASP.NET en Visual Web Developer

Conceptos

Información general sobre la exploración del sitio de ASP.NET

Mapas de sitio de ASP.NET

Información general sobre las páginas principales ASP.NET

Proteger la exploración del sitio de ASP.NET

Proteger el acceso a datos

Otros recursos

Seguridad de aplicaciones ASP.NET en entornos alojados en host

Procedimientos de seguridad básicos para aplicaciones web ASP.NET