Tutorial: Controlar los menús de ASP.NET mediante programación

Actualización: noviembre 2007

Este tutorial explica cómo trabajar con el control Menu de ASP.NET mediante programación al coordinar dos menús en la misma página utilizando código.

Puede crear menús de navegación para su sitio Web utilizando el control Menu de ASP.NET. En este tutorial, explorará los aspectos de programación del control Menu de ASP.NET y creará dos menús enlazados al mismo archivo Web.sitemap que funcionan juntos. El primer menú se muestra de forma estática y presenta categorías tales como productos, servicios y soporte técnico. Aparecerá horizontalmente en la parte superior de la pantalla. El segundo menú se muestra horizontalmente debajo del primero. El contenido del segundo menú está determinado por el elemento que se seleccione en el primer menú. Según la selección actual del primer menú, ajuste mediante programación el origen de datos del mapa del sitio del segundo menú para mostrar solamente esa parte del archivo Web.sitemap que sea relevante para la categoría seleccionada.

Requisitos previos

Para completar este tutorial, necesitará:

• Microsoft Visual Web Developer (Visual Studio).

• .NET Framework.

Crear el sitio Web

Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, siguiendo los pasos en Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio Web y pasar a "Creación del archivo del mapa del sitio" más adelante en este tutorial. De lo contrario, cree un sitio y una página Web nuevos siguiendo estos pasos.

Para crear un sitio Web de sistema de archivos

1. Abra Visual Web Developer.

2. En el menú Archivo, haga clic en Nuevo y después en Sitio Web.

   Aparecerá el cuadro de diálogo Nuevo sitio Web.

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

4. En el cuadro Ubicación, escriba el nombre de la carpeta en la que desea guardar las páginas de su sitio Web.

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

5. En la lista Lenguaje, haga clic en el lenguaje de programación con el que desee trabajar.

6. Haga clic en Aceptar.

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

Crear el archivo del mapa del sitio

Ambos menús obtienen su contenido del archivo Web.sitemap del sitio. Los objetos SiteMapDataSource que cree los van a utilizar ambos menús para garantizar que los dos muestran la parte correspondiente del mapa del sitio.

Para crear el archivo Web.sitemap

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

2. En el cuadro de diálogo Agregar nuevo elemento, elija Mapa del sitio y luego haga clic en Agregar.

3. Agregue el siguiente código XML al nuevo archivo. XML representa una jerarquía de opciones de menú. Los elementos <siteMapNode> están anidados. Cada nodo es un elemento de menú que contiene subelementos, y algunos subelementos tienen sus propios subelementos. Existen tres nodos de segundo nivel debajo del nodo Home: Hardware, Software y Support. Debajo de ellos hay varias subcategorías.

   <?xml version="1.0" encoding="utf-8" ?>
   <siteMap>
     <siteMapNode title="Home">
       <siteMapNode title="Products">
         <siteMapNode title="Hardware" url="Default.aspx?node=hardware">
           <siteMapNode title="Mouse"/>
           <siteMapNode title="Keyboard"/>
           <siteMapNode title="NetCard"/>
           <siteMapNode title="Monitor"/>
           <siteMapNode title="PC"/>
         </siteMapNode>
         <siteMapNode title="Software" url="Default.aspx?node=software">
           <siteMapNode title="Spreadsheet"/>
           <siteMapNode title="Word Processor"/>
           <siteMapNode title="Presentation"/>
           <siteMapNode title="Mail"/>
           <siteMapNode title="Games"/>
         </siteMapNode>
         <siteMapNode title="Books" url="Default.aspx?node=books">
           <siteMapNode title="Programming"/>
           <siteMapNode title="Debugging"/>
           <siteMapNode title="Testing"/>
           <siteMapNode title="Web Apps"/>
           <siteMapNode title="WinForm Apps"/>
         </siteMapNode>
       </siteMapNode>
       <siteMapNode title="Services">
         <siteMapNode title="Consulting" url="Default.aspx?node=consulting">
           <siteMapNode title="Processes"/>
           <siteMapNode title="Management"/>
           <siteMapNode title="Recruiting"/>
         </siteMapNode>
         <siteMapNode title="Development" url="Default.aspx?node=development">
           <siteMapNode title="Web Apps"/>
           <siteMapNode title="Enterprise Apps"/>
           <siteMapNode title="Database"/>
         </siteMapNode>
       </siteMapNode>
       <siteMapNode title="Support">
         <siteMapNode title="Drivers" url="Default.aspx?node=drivers">
           <siteMapNode title="Audio"/>
           <siteMapNode title="Network"/>
           <siteMapNode title="Printer"/>
           <siteMapNode title="Modem"/>
         </siteMapNode>
         <siteMapNode title="Manuals" url="Default.aspx?node=manuals">
           <siteMapNode title="Applications"/>
           <siteMapNode title="Troubleshooting"/>
           <siteMapNode title="Installation"/>
           <siteMapNode title="Internet"/>
         </siteMapNode>
         <siteMapNode title="Updates" url="Default.aspx?node=updates">
           <siteMapNode title="Release 1"/>
           <siteMapNode title="Game Package"/>
         </siteMapNode>
       </siteMapNode>
     </siteMapNode>
   </siteMap>
   

