2013-10-11 3 views
1

Repeater 내에 ItemTemplate이 있습니다. 여기에 (난 그냥 함께이 던진 인라인 스타일을 용서) 내 코드입니다 : 내 프로그램 내에서 특정 조건을 바탕으로 enter image description here조건부로 ItemTemplate 테두리 색 변경

, 내가 좋아하는 것 :

 <asp:Repeater ID="Repeater1" runat="server"> 
      <ItemTemplate> 
       <div style="background-color: Silver; border-style: solid; display: inline-block; float: left; margin: 5px; overflow: hidden;"> 
        <div style="text-align: center"> 
         <asp:Label ID="lblImage" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "image") %>'></asp:Label> 
        </div> 
        <div> 
         <%# DataBinder.Eval(Container.DataItem, "url") %> 
        </div> 
        <div style="text-align: center;"> 
         <asp:HyperLink ID="requestLink" runat="server" Text="Original" NavigateUrl='<%# DataBinder.Eval(Container.DataItem, "requestUrl") %>'> 
         </asp:HyperLink> 
        </div> 
       </div> 
      </ItemTemplate> 
     </asp:Repeater> 

출력은, 현재, 다음과 같습니다 항목 템플리트의 테두리 색상을 변경합니다 (녹색, 노란색 또는 빨간색). 코드 뒤에이 작업을 수행 할 수 있습니까?

답변

2

리피터 컨트롤의 ItemDataBound 이벤트를 사용할 수 있습니다.

코드 뒤에 코드의 색상을 하드 코딩 한 것보다 유지하기 쉬운 CSS로 스타일을 제안하고 싶습니다.

다음 예제에서는 Panel 컨트롤을 래퍼로 사용하므로 논리에 따라 스타일을 지정할 수 있습니다.

<asp:Repeater ID="Repeater1" runat="server" 
    OnItemDataBound="Repeater1_ItemDataBound"> 
    <ItemTemplate> 
     <asp:Panel runat="server" ID="Panel1"> 
      <div style="text-align: center"> 
      <asp:Label ID="lblImage" runat="server" Text='<%# Eval("image") %>'/> 
      </div> 
      <div> 
       <%# Eval("url") %> 
      </div> 
      <div style="text-align: center;"> 
       <asp:HyperLink ID="requestLink" runat="server" 
       Text="Original" NavigateUrl='<%# Eval("requestUrl") %>'> 
       </asp:HyperLink> 
      </div> 
     </asp:Panel> 
    </ItemTemplate> 
</asp:Repeater> 


protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e) 
{ 
    if (e.Item.ItemType == ListItemType.Item || 
     e.Item.ItemType == ListItemType.AlternatingItem) 
    { 
     var panel1 = e.Item.FindControl("Panel1") as Panel; 
     var rating = ((Evaluation) e.Item.DataItem).Rating; 

     if (rating == "Good") 
     { 
      panel1.CssClass = "good"; 
     } 
     else if (rating == "Bad") 
     { 
      panel1.CssClass = "bad";  
     } 
    } 
} 
+0

굉장! 정확히 내가 무엇을 찾고 있었는지. 정말 고마워! CSS 스타일을 사용해야합니다. 나는 동의한다, 유지하는 것이 더 쉬울 것이다. – Kevin