Wie alternierende Zeilen in asp.net mvc

style Ich verwende eine <% foreach ...%> Schleife, um eine Sammlung von Elementen auf meiner Website aufzulisten.Wie alternierende Zeilen in asp.net mvc

Ich möchte eine andere Hintergrundfarbe für den Stil der abwechselnden Zeilen in meiner Liste hinzufügen. Ich habe einen Weg gefunden, dies zu tun, aber ich bin nicht damit zufrieden, da es wie ein Hack aussieht. Hier

ist das, was ich getan habe, um es zu lösen bisher:

<table> 
    <% int counter = 0; 
     foreach (var item in Model) 
     { 
      counter++; 

      if (counter % 2 == 0) 
      { 
    %> 
      <tr class="colorfull"> 
      <% } 
      else 
      { %> 
      <tr> 
      <% } %> 
...

Gibt es eine bewährte Methode, die ich fehle, dass die Menschen für dieses Szenario in ASP.NET MVC verwenden?

Quelle

2009-10-19 YeahStu

Ich habe diesen Code-Schnipsel gefunden, den ich für viel sauberer halte.

$(document).ready(function() { $("table tr:nth-child(odd)").addClass("colorfull"); });

Ich habe die Zählerlogik herausgenommen. Dieses JQuery-Skript manipuliert das DOM, um die css-Klasse jeder zweiten Zeile in der foreach-Schleife festzulegen.

Quelle

2009-10-19 02:44:23 YeahStu

Ich empfehle dieses, kein Tag Suppe für Sie! – jfar

http://roshanbh.com.np/2008/03/different-color-alternate-row-jquery.html –

Ich habe diese Zeile in einer Reihe von ähnlichen Fragen wiederholt gesehen, aber es ist immer aus dem Zusammenhang. Wo würdest du das hinstellen? (Ich bin sehr neu zu mvc, jquery und Web-Entwicklung in der Regel!) – Lewray

Wenn Sie es sauberer machen möchten, würde ich empfehlen, eine benutzerdefinierte HtmlHelper Erweiterung zu schreiben. Ich würde jQuery nicht verwenden, wie es stu42 vorschlägt, einfach weil ich Javascript nur wegen seines Verhaltens ansehen möchte. Idealerweise und hoffentlich in nicht allzu ferner Zukunft würden Sie für diesen Zweck reines CSS verwenden. Bis dahin würde ich es im Markup belassen, wie du es gerade machst, aber mit einer Erweiterung, die die Logik handhabt und sie aus dem aspx herauszieht.

Quelle

2009-10-19 02:58:42 dustyburwell

Können Sie ein Beispiel dafür bieten, wie das aussehen könnte? – YeahStu

Wenn Sie sind die gewagte Typen, die in CSS3

tr:nth-child(odd)  { background-color:#eee; } 
tr:nth-child(even)  { background-color:#fff; }

Quelle

2009-10-19 03:09:53 Perpetualcoder

Works in fire fox, chrome, aber nicht in IE :( – Sly

nicht einmal in IE 8? O nicht getestet auf IE 8 selbst, aber ich dachte, es wäre ... Service-Pack! – Perpetualcoder

Nicht in IE 8 auf Win7 arbeiten x64 – Sly

Wenn Sie eine Klasse verwenden möchten, nicht tauchen will, dass Sie CSS direkt mit jquery einstellen.

Angenommen, Ihr Tisch-Tag ist: <table id="tb">..., Sie müssen nur Ihre html wie folgt festgelegt:

<head> 
<script language="javascript" type="text/javascript" src="jquery-min.js"/> 
</head> 

<body> 
    <script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     $("#tb tr:odd").css("background-color", "#F4F4F8"); 
    }); 
    </script> 

    <table id="tb"> 
     <tr><th>Id</th><th>Name</th></tr> 
     <tr><td>1</td><td>Junior</td></tr> 
     <!--more rows here... --> 
    </table> 
</body>

Quelle

2010-04-10 17:10:33

Antwort

Verwandte Themen