Search code examples
asp.nettwitter-bootstrap-3repeater

show multiple data from database using repeater


Want to show 3 Items from database in one row. With this code repeater shows only 1 Item from database.

<asp:Repeater ID="rptItems" runat="server">
                    <HeaderTemplate>
                        <ul>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <div class="row">
                            <div class="col-md-4">

                                <h2><%# Eval("Title") %></h2>
                                <img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' width="200" height="200" />
                                <p>ISBN</p>
                                <p><%# Eval("ISBN") %></p>
                                <p>Description</p>
                                <p><%# Eval("Description") %></p>
                            </div>
                         </div>
                    </ItemTemplate>
                    <FooterTemplate>
                        </ul>
                    </FooterTemplate>
                </asp:Repeater>

Solution

  • This is css issue. I see that you use the bootstrap style, so move the <div class="row"> out side of the loop.

    <asp:Repeater ID="rptItems" runat="server">
                        <HeaderTemplate>
                            <ul>
                            <div class="row">
                        </HeaderTemplate>
                        <ItemTemplate>
                                <div class="col-md-4">
    
                                    <h2><%# Eval("Title") %></h2>
                                    <img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' width="200" height="200" />
                                    <p>ISBN</p>
                                    <p><%# Eval("ISBN") %></p>
                                    <p>Description</p>
                                    <p><%# Eval("Description") %></p>
                                </div>
                        </ItemTemplate>
                        <FooterTemplate>
                            </div>
                            </ul>
                        </FooterTemplate>
    </asp:Repeater>