ASP.NET 리피터 대체 행 강조 표시

ASP.NET 리피터 대체 행 강조 표시

---

나는 미래에 많은 마크 업을 동기화하도록 강요 할 <itemtemplate/>전체 블로우 <alternatingitemtemplate/>를 포함하는 오버 헤드없이 내 대체 행의 div에 css 클래스를 단순히 추가하려고합니다 .

나는 같은 솔루션을 본 적이 http://blog.net-tutorials.com/2009/04/02/how-to-alternate-row-color-with-the-aspnet-repeater-control/ 난 어떤 사용하고 싶지만 여전히 나에게 "냄새가 나지"않습니다.

다른 사람이 더 유지 관리가 쉽고 간단한 솔루션을 가지고 있습니까? 이상적으로는 다음과 같은 작업을 할 수 있기를 바랍니다.

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

그러나 IsAlternatingRow확장 메서드를 사용하더라도 구현 방법을 알 수 없습니다 .

---

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

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

이는 UI 코드 (ascx 또는 aspx 파일)를 완전히 기반으로한다는 이점이 있으며 JavaScript에 의존하지 않습니다.

---

씨#

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'>"  %>

---

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

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

---

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

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

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

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