How to display data from database into HTML tables using classes in asp.net?

Question

I am working on Data Access Layer and Stored Procedures. I made a class "fetching" to retrieve data from database table "car" and display it on HTML table. For this, I made a method called "fetching". In this, I use ArrayList but it not working. When I run my application, it displays following in each column of HTML table.

'System.Collections.ArrayList'

This is my stored procedure:

create proc sp_experiment
as
select Id, car name, engine number,nameplate from car

This is my class "fetch" which have a method called "fetching"

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Collections;

public class fetch
{
private static SqlCommand cmd;
private static SqlDataReader sdr;
private static ArrayList ht;
public static ArrayList fetching()
{
    using (cmd = new SqlCommand())
    {
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.CommandText = "sp_experiment";
        cmd.Connection = getconnected.getconnection();
        using (sdr = null)
        {
            using (sdr = cmd.ExecuteReader())
            {
                ht = new ArrayList();

                while (sdr.Read())
                {
                    ht.Add(sdr[0].ToString());

                    ht.Add(sdr[1].ToString());
                    ht.Add(sdr[2].ToString());
                    ht.Add(sdr[3].ToString());
                }
            }
            return ht;
        }
    }
}

This is my HTML table code:

<form id="formlist" runat="server">
    <table class="col-lg-12 col-md-12">
        <tr>
            <td>
                <table id="itemPlaceholderContainer" runat="server" class="table table-striped table-bordered table-hover">
                    <tr>
                        <th> ID</th>
                        <th>Car Name</th>
                        <th>Engine Number</th>
                        <th>Name Plate</th>
                    </tr>
                    <tr runat="server" id="exp">
                        <td runat="server" id="carid"></td>
                        <td runat="server" id="name"></td>
                        <td runat="server" id="carengineno"></td>
                        <td runat="server" id="carnameplate"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</form>

This is back end code of my HTML table:

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Web.UI.Adapters;

public partial class carlist : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        carid.InnerText = fetch.fetching().ToString();
        name.InnerText = fetch.fetching().ToString();
        carengineno.InnerText = fetch.fetching().ToString();
        carnameplate.InnerText = fetch.fetching().ToString(); 
    }
}

Answer 1

Here are 2 examples of how to bind a List<class> and get the data in a table format. In this snippet I've used [GridView][1] and a [Repeater][1]. There are of course more solutions.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="id" HeaderText="ID" />
        <asp:BoundField DataField="name" HeaderText="Car Name" />

        <asp:TemplateField HeaderText="Engine Number">
            <ItemTemplate>
                <%# Eval("engine") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name Plate">
            <ItemTemplate>
                <%# Eval("plate") %>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<table>
    <tr>
        <th>ID</th>
        <th>Car Name</th>
        <th>Engine Number</th>
        <th>Name Plate</th>
    </tr>
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <tr id="exp">
                <td><%# Eval("id") %></td>
                <td><%# Eval("name") %></td>
                <td><%# Eval("engine") %></td>
                <td><%# Eval("plate") %></td>
            </tr>
        </ItemTemplate>
    </asp:Repeater>
</table>

And in code behind

protected void Page_Load(object sender, EventArgs e)
{
    List<Car> cars = new List<Car>();
    for (int i = 0; i < 10; i++)
    {
        Car car = new Car();
        car.id = i;
        car.name = "Name " + i;
        car.engine = "Engine " + i;
        car.plate = "Plate " + i;
        cars.Add(car);
    }

    GridView1.DataSource = cars;
    GridView1.DataBind();

    Repeater1.DataSource = cars;
    Repeater1.DataBind();
}


class Car
{
    public int id { get; set; }
    public string name { get; set; }
    public string engine { get; set; }
    public string plate { get; set; }
}

You can also bind a datasource directly to the Control

SqlDataSource source = new SqlDataSource();
source.ConnectionString = Common.connectionString;
source.SelectCommand = "SELECT TOP 10 * FROM myTable";

GridView1.DataSource = source;
GridView1.DataBind();