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

2020-01-26 13:13发布

站内问答 / HTML/CSS
709 6 4

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

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?

6条回答
Deceive 欺骗
2楼-- · 2020-01-26 13:15

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

Scott Gu has an excellent explanation here

查看更多
0人赞 添加讨论(0) 举报
小情绪 Triste *
3楼-- · 2020-01-26 13:19

Using

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

or 

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

could work for you.

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

查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
4楼-- · 2020-01-26 13:25

You can this structure in Layout.cshtml file

<link href="~/YourCssFolder/YourCssStyle.css" rel="stylesheet" type="text/css" />
查看更多
0人赞 添加讨论(0) 举报
劳资没心，怎么记你
5楼-- · 2020-01-26 13:32

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

Html.RequireCss("yourfile", 9999); // 9999 is loading priority
查看更多
0人赞 添加讨论(0) 举报
干净又极端
6楼-- · 2020-01-26 13:35

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:

<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 @RenderSection statement so your view won't 'splode when you neglect to add a @section called head.

查看更多
0人赞 添加讨论(0) 举报
走好不送
7楼-- · 2020-01-26 13:38

For CSS that are reused among the entire site I define them in the <head> section of the _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 Styles section in each view:

@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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)