4. Guarde el archivo.

Crear el primer menú

El primer menú muestra un único nivel de elementos de menú estático. Se muestra horizontalmente en la parte superior de la pantalla.

Para crear el primer menú

1. En el Explorador de soluciones, haga doble clic en la página Default.aspx para abrirla.

2. Cambie a la vista Diseño.

3. Desde el grupo de control Navegación del Cuadro de herramientas, arrastre un control Menú a la página.

4. En la ventana Propiedades, establezca la propiedad Orientación en Horizontal.

5. Establezca MaximumDynamicDisplayLevels en 0.

   Con esto se garantiza que ninguna parte del menú aparecerá de manera dinámica o emergente.

6. Asegúrese de que StaticDisplayLevels se establece en 1.

   Esto hace que aparezca un solo nivel en el menú.

7. Haga clic en la etiqueta inteligente del control Menú.

   Aparece el cuadro de diálogo Tareas de menú.

8. Elija Nuevo origen de datos en la lista desplegable Elegir origen de datos.

9. En el Asistente para la configuración de orígenes de datos, elija Mapa del sitio.

10. Acepte el nombre predeterminado de SiteMapDataSource1 y haga clic en Aceptar.

Configurar el primer origen de datos

Debido a que el primer menú sólo muestra un nivel de elementos de menú estático, tiene que configurar su origen de datos para que muestre la parte apropiada del archivo Web.sitemap. En este caso, son los elementos de segundo nivel: Products, Services y Support.

Los enlaces predeterminados del control Menu a un control SiteMapDataSource convierten cada elemento de menú en un vínculo de navegación. Su objetivo es controlar mediante programación el comportamiento de otro menú y para ello utiliza enlaces personalizados de modo que estos elementos de menú no actúen como vínculos de navegación sino que ocasionen una devolución de datos para que el segundo menú se pueda actualizar.

Para configurar el primer origen de datos

1. Vea la página Default.aspx en la vista Diseño y después haga clic en la etiqueta inteligente en el control Menú.

   Aparece el cuadro de diálogo Tareas de menú.

2. Haga clic en Editar Databindings de MenuItem.

3. En el Editor de DataBinding de menú, en la lista desplegable Enlaces de datos disponibles, seleccione SiteMapNode y haga clic en Agregar.

4. Seleccione TextField en la lista desplegable Propiedades de enlace de datos y seleccione Título en el menú desplegable. Haga clic en Aceptar.

5. Seleccione el control SiteMapDataSource.

6. En Propiedades, establezca ShowStartingNode en False.

Crear el segundo menú

El segundo menú es dinámico y su origen de datos utiliza solo una parte del archivo del mapa del sitio que se determina mediante programación según lo que haya seleccionado en el primer menú. Al igual que antes, el menú debe mostrar su primer nivel de forma estática; sin embargo, ahora el resto del archivo Web.sitemap debe aparecer dinámicamente.

Para crear el segundo menú

1. Vea la página Default.aspx en la vista Diseño y luego arrastre un segundo control Menú hasta la página, debajo del primer control Menú.

