Closed snipervld closed 8 years ago
And: I tried it in the navbar, maybe it helps
I found that issue #21 is similar to this, but I cannot add icon as child, as suggested in that issue
Using this pattern also doesn't work:
using(....Begin())
{
// Code
}
Sorry it's taken me a while to get to this one - I'll try and review very soon.
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):
CS0029: Cannot implicitly convert type "FluentBootstrap.ComponentBuilder<FluentBootstrap.Mvc.MvcBootstrapConfig<FluentBootstrap.ComponentWrapper<FluentBootstrap.Mvc.MvcBootstrapConfig
Edit. Markdown breaks everything...
There was code, but it isn't necessary
and one more thing (I think, that this "error" is not worthy of a separate issue): lexicographical error NavbarPosition.FixedBottm
I recently edited code in post below (i understood, how DropdownHeader() works), but still there are errors
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.
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....)
I answer additional (secondary) question myself.
We can add onclick
attribute with value $(#logout-form").submit()
to submit button (or DropdownLink)
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
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.
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:
And one more question. How to combine form's submit button with dropdown link (with icon, of course)? Thanks