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 Control Div 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.
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.
CSS Code: Place this code inside the <head> section of ASP.Net page
<style type="text/css">
body {
font-family:arial; font-size:12px
}
div.menu ul {
div.menu ul li {
display:inline; list-style-type:none
</style>
HTML Code: Place this code inside the form tag
Code Example 1:
<div>
<ul style="">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<li><%#DataBinder.Eval(Container.DataItem,"categoryName") %></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
Output:
Code Example 2:
<div class="menu">
<ul>
<asp:Repeater ID="Repeater2" runat="server">
<SeparatorTemplate><span style="margin-left:-3px;">,</span></SeparatorTemplate>
You can download the Free C# source code for ASP.Net Repeater Control HTML UL LI CSS Styles below:
repeater-ul-li.zip (2.71 kb)
Currently rated 5.0 by 1 people
Tags: asp.net 2.0, c# code, css tutorials, asp.net repeater control, download source code, html ul tag, html li tag, asp.net repeater ul li, asp.net repeater css styles, c# repeater div layout, asp.net repeater table, asp.net repeater datasource, repeater separatortemplate, repeater itemtemplate, html div tag, css display property, css list-style-type, free c# tutorials, free source code
8/23/2008 9:00:54 PM
