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

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

我的想法是，在_Layout中。Cshtml中，您有<head>标签可以使用，但在一个非布局视图中不是这样。<link>标签放在哪里?

布局的工作原理与母版页相同。任何CSS引用的布局，任何子页面将有。

Scott Gu对此有很好的解释

对于在整个站点中重用的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是很有用的，这意味着在使用这个母版页的视图中不需要这个section，视图引擎会很高兴地忽略在你的视图中没有定义“Styles”section这一事实。如果为真，除非定义了“Styles”部分，否则视图不会呈现并抛出一个错误。

我试着像这样添加一个块:

@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时，你的视图就不会“spplode”。

使用

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

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

可以为你工作。

https://stackoverflow.com/a/36157950/2924015

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

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

我更喜欢使用razor html助手从客户端依赖dll

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

推荐文章