Database Records display like list<li>

Hello Experts

I am trying to create a Latest News section on homepage. Refer attachment for screenshot.

the latest news details are coded like this

      <li class="last">wordpress</li>

now i cant understand how can i get it populated with database records. i know how to get the record set from the database but i am unable to get the User interface exactly like the screenshot.

I dont mind if i have to use datagrid, gridview, tables or anything but i need get the same look.

how can i achieve the desired result. Appreciate you help
Who is Participating?
ddayx10Connect With a Mentor Commented:
Sometimes if I have an html layout that is working for me and I want to model it from a datasource such as SQL I will emit exactly the HTML I want from the code behind like this:

See EX:

Of course you'd have to add attributes like "class" and more elements like youre paging and title, but if you already have that working in HTML it's pretty cool to re-create it from code behind using data from SQL.
    <div id="parentDiv" runat="server"></div>

    protected void Page_Load(object sender, EventArgs e)
        SqlConnection conn = new SqlConnection(string.Format(@"Data Source=.\SQLEXPRESS;Integrated Security=True"));
        SqlCommand cmd = new SqlCommand("SELECT fName FROM DevTable",conn);

        HtmlGenericControl ul = new HtmlGenericControl("ul");

        SqlDataReader dr = cmd.ExecuteReader();

            HtmlGenericControl li = new HtmlGenericControl("li");
            li.InnerHtml = dr["fName"].ToString();


Open in new window

guru_samiConnect With a Mentor Commented:
You use a ListView Control  with DataPage or DataList Control
ListView sample:,339028371,339287696,00.htm
AsishRajAuthor Commented:
thanks experts,

let me evaluate both the options and i will get back with the results.

Saqib KhanSenior DeveloperCommented:
you can also simply create a Literal Control and keep appending text to it and then assign its text value to Page's Div.

However I loved ddayx10's Solution. Neat & Clean.
AsishRajAuthor Commented:
Both the method works as i requested.

Thanks a lot for your help.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.