Bagaimana cara mereferensikan file .css pada tampilan silet?

196

Saya tahu cara mengatur file .css pada file _Layout.cshtml, tetapi bagaimana dengan menerapkan stylesheet berdasarkan per-view?

Pemikiran saya di sini adalah bahwa, di _Layout.cshtml, Anda memiliki <head>tag untuk digunakan, tetapi tidak demikian dalam salah satu tampilan non-tata letak Anda. Ke mana perginya <link>tag?

css asp.net-mvc razor MrBoJangles
sumber

Jawaban:

340

Untuk CSS yang digunakan kembali di antara seluruh situs saya mendefinisikannya di <head>bagian _Layout:

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

dan jika saya perlu beberapa gaya tampilan tertentu saya mendefinisikan Stylesbagian dalam setiap tampilan:

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

Sunting: Sangat berguna untuk mengetahui bahwa parameter kedua di @RenderSection, false, berarti bahwa bagian tersebut tidak diperlukan pada tampilan yang menggunakan halaman master ini, dan mesin tampilan akan dengan senang hati mengabaikan fakta bahwa tidak ada bagian "Gaya" yang ditentukan menurut Anda. Jika benar, tampilan tidak akan merender dan kesalahan akan dilemparkan kecuali bagian "Gaya" telah ditentukan.

Darin Dimitrov
sumber
4
Anda tahu, setelah dipikir-pikir, itu tidak terlalu buruk. Saya pikir ini baru dan berbeda.
MrBoJangles
@section Styles -> mengatakan tidak bisa menyelesaikan bagian Styles, apa artinya?
Revious
2
@ Sam, itu berarti tidak ada bagian seperti itu yang didefinisikan di Layout Anda.
Darin Dimitrov
@DarinDimitrov Apakah ada cara untuk membuat di posisi yang tepat, bukan di akhir header. Saya ingin menjaga urutan khusus untuk prioritas css.
Marc
@ Mark Ini diberikan di suatu tempat, di mana Anda menelepon RenderSection(mengherankan :), bukan di akhir header.
David Ferenczy Rogožan
22

Saya mencoba menambahkan blok seperti ini:

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

Dan blok yang sesuai di file _Layout.cshtml:

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

Yang bekerja! Tapi saya tidak bisa tidak berpikir ada cara yang lebih baik. UPDATE: Menambahkan "false" dalam @RenderSectionpernyataan itu sehingga tampilan Anda tidak akan terpecah ketika Anda lalai untuk menambahkan yang @sectiondipanggil head.

MrBoJangles
sumber
Tidak ada cara yang lebih baik, meskipun saya akan menyebutkan bagian itu "Head".
SLaks
Anda benar sekali. Menyebutnya "pageStyle" menunjukkan bahwa itu hanya untuk tujuan itu.
MrBoJangles
1
Jika Anda melakukannya seperti ini, Anda perlu menambahkan "MyStyles" di semua Tampilan, saya akan pergi dengan jawaban Darins.
Filip Ekberg
Benar-o. Itu sebabnya saya menambahkan argumen palsu @RenderSection(). Tangkapan yang bagus.
MrBoJangles
12

Menggunakan

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

atau 

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

bisa bekerja untukmu.

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

Nishanth Shaan
sumber
4
Tolong jangan memposting tautan ke jawaban duplikat . Sebagai gantinya, pertimbangkan tindakan lain yang dapat membantu pengguna di masa depan menemukan jawaban yang mereka butuhkan, seperti yang dijelaskan dalam pos yang ditautkan.
Mogsdad
3

tata letak bekerja sama dengan halaman master. setiap referensi css yang dimiliki tata letak, setiap halaman anak akan memiliki.

Scott Gu memiliki penjelasan yang sangat bagus di sini

BentOnCoding
sumber
1
Terima kasih banyak. Namun, pertanyaan saya adalah, bagaimana cara menetapkan referensi ke satu tampilan, bukan "master".
MrBoJangles
1

Saya lebih suka menggunakan helper html silet dari Client Dependency dll

Html.RequireCss("yourfile", 9999); // 9999 is loading priority
john blair
sumber
0

Anda dapat struktur ini di file Layout.cshtml

<link href="~/YourCssFolder/YourCssStyle.css" rel="stylesheet" type="text/css" />
mofidul
sumber
1
Bagaimana ini memungkinkan saya untuk secara selektif menerapkan style sheet per view?
MrBoJangles
Anda juga dapat menambahkan kelas atau id ke setiap bagian, dan di dalam header Anda bisa memiliki gaya seperti yang disebutkan oleh mofidul. Apa yang saya lakukan adalah saya bekerja dengan sass, sehingga setiap tampilan memiliki wadah kelas yang terpisah. Dengan cara itu saya membuat halaman sass untuk setiap bagian, yang pada akhirnya lebih terstruktur dan terorganisir.
Leo
apa arti dari rel = "stylesheet"?
Sven Krauter