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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5021552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 23:44:13  来源:igfitidea点击:

How to reference a .css file on a razor view?

cssasp.net-mvcrazor

提问by MrBoJangles

I know how to set .css files on the _Layout.cshtml file, but what about applying a stylesheet on a per-view basis?

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

My thinking here is that, in _Layout.cshtml, you have <head>tags to work with, but not so in one of your non-layout views. Where do the <link>tags go?

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

回答by Darin Dimitrov

For CSS that are reused among the entire site I define them in the <head>section of the _Layout:

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

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

and if I need some view specific styles I define the Stylessection in each view:

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

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

Edit: It's useful to know that the second parameter in @RenderSection, false, means that the section is not required on a view that uses this master page, and the view engine will blissfully ignore the fact that there is no "Styles" section defined in your view. If true, the view won't render and an error will be thrown unless the "Styles" section has been defined.

编辑:知道@RenderSection 中的第二个参数 false 表示在使用此母版页的视图上不需要该部分是很有用的,并且视图引擎会很高兴地忽略没有定义“样式”部分的事实在你看来。如果为 true,则视图将不会呈现并且会抛出错误,除非已定义“样式”部分。

回答by MrBoJangles

I tried adding a block like so:

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

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

And a corresponding block in the _Layout.cshtml file:

以及 _Layout.cshtml 文件中的相应块:

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

Which works! But I can't help but think there's a better way. UPDATE: Added "false" in the @RenderSectionstatement so your view won't 'splode when you neglect to add a @sectioncalled head.

哪个有效!但我不禁想到还有更好的方法。更新:在@RenderSection语句中添加了“false”,这样当您忽略添加一个@section被调用的head.

回答by Nishanth Shaan

Using

使用

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

or

或者

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

could work for you.

可以为你工作。

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

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

回答by BentOnCoding

layout works the same as an master page. any css reference that layout has, any child pages will have.

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

Scott Gu has an excellent explanation here

Scott Gu在这里有一个很好的解释

回答by john blair

I prefer to use the razor html helper from Client Dependency dll

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

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

回答by mofidul

You can this structure in Layout.cshtml file

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

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