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

<ul>
       <li>ajax</li>
       <li>browser</li>
       <li>cms</li>
       <li>css-html</li>
       <li>design</li>
      <li class="last">wordpress</li>
</ul>

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
LatestNews.jpg
LVL 9
AsishRajAsked:
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.
***ASPX***
    <div id="parentDiv" runat="server"></div>

****ASPX.CS****
    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");

        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();

        while(dr.Read())
        {
            HtmlGenericControl li = new HtmlGenericControl("li");
            li.InnerHtml = dr["fName"].ToString();
            ul.Controls.Add(li);
        }
        
        dr.Close();
        conn.Close();

        parentDiv.Controls.Add(ul);
    }

Open in new window

0
 
guru_samiConnect With a Mentor Commented:
You use a ListView Control  with DataPage or DataList Control
ListView sample:http://www.builderau.com.au/program/asp/soa/Display-data-with-NET-s-ListView-control/0,339028371,339287696,00.htm
0
 
AsishRajAuthor Commented:
thanks experts,

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


0
 
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.
0
 
AsishRajAuthor Commented:
Both the method works as i requested.

Thanks a lot for your help.
0
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.