asp.netのクラスを使用してデータベースからHTMLテーブルにデータを表示するにはどうすればいいですか？

Question

私はデータアクセス層とストアドプロシージャで取り組んでいます。私はデータベーステーブル "car"からデータを取り出し、それをHTMLテーブルに表示するクラスを "フェッチ"しました。このために、私は "フェッチ"と呼ばれる方法を作りました。ここではArrayListを使用していますが、動作しません。アプリケーションを実行すると、HTMLテーブルの各列に次のように表示されます。

'System.Collections.ArrayList' 

これは私のストアドプロシージャです：これは私のクラスが呼び出されるメソッドを持っていた "フェッチ" である

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

"フェッチ"

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; 
     } 
    } 
} 

これは私のHTMLテーブルコードです：

<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> 

これはバックエンドです私のHTMLテーブルのコード：

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

ここではList<class>を結合して、表形式のデータを取得する方法の2例があります。このスニペットでは、[GridView][1]と[Repeater][1]を使用しました。もちろん、より多くのソリューションがあります。

<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> 

そして

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; } 
} 

の背後にあるコードではまた、コントロールに直接

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

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