วิธีการอ้างอิงไฟล์. css บนมุมมองมีดโกน


196

ฉันรู้วิธีตั้งค่าไฟล์. css บนไฟล์ _Layout.cshtml แต่สิ่งที่เกี่ยวกับการใช้สไตล์ชีทบนพื้นฐานต่อการดู?

ความคิดของฉันที่นี่คือใน _Layout.cshtml คุณมี<head>แท็กที่จะทำงานด้วย แต่ไม่ใช่ในมุมมองที่ไม่ใช่เลย์เอาต์ของคุณ ไม่ที่<link>แท็กไป?

คำตอบ:


340

สำหรับ 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, false หมายความว่าไม่จำเป็นต้องใช้ส่วนในมุมมองที่ใช้หน้าต้นแบบนี้และเครื่องมือดูจะละเว้นความจริงที่ไม่มีส่วน "สไตล์" ที่กำหนดไว้ ในมุมมองของคุณ หากเป็นจริงมุมมองจะไม่แสดงผลและจะมีข้อผิดพลาดเกิดขึ้นเว้นแต่มีการกำหนดส่วน "สไตล์"


4
คุณรู้ไหมว่าในความคิดที่สองมันก็ไม่ได้แย่ขนาดนั้น ฉันคิดว่ามันใหม่และแตกต่าง
MrBoJangles

@section Styles -> พูดว่าไม่สามารถแก้ไขสไตล์ของส่วนได้หมายความว่าอย่างไร
Revious

2
@ แซมมันหมายความว่าไม่มีส่วนดังกล่าวที่กำหนดไว้ในเค้าโครงของคุณ
ดารินทร์ดิมิทรอฟ

@DarinDimitrov มีวิธีการแสดงผลที่ตำแหน่งที่แน่นอนแทนที่จะเป็นที่ส่วนท้ายของส่วนหัว ฉันต้องการเก็บคำสั่งซื้อเฉพาะสำหรับลำดับความสำคัญของ CSS
Marc

@ Marc มันแสดงผลในสถานที่ที่คุณโทรหาRenderSection(น่าแปลกใจ :) ไม่ใช่ที่ส่วนท้ายของส่วนหัว
David Ferenczy Rogožan

22

ฉันพยายามเพิ่มบล็อกอย่างเช่น:

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

และบล็อกที่เกี่ยวข้องในไฟล์ _Layout.cshtml:

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

ซึ่งใช้งานได้! แต่ฉันไม่สามารถช่วย แต่คิดว่ามีวิธีที่ดีกว่า UPDATE: เพิ่ม "เท็จ" ใน@RenderSectionคำสั่งเพื่อให้มุมมองของคุณจะไม่ 'Splode เมื่อคุณละเลยที่จะเพิ่มที่เรียกว่า@sectionhead


"Head"ไม่มีวิธีที่ดีกว่าถึงแม้ว่าฉันจะชื่อส่วน
SLaks

คุณพูดถูก การเรียกมันว่า "pageStyle" แสดงให้เห็นว่ามันมีไว้สำหรับวัตถุประสงค์นั้นเท่านั้น
MrBoJangles

1
หากคุณทำเช่นนี้คุณจะต้องเพิ่ม "MyStyles" ในทุกการดูฉันจะตอบด้วย Darins
Filip Ekberg

ขวา o @RenderSection()นั่นเป็นเหตุผลที่ผมเพิ่มอาร์กิวเมนต์เท็จ จับดี.
MrBoJangles

12

การใช้

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

หรือ

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

สามารถใช้ได้สำหรับคุณ

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


4
กรุณาอย่าโพสต์ลิงก์ไปซ้ำคำตอบ ให้พิจารณาการกระทำอื่นที่อาจช่วยให้ผู้ใช้ในอนาคตค้นหาคำตอบที่ต้องการดังอธิบายในโพสต์ที่ลิงก์
Mogsdad

3

เลย์เอาต์ทำงานเหมือนกับมาสเตอร์เพจ การอ้างอิง CSS ใด ๆ ที่มีรูปแบบหน้าลูก ๆ จะมี

Scott Gu มีคำอธิบายที่ยอดเยี่ยมที่นี่


1
จำเป็นมาก อย่างไรก็ตามคำถามของฉันคือฉันจะตั้งค่าการอ้างอิงไปยังมุมมองเดียวได้อย่างไรไม่ใช่ "ต้นแบบ"
MrBoJangles


0

คุณสามารถโครงสร้างนี้ในไฟล์ Layout.cshtml

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

1
สิ่งนี้ทำให้ฉันเลือกสไตล์ชีทต่อการดูได้อย่างไร
MrBoJangles

นอกจากนี้คุณยังสามารถเพิ่มคลาสหรือรหัสให้กับแต่ละส่วนและภายในส่วนหัวคุณสามารถมีสไตล์เหมือนที่กล่าวถึงโดย mofidul สิ่งที่ฉันทำคือฉันทำงานกับ sass ดังนั้นแต่ละมุมมองจะมีคลาสแยกต่างหาก ด้วยวิธีนี้ฉันสร้างหน้า sass สำหรับแต่ละส่วนซึ่งในท้ายที่สุดมีโครงสร้างและจัดระเบียบมากขึ้น
Leo

rel = "stylesheet" หมายถึงอะไร?
Sven Krauter
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.