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

css asp.net-mvc razor

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

我的想法是，在 _Layout.cshtml 中，您可以使用 <head> 标记，但在您的非布局视图之一中则不然。 <link> 标记在哪里？

MrBoJangles

对于在整个网站中重复使用的 CSS，我在 _Layout 的 <head> 部分定义它们：

<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，除非定义了“样式”部分，否则视图将不会呈现并且会引发错误。

你知道，再想一想，这还不错。我认为这只是新的和不同的。

@section Styles --> 说无法解析部分样式，这是什么意思？

@Sam，这意味着您的布局中没有定义这样的部分。

@DarinDimitrov 有没有办法在确切的位置而不是在标题的末尾进行渲染。我想为 css 优先级保留一个特定的顺序。

@Marc 它呈现在您调用 RenderSection 的地方（令人惊讶的是:)，而不是在标题的末尾。

MrBoJangles

我尝试像这样添加一个块：

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

以及 _Layout.cshtml 文件中的对应块：

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

哪个有效！但我不禁想到有更好的方法。更新：在 @RenderSection 语句中添加了“false”，因此当您忽略添加名为 head 的 @section 时，您的视图不会“爆炸”。

没有更好的方法，尽管我将部分命名为 "Head"。

你完全正确。将其称为“pageStyle”表明它仅用于此目的。

如果你这样做，你需要在所有视图中添加“MyStyles”，我会选择 Darins 的答案。

对哦。这就是为什么我将 false 参数添加到 @RenderSection()。接得好。

Community

使用

@Scripts.Render("~/scripts/myScript.js")

或者

@Styles.Render("~/styles/myStylesheet.css")

可以为你工作。

请不要发布指向 duplicate answers 的链接。相反，请考虑其他可以帮助未来用户找到所需答案的操作，如链接帖子中所述。

shanethehat

布局与母版页的工作方式相同。布局具有的任何 css 引用，任何子页面都将具有。

非常感谢。但是，我的问题是，如何设置对单个视图的引用，而不是“主视图”。

Suraj Rao

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

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

SwissCodeMen

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

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

这如何让我有选择地为每个视图应用样式表？

您还可以为每个部分添加一个类或 id，并且在标题中您可以使用 mofidul 提到的样式。我所做的是使用 sass，因此每个视图都有一个单独的类容器。通过这种方式，我为每个部分创建了 sass 页面，最终这些页面更加结构化和有条理。

rel="stylesheet" 是什么意思？

@SvenKrauter <link> 也可以用于样式表以外的东西（即预取下一页、网站图标），因此 rel="stylesheet" 告诉浏览器引用的文件是样式表。