asp.net mvc - Einfachste Weg, um Alternative row styling Razor

Angesichts der folgenden Razor-code:

<tbody>
    @foreach (Profession profession in Model)
    {
        <tr>
            <td>@profession.Name</td>
            <td>@profession.PluralName</td>
            <td>@Html.ActionLink("Edit", "AddOrEdit", new { Id = profession.ProfessionID })</td>
        </tr>
    }
</tbody>

Was ist der einfachste Weg, um irgendeine Art von alternativer Zeilen-styling? (d.h. verschiedene styling für gerade und ungerade Zeilen.)

Ich bin anscheinend nicht in der Lage sein, beliebige C# zu erklären bool variable, die wird umgedreht, jede iteration der foreach Schleife, um einen Klassennamen für die tr zum Beispiel.

InformationsquelleAutor David | 2011-10-28

45

Ich würde empfehlen, dass Sie dies in gerade CSS (siehe hier für mehr details):
```
tr:nth-child(odd)    { background-color:#eee; }
tr:nth-child(even)   { background-color:#fff; }
```
Dies ist CSS3. Nicht jeder browser unterstützt es.
In der Tat, und ich war zögerlich, aber die Frage für den 'einfachsten', und ich glaube, das ist.
Moderne Browser unterstützen es. Und für ältere Browser gibt es nicht eine abwechselnde Reihe Farbe => keine große Sache. Leute mit älteren Browsern sind wahrscheinlich schon daran gewöhnt anders gerendert web-Seiten im internet.
Ja, aber abhängig davon, wer Ihre Zielgruppe sind. In der Branche ich bin, sind die meisten Browser IE6.
Ich gebe den Daumen hoch, weil es funktioniert für mich und es ist die einfachste Lösung.

InformationsquelleAutor harriyott
10

JQuery tun können, dass in der client-Seite (und ich würde wahrscheinlich mit Hilfe von client-side-scripting hier eher als server-Logik).
```
 $("tr:odd").css("background-color", "#bbbbff");
```
Können Sie auch nur eine einfache variable und setzt die css-Klasse (fast Pseudocode):
```
@foreach (Profession profession in Model)
{
    @i++;
    <td class="@i%2==0?"even":"odd""> 

}
```
Um zu vermeiden, Beschwerden von visual studio verwenden, Klammern, z.B. <tr class="@(i%2==0? "":"alt" -)">

InformationsquelleAutor Aliostad

Es gibt eine Menge von Möglichkeiten, wie andere vorgeschlagen. Von meinem Standpunkt aus, wäre dies nicht das einfachste, aber ein bisschen einfacher:

<tbody>
    @var oddEven = new List { "odd", "even" };
    @var i = 0;
    @foreach (Profession profession in Model)
    {
        <tr style="@oddEven[i++ % 2]">
            <td>@profession.Name</td>
            <td>@profession.PluralName</td>
            <td>@Html.ActionLink("Edit", "AddOrEdit", new { Id = profession.ProfessionID })</td>
        </tr>
    }
</tbody>

InformationsquelleAutor Abdul Munim

2

Entschuldigung, dies ist eine etwas stumpfe Antwort, als Sie bereits tun, die mark-up, aber als Sie Ihre Tabelle sieht ziemlich standard Sie wechseln konnte, um mit dem Mvc-Web-Grid-Helfer. Es ist ein praktisches tool für Tabellen wie diese. Ich denke, dein code etwas kürzer /einfacher für diese bestimmte Tabelle, und der tatsächlichen Umsetzung der alternierenden Reihe Stil wäre sehr einfach:
```
alternatingRowStyle: "alternateRow"
```
Mehr info auf diese asp.net blog.

Ich mag die Idee, diese Kontrolle, aber es würde sehr viel mehr Arbeit als in einigen der anderen Lösungen. Danke für den link aber.

InformationsquelleAutor Timbo
1

Da benutzen Sie MVC Razor unter Verwendung der @helper-Funktion ist die einfachste, sauberste und beste Ansatz.

In den App_Code Ordner Ihres Projektes ein neues Element hinzufügen oder ändern von vorhandenen CustomeHelpers.cshtml-Datei mit dem folgenden code:
```
@helper AlternateBackground(string color, Int32 iViewBagCount) {
    if (iViewBagCount == null) { iViewBagCount = 0; }
    <text>style="background-color:@(iViewBagCount % 2 == 1 ? color : "none")"</text>
    iViewBagCount++;
}
```
Dann auf Ihren Blick, in deinem foreach-Schleife ersetzen Tabellenzeilen-code, mit dem, was ist unten dargestellt:
```
<tr @CustomHelpers.AlternateBackground("#ECEDEE", ViewBag.count)>
```
oder
```
<tr @CustomHelpers.AlternateBackground("Red", Model.Count())>
```
Je nachdem, was angemessen ist für Ihre foreach-Schleife

Diese Weise müssen Sie nur fügen Sie die @Hilfsfunktion einmal, und es wird propagiert, die in der gesamten Anwendung und Sie können in jeder Ansicht, wie erforderlich, durch den Verweis auf die @CustomHelpers Funktion. Erstellen Sie so viele Helfer, wie Sie benötigen, und rufen Sie mit der @CustomeHelpers.NameOfYourFunction() und gehen von dort aus.

Einfache und effektive...

InformationsquelleAutor Tim

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.