2013-10-11 15 views
1

我在Repeater中有一个ItemTemplate。这里是我的代码(原谅联样式,我只是把这个一起):有条件地更改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> 

输出,目前看起来是这样的: enter image description here

根据我的计划之内一定的条件下,我想更改项目模板的边框颜色(绿色,黄色或红色)。我可以在后面的代码中执行此操作吗?

回答

2

您可以使用Repeater控件的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