วิธีการเพิ่มคลาส css ที่สองที่มีค่าเงื่อนไขในมีดโกน MVC 4

149

ในขณะที่ Microsoft ได้สร้างการแสดงผลอัตโนมัติของแอตทริบิวต์ htmlในมีดโกน MVC4 แต่ฉันใช้เวลาพอสมควรในการหาวิธีสร้างคลาส css ที่สองในองค์ประกอบโดยยึดตามการแสดงออกตามเงื่อนไขของมีดโกน ฉันต้องการแบ่งปันกับคุณ

ตามคุณสมบัติโมเดล @ ModelDetails ฉันต้องการแสดงหรือซ่อนรายการ หากมีรายละเอียดควรมีการแสดง div ไม่เช่นนั้นควรซ่อนตัว ใช้ jQuery สิ่งที่ฉันต้องทำคือเพิ่มการแสดงหรือซ่อนชั้นตามลำดับ สำหรับวัตถุประสงค์อื่นฉันต้องการเพิ่มคลาสอีก "รายละเอียด" ดังนั้นการมาร์กอัปของฉันควรเป็น:

<div class="details show">[Details]</div> หรือ <div class="details hide">[Details]</div>

ด้านล่างนี้ฉันแสดงความพยายามที่ล้มเหลวบางอย่าง (ผลการมาร์กอัปสมมติว่าไม่มีรายละเอียด)

สิ่งนี้: <div @(@Model.Details.Count > 0 ? "class=details show" : "class=details hide")>,

จะทำให้สิ่งนี้: <div class="details" hide="">.

สิ่งนี้: <div @(@Model.Details.Count > 0 ? "class=\"details show\"" : "class=\"details hide\"")>.

จะทำให้สิ่งนี้: <div class=""details" hide"="">.

นี้: <div @(@Model.Details.Count > 0 ? "class='details show'" : "class='details hide'")>

จะทำให้สิ่งนี้: <div class="'details" hide'="">.

สิ่งเหล่านี้ไม่มีมาร์กอัปที่ถูกต้อง

razor asp.net-mvc-4 html

— ร. Schreurs
แหล่งที่มา

วิธีแก้ปัญหาแรกของคุณจะใช้ได้ถ้าคุณห่อไว้ในตัวอย่างใหม่ของ MvcHtmlString หรือใช้ Html.Raw

— Kyle

301

ฉันเชื่อว่ายังคงมีตรรกะที่ถูกต้องในมุมมอง แต่สำหรับสิ่งต่าง ๆ ที่ฉันเห็นด้วยกับ @BigMike มันจะอยู่ในรูปแบบที่ดีกว่า ต้องบอกว่าปัญหาสามารถแก้ไขได้สามวิธี:

คำตอบของคุณ (สมมติว่าใช้งานได้ฉันไม่ได้ลอง):

<div class="details @(@Model.Details.Count > 0 ? "show" : "hide")">

ตัวเลือกที่สอง:

@if (Model.Details.Count > 0) {
    <div class="details show">
}
else {
    <div class="details hide">
}

ตัวเลือกที่สาม:

<div class="@("details " + (Model.Details.Count>0 ? "show" : "hide"))">

— ฟอนโวลต์
แหล่งที่มา

2

ฉันยอมรับสิ่งนี้เป็นคำตอบเนื่องจากมีตัวเลือกมากกว่าของฉัน

— R. Schreurs

18

ตัวเลือกที่ 2 ทำให้เกิดข้อผิดพลาดThe "div" element was not closed

— intrepidis

6

แน่นอนว่ามันจะเป็นสิ่งที่เขียนที่นี่ไม่ใช่รหัสที่สมบูรณ์ แต่เป็นส่วนหนึ่งของรหัสที่เป็นปัญหา ใครจะรู้ว่าองค์ประกอบอื่น ๆ อีกมากมายอยู่ใน div;)

— von v.

ไม่ได้ผลสำหรับฉัน ฉันได้รับข้อผิดพลาดนี้

