如何使用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();