I'm quite new to MVC. In my website I use a layout for all the views and I was wondering how could I add links to certain .css files.
What I mean is that if I add them in the _layout.cshtml, all HTML files will have that link although some of them don't need it, which could lead to performance issues??
How could I do this? Thanks!
Layout page works like a master page. You can define a section in the partial view and then render it in the layout page:
Define a section named (Styles) in the view that needs (yourView_style.css) file to be rendered:
#section Styles {
<link href="#Url.Content("~/Styles/yourView_style.css")" rel="stylesheet" type="text/css" />
}
In (_layout.cshtml) render the (Styles) section:
<head>
<link href="#Url.Content("~/Styles/main.css")" rel="stylesheet" type="text/css" />
#RenderSection("Styles", false)
</head>
Related
I have a Grails 2.4.x app where ~80% of the pages use a simple.gsp layout, and the other pages are all stragglers that don't use any layout/templating at all. But they can't use simple.gsp because its contents don't apply to them.
I have a need to add a header nav to all of these pages (100%) and would like an elegant solution. Ideally, I could create a new layout, say, awesome-header.gsp that contains the header nav. Then:
For any pages (again, ~20%) that don't use the simple.gsp layout, I would just have them use awesome-header.gsp directly; but then...
I would just somehow reference/import/extend simple.gsp to (somehow) use awesome-header.gsp; which now allows the other ~80% pages to use the new header nav
Let's pretend that this is simple.gsp:
<!DOCTYPE html>
<html>
<head>
<title>
<g:layoutTitle default="Some App" />
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Lots of stuff -->
<g:layoutHead />
<!-- Lots of stuff -->
</head>
<body>
<!-- Lots of stuff -->
<div id="page-content">
<g:layoutBody />
</div>
<!-- Lots of stuff -->
</body>
</html>
And let's pretend that this is awesome-header.gsp:
<%# page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title></title>
</head>
<body>
<script id="awesome-header-bootstrap" src="/awesome-header/awesome-header-bootstrap-1.0.js"><script>
<g:layoutBody />
</body>
</html>
Pretty barebones. All I need this awesome-header.gsp layout to do is include a JS right at the top of the <body> element. For the purpose of this question, this JS script is "magic" and fetches the header nav magically for me.
How can reference/import/extend simple.gsp to use awesome-header.gsp?
I don't want the awesome-header.gsp to override any title or header content (either defined inside simple.gsp or in any of the straggler pages)
Any ideas how I could accomplish this setup?
If I well understand, you want a hierarchy between simple.gsp and awesome-header.gsp. So you may look at this link to help you to do that.
An other solution, maybe easier because there isn't a lot of modifications to do, is to use templates:
Put all your HTML / JS code related to your awesome-header inside a template (let say _awesome-header.gsp, the '_' is important !)
Simply put that line inside your 'simple' layout and inside all others pages which are not connected to your 'simple' layout: <g:render template='awesome-header'/>
Can someone tell me if there is a recommended way to add Meta information to MVC3 pages. The kind of information that I would like to add is title, description, keywords.
Thanks,
Gemma
I'd use ViewBag for the title and RenderSection for the rest of the head content. This goes in the Master Layout file (_Layout.cshtml):
<head>
<title>#ViewBag.Title</title>
#RenderSection("head", false);
</head>
In your individual views, you will add:
#{
ViewBag.Title = "My Page Title";
}
#section head {
<meta name="description" content="best site ever">
}
EDIT:
Note that the #section head {...} block is optional. You will not get a compilation error if you omit this block. On views where you want metadata you'd supply it.
I'd add it as a seperate view - that way you can call:
#{Html.RenderAction("Head", "Header");}
from within your various layouts and have the same correct header data rendered.
hth
Usually, in master page, we put a ContentPlaceHolder control, call it TitleContent like this:
<head>
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
</head>
And in children pages:
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Some Title
</asp:Content>
The same thing can be done for Meta Tags, or you could make a full ContentPlaceHolder for HeadContent and fill it with (title/meta...) in each page individually.
You have to put metatags inside the HEAD tag of HTML. For MVC application it depends there you have HEAD. It could be either page (*.cshmtl) of layout (Layout.cshtml). It is quite better to place into layout, since meta info is shared throught the rest of pages.
// *.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<meta ... />
</html>
</head>
I used
<%= wicked_pdf_stylesheet_link_tag "pdf" %>
it shows the following output in the html
<link href="/stylesheets/pdf.css?1302860585" media="screen" rel="stylesheet" type="text/css">
<link href="file:///home/likewise-open/NEXTBRIDGE/nazar.hussain/osd/development/atlantis/public/stylesheets/pdf" media="screen" rel="stylesheet" type="text/css">
But when create the pdf it do not have any style. If i copy all css from the file to the header of the page, it includes all styles. What is the issue and how to solve it.
I personally haven't had any trouble with this method, but I've seen others that have.
I just pushed some updates to the main project that should resolve this issue for you.
wicked_pdf_stylesheet_link_tag now will inline any css files passed in directly into the markup.
I also updated the Github issue you created.
So I am trying to simply load a .css file from within the master page.
The master page Admin.Master and the css file AdminView.css are both in the /views/shared folder. I am sticking the following link tag in the section of my Master page.
I have tried both:
<link href="<%: ResolveUrl("AdminView.css")%>" rel="stylesheet" type="text/css"/>
and
<link href="AdminView.css" rel="stylesheet" type="text/css"/>
As well as every other combination (~/views/shared/adminview.css OR /adminview.css....etc)
and when viewing in Firebug what it loads, it always returns "Resource not found".
NOTE: I have double checked the name and spelling.
Its these trival stuff that shouldn't be this difficult.
You can't access resources in the Views folder directly from the web. You should put your content in the Content folder (or Content/Styles) and reference it from there. The Views folder is for the framework to use to find your Views, it isn't visible from the web.
<link href="<%: Url.Content( "~/content/styles/adminview.css" ) %>" ... />
<link href="/views/shared/AdminView.css" rel="stylesheet" type="text/css"/>
I have a master page which references a style in the following manner:
<link rel="stylesheet" type="text/css" href="../../Content/Style.css" />
All my pages inherit from this master page. And this works well when the URL is http://www.domain.com/home/details/5, however the URL is http://www.domain.com/home/create, then, of course, Style.css cannot be found because `../../Content/Style.css' resolves to a directory one higher where there is nothing there.
How is this typically handled?
Use Url.Content("~/Content/Style.css") to resolve the path safely.
"~" means the host.
e.g.
<link rel="stylesheet" type="text/css"
href="<%= Url.Content("~/Content/Style.css") %>" />