Jak zmienić naprzemienne wiersze w asp.net mvc

Używam <% foreach ...%> pętli, aby wyświetlić listę elementów na mojej stronie.Jak zmienić naprzemienne wiersze w asp.net mvc

Chcę dodać inny kolor tła dla stylu naprzemiennych rzędów na mojej liście. Znalazłem sposób, aby to zrobić, ale nie jestem z niego zadowolony, ponieważ wygląda na włamywacza.

Oto co mam zrobić, aby rozwiązać go tak daleko:

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

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

Czy istnieje najlepszych praktyk, które mi brakuje, że ludzie korzystają z tego scenariusza w ASP.NET MVC?

Źródło

2009-10-19 YeahStu

Znalazłem ten fragment kodu JQuery, który uważam za znacznie czyściejszy.

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

Wyjąłem logikę licznika. Ten skrypt JQuery manipuluje DOMem, aby ustawić klasę css dla każdego innego wiersza w pętli foreach.

Źródło

2009-10-19 02:44:23 YeahStu

Polecam to nie zupa tag dla Ciebie! – jfar

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

Widziałem tę linię powtarzaną w wielu podobnych kwestiach, ale jest ona zawsze poza kontekstem. Gdzie to umieścisz? (Jestem bardzo nowy w mvc, jquery i ogólnie w rozwoju sieci!). – Lewray

Jeśli chcesz go wyczyścić, polecam napisanie niestandardowego rozszerzenia HtmlHelper. Nie używałbym jquery, jak stu42 sugeruje po prostu dlatego, że lubię patrzeć na javascript wyłącznie dla zachowania. Idealnie i miejmy nadzieję, że w niedalekiej przyszłości użyjecie w tym celu czystego css. Do tego czasu zostawiam to w znaczniku, tak jak obecnie, ale z rozszerzeniem, które obsługuje logikę, wyciągając ją z aspx.

Źródło

2009-10-19 02:58:42 dustyburwell

Czy możesz podać przykład tego, jak to może wyglądać? – YeahStu

jeśli jesteś odważna typy kto chce nurkować w CSS3

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

Źródło

2009-10-19 03:09:53 Perpetualcoder

Działa w fire fox, chrome, ale nie w IE :( – Sly

nawet w IE 8? Nie testowałem na IE 8, ale wyobrażałem sobie, że będzie ... service pack !! – Perpetualcoder

Nie działa w IE 8 na Win7 x64 – Sly

Jeśli nie chcesz korzystać z klasy css można ustawić bezpośrednio z jQuery.

Załóżmy tag tabela: <table id="tb">..., po prostu trzeba ustawić html następująco:

<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>

Źródło

2010-04-10 17:10:33

Jak zmienić naprzemienne wiersze w asp.net mvc

Odpowiedz

Powiązane problemy