Actually I've a master page and I'm adding this master page into another view (Index.cshtml), now I want to add another individual css file into Index.cshtml view.
-
What have you tried? stackoverflow.com/questions/5750726/asp-mvc-import-cssYván Ecarri– Yván Ecarri2012-09-19 14:27:00 +00:00Commented Sep 19, 2012 at 14:27
Add a comment
|
3 Answers
In the head section of your master page (e.g. _Layout.cshtml) add a RenderSection call. Your header section could look like this:
<head>
<meta charset="utf-8" />
<meta name="description" content="The content description" />
<link rel="shortcut icon" href="@Url.Content("~/Content/images/favicon.ico")" />
<title>@ViewBag.Title</title>
@RenderSection("css", false)
</head>
Then in your Index.cshtml use the section to add your css link:
@section css {
<link href="@Url.Content("~/css/style.css")" rel="stylesheet"/>
}
Note that "css" is a unique name for your section and it needs to match. You can also use this section in any view you want. The part you specify within the css section will then be rendered within the head-tag of your html, just where you put the RenderSection placeholder in your _Layout.cshtml.
2 Comments
vcRobe
Thank you for your answer I had no idea about how to solve this.
Transformer
hi, how to get this from a controller-action that serves the css
<link href="@Url.Content("~/css/style.css")" rel="stylesheet"/>Bad practice but you can Just add a html link tag or script tag to the top of the view, modern browsers will still render this. It doesn't always need to be in the head of the master page
Comments
You can use Razor sections, or a string collection and store it in ViewBag.CSS, and later render it on the layout, or you can use javascript if you are not profficient with razor
var $ = document; // shortcut
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!$.getElementById(cssId))
{
var head = $.getElementsByTagName('head')[0];
var link = $.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.com/css/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}