2. En Propiedades, establezca Orientación en Horizontal.

3. Haga clic en la etiqueta inteligente del segundo control Menú.

   Aparece el cuadro de diálogo Tareas de menú.

4. Elija Nuevo origen de datos en la lista desplegable Elegir origen de datos.

5. En el Asistente para la configuración de orígenes de datos, elija Mapa del sitio.

6. Acepte el nombre predeterminado de SiteMapDataSource2 y haga clic en Aceptar.

Configurar el segundo origen de datos

En esta sección, configure el origen de datos para que solo seleccione una sección concreta del archivo Web.sitemap. Para ello, empiece con la primera categoría predeterminada del primer menú, que es la sección Products del archivo Web.sitemap. Utilice ahora la propiedad StartingNodeURL para indicar un atributo URL específico dentro del archivo.

Para configurar el punto inicial del segundo origen de datos

1. Seleccione SiteMapDataSource2 y establezca su propiedad StartingNodeURL en "Default.aspx?node=hardware".

2. Establezca StartingNodeOffset en -1.

3. Establezca ShowStartingNode en False.

Agregar el código para coordinar los menús

Para controlar el segundo menú, basado en el primer menú, identifique el evento MenuItemClick del primer menú e indique la vista del segundo menú correspondiente al archivo del mapa del sitio que se encuentra presente en el código.

Para coordinar los menús mediante código

1. Vea la página Default.aspx en la vista Diseño y seleccione Menu1.

2. En Propiedades, establezca el evento MenuItemClick en Menu1_MenuItemClick.

   Se creará automáticamente un método denominado Menu1_MenuItemClick en el archivo de código subyacente para la página Default.aspx, o dentro de las etiquetas <script> de la página .aspx si está utilizando el modelo de página de un solo archivo.

3. Agregue el siguiente código resaltado al método:

   Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _
     ByVal e As System.Web.UI.WebControls.MenuEventArgs) _
     Handles Menu1.MenuItemClick
     Select Case e.Item.Value
       Case "Products"
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware"
       Case "Services"
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting"
       Case "Support"
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers"
     End Select
   End Sub
   

   protected void Menu1_MenuItemClick(Object sender,    
         System.Web.UI.WebControls.MenuEventArgs e)
   {
     switch(e.Item.Value)
     {
       case "Products":
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware";
         return;
       case "Services":
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting";
         return;
       case "Support":
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers";
         return;
     }
   }
   

   El código precedente intercepta el evento clic de Menu1. En lugar de navegar a otra ubicación, utilice el valor para determinar lo que muestra el segundo control Menu. Esto lo logra ajustando la propiedad StartingNodeUrl del control SiteMapDataSource del segundo control Menu.

4. Guarde el archivo.

Probar los menús

Para probar la interacción entre los dos menús, haga clic en los elementos del primer menú y observe cómo cambia el segundo menú. El segundo menú es dinámico y representa el tercer nivel del archivo Web.sitemap.

Para probar el menú

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

   El primer menú aparece con el segundo menú y sus elementos de menú debajo de Productos en el archivo Web.sitemap.

2. Haga clic en Servicios en el primer menú.

   El segundo menú muestra ahora los menús dinámicos Consultoría y Desarrollo.

3. Haga clic en Soporte.

   El segundo menú muestra los elementos de menú dinámico Controladores, Manuales y Actualizaciones.

Pasos siguientes

El control Menu le permite crear menús de navegación fácilmente y ofrece soporte técnico de programación para escenarios más complejos. También puede que desee experimentar con las siguientes opciones:

• Aplique un tema o máscara al control Menu. Para obtener más información, consulte Tutorial: Personalizar un sitio Web mediante temas en Visual Studio.

• Obtenga más información sobre la navegación del sitio. Para obtener más información, consulte Información general sobre la exploración del sitio de ASP.NET.

• Utilice un control Menu en una página principal para proporcionar una amplia navegación, definida en una sola página. Para obtener más información, vea Tutorial: Crear y usar páginas principales ASP.NET en Visual Web Developer.

Vea también

Tareas

Tutorial: Mostrar un menú en páginas Web

Conceptos

Información general sobre el control Menu