かみそりビューで.cssファイルを参照する方法は?


195

_Layout.cshtmlファイルに.cssファイルを設定する方法は知っていますが、ビューごとにスタイルシートを適用するのはどうですか?

ここでの私の考えは、_Layout.cshtmlには操作する<head>タグがありますが、非レイアウトビューの1つではそうではないということです。<link>タグはどこに行くのですか?

回答:


338

サイト全体で再利用されるCSSについては、の<head>セクションで定義します_Layout

<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の2番目のパラメーターであるfalseは、このマスターページを使用するビューではセクションが不要であることを意味し、ビューエンジンは「スタイル」セクションが定義されていないという事実を穏やかに無視することを知っていると便利です。あなたの見解で。trueの場合、ビューはレンダリングされず、「スタイル」セクションが定義されていない限りエラーがスローされます。


4
よく考えますが、それほど悪くはありません。それはただ新しくて違うと思います。
MrBoJangles 2011

@section Styles->セクションスタイルを解決できないと言っていますが、どういう意味ですか?
2013年

2
@サム、それはあなたのレイアウトで定義されたそのようなセクションがないことを意味します。
Darin Dimitrov

@DarinDimitrovヘッダーの最後ではなく、正確な位置にレンダリングする方法はありますか。CSSの優先順位の特定の順序を保持したいと思います。
Marc

@Marc RenderSectionヘッダーの最後ではなく、呼び出した場所(驚くほど:)にレンダリングされます。
David FerenczyRogožan2015年

22

私はそのようにブロックを追加してみました:

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

そして、_Layout.cshtmlファイル内の対応するブロック:

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

うまくいきました!しかし、私には仕方がありませんが、もっと良い方法があると思います。更新:@RenderSectionステートメントに「false」を追加したため、@section呼び出されたの追加を怠ったときにビューが飛散しないようになりましたhead


セクションに名前を付けますが、これ以上の方法はありません"Head"
SLaks

まさにその通りです。それを「pageStyle」と呼ぶことは、それがその目的のためだけであることを示唆しています。
MrBoJangles 2011

1
このようにする場合は、すべてのビューに「MyStyles」を追加する必要があります。ダーリンの答えを使用します。
Filip Ekberg、2011

そうだ。そのため、に誤った引数を追加しました@RenderSection()。良いキャッチ。
MrBoJangles、2011

12

使用する

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

または

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

あなたのために働くことができます。

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


4
重複する回答へのリンクを投稿しないでください。代わりに、リンクされた投稿で説明されているように、将来のユーザーが必要な答えを見つけるのに役立つ他のアクションを検討してください。
Mogsdad 2016年


1

クライアント依存関係DLLのかみそりHTMLヘルパーを使用することを好みます

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

0

この構造はLayout.cshtmlファイルで作成できます

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

1
これにより、ビューごとにスタイルシートを選択的に適用できますか?
MrBoJangles 2017年

各セクションにクラスまたはIDを追加することもできます。ヘッダー内には、mofidulによって言及されているようなスタイルを含めることができます。私がやっていることはsassで作業しているので、各ビューには個別のクラスコンテナーがあります。このようにして、セクションごとにサスページを作成しました。最終的には、より構造化されて整理されています。
レオ

rel = "stylesheet"の意味は何ですか?
Sven Krauter
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.