रेजर एमवीसी 4 में एक सशर्त मूल्य के साथ दूसरा सीएसएस वर्ग कैसे जोड़ा जाए

Question

जबकि माइक्रोसॉफ्ट ने रेजर एमवीसी 4 में एचटीएमएल विशेषताओं के कुछ ऑटोमैटिक रेंडरिंग का निर्माण किया है, मुझे एक सशर्त रेजर अभिव्यक्ति के आधार पर एक तत्व पर दूसरी सीएसएस कक्षा प्रदान करने का तरीका जानने में काफी समय लगा। मैं इसे आपके साथ साझा करना चाहूंगा।

एक मॉडल संपत्ति @ Model.Details के आधार पर, मैं एक सूची आइटम दिखाना या छिपाना चाहता हूं। यदि विवरण हैं, तो एक 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&quot;="">:।

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

इस प्रस्तुत करना होगा <div class="'details" hide&#39;="">:।

इनमें से कोई भी सही मार्क-अप नहीं है।

Comments

यदि आपने उन्हें MvcHtmlString या Html.Raw

— Kyle

Answer 1

मेरा मानना ​​है कि विचारों पर अभी भी और वैध तर्क हो सकते हैं। लेकिन इस तरह की चीजों के लिए मैं @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"))">

Comments

मैंने इसे उत्तर के रूप में स्वीकार कर लिया है, क्योंकि यह मेरी तुलना में अधिक विकल्प प्रदान करता है।

— आर। श्रेयर्स

दूसरा विकल्प त्रुटि का कारण बनता हैThe "div" element was not closed

— intrepidis

निश्चित रूप से यह वही होगा जो यहां लिखा गया है, पूरा कोड नहीं है, बल्कि उस कोड का हिस्सा है जो प्रश्न में है। कौन जानता है कि 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?)

— मार्टिन एरिक

आपकी समस्या पोस्ट किए गए प्रश्न से कैसे संबंधित है?

— वॉन वि।

Answer 2

यह:

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

इसे प्रस्तुत करेगा:

    <div class="details hide">

और मार्क-अप मैं चाहता हूं।

Comments

मुझे विचारों में तर्क रखना पसंद नहीं है, भले ही यह तुच्छ तर्क हो, मैं एक GetDetailClass () विधि के साथ एक ModelView ऑब्जेक्ट का उपयोग करना पसंद करता हूं।

— बिगमीक

व्यक्तिगत रूप से मैं तुच्छ तर्क को पसंद करता हूं, एक गेटडेलकैलस विधि का अर्थ है कि आपका मॉडल आपके दृष्टिकोण से अवगत है, उस अमूर्तता को तोड़ना। मैं दृश्य में आवश्यक तर्क को कम करने के लिए मॉडल में एक हैडसेट्स विधि जोड़ूंगा, फिर सीएसएस वर्ग तर्क को देखने के लिए छोड़ दूंगा, इसका मतलब है कि आपको इस दृश्य से जूझना नहीं है @Model.Details.Count > 0। जैसे<div class="details @(@Model.HasDetails ? "show" : "hide")">

— क्रिस डाइवर

Answer 3

आप अपने मॉडल में संपत्ति को इस प्रकार जोड़ सकते हैं:

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

और तब आपका विचार सरल होगा और इसमें कोई तर्क नहीं होगा:

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

यह कई वर्गों के साथ भी काम करेगा और यह शून्य होने पर कक्षा को प्रस्तुत नहीं करेगा:

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

2 नहीं के साथ शून्य गुण प्रस्तुत करना होगा:

    <div class="class1 class2"/>

अगर class1 शून्य है

    <div class=" class2"/>

Comments

मुझे लगता है कि यह देखने के लिए बेहतर है कि सीएसएस कक्षाओं जैसी चीजों को परिभाषित करें। याद रखें कि दृश्य को संशोधित करने में सक्षम होना चाहिए (या यहां तक ​​कि प्रतिस्थापित किया गया) बिना इसे देखें दृश्य मॉडल को प्रभावित किए

— tobiak777

हालांकि मैं सामान्य रूप से रेड्डी से सहमत हूं, ऐसे मामले हो सकते हैं जिनमें इसे सिंक किए गए तरीके से करने के लिए उचित ठहराया जा सकता है। मैंने ऐसा ही किया। मेरे मामले में मैं दृश्य प्रदान करने के लिए जानकारी से भरी एक ViewModel वस्तु पर भरोसा कर रहा हूं, यह सिर्फ एक डेटा ऑब्जेक्ट नहीं है।

— गोंजालो मेन्डेज़

अगर 2 से अधिक परिणाम थे, तो मैं इसे इस तरह उपयोग करूँगा। 5 संभावित वर्गों के लिए उदाहरण के लिए। इसे ध्यान में रखते हुए यह गड़बड़ हो जाएगा।

— माटूस मिगाला

दृश्य सही जगह है। एक कोड ब्लॉक में चर असाइनमेंट के रूप में इसे अच्छी तरह से प्रारूपित करें और यह गड़बड़ नहीं होगा।

— टॉम ब्लोडेट

Answer 4

शर्त के आधार पर दूसरी श्रेणी जोड़ने के लिए आप String.Format फ़ंक्शन का उपयोग कर सकते हैं:

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