I want to prevent any client page in my MVC 5 application from being cached. My _Layout.cshtml page looks as follows. Notice the code in the head tag. Is this enough (and is it correct) to prevent caching on any page in my app? Or do I need to also add code on every page?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
#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>
<img class="visible-lg visible-md" src="~/Images/WebBirderFatbirder.png" title="WebBirder">
</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>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div id="bodyContentDiv" class="container body-content">
#RenderBody()
<hr />
<footer>
<br/>
<br />
<br />
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Related
The HTML spat out from a view has a lot of empty spaces and empty lines.
What and where do I need to type to make grails not to generate the empty spaces or empty lines?
Thanks!
Just for example. I have an empty domain. And then use generate-all to create all the controller and view. This is the HTML spat out from the index.gsp. If you use your mouse to highlight the HTML, you will see a lot of empty spaces.
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>
NewGroovyClass List
</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" type="image/x-ico" href="/assets/favicon.ico"/>
<link rel="stylesheet" href="/assets/bootstrap.css?compile=false" />
<link rel="stylesheet" href="/assets/grails.css?compile=false" />
<link rel="stylesheet" href="/assets/main.css?compile=false" />
<link rel="stylesheet" href="/assets/mobile.css?compile=false" />
<link rel="stylesheet" href="/assets/application.css?compile=false" />
<meta name="layout" content="main"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark navbar-static-top" role="navigation">
<a class="navbar-brand" href="/#"><img src="/assets/grails.svg" alt="Grails Logo"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" aria-expanded="false" style="height: 0.8px;" id="navbarContent">
<ul class="nav navbar-nav ml-auto">
</ul>
</div>
</nav>
Skip to content…
<div class="nav" role="navigation">
<ul>
<li><a class="home" href="/">Home</a></li>
<li>New NewGroovyClass</li>
</ul>
</div>
<div id="list-newGroovyClass" class="content scaffold-list" role="main">
<h1>NewGroovyClass List</h1>
<div class="pagination">
</div>
</div>
<div class="footer row" role="contentinfo">
<div class="col">
<a href="http://guides.grails.org" target="_blank">
<img src="/assets/advancedgrails.svg" alt="Grails Guides" class="float-left"/>
</a>
<strong class="centered">Grails Guides</strong>
<p>Building your first Grails app? Looking to add security, or create a Single-Page-App? Check out the Grails Guides for step-by-step tutorials.</p>
</div>
<div class="col">
<a href="http://docs.grails.org" target="_blank">
<img src="/assets/documentation.svg" alt="Grails Documentation" class="float-left"/>
</a>
<strong class="centered">Documentation</strong>
<p>Ready to dig in? You can find in-depth documentation for all the features of Grails in the User Guide.</p>
</div>
<div class="col">
<a href="https://grails-slack.cfapps.io" target="_blank">
<img src="/assets/slack.svg" alt="Grails Slack" class="float-left"/>
</a>
<strong class="centered">Join the Community</strong>
<p>Get feedback and share your experience with other Grails developers in the community Slack channel.</p>
</div>
</div>
<div id="spinner" class="spinner" style="display:none;">
Loading…
</div>
<script type="text/javascript" src="/assets/jquery-3.3.1.min.js?compile=false" ></script>
<script type="text/javascript" src="/assets/bootstrap.js?compile=false" ></script>
<script type="text/javascript" src="/assets/popper.min.js?compile=false" ></script>
<script type="text/javascript" src="/assets/application.js?compile=false" ></script>
</body>
</html>
This is a very simple question. I have seen this example of a navigation bar and I would like to do something similar https://getbootstrap.com/docs/4.1/examples/pricing/.
When I copy the code
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
To my _layout.cshtml file to get
<!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>
<environment names="Development">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#RenderSection("scripts", required: false)
</body>
</html>
This does not render like the example. Why?
You are using the wrong version of Bootstrap!
Specifically, the code you copied for the nav bar is from version 4 of Bootstrap (https://getbootstrap.com/docs/4.1/examples/pricing/, note the 4.1 in the url), but the libraries you are calling in are for version 3.3.6. These versions are not compatible, you need to pick one or the other.
At least that what it looks like, I'm not sure what is in your 'css' bundle that you are calling for development, but for staging and production you are calling on https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css, again, note the 3.3.6
I have an issue with Bootstrap toggle menu feature and MVC.
I have my base layout with scripts and menus all fine - but if i use a toggle feature in mobile view it works for the current page once, after that the other pages clicking it nothing happens..
I almost got around it by moving the menu into a partial view and including this on the bottom of every page instead of just being in the main layout, but strangly the issue is then reversed, it works on all pages till I hit F5 - then is stops working again??
Layout:
#{
ViewData["Logo"] = "bird.png";
ViewData["Icon"] = "cascade.ico";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta name="Robots" content="noindex" />
<meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta HTTP-EQUIV="EXPIRES" CONTENT="0">
<title>#ViewBag.SiteTitle</title>
<link rel="icon" type="image/x-icon" href="~/img/#ViewBag.Icon" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<environment names="Development">
<!-- Dev uses full file versions for de-bugging -->
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-mobile-min/jquery.mobile.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
</environment>
<environment names="Staging,Production">
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-mobile-min/jquery.mobile.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</environment>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/styles/all/all.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="~/Styles/Mobile/mobile.css" media="only screen and (max-width: 481px)" />
<link rel="stylesheet" type="text/css" href="~/Styles/Desktop/desktop.css" media="only screen and (min-width: 481px)" />
<script src="~/app.js"></script>
<link href="~/Styles/Print.css" rel="stylesheet" media="print"/>
#RenderSection("Scripts", false)
</head>
<body>
<div id="mypage" data-role="page">
<div id = "header" data-role="header" data-id="persistent" data-position="fixed">
<div id="headnav" class="navbar navbar-inverse">
<div id="headercontainer" class="container">
<div style="position:relative; z-index:10" class="pull-left" rel="home" href="#" title="#ViewBag.SiteTitle">
<a href="#Url.Action("Index", "App")" title="Home">
<img style="max-width:100px; max-height: 100px; margin-top: 5px"
src="~/img/#ViewBag.Logo">
</a>
</div>
<div class="navbar navbar-text" >
<h3 class="title">#ViewBag.Title</h3>
<h5 class="subtitle">#ViewBag.SubTitle</h5>
</div>
<!-- Logout Box -->
<div class="pull-right">
#await Component.InvokeAsync("Logout")
</div>
</div>
</div>
</div>
<!-- content -->
<div id="maincontent" data-role="content" class="container">
#RenderBody()
</div>
#Html.Partial("_NavigationFooter")
</div>
<!-- overriding customer styles -->
<link href="~/styles/customstyles.css" rel="stylesheet" />
<script type="text/javascript">
</script>
</body>
</html>
Footer Partial:
#*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*#
#{
}
<footer id="pagefooter" data-id="persistent" data-position="fixed">
<div id="mobilefooterheight" class="navbar navbar-inverse navbar-fixed-bottom">
<div id="footercontainer" class="container-fluid">
<div class="navbar-collapse collapse" id="footer-body">
<ul class="nav navbar-nav">
<li><a data-transition="slide" href="#Url.Action("MyDetails", "App")"><img src="~/img/icons/myrecord.png" />My Record</a></li>
<li><a data-transition="slide" href="#Url.Action("MyTeam", "App")"><img src="~/img/icons/myteam.png" />Team Headcount</a></li>
<li><a data-transition="slide" href="#Url.Action("Index", "Holidays")"><img src="~/img/icons/holidays.png" />My Holidays</a></li>
<li><a data-transition="slide" href="#Url.Action("Payslips", "App")"> <img src="~/img/icons/payslips.png" />Payslip</a></li>
<li><a data-transition="slide" href="#Url.Action("Index", "Tasks")"><img src="~/img/icons/tasks.png" />Tasks</a></li>
<li><a data-transition="slide" href="#Url.Action("Index", "Request")"><img src="~/img/icons/authorise.png" />Requests</a></li>
</ul>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" aria-expanded="false" data-toggle="collapse" data-target="#footer-body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#*<ul class="footer-bar-btns visible-xs">
<li><a data-transition="slide" href="#Url.Action("MyDetails", "App")"><img src="~/img/icons/myrecord.png" />My Record</a></li>
<li><a data-transition="slide" href="#Url.Action("MyTeam", "App")"><img src="~/img/icons/myteam.png" />Team Headcount</a></li>
<li><a data-transition="slide" href="#Url.Action("Index", "Holidays")"><img src="~/img/icons/holidays.png" />My Holidays</a></li>
<li><a data-transition="slide" href="#Url.Action("Payslips", "App")"> <img src="~/img/icons/payslips.png" />Payslip</a></li>
<li><a data-transition="slide" href="#Url.Action("Index", "Tasks")"><img src="~/img/icons/tasks.png" />Tasks</a></li>
<li><a data-transition="slide" href="#Url.Action("Index", "Request")"><img src="~/img/icons/authorise.png" />Requests</a></li>
</ul>*#
</div>
</div>
</div>
</footer>
In this current form I have put the code back to the footer simply being in the layout all pages use, which is my preference. But can anyone explain why the system would fail to toggle after the first use or when I have navigated to another page in general. F5 corrects it, then using the menu it stops working again on the next page, unless I hit F5.
Im sure its to do with my scripts for bootstrap not loading on the RenderBody or something to that effect but cannot find a fix.
I've created an MVC 4 app (Internet template). The body it created is 1903px wide by 300px tall. In the image below, you can see how it's being rendered. I don't see anywhere where a width is being specified, and I'm curious as to why it decided to create a width of 1903px (and a height of 300px).
If it helps, the HTML of the main page looks as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - The Exchange Site</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<img src="~/Images/CompanyLogo.png">
</div>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - Siesta Key Software, LLC</p>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/ExchangeSite")
#RenderSection("scripts", required: false)
</body>
</html>
I've just had exactly the same issue / question. It is setting the width based on the width of the browser window. If you make your window narrower and refresh the screen you will see that the width property (and probably the height property) have changed. I got around this by explicitly setting the width in the Site.css of the body as follows :
body {
width:2000px;
}
I have a twitter bootstrap nav bar, but evertime I navigate on a link it is clearly reloading the navbar with everything else. Isn't it not supposed to do that? I would like it if it didn't. I'm not sure maybe if I'm doing something wrong in my _Layout or not. Any ideas on why my navbar could be reloading?
<link href="../../bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../../bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/dt-min.js")" type="text/javascript"></script>
<link href="../../Content/Reflection.css" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/themes/base/css", "~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="float-left" style="width:315px">
<p class="site-title">#Html.ActionLink("Kinfolk", "Index", "Home", new { #style = "color:Orange" })</p>
</div>
<div class="float-center">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu" class="nav">
<li>
<div class="reflection">
<a href="#Url.Action("AllWallPost", "Home")" title="Home">
<img src="../../Images/home (1).ico" />
</a>
</div>
</li>
<li>
<div class="reflection">
<a href="#Url.Action("UserProfile", "UserProfile")" title="My Profile">
<img src="../../Images/user.ico" />
</a>
</div>
</li>
<li>
<div class="reflection">
<a href="#" title="Events">
<img src="../../Images/calendar_2.ico" />
</a>
</div>
</li>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
From the code you provided, it is normal that the page reloads when you click on a link.
If you want the page to change without reloading everything, you'll have to use some Ajax (JavaScript) and a combination of Request.IsAjaxRequest() (controller) and PartialView (view).
There are lots of resources out there with those keywords.