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

SheoNarayan
Posted by in ASP.NET category on for Intermediate level | Points: 250 | Views : 8877 red flag

In this article, we shall learn how to list collection of records in the ordered or un-ordered list with custom look and feel using asp: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

 
You can watch the video of this article at http://www.fundoovideo.com/video/177/how-where-to-use-repeater-control

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();

}

 


In the above code we have used ADO.NET code to connect to the database and fetch the records and populated to the asp:Repeater control.


OUTPUT


Picture 1

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.

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)