我正在创建一个时间轴,时间轴有一个在屏幕中心运行的栏,第一个帖子在左边,第二个在右边等等。
使用静态文本,我可以使用以下调用来确定要使用的css块:
<li id ="li_left" runat ="server" >
<div class="timeline-datetime">
<span class="timeline-time">8:19
</span><span class="timeline-date">Today</span>
</div>
<div class="timeline-badge blue">
<i class="fa fa-tag"></i>
</div>
<div class="timeline-panel">
<div class="timeline-header bordered-bottom bordered-blue">
<span class="timeline-title">New Items Arrived
</span>
<p class="timeline-datetime">
<small class="text-muted">
<i class="glyphicon glyphicon-time"></i>
<span class="timeline-date">Today</span>
-
<span class="timeline-time">8:19</span>
</small>
</p>
</div>
<div class="timeline-body">
<p>My Post Message</p>
</div>
</div>
</li>
然后在我的代码后面我用这个:
Private Sub li_left_Load(sender As Object, e As EventArgs) Handles li_left.Load
If IsEven(postCount) = True Then
li_left.Style.Add("display", "visible")
postCount += 1
Else
li_left.Style.Add("display", "none")
End If
End Sub
完整的正面代码:
<ul class="timeline">
<li class="timeline-node">
<a class="btn btn-palegreen">NOW</a>
</li>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<li id ="li_left" runat ="server" >
<div class="timeline-datetime">
<span class="timeline-time">8:19
</span><span class="timeline-date">Today</span>
</div>
<div class="timeline-badge blue">
<i class="fa fa-tag"></i>
</div>
<div class="timeline-panel">
<div class="timeline-header bordered-bottom bordered-blue">
<span class="timeline-title">New Items Arrived
</span>
<p class="timeline-datetime">
<small class="text-muted">
<i class="glyphicon glyphicon-time"></i>
<span class="timeline-date">Today</span>
-
<span class="timeline-time">8:19</span>
</small>
</p>
</div>
<div class="timeline-body">
<p>My Left Post Message</p>
</div>
</div>
</li>
<li class="timeline-inverted" id="li_right" runat ="server" >
<div class="timeline-datetime">
<span class="timeline-time">3:10
</span><span class="timeline-date">Today</span>
</div>
<div class="timeline-badge darkorange">
<i class="fa fa-map-marker font-120"></i>
</div>
<div class="timeline-panel bordered-right-3 bordered-orange">
<div class="timeline-header bordered-bottom bordered-blue">
<span class="timeline-title">Visit Appointment
</span>
<p class="timeline-datetime">
<small class="text-muted">
<i class="glyphicon glyphicon-time"></i>
<span class="timeline-date">Today</span>
-
<span class="timeline-time">3:10</span>
</small>
</p>
</div>
<div class="timeline-body">
<p>My Right Post Message</p>
<p>
<i class="orange fa fa-exclamation"></i>New task added for <span><a href="#" class="info">James Dean</a></span>
</p>
</div>
</div>
</li>
<li class="timeline-node">
<a class="btn btn-yellow">YESTERDAY</a>
</li>
<li class="timeline-node">
<a class="btn btn-info">11 DECEMBER</a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
后面的代码来控制使用哪个css black:
Dim postCount As Integer = 0
Private Sub li_left_Load(sender As Object, e As EventArgs) Handles li_left.Load
If IsEven(postCount) = True Then
li_left.Style.Add("display", "visible")
postCount += 1
Else
li_left.Style.Add("display", "none")
End If
End Sub
Private Sub li_right_Load(sender As Object, e As EventArgs) Handles li_right.Load
If IsEven(postCount) = True Then
li_right.Style.Add("display", "none")
Else
li_right.Style.Add("display", "visible")
postCount += 1
End If
End Sub
Noe第二个我在所有休息时添加了一个中继器,我不明白为什么。
添加了转发器的代码:
<ul class="timeline">
<li class="timeline-node">
<a class="btn btn-palegreen">NOW</a>
</li>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<li id ="li_left" runat ="server" >
<div class="timeline-datetime">
<span class="timeline-time">8:19
</span><span class="timeline-date">Today</span>
</div>
<div class="timeline-badge blue">
<i class="fa fa-tag"></i>
</div>
<div class="timeline-panel">
<div class="timeline-header bordered-bottom bordered-blue">
<span class="timeline-title">New Items Arrived
</span>
<p class="timeline-datetime">
<small class="text-muted">
<i class="glyphicon glyphicon-time"></i>
<span class="timeline-date">Today</span>
-
<span class="timeline-time">8:19</span>
</small>
</p>
</div>
<div class="timeline-body">
<p><%# DataBinder.Eval(Container.DataItem, "message") %></p>
</div>
</div>
</li>
<li class="timeline-inverted" id="li_right" runat ="server" >
<div class="timeline-datetime">
<span class="timeline-time">3:10
</span><span class="timeline-date">Today</span>
</div>
<div class="timeline-badge darkorange">
<i class="fa fa-map-marker font-120"></i>
</div>
<div class="timeline-panel bordered-right-3 bordered-orange">
<div class="timeline-header bordered-bottom bordered-blue">
<span class="timeline-title">Visit Appointment
</span>
<p class="timeline-datetime">
<small class="text-muted">
<i class="glyphicon glyphicon-time"></i>
<span class="timeline-date">Today</span>
-
<span class="timeline-time">3:10</span>
</small>
</p>
</div>
<div class="timeline-body">
<p><%# DataBinder.Eval(Container.DataItem, "message") %></p>
<p>
<i class="orange fa fa-exclamation"></i>New task added for <span><a href="#" class="info">James Dean</a></span>
</p>
</div>
</div>
</li>
<li class="timeline-node">
<a class="btn btn-yellow">YESTERDAY</a>
</li>
<li class="timeline-node">
<a class="btn btn-info">11 DECEMBER</a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
我得到的第一个错误是 Handles子句需要在包含类型或其基类型中定义一个WithEvents变量。
如果我打开.aspx.designer,我注意到li_left和li_right的删除已被删除,如果我在错误消息中手动添加它们就会消失但是当我运行时没有调用后面的代码。
非常感谢任何帮助。
编辑以显示工作答案
添加此内容并修复了所有内容:
Ok figured it out. I needed to process the logic in the repeater1.ItemBound
Private Sub Repeater1_ItemDataBound(sender As Object, e As RepeaterItemEventArgs) Handles Repeater1.ItemDataBound
Dim li_left = TryCast(e.Item.FindControl("li_left"), HtmlGenericControl)
If IsEven(postCount) = True Then
li_left.Style.Add("display", "visible")
Else
li_left.Style.Add("display", "none")
End If
Dim li_right = TryCast(e.Item.FindControl("li_right"), HtmlGenericControl)
If IsEven(postCount) = True Then
li_right.Style.Add("display", "none")
Else
li_right.Style.Add("display", "visible")
End If
postCount += 1
End Sub
答案 0 :(得分:2)
您不想使用li_left_Load和li_right_Load事件,而是希望为转发器使用OnItemDataBound事件。在那里,您可以在加载时为每个项目设置样式。