Search code examples
cssasp.netvb.netwebformsrepeater

ASP.net Webforms runat server call not working when I add repeater

I'm creating a timeline, the timeline has a bar running down center of screen, first post is on left, second on right etc etc.

With static text I can use the following call to figure out which block of css to use:

<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>

Then in my code behind I use this:

    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

Full front code:

<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>

And code behind to control which css black to use:

     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 the second I add a repeater in everything breaks and I don't understand why.

Code with repeater added:

    <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>

First error I get is Handles clause requires a WithEvents variable defined in the containing type or one of its base type.

If I open the .aspx.designer I notice my withevents for the li_left and li_right have been removed, if I manually add them back in the error messages go away but the code behind is not being called when I run.

Any help would be greatly appreciated.

edit to show working answer

Add this and it fixed everything:

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
Solution

  • Rather than use your li_left_Load and li_right_Load events, you will want to use the OnItemDataBound event for the repeater. There, you can set the styles for each item as you load them.