Bootstrap Drop down navigation in MVC - asp.net-mvc

I have the following navigation on MVC using bootstrap, how can I make the Storage Menu Link (second li ) as a drowndown to include Add and View Links without removing the #ActionLink?
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/Home/Home">News Library</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="#ActiveLink("Home", "Home", null)">#Html.ActionLink("Home", "Home", "Home")</li>
<li class="#ActiveLink("About", "Home", null)">#Html.ActionLink("Storage", "Add", "Storage")</li>
<li class="#ActiveLink("Contact", "Home", null)">#Html.ActionLink("Activites", "Add", "Activites")</li>
<li class="#ActiveLink("Contact", "Home", null)">#Html.ActionLink("Search", "Index", "Search")</li>
</ul>
<ul class="nav pull-right">
<li>#Html.ActionLink("[Log Out]", "Logout", "Home")</li>
</ul>
</div>
</div>
</div>
</div>

<li class="#ActiveLink("Home", "Home", null) dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Storage
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>#Html.ActionLink("Storage", "Add", "Storage")</li>
<li>#Html.ActionLink("Storage", "View", "Storage")</li>
</ul>
</li>
See the bootstrap site for more information

Related

Validation in dropdown goes wrong in ASP.Net mvc

I have a login page, but whenever I typed wrong credentials it showing the mainheader for login person but with no name.. See the image I attached for further explanations
login
login with wrrong credentials
this is what it look like when the person login successfully, it have name and company
View form
<ul class="nav navbar-nav navbar-right">
#{
AccountContactVM customer = (AccountContactVM)ViewBag.AccountData;
}
#if (customer.User == customer.User && customer.User != null )
{
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<i class="fa fa-user-circle fa-fw fa-lg" aria-hidden="true"</i>
#customer.User.FirstName #customer.User.LastName
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li class="disabled">
<div class="row">
<div class="col-md-3">
<i class="fa fa-user-circle" style="font-size:40px;padding:5px 20px;" aria-hidden="true"></i>
</div>
<div class="col-md-9">
<p style="padding-top:5px;">
#customer.User.FirstName #customer.User.LastName
<br />
#customer.Company.AccountName
</p>
</div>
</div>
</li>
<li class="divider"></li>
<li><a asp-controller="Account" asp-action="Index">Customer Portal</a></li>
<li class="divider"></li>
<li><a a asp-controller="Account" asp-action="LogOut">Logout</a></li>
</ul>
</li>
}
else
{
<li><a asp-controller="Account" asp-action="SignUp">Register</a></li>
<li><a asp-controller="Account" asp-action="SignIn"><i class="fa fa-sign-in fa-fw" aria-hidden="true"></i>Login</a></li>
}
<li ng-cloak><span class="glyphicon glyphicon-shopping-cart"></span></i>Cart(<strong>{{CartCount}}</strong>)</li>
</ul>

How to get the language selectbox and login text on the same line?

I have a code like this for displaying menu, login, register and select language on the same line. How do I get the Language selectbox on the same line?
The missing code is implemented here.
Screenshot
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#*<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">xxxxx</a>*#
<a class="navbar-brand" href="/WebZenter" tabindex="-1">
<span style="padding-left: 30px">xxxxxx</span>
<img alt="Brand" src="~/CustomerFiles/BeoTjenester/WebZenter50x50.png" width="20" height="20" style="margin-top: -20px;" />
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="xxxxxxxx" asp-action="Jobs">xxxxxh</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">DinnerOut<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a asp-area="" asp-controller="DinnerOut" asp-action="Index">Create Bill</a></li>
<li><a asp-area="" asp-controller="DinnerOut" asp-action="Select">Select Bill</a></li>
</ul>
</li>
</ul>
#if (SignInManager.IsSignedIn(User))
{
<form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">#Localizer["Hello"] #UserManager.GetUserName(User)!</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link"><span class="glyphicon glyphicon-log-out"></span>Log off</button>
</li>
</ul>
</form>
}
else
{
<ul class="nav navbar-nav navbar-right">
<li><a asp-area="" asp-controller="Account" asp-action="Register"><span class="glyphicon glyphicon-user"></span> #Localizer["Register"]</a></li>
<li><a asp-area="" asp-controller="Account" asp-action="Login"><span class="glyphicon glyphicon-log-in"></span> #Localizer["Login"]</a></li>
<li>
<div title="#Localizer["Request culture provider:"] #requestCulture?.Provider?.GetType().Name" class="collapse navbar-collapse">
<form id="selectLanguage" asp-controller="ChangeLanguage"
asp-action="SetLanguage" asp-route-returnUrl="#Context.Request.Path"
method="post" class="form-horizontal" role="form">
#Localizer["Language"] <select name="culture"
onchange="this.form.submit();"
asp-for="#requestCulture.RequestCulture.UICulture.Name" asp-items="cultureItems"></select>
</form>
</div>
</li>
</ul>
}
</div>
</div>
Missing code is added.

