So fügen Sie eine zweite CSS-Klasse mit einem bedingten Wert in Razor MVC 4 hinzu
Lesezeit: 4 Minuten
R. Schreurs
Während Microsoft in Razor MVC4 ein gewisses automagisches Rendering von HTML-Attributen erstellt hat, habe ich einige Zeit gebraucht, um herauszufinden, wie man eine zweite CSS-Klasse für ein Element basierend auf einem bedingten Razor-Ausdruck rendert. Ich möchte es mit Ihnen teilen.
Basierend auf einer Modelleigenschaft @Model.Details möchte ich ein Listenelement ein- oder ausblenden. Wenn Details vorhanden sind, sollte ein div angezeigt werden, andernfalls sollte es ausgeblendet werden. Wenn ich jQuery verwende, muss ich lediglich eine Klasse zum Anzeigen bzw. Verbergen hinzufügen. Für andere Zwecke möchte ich auch eine weitere Klasse “Details” hinzufügen. Also, mein Markup sollte sein:
<div class="details show">[Details]</div> oder <div class="details hide">[Details]</div>
Unten zeige ich einige fehlgeschlagene Versuche (resultierendes Markup, vorausgesetzt, es gibt keine Details).
wird dies rendern: <div class="'details" hide'="">.
Keines davon ist ein korrektes Markup.
Alle Ihre ersten Lösungen hätten funktioniert, wenn Sie sie in eine neue Instanz von MvcHtmlString verpackt oder Html.Raw verwendet hätten
– Kyle
23. Juli 2013 um 19:43 Uhr
Ich glaube, dass es immer noch eine gültige Logik für Ansichten geben kann. Aber für solche Dinge stimme ich @BigMike zu, es ist besser auf dem Modell platziert. Allerdings kann das Problem auf drei Arten gelöst werden:
Ihre Antwort (vorausgesetzt, das funktioniert, ich habe das nicht versucht):
Ich habe dies als Antwort akzeptiert, da es mehr Optionen bietet als meine.
– R. Schreurs
4. Dezember 2014 um 14:16 Uhr
Die 2. Option verursacht den Fehler The "div" element was not closed
– unerschrocken
15. April 2015 um 14:55 Uhr
Natürlich wird es das, denn was hier geschrieben wird, ist nicht der vollständige Code, sondern eher der Teil des Codes, der fraglich ist. Wer weiß, wie viele andere Elemente in dem div sind 😉
– v.
16. April 2015 um 0:34 Uhr
Hat bei mir nicht funktioniert. Ich habe diesen Fehler '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
9. Mai 2018 um 5:27 Uhr
Wie hängt Ihr Problem mit der geposteten Frage zusammen?
Ich mag keine Logik in Ansichten, auch wenn es sich um eine triviale Logik handelt, ich bevorzuge die Verwendung eines ModelView-Objekts mit einer getDetailClass()-Methode.
– Big Mike
29. März 2013 um 9:47 Uhr
Persönlich bevorzuge ich die triviale Logik. Eine getDetailCssClass-Methode bedeutet, dass Ihr Modell Ihre Ansicht kennt und diese Abstraktion auflöst. Ich würde dem Modell eine HasDetails-Methode hinzufügen, um die in der Ansicht erforderliche Logik zu reduzieren, und dann die CSS-Klassenlogik der Ansicht überlassen, was bedeutet, dass Sie die Ansicht nicht verunreinigen müssen @Model.Details.Count > 0. z.B <div class="details @(@Model.HasDetails ? "show" : "hide")">
– Chris Taucher
1. Oktober 2013 um 9:47 Uhr
Sie können Ihrem Modell Eigenschaften wie folgt hinzufügen:
public string DetailsClass { get { return Details.Count > 0 ? "show" : "hide" } }
und dann wird Ihre Ansicht einfacher und enthält überhaupt keine Logik:
<div class="details @Model.DetailsClass"/>
Dies funktioniert sogar mit vielen Klassen und wird die Klasse nicht rendern, wenn sie null ist:
<div class="@Model.Class1 @Model.Class2"/>
mit 2 nicht null Eigenschaften wird gerendert:
<div class="class1 class2"/>
wenn class1 null ist
<div class=" class2"/>
Ich denke, es ist besser, die Ansicht Dinge wie die CSS-Klassen definieren zu lassen. Denken Sie daran, dass die Ansicht in der Lage sein sollte, vollständig geändert (oder sogar ersetzt) zu werden, ohne dass dies Auswirkungen auf das Ansichtsmodell hat
– tobiak777
8. Juni 2015 um 12:54 Uhr
Obwohl ich reddy im Allgemeinen zustimme, kann es Fälle geben, in denen es gerechtfertigt sein kann, es so zu tun, wie es syned sagt. Ich habe es genau so gemacht. In meinem Fall verlasse ich mich auf ein ViewModel-Objekt voller Informationen zum Rendern der Ansicht, es ist nicht nur ein Datenobjekt.
– Gonzalo Mendez
11. April 2016 um 16:40 Uhr
Ich würde es so verwenden, wenn es mehr als 2 Ergebnisse gäbe. Zum Beispiel für 5 mögliche Klassen. Dann wäre es unordentlich, es im Auge zu behalten.
– cah1r
19. April 2016 um 6:55 Uhr
Die Aussicht ist der richtige Ort. Formatieren Sie es schön als Variablenzuweisungen in einem Codeblock und es wird nicht chaotisch.
– Tom Blodget
10. Oktober 2016 um 20:32 Uhr
Sie können die Funktion String.Format verwenden, um die zweite Klasse basierend auf der Bedingung hinzuzufügen:
Alle Ihre ersten Lösungen hätten funktioniert, wenn Sie sie in eine neue Instanz von MvcHtmlString verpackt oder Html.Raw verwendet hätten
– Kyle
23. Juli 2013 um 19:43 Uhr