如何在 Razor 视图中引用 .css 文件？

Question

223

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

我的想法是，在 _Layout.cshtml 中，您可以使用 <head> 标签，但在非布局视图中就没有这样的标签。那么 <link> 标签放在哪里呢？

- MrBoJangles

6个回答

24

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

@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时，你的视图就不会出问题。

- MrBoJangles

虽然我会将该部分命名为“头部”，但并没有更好的方法。 - SLaks

你说得很对。称其为“页面样式”暗示它仅用于那个目的。 - MrBoJangles

1

如果您这样做，您需要在所有视图中添加“MyStyles”，我会选择Darin的答案。 - Filip Ekberg

好的，这就是为什么我在 @RenderSection() 中添加了 false 参数。很好发现。 - MrBoJangles

18

使用

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

或者

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

可能适合您的工作。

- Nishanth Shaan

4

请勿发布指向重复答案的链接。相反，考虑采取其他行动，帮助未来的用户找到他们所需的答案，如链接文章中所述。 - Mogsdad

3

布局与主页面的工作方式相同。布局引用的任何CSS，子页面都会有。

- BentOnCoding

1

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

1

我更喜欢使用来自Client Dependency dll的Razor HTML助手。

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

- john blair

0

你可以在_Layout.cshtml文件中使用这个结构。

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

- mofidul

3

这如何让我能够针对每个视图选择性地应用样式表？ - MrBoJangles

你也可以为每个部分添加一个类或ID，在标题内部，你可以像mofidul提到的那样设置样式。我的做法是使用Sass，因此每个视图都有一个单独的类容器。通过这种方式，我为每个部分创建了Sass页面，最终更加结构化和有组织。 - Leo

rel="stylesheet" 的意思是什么？ - CleanCoder

1

@SvenKrauter <link> 也可用于除样式表之外的其他内容（如预取下一页、网站图标），因此 rel="stylesheet" 告诉浏览器所引用的文件是一个样式表。 - jao

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Darin Dimitrov · Accepted Answer

对于在整个站点中被重复使用的 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表示该部分在使用此母板页的视图上并非必需，而视图引擎会快乐地忽略没有在您的视图中定义“Styles”部分的事实。如果为true，则除非已定义“Styles”部分，否则视图将无法呈现并将抛出错误。