如何在剃刀视图上引用.css文件?


195

我知道如何在_Layout.cshtml文件上设置.css文件,但是如何基于每个视图应用样式表呢?

我的想法是,在_Layout.cshtml中,您可以使用<head>标记,但在一个非布局视图中却没有。哪里的<link>标签去?

Answers:


338

对于在整个站点中重用的CSS,我在以下<head>部分中定义它们_Layout

<head>
    <link href="@Url.Content("~/Styles/main.css")" rel="stylesheet" type="text/css" />
    @RenderSection("Styles", false)
</head>

如果需要一些特定Styles于视图的样式,可以在每个视图中定义该部分:

@section Styles {
    <link href="@Url.Content("~/Styles/view_specific_style.css")" rel="stylesheet" type="text/css" />
}

编辑:知道@RenderSection中的第二个参数false很有用,这意味着在使用此母版页的视图中不需要该部分,并且视图引擎将很乐意忽略没有定义“样式”部分的事实在您看来。如果为true,则除非定义了“样式”部分,否则视图将不会呈现,并且将引发错误。


4
您想一想,那还不错。我认为这是新的和不同的。
MrBoJangles 2011年

@section样式->说无法解析部分样式,这是什么意思?
回顾

2
@Sam,这意味着您的布局中没有定义此部分。
Darin Dimitrov

@DarinDimitrov是否有一种方法可以在确切的位置而不是在标题的末尾进行渲染。我想为CSS优先级保持特定顺序。
2014年

@Marc它呈现在您调用的地方RenderSection(令人惊讶的是:),而不是标题的末尾。
David FerenczyRogožan2015年

22

我试图添加一个像这样的块:

@section styles{
    <link rel="Stylesheet" href="@Href("~/Content/MyStyles.css")" />
}

_Layout.cshtml文件中的相应块:

<head>
<title>@ViewBag.Title</title>
@RenderSection("styles", false);
</head>

哪个有效!但是我不禁想到有更好的方法。更新:在@RenderSection语句中添加了“ false”,因此当您忽略添加@section被调用时,您的视图将不会被继承head


尽管我会命名为section,但没有更好的方法"Head"
SLaks 2011年

你说的没错 将其称为“ pageStyle”表明它仅用于此目的。
MrBoJangles

1
如果您这样做,则需要在所有视图中添加“ MyStyles”,我会选择Darins回答。
Filip Ekberg

对啊 这就是为什么我在中添加了false参数@RenderSection()。接得好。
MrBoJangles 2011年



1

我更喜欢使用Client Dependency dll中的razor html helper

Html.RequireCss("yourfile", 9999); // 9999 is loading priority 

0

您可以在Layout.cshtml文件中使用此结构

<link href="~/YourCssFolder/YourCssStyle.css" rel="stylesheet" type="text/css" />

1
这如何使我有选择地为每个视图应用样式表?
MrBoJangles

您还可以在每个部分中添加一个类或ID,并且在标头中可以具有类似于mofidul提到的样式。我要做的是使用sass,因此每个视图都有一个单独的类容器。这样,我为每个部分创建了sass页面,最后这些页面更加结构化和组织化。
狮子座

rel =“ stylesheet”是什么意思?
Sven Krauter
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.