풀 블로우 없이 ASP.NET 중계기 대체 행 강조 표시

풀 블로우 없이 ASP.NET 중계기 대체 행 강조 표시

저는 단순히 cs 클래스를 내의 대체 행에 있는 디바에 추가하는 것을 달성하려고 노력하고 있습니다.<itemtemplate/>일거에 실패하지 않고.<alternatingitemtemplate/>앞으로도 많은 마크업을 동기화할 수밖에 없습니다.

제가 사용하고 싶은 http://blog.net-tutorials.com/2009/04/02/how-to-alternate-row-color-with-the-aspnet-repeater-control/ 같은 솔루션을 본 적이 있지만, 이 솔루션은 여전히 제게 "smell"되지 않습니다.

더 유지보수 가능하고 간단한 솔루션을 가진 사람이 있습니까?이상적으로 저는 다음과 같은 일을 하고 싶습니다.

<asp:repeater id="repeaterOptions" runat="server">
        <headertemplate>
            <div class="divtable">
                <h2>Other Options</h2>
        </headertemplate>
        <itemtemplate>
                <div class="item <%# IsAlternatingRow ? "dark" : "light" %>">

하지만 어떻게 구현해야 할지 모르겠어요.IsAlternatingRow- 확장 방법을 사용하더라도 말입니다.

자체 변수(증가 카운터 또는 부울)를 관리할 필요가 없습니다. 내장 속성이 2로 분할되는지 확인하고 이를 사용하여 CSS 클래스를 설정할 수 있습니다.

class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>"

이는 UI 코드(ascx 또는 aspx 파일)를 완전히 기반으로 하며, 자바스크립트에 의존하지 않는다는 장점이 있습니다.

C#

class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>"

VB

class="<%# iif(Container.ItemIndex Mod 2 = 0,"","alternate") %>"

이것이 나를 도와줬습니다.

class='<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>'

이전 답변에서 "서버 태그가 제대로 형성되지 않았습니다." 오류가 발생했습니다. 오류가 발생했습니다.

JQuery로 클래스를 적용합니다.

$('.divtable > div:odd').addClass('dark');
$('.divtable > div:even').addClass('light');

대신 jQuery를 사용할 수 있습니다.이전 질문에 대한 이 답변이 도움이 될 수 있습니다. jQuery Zebra 선택기

약간의 수정: 빈 클래스는 다음과 같은 방법으로 제거할 수 있습니다.

  <%# Container.ItemIndex % 2 == 0 ?  "<tr>" : "<tr class='odd'>"  %>

코드가 필요 없습니다.순수 CSS 솔루션은 다음과 같습니다.

.item:nth-child(odd){background-color: #ccc}
.item:nth-child(){background-color: #ddd}

https://developer.mozilla.org/en-US/docs/Web/CSS/ :n번째 자식

IsAlternatingRow는 보호되는 속성일 수 있으며 ItemDataBound 또는 ItemCreated 이벤트에 설정됩니다.

protected void rpt_ItemDataBound(object sender, EventArgs e)
{
    IsAlternatingRow = !IsAlternatingRow;
}

언급URL : https://stackoverflow.com/questions/847806/asp-net-repeater-alternate-row-highlighting-without-full-blown-alternatingitemt