DropdownLink with Icon in Navbar

snipervld commented 8 years ago

Hello, i recently found FluentBootstrap and began love it. When i tried to combine standart visual studio template with FluentBootstrap, i found that i cannot assign icon to dropdown link. In code, which is listed below (it doesn't work, getting errors), i tried to solve this problem. but without luck.

Code:

@{
   var bs = Html.Bootstrap();
}
@using (var dropdown = bs.Dropdown().Begin())
{
   using (var toggle = dropdown.DropdownHeader().Begin())
   {
      @bs.Icon(Icon.User)
      @User.Identity.GetUserName()
   }
   @dropdown.DropdownLink("Profile", "Index", "EditProducts").AddChild(x => bs.Icon(Icon.User))
   if (User.IsInRole("Full,Editor"))
   {
      @dropdown.DropdownLink("Edit", "Index", "EditProducts").AddChild(x => bs.Icon(Icon.Edit))
   }
   @dropdown.DropdownDivider()
   using (dropdown.DropdownLink("").Begin())
   {
      @bs.Button("Logoff", ButtonType.Submit)
   }
}

And one more question. How to combine form's submit button with dropdown link (with icon, of course)? Thanks

snipervld commented 8 years ago

And: I tried it in the navbar, maybe it helps

snipervld commented 8 years ago

I found that issue #21 is similar to this, but I cannot add icon as child, as suggested in that issue

snipervld commented 8 years ago

Using this pattern also doesn't work:

using(....Begin())
{
   // Code
}

daveaglick commented 8 years ago

Sorry it's taken me a while to get to this one - I'll try and review very soon.

daveaglick commented 8 years ago

Can you send a copy of the rendered HTML and possibly a screen shot from the result of the code you pasted above? It looks like it should be working - I was able to get this to work using something very similar to what you wrote (ignore the red squiggles, they're just Visual Studio getting confused):

2015-12-30_16h20_19

snipervld commented 8 years ago

CS0029: Cannot implicitly convert type "FluentBootstrap.ComponentBuilder<FluentBootstrap.Mvc.MvcBootstrapConfig<FluentBootstrap.ComponentWrapper<FluentBootstrap.Mvc.MvcBootstrapConfig, FluentBootstrap.Navbars.NavbarCollapse>>, FluentBootstrap.Icons.IconSpan>" to "FluentBootstrap.ComponentBuilder<FluentBootstrap.Mvc.MvcBootstrapConfig, FluentBootstrap.Icons.IconSpan>"

Edit. Markdown breaks everything...

snipervld commented 8 years ago

There was code, but it isn't necessary

snipervld commented 8 years ago

and one more thing (I think, that this "error" is not worthy of a separate issue): lexicographical error NavbarPosition.FixedBottm

snipervld commented 8 years ago

I recently edited code in post below (i understood, how DropdownHeader() works), but still there are errors

snipervld commented 8 years ago

Edit: I changed navbarCollapse.Dropdown() to Html.Bootsrap().Dropdown() and it works (as you have shown). But there still errors. Html code, as you requsted:

<!DOCTYPE html>
<html>
<body>

<div class="container body-content">
 <nav role="navigation" id="navbar" class="navbar navbar-default navbar-fixed-top navbar-inverse">
  <div class="container-fluid">
   <div class="navbar-header">
    <img src="/Content/Images/photo-27315475_390901989.jpg" class="pull-left" style="height: 50px;">
    <a href="/" class="navbar-brand">Logo</a>
    <button type="button" data-toggle="collapse" aria-expanded="false" data-target="#navbar-collapse" class="navbar-toggle collapsed">
     <span class="sr-only">Toggle Navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
    </button>
   </div>
   <div id="navbar-collapse" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
     <li>
      <a href="/">Home</a>
     </li>
     <li>
      <a href="/Products">Products</a>
     </li>
     <li>
      <a href="/Home/Info">Contacts</a>
     </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
     <form role="form" action="/Account/LogOff" method="post" id="logout-form" class="navbar-form navbar-left">
      <div class="form-group">
       <div class="form-control-static text-danger"></div>
      </div>
     </form>
    </ul>

      <div class="dropdown">
       <button type="button" data-toggle="dropdown" class="btn dropdown-toggle btn-default">Administrator 
        <span class="caret"></span>
       </button>
       <ul role="menu" class="dropdown-menu">
        <span class="glyphicon glyphicon-user"></span>
        <li role="presentation">
         <a role="menuitem" href="/EditProducts/Index">
          <span class="glyphicon glyphicon-pawn"></span>Profile
         </a>
        </li>
        <li role="separator" class="divider"></li>
        <li role="presentation">
         <a role="menuitem" href="#">
          <button type="submit" class="btn btn-default">Log off</button>
         </a>
        </li>
       </ul>
      </div>
   </div>
  </div>
 </nav>       
</body>
</html>

I have cut unnecessary html.

snipervld commented 8 years ago

Is it possible to move dropdown button and menu into nav form? P.S. Nav form doesn't contain extension method for creating dropdowns. Thats why I use NavbarNav().SetRight() with nav form, but using them together lead into weird html plus it doesn't work as expected (i think....)

snipervld commented 8 years ago

I answer additional (secondary) question myself. We can add onclick attribute with value $(#logout-form").submit() to submit button (or DropdownLink)

snipervld commented 8 years ago

After some researches i found, that it was my fault (i.e. i created myself). It is only necessary to remove @model at begging of partial view and add this line to code section:

var navbarCollapse = Model as ComponentWrapper<FluentBootstrap.Mvc.MvcBootstrapConfig<dynamic>, FluentBootstrap.Navbars.NavbarCollapse>;

After that Html.Bootstrap() creates a good MvcBootstrapHelper class

But HTML code still weird Edit: this is due partial views

daveaglick commented 8 years ago

Ahh, got it. Thanks for tracking that down and sorry I haven't had much time to follow up on this recently. I'll close this issue and we'll pick up the discussion on the one about partial views.

daveaglick / FluentBootstrap

DropdownLink with Icon in Navbar #49