none
Bootstrap y Asp:Menu RRS feed

  • Pregunta

  • Buen día, 

    Tengo un problema con los submenus de mi Asp:Menu.

    Cargo dinamicamente mi menu desde SQL sin problemas, pero al visualizarlo en la página web, solo me muestra los submenus de el primer nodo, tengo 3 nodos con submenus.

    Si cambio la clase a display:block, me muestra todos los submenus, pero al aplicar display=none, simplemente en el primer nodo cuando doy clic me muestra los submenus, en los demas no los muestra.

    Este es mi código:

     <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                            aria-expanded="false">
                            <span class="icon-bar"></span><span
                                class="icon-bar"></span><span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <asp:Menu ID="Menu" runat="server" Orientation="Horizontal" RenderingMode="List"
                            OnMenuItemClick="Menu_MenuItemClick" IncludeStyleBlock="false"
                            StaticMenuStyle-CssClass="nav navbar-nav"
                            StaticMenuItemStyle-CssClass="StaticMenuItem"
                            DynamicMenuStyle-CssClass="dropdown-menu">
                        </asp:Menu>
                    </div>
                </div>
            </div>
             <script type="text/javascript">
                //Disable the default MouseOver functionality of ASP.Net Menu control.
                //Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
                    //return false;
                //};
                $(function () {
                    //Remove the style attributes.
                    $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
    
                    //Apply the Bootstrap class to the SubMenu.
                    $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");
    
                    //Apply the Bootstrap properties to the SubMenu.
                    $(".dropdown-toggle").find("a").eq(0).attr("data-toggle", "dropdown").attr("aria-haspopup", "true").attr("aria-expanded", "false").append("<span class='caret'></span>");
    
                    //Apply the Bootstrap "active" class to the selected Menu item.
                    $("a.selected").closest("li").addClass("active");
                    $("a.selected").closest(".dropdown-toggle").addClass("active");
                });
                $('ul.nav li.dropdown').hover(function () {
                    $(this).children('ul.dropdown-menu').slideDown();
                }, function () {
                    $(this).children('ul.dropdown-menu').slideUp();
                });
            </script>

     Espero puedan apoyarme!

    Muchas gracias de antemano.


    Alerta

    martes, 23 de febrero de 2016 2:54

Respuestas

  • Gracias por ayudar Leandro!

    La verdad es que siempre he trabajado con asp:menu y css para el formato, pero necesitaba adaptar mi menú para mobiles, ahí fue cuando encontré bootstrap, la verdad no lo conocía y me sorprendió, solo que para adaptar lo estilos del bootstrap necesito el js para adaptar al tamaño de la pantalla y alterar los estilos del bootstrap.

    Estuve investigando y mucha gente lo usa de esa manera, mas adelante investigare para realizar el menú de alguna otra forma, de momento, ya quedo perfecto.

    No había revisado la siguiente linea de código del js y es donde se encontraba mi problema:

    $(".dropdown-toggle").find("a").eq(0).attr("data-toggle", "dropdown").attr("aria-haspopup", "true").attr("aria-expanded", "false").append("<span class='caret'></span>");


    Al momento de encontrar la etiqueta "a" y seleccionar el nodo "cero", solo le daba formato a ese menú para mostrar submenus, por eso no me arrojaba el formato para el siguiente, simplemente agregue los demás nodos en esa linea de código y quedo resuelto.

    Ejemplo:

    $(".dropdown-toggle").find("a").eq(0).attr("data-toggle", "dropdown").attr("aria-haspopup", "true").attr("aria-expanded", "false").append("<span class='caret'></span>");
                    $(".dropdown-toggle").find("a").eq(5).attr("data-toggle", "dropdown").attr("aria-haspopup", "true").attr("aria-expanded", "false").append("<span class='caret'></span>");


    Muchas gracias por todo!!

    Saludos!


    Alerta


    • Marcado como respuesta Hugo Corleone martes, 23 de febrero de 2016 19:10
    • Editado Hugo Corleone martes, 23 de febrero de 2016 19:12
    martes, 23 de febrero de 2016 19:09

