I originally had a vs2015 project and I decided to change the theme to bootstraps bootswatch theme superhero. I presumed it was simple enough as I've done this before, usually a case of replacing four files, being two bootstrap css files and two bootstrap js files, once I replaced these it broke my drop-down navigation menu.
So what I've done now is completely started a new project using vs2017, it's an C# MVC app, like the template-style one Microsoft gives you, it has the standard-ish looking theme. Now all I want to do is start by introducing the theme from bootswatch, so I replace the four files like I have done in the past and low n behold I'm still getting the same issue, the menu on the drop-down doesn't work. I have shown a screenshot below:
I can't be the only one who has experienced this, I must still be needing to import some files somewhere, if anyone can list the steps they have taken to get it working that would really help. I would post code but to be honest there is no point at this stage as I’m not making any changes to the app code per-say I’m just wanting to use a new bootstrap theme. Shall include the template code anyway below:
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</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>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Edit: So in the end I've decided I'm going to use a different theme, if anyone ever gets this working would love to know. I checked out the tutorial below, it is the same theme with code provided though if you down this code it still doesn't work! The menu will dropdown but doesn't look the same as it does on bootswatch
https://social.technet.microsoft.com/wiki/contents/articles/37157.customizing-asp-net-mvc-bootstrap-templates.aspx
Try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body><nav class="navbar navbar-expand-lg navbar-dark bg-primary">
#Html.ActionLink("Application name", "Index", "Home", null, new { #class = "navbar-brand" })
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
If you notice the toggle on the button of class navbar-toggler is associated with the data-target
You can also place other #Html.Actionlinks in place of the <a> tags
Related
heyyy, i'm new in coding with asp.netcore. I created an application for medical deparment
** Upon hitting the url I got the error message:
RenderBody has not been called for the page at '/Views/_ViewImports.cshtml'. To ignore call IgnoreBody(). here's the page :
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Texte</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Texte</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container" body-content>
<main role="main" class="pb-3" >
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - Texte - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>```
So in my view looks like this below :
#model IEnumerable<PermissionManagement.MVC.Models.Brand>
#{
ViewData["Title"] = "Index";
Layout = "~/Views/_ViewImports.cshtml";
}
Help would be appreciated
Thanks
I think you have a bug in your view. _ViewImports contains html helpers only. Try to remove
Layout = "~/Views/_ViewImports.cshtml";
Your Layout is in "Shared" folder and it is called _Layout.cshtml. Move layout there if it is in another folder.
I am working on a web page in Asp.net Core MVC (dotnet 2.2) with authentication, and I want to replace Bootstrap with SemanticUI. I managed to do it on everything but Identity.
Or is there a way to build in user management but with custom written sites? (with Identity pages disabled).
I have changed layout for Identity, but there are still some bootstrap things and I dont know where are they from.
Page source:
<div class="row"> <!--Why is this here?-->
<div class="col-md-3"> <!--Why is this here?-->
<div class="ui grid">
<div class="four wide column">
<div class="ui vertical tabular menu">
<a class="item teal active" id="profile" href="/Identity/Account/Manage">Profile</a>
<a class="item" id="change-password" href="/Identity/Account/Manage/ChangePassword">Password</a>
<a class="item" id="two-factor" href="/Identity/Account/Manage/TwoFactorAuthentication">Two-factor authentication</a>
<a class="item" id="personal-data" href="/Identity/Account/Manage/PersonalData">Personal data</a>¨
</div>
</div>
</div>
Layout that is set in Identity:
<html>
<head>
<meta name="viewport" content="width=device-width, viewport-fit=cover">
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.7.6/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui#2.7.6/dist/semantic.min.js"></script>
<title>Title</title>
<link rel="stylesheet" href="~/style.css">
</head>
<body>
<div class="ui inverted header">
<div class="ui inverted stackable menu">
<div class="ui container">
<div class="item">
<img src="~/spacex2.png" style="width: 15em">
</div>
<a class="item" asp-controller="Home" asp-action="Index">Domů</a>
<a class="item">Projekty</a>
<partial name="_LoginPartial" />
</div>
</div>
<div class="ui container">
<partial name="_CookieConsentPartial" />
#RenderBody()
</div>
<div class="ui inverted vertical footer segment" id="footer">
<div class="ui container">
<div class="ui stackable inverted divided equal height stackable grid">
<div class="three wide column">
<h4 class="ui inverted header">About</h4>
<div class="ui inverted link list">
Sitemap
Contact Us
Religious Ceremonies
Gazebo Plans
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">Services</h4>
<div class="ui inverted link list">
Banana Pre-Order
DNA FAQ
How To Access
Favorite X-Men
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header">Footer Header</h4>
<p>Extra space for a call to action inside the footer that could help re-engage users.</p>
</div>
</div>
</div>
</div>
#RenderSection("Scripts", required: false)
</body>
</html>
I have a bootstrap navbar with some items, but when I click on it, nothing happens. In the console of the Chrome, isn't showing any error.
I added the tags as the bootstrap site asks.
Someone have any idea of what's wrong?
Above is my _Layout.cshtml code:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>p.align{padding-left: 2em }</style>
<title>#ViewData["Title"] - PakaPaka Store</title>
<environment include="Development">
<link rel="stylesheet" href="~/Content/site.css"/>
</environment>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand"> <img src=#ViewBag.Logo height="50"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" asp-controller="Site" asp-action="Index">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" asp-controller="Dash" asp-action="Products">Produtos</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-controller="Site" asp-action="Contact">Contato</a>
</li>
</ul>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<footer>
<hr />
<p class="align">
<a href="https://www.instagram.com/pakapaka.store/">
<i class="fab fa-instagram fa-lg"></i>
</a>
<a href="https://www.facebook.com/pakapaka.store/">
<i class="fab fa-facebook-square fa-lg"></i>
</a>
</p>
<p class="align">© 2018 - Desenvolvido por: Hatsumi Higuchi Hashinaga</p>
</footer>
</div>
<environment include="Development">
<script src="~/Content/site.js" asp-append-version="true"></script>
</environment>
#RenderSection("Scripts", required: false)
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
The way you're doing is a .Net Core way. Using .Net Framework you can use an specific syntax to define links to controllers, like so:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Início", "Index", "Home")</li>
<li>#Html.ActionLink("Sobre", "About", "Home")</li>
<li>#Html.ActionLink("Contato", "Contact", "Home")</li>
</ul>
For more info you can check the docs.
By nature, when using Visual Studio 2017 to create an MVC 4 application, the footer is constrained within a div with a class container body-content in _layout.cshtml. Of course, this makes the footer constrained within the div:
But what we want is for the footer to extend the entire width of the page, just like the header.
When I comment out the div,
the footer gets 100% of the width, but now so does everything else in the body:
Also there's a bunch of blank, white space beneath the footer. Here's the entire code for _layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/Style.css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" id="navbar-gradient">
<div class="container">
<div class="navbar-header">
<!--<img src="~/images/lion-logo.png" />-->
<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>
<img src="~/images/lion-logo.png" id="logo"/>
#Html.ActionLink("LION TECHNOLOGIES", "Index", "Home", new { area = "" }, new { #class = "navbar-brand", #id = "logo-text" })
</div>
<div class="navbar-collapse collapse" id="navbar-gradient">
<!--hide links-->
<ul class="nav navbar-nav" id="hidden">
<li>#Html.ActionLink("Reports", "Index", "Home")</li>
<li>#Html.ActionLink("Accounts", "About", "Home")</li>
<li>#Html.ActionLink("Settings", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<!-- <div class="container body-content">-->
#RenderBody()
<!--<hr />-->
<footer>
<p>© #DateTime.Now.Year - <img src="~/images/lion-logo.png" id="logo-footer" /> LION TECHNOLOGIES</p>
</footer>
<!--</div>-->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I've also tried wrapping everything just inside the <body> </body> tags with the container body-content div but that didn't have any effect. Any other suggestions?
If you are using bootstrap 3 then try to remove footer from the div which has class container and after that make another div after with class continer-fluid and put your footer code inside. .container is fixed width and .container-fluid is full width. Please see the grid system of bootstrap 3 http://getbootstrap.com/css/#grid
<div class="container body-content">
#RenderBody()
</div>
<div class="container-fluid">
<hr />
<footer>
<p>© #DateTime.Now.Year - <img src="~/images/lion-logo.png" id="logo-footer" /> LION TECHNOLOGIES</p>
</footer>
</div>
Since I'm still new to C#, I didn't realize that the line #RenderBody() renders the entire body section on its own. All I needed to do was this:
<div class="container body-content">
#RenderBody()
<!--<hr />-->
</div>
<footer>
<p>© #DateTime.Now.Year - <img src="~/images/lion-logo.png" id="logo-footer" /> LION TECHNOLOGIES</p>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Close the div after #RenderBody()
The question is in regard of Bootstrap Image Gallery
blueimp.github.io/Gallery
With the extention
Bootstrap-Image-Gallery
Now to the Question: Why is it that my code doesnt show the Image-Gallery, it does show it as a gallery
The Code
Gallery View
#{
ViewBag.Title = "Gallery";
}
<h2>#ViewBag.Title.</h2>
<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<!-- The modal dialog, which will be used to wrap the lightbox content -->
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="links">
<a href="~/Pictures/12.jpg" title="CityPicture" data-gallery>
<img src="~/Pictures/12.jpg" width="100"/>
</a>
<a href="~/Pictures/694x297_uluru_australia.jpg" title="CityStreet" data-gallery>
<img src="~/Pictures/694x297_uluru_australia.jpg" width="100" />
</a>
<a href="~/Pictures/ausmap.jpg" title="WaterSpring" data-gallery>
<img src="~/Pictures/ausmap.jpg" width="100" />
</a>
</div>
The Code _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Australia</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
#Html.ActionLink("Australia", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Gallery", "Gallery", "Home")</li>
<li>#Html.ActionLink("MapLocation", "MapLocation", "Home")</li>
</ul>
#*#Html.Partial("_LoginPartial")*#
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
#RenderSection("Scripts", required: false)
<hr />
<footer>
<p>© #DateTime.Now.Year - Jesper Kiel Jensen</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#*#Scripts.Render("~/bundles/bootstrap")*#
#Scripts.Render("~/bundles/googlemaps")
#Scripts.Render("~/bundles/bootstrap")
#*#Scripts.Render("~bundles/boostrapGallery")*#
#RenderSection("scripts", required: false)
</body>
</html>
The Code Bundles
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
/blueimp-gallery.min.js",
/bootstrap-image-gallery.js",
/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(I was unsure of how much code, I was to ctrl+v , so here is all of it.
This is what I get http://imgur.com/jBHHgKc
This is what I want http://blueimp.github.io/Bootstrap-Image-Gallery/
Hope you understand my question :)
/bootstrap.css",
/site.css",
/blueimp-gallery.min.css",
/bootstrap-image-gallery.css"));
I know it is too late to answer, you missed some CSS files, for complete list of css files and JavaScript files see my article
Image gallery in asp.net mvc with multiple file and size
// CSS files
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<link rel="stylesheet" href="~/Content/bootstrap-image-gallery.min.css">
// JavaScript files
#Scripts.Render("~/bundles/jquery")
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="~/Scripts/bootstrap-image-gallery.min.js"></script>