'ClubsModel' does not contain a definition for 'ClubsFilter' and no extension method 'ClubsFilter' accepting a first argument of type 'ClubsModel' could be found (are you missing a using directive or an assembly reference?)

— Martin Erlic

ปัญหาของคุณเกี่ยวข้องกับคำถามที่โพสต์อย่างไร

— von v.

69

นี้:

    <div class="details @(Model.Details.Count > 0 ? "show" : "hide")">

จะทำให้สิ่งนี้:

    <div class="details hide">

และเป็นเครื่องหมายที่ฉันต้องการ

— ร. Schreurs
แหล่งที่มา

1

ฉันไม่ชอบการมีตรรกะในมุมมองแม้ว่าจะเป็นตรรกะเล็กน้อยฉันชอบใช้วัตถุ ModelView ด้วยเมธอด getDetailClass ()

— BigMike

29

โดยส่วนตัวแล้วฉันชอบตรรกะที่ไม่สำคัญการมีเมธอด getDetailCssClass หมายความว่าโมเดลของคุณรับรู้มุมมองของคุณโดยแยกย่อยสิ่งที่เป็นนามธรรม ฉันจะเพิ่มวิธี HasDetails ให้กับ Model เพื่อลดตรรกะที่ต้องใช้ในมุมมองจากนั้นปล่อยให้คลาส css ตรรกะไปที่มุมมองซึ่งหมายความว่าคุณไม่ต้องทิ้งมุมมอง@Model.Details.Count > 0ไว้ เช่น<div class="details @(@Model.HasDetails ? "show" : "hide")">

— Chris Diver

26

คุณสามารถเพิ่มคุณสมบัติให้กับโมเดลของคุณได้ดังนี้:

    public string DetailsClass { get { return Details.Count > 0 ? "show" : "hide" } }

และมุมมองของคุณจะง่ายขึ้นและจะไม่มีตรรกะเลย:

    <div class="details @Model.DetailsClass"/>

สิ่งนี้จะใช้ได้แม้กับคลาสจำนวนมากและจะไม่แสดงคลาสหากเป็นโมฆะ:

    <div class="@Model.Class1 @Model.Class2"/>

ด้วยคุณสมบัติที่ไม่ใช่ 2 null จะทำให้:

    <div class="class1 class2"/>

ถ้า class1 เป็นโมฆะ

    <div class=" class2"/>

— syned
แหล่งที่มา

11

ฉันคิดว่าการปล่อยให้มุมมองกำหนดสิ่งต่าง ๆ เช่นคลาส css โปรดจำไว้ว่ามุมมองที่ควรจะสามารถแก้ไขได้อย่างล้ำลึก (หรือแทนที่ด้วย) โดยไม่ได้มีผลกระทบต่อรูปแบบการดู

— tobiak777

1

แม้ว่าฉันจะเห็นด้วยกับ reddy โดยทั่วไปอาจมีบางกรณีที่สามารถทำให้เป็นธรรมได้ตามวิธีที่ซิงค์ไว้ ฉันทำอย่างนั้น ในกรณีของฉันฉันใช้วัตถุ ViewModel ที่เต็มไปด้วยข้อมูลสำหรับการแสดงผลมุมมองไม่ใช่แค่วัตถุข้อมูล

— กอนซาโล่

1

ฉันจะใช้แบบนี้ถ้ามีผลลัพธ์มากกว่า 2 ข้อ ตัวอย่างเช่นสำหรับ 5 คลาสที่เป็นไปได้ กว่าจะยุ่งเหยิงเพื่อให้มันดู

— Mateusz Migała

1

มุมมองเป็นสถานที่ที่เหมาะสม จัดรูปแบบเป็นตัวแปรในบล็อกโค้ดอย่างดีและจะไม่ยุ่งเหยิง

— Tom Blodget

3

คุณสามารถใช้ฟังก์ชัน String.Format เพื่อเพิ่มคลาสที่สองตามเงื่อนไข:

<div class="@String.Format("details {0}", Details.Count > 0 ? "show" : "hide")">

— Chetan Gaonkar
แหล่งที่มา