Todas las respuestas

  • hola

    La verdad es que esa union de tecnicas no es recomendable para nada, no usas menu de asp.net con menu de bootstrap

    o usas uno o usas otro no ambos

    si la idea es que el menu sea dinamico en sus tems podrias usar jquery con $.ajax invocando un webmethos para obtener los datos del servidor que creen los items del menu, pero usarias solo bootstrap

    la verdad es que nunca he visto unir menu de esta forma y tampoco se me pasaria por la cabeza hacerlo porque es para problemas

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    martes, 23 de febrero de 2016 6:17
  • Gracias por ayudar Leandro!

    La verdad es que siempre he trabajado con asp:menu y css para el formato, pero necesitaba adaptar mi menú para mobiles, ahí fue cuando encontré bootstrap, la verdad no lo conocía y me sorprendió, solo que para adaptar lo estilos del bootstrap necesito el js para adaptar al tamaño de la pantalla y alterar los estilos del bootstrap.

    Estuve investigando y mucha gente lo usa de esa manera, mas adelante investigare para realizar el menú de alguna otra forma, de momento, ya quedo perfecto.

    No había revisado la siguiente linea de código del js y es donde se encontraba mi problema:

    $(".dropdown-toggle").find("a").eq(0).attr("data-toggle", "dropdown").attr("aria-haspopup", "true").attr("aria-expanded", "false").append("<span class='caret'></span>");


    Al momento de encontrar la etiqueta "a" y seleccionar el nodo "cero", solo le daba formato a ese menú para mostrar submenus, por eso no me arrojaba el formato para el siguiente, simplemente agregue los demás nodos en esa linea de código y quedo resuelto.

    Ejemplo:

    $(".dropdown-toggle").find("a").eq(0).attr("data-toggle", "dropdown").attr("aria-haspopup", "true").attr("aria-expanded", "false").append("<span class='caret'></span>");
                    $(".dropdown-toggle").find("a").eq(5).attr("data-toggle", "dropdown").attr("aria-haspopup", "true").attr("aria-expanded", "false").append("<span class='caret'></span>");


    Muchas gracias por todo!!

    Saludos!


    Alerta


    • Marcado como respuesta Hugo Corleone martes, 23 de febrero de 2016 19:10
    • Editado Hugo Corleone martes, 23 de febrero de 2016 19:12
    martes, 23 de febrero de 2016 19:09
  • ¿Tienes algún ejemplo de menú dinamico en c# con bootstrap ?
    viernes, 22 de julio de 2016 15:50
  • No pero te envió este en .net puedes traducirlo es facil lo que importa es el html

    menu final con bottstrap, funciona bien, solo 2 niveles el tercero se ve mal


    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="bootstrap.min.css"/>
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>

     

     

    </head>
    <body>

        <form id="form1" runat="server">
        <nav navbar-inverse">
      <div>
        <div>
          <a href="#">WebSiteName</a>
        </div>

        <ul navbar-nav">
          <li><a href="#">Home</a></li>
          <li><a data-toggle="dropdown" href="#">Catalogo <span></span></a>
            <ul>
              <!--

              <li><a href="#">Page 1-1</a></li>

              <li><a href="#">Page 1-2</a></li>

              <li><a href="#">Page 1-3</a></li>

              -->
                    <li>
                    <asp:Menu ID="Menu1" runat="server" >
                        <DynamicMenuItemStyle HorizontalPadding="25px" VerticalPadding="2px" />
                        <StaticMenuItemStyle HorizontalPadding="25px" VerticalPadding="2px" />
                    </asp:Menu>
                    </li>
            </ul>
          </li>
          <li><a href="#">Page 2</a></li>
        </ul>
        <ul navbar-nav navbar-right">
          <li><a href="#"><span glyphicon-user"></span> Sign Up</a></li>
          <li><a href="#"><span glyphicon-log-in"></span> Login</a></li>
        </ul>
      </div>
    </nav>
        </form>
    </body>


    ////////////////////////////////////////////////////////////////////////////////////codigo asp/////////////////////////////////////////////////////////////////////////////////////////////////////////

    //cargar menu dinamico

    Public Class MenuAspBootStrap2
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack Then 'es form load
                'Menu catalogo
                Dim dt As New DataTable
                Dim row As DataRow


                dt.Columns.Add("id", Type.GetType("System.Int32"))
                dt.Columns.Add("descripcion", Type.GetType("System.String"))
                dt.Clear()

                'tabla crear fila

                Dim i As Integer

                For i = 0 To 10
                    row = dt.NewRow()
                    row("id") = i
                    row("descripcion") = "Catalogo " & i
                    dt.Rows.Add(row)
                Next

                'recorrer tabla

                For Each rowDt As DataRow In dt.Rows
                    Dim mnuMenuItemCatDet As New MenuItem
                    mnuMenuItemCatDet.Value = rowDt("id").ToString
                    mnuMenuItemCatDet.Text = rowDt("descripcion").ToString
                    'mnuMenuItem.ImageUrl = drMenuItem("Icono").ToString
                    'mnuMenuItem.NavigateUrl = drMenuItem("Url").ToString
                    Menu1.Items.Add(mnuMenuItemCatDet)
                Next
            End If
        End Sub

    End Class
     
    //obtener item seleccionado

        Private Sub Menu1_MenuItemClick(sender As Object, e As MenuEventArgs) Handles Menu1.MenuItemClick

            Dim strCatalogo As String = e.Item.Text

     

        End Sub








    martes, 27 de diciembre de 2016 14:42