How to render ordered list or un-ordered list (bulleted) using Repeater control?

Repeater

Repeater control is a data-bound control that provides us maximum amount of flexibility in terms of layout in rendering the collection of records. As the name would suggest, this control is meant for displaying /repeating the similar kind of data again and again. This is quite powerful control but not very widely used and the probable reasons could be (i) there is more work to do for developer in this case compared to other list controls. (ii) For many scenarios, other controls would be preferable because of re-usability, customizability etc

Get 500+ ASP.NET web development Tips & Tricks and ASP.NET Online training here.

In the previous article, we learnt about How & where to use Repeater control? In this article, we shall learn how to render ordered list or un-ordered list (bulleted) using Repeater control?

Video of this article

ASPX PAGE

 
<asp:Repeater ID="Repeater1" runat="server" EnableViewState="false">
<HeaderTemplate><ol></HeaderTemplate>
<ItemTemplate>
<li><b><%# Eval("FirstName") + " " + Eval("LastName") %></b>, Age: <%#
Eval("Age") %> | Number : <%# Eval("AutoId") %> | Is Active : <%# Eval("Active")
%></li>
</ItemTemplate>
<FooterTemplate></ol></FooterTemplate>
</asp:Repeater>

To bring the Ordered list through the Repeater control, we can keep the “<ol>” into the HeaderTemplate, wrap the ItemTemplate into “<li>” and “</li>” and keep “</ol>” into the FooterTemplate. Binding the repeater shall show something like below picture 1.

CODE BEHIND

string _connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GetData();
}
}

private void GetData()
{
DataTable table = new DataTable();
// get the connection
using (SqlConnection conn = new SqlConnection(_connStr))
{
// write the sql statement to execute
string sql = "SELECT AutoId, FirstName, LastName, Age, Active FROM PersonalDetail ORDER By AutoId";
// instantiate the command object to fire
using (SqlCommand cmd = new SqlCommand(sql, conn))
{
// get the adapter object and attach the command object to it
using (SqlDataAdapter ad = new SqlDataAdapter(cmd))
{
// fire Fill method to fetch the data and fill into DataTable
ad.Fill(table);
}
}
}
Repeater1.DataSource = table;
Repeater1.DataBind();
}
 

OUTPUT

In case we want to render Unordered list (bullet list), we can change “ol” to “ul” and bullet list shall render as shown below.

Hope this article was useful. Thanks for reading.

Keep reading my forth coming articles. To read my series of articles on ASP.NET,click here.