Bootstrap logo + navbar items onto same line for mobile view

Goal: Display on mobile the Logo + Navbar items onto the same line. (I don't want these Navbar items inside the navbar-toggle collapsed)
1) The icons('search', 'message', 'globe') began hidden in the navbar-toggle collapsed
[navbar-toggle collapsed][1][1]: https://i.stack.imgur.com/LjtPr.png
2) The icons('search', 'message', 'globe') have been extracted from the navbar-toggle collapsed, but I've been unable to display them inline with the branding.
[Icons extracted from navbar-toggle collapsed][1] [1]: https://i.stack.imgur.com/5eomO.png
Note on img two:
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
Has been replaced with 'user-o' fa icon.
The following bootstrap navbar is used:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

how to expand bootstrap 3.3.6 media queries

I am using bootstrap, and the default for mobile navigation is 768px. I want to expand this to 979px instead? I have search and try anything for hours but with no luck at all. Can someone help me with this problem?
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="col-md-4" style="background-color:coral;">
<div id="divLogo" class="pull-left">
<img src="~/Images/logo.png" />
</div>
</div>
<div class="col-lg-8" style="background-color:crimson;">
<div id="divMenuRight">
<div class="navbar">
<button type="button" class="navbar-toggle btn btn-navbar-highlight btn-large btn-primary" data-toggle="collapse" data-target=".navbar-collapse">
NAVIGATION <span class="icon-chevron-down icon-white"></span>
</button>
<div class="navbar-collapse collapse">
<ul class="nav nav-pills ddmenu">
<li class="active">#Html.ActionLink("Home", "Index", "Home")</li>
<li class="dropdown">
Transport <b class="caret"></b>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Medicin", "Medicin", "Home")</li>
<li>#Html.ActionLink("Køl / Varme / Frost", "Temperaturkontrolleret", "Home")</li>
<li>#Html.ActionLink("ADR", "ADR", "Home")</li>
<li>#Html.ActionLink("Express", "Express", "Home")</li>
<li>#Html.ActionLink("Flytninger", "Flytninger", "Home")</li>
<li>#Html.ActionLink("SLV", "SLV", "Home")</li>
<li>#Html.ActionLink("Dyr", "Dyr", "Home")</li>
<li>#Html.ActionLink("Håndvåben", "Weapons", "Home")</li>
<li>#Html.ActionLink("England Tur/Retur", "TurRetur", "Home")</li>
</ul>
</li>
<li>#Html.ActionLink("Priser", "Priser", "Home")</li>
<li>#Html.ActionLink("Nyheder", "Nyheder", "Home")</li>
<li>#Html.ActionLink("Kontakt", "Kontakt", "Home")</li>
<li>#Html.ActionLink("Job", "Vognmand", "Home")</li>
<li>
<a class="hideButtonDk" href="#Url.Action("Change", "Home", new { Lang = "da"})">
<img src="#Url.Content("~/Images/icon_uk.png")" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
You will need to download a custom build of bootstrap from their site and update the default in the "Media queries breakpoints" section.
Update the width for the "screen-sm" variable from 768px to the desired value.
http://getbootstrap.com/customize/

How to make renderbody content not to appear below the top fixed nav bar

Here is my layout code, I'm using Bootstrap v3.0 and Using ASP.NET MVC. The page has to be responsive, I tried using "space-20" just below the render body content, it works but it doesn't work on small screens. I'm an absolute beginner in ASP.NET MVC
<div class="navbar navbar-fixed-top">
<div class="navbar-inner clearfix">
<div class="container">
#Html.ActionLink("Grikwa Store", "Index", "Home", null, new { #class = "navbar-brand clearfix" })
<div class="navbar-left">
#Html.Partial("_SearchPartial")
</div>
</div>
</div>
<div class="navbar-inner navbar-inverse" style="background-color: #68217a;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
<li>#Html.ActionLink("Admin", "Admin", "Account")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
</div>
You just need to add some padding to your body-content class.
.body-content {
padding-top: 36px; /* choose whatever you want here */
}
This happens because you have your navbar set to fixed, which is taken out of the normal flow.

Resources