ASP.Net Repeater Control HTML UL LI CSS Styles

Updated on 10 Aug 2012,
Published on 16 Jul 2008

ASP.Net Repeater Control supports CSS styles and layouts also that provide the full support for basic HTML tags such as HTML ul and li tags to display the vertical or horizontal layout of list items in ItemTemplate. As we learnt in the previous tutorials of ASP.Net Repeater ControlDiv layout and ASP.Net Repeater Control Table, here we will use the combination of HTML Div tag, ul and li tags along with CSS style properties to improve the Repeater Control appearance on ASP.Net web page. CSS based div layouts are very popular these days and Repeater Control fulfills that requirement by providing its support for dynamic tag rendering for specified HTML tag and CSS styles to customize the appearance. You just need to bind the data with Repeater Control, retrieved from any Data Source such as XML, RSS or SQL server.

Repeater Examples:

You can see the live samples and examples of Repeater Control from the following links:

In this tutorial we have used the default Northwind database of SQL server and ASP.Net repeater control has been bound with its category table.

HTML UL LI and CSS Style Code for ASP.Net Repeater Control

Example 1

<ul>
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <li>
                <%#DataBinder.Eval(Container.DataItem,"categoryName") %>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

Example 2

CSS Code: Place this code inside the <head> section of ASP.Net page

div.menu ul { 
    margin: 0px; 
    padding: 0px; 
    width:500px; 
}

div.menu ul li { 
    display: inline; 
    list-style-type: none 
}

HTML Code:

<div class="menu">
<ul>
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <li>
                <%#DataBinder.Eval(Container.DataItem,"categoryName") %>
            </li>
        </ItemTemplate>
        <SeparatorTemplate><span style="margin-left:-3px;">,</span></SeparatorTemplate>
    </asp:Repeater>
</ul>
</div>

Output:

Get the output for above discussed codes from the following links:

Repeater HTML UL LI CSS Styles 01

Repeater HTML UL LI CSS Styles 02

Continue to next tutorial: ASP.Net Repeater OnItemCommand Event using C# to learn how to use command event of Repeater control.

Previous Tutorial

Next Tutorial