Ustura MVC 4 koşullu değeri olan ikinci bir css sınıfı nasıl eklenir

149

Microsoft, jilet MVC4'te html özniteliklerinin bazı otomajik oluşturulmasını oluştururken , koşullu bir ustura ifadesine dayalı olarak bir öğe üzerinde ikinci bir css sınıfının nasıl oluşturulacağını öğrenmek oldukça zaman aldı. Bunu sizinle paylaşmak istiyorum.

@ Model.Details model özelliğine dayanarak, bir liste öğesini göstermek veya gizlemek istiyorum. Ayrıntılar varsa, bir div gösterilmeli, aksi takdirde gizlenmelidir. JQuery kullanarak, tek yapmam gereken sırasıyla bir sınıf gösterisi eklemek veya gizlemek. Başka amaçlar için, başka bir sınıf, "detaylar" eklemek istiyorum. Yani, işaretlemem şöyle olmalı:

<div class="details show">[Details]</div> veya <div class="details hide">[Details]</div>

Aşağıda, bazı başarısız denemeleri gösterdim (sonuçta herhangi bir ayrıntı olmadığı varsayımı).

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

Bu hale getirecek: <div class="details" hide="">.

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

Bu hale getirecek: <div class=""details" hide"="">.

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

Bu hale getirecek: <div class="'details" hide'="">.

Bunların hiçbiri doğru işaretleme değildir.

razor asp.net-mvc-4 html

— R. Schreurs
kaynak

MvcHtmlString'in yeni bir örneğine sardıysanız veya Html.Raw

— Kyle

301

Görüşlerde hala geçerli ve geçerli bir mantık olabileceğine inanıyorum. Ama @BigMike ile hemfikir olduğum bu tür şeyler için, modele daha iyi yerleştirilmiş. Sorunun üç şekilde çözülebileceğini söyledikten sonra:

Cevabınız (bunun işe yaradığını varsayarak, bunu denemedim):

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

İkinci seçenek:

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

Üçüncü seçenek:

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

— von v.
kaynak

2

Bunu cevap olarak kabul ettim, çünkü benimkinden daha fazla seçenek sunuyor.

— R. Schreurs

18

2. seçenek hataya neden olurThe "div" element was not closed

— intrepidis

6

Tabii ki burada yazılanlar tam kod değil, kodun söz konusu kısmıdır. Kim diğer unsurları div kaç bilir;)

— Von v.

Benim için çalışmadı. Bu hatayı aldım

'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

Sorunuz gönderilen soru ile nasıl ilişkilidir?

— von /

69

Bu:

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

bunu yapacak:

    <div class="details hide">

ve istediğim işaretleme.

— R. Schreurs
kaynak

1

Önemsiz bir mantık olsa bile görünümlerde mantık sahip olmak sevmiyorum, getDetailClass () yöntemi ile bir ModelView nesnesi kullanmayı tercih ederim.

— BigMike

29

Şahsen ben mantıksal mantığı tercih ediyorum, getDetailCssClass yöntemine sahip olmak Modelinizin Görüşünüzün farkında olduğu ve bu soyutlamayı parçaladığı anlamına gelir. Ben görünümünde gerekli mantığı azaltmak için Model'e bir HasDetails yöntemi eklemek, daha sonra görünümüne çöp çöp zorunda değilsiniz anlamına css sınıf mantığı bırakın @Model.Details.Count > 0. ör.<div class="details @(@Model.HasDetails ? "show" : "hide")">

— Chris Diver

26

Modelinize aşağıdaki gibi özellik ekleyebilirsiniz:

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

ve sonra görünümünüz daha basit olacak ve hiç mantık içermeyecek:

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

Bu, birçok sınıfla bile çalışır ve boşsa sınıfı oluşturmaz:

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

boş olmayan 2 özellik ile:

    <div class="class1 class2"/>

sınıf1 boşsa

    <div class=" class2"/>

— SYNED
kaynak

11

Bence görünümün css sınıfları gibi şeyleri tanımlamasına izin vermek daha iyi. Görünüm Modelini etkilemeden görünümün deply değiştirilebilmesi (hatta değiştirilmesi) gerektiğini unutmayın

— tobiak777

1

Genel olarak reddy ile hemfikir olmama rağmen, senkronizasyonun söylediği gibi yapmanın haklı olduğu durumlar olabilir. Ben de aynen böyle yaptım. Benim durumumda, görünümü oluşturmak için bilgi dolu bir ViewModel nesnesine güveniyorum, sadece bir veri nesnesi değil.

— Gonzalo Méndez

1

2'den fazla sonuç olsaydı bunu böyle kullanırdım. Örneğin 5 olası sınıf için. Görünürde tutmak daha dağınık olurdu.

— Mateusz Migała

1

Manzara doğru yer. Kod bloğunda değişken atamalar olarak güzel bir şekilde biçimlendirin ve dağınık olmayacak.

— Tom Blodget

3

Duruma göre ikinci sınıf eklemek için String.Format işlevini kullanabilirsiniz:

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

— Chetan Gaonkar
kaynak