如何使用 asp.net 中的类将数据库中的数据显示到 HTML 表中？

Question

我正在研究数据访问层和存储过程。我创建了一个“获取”类以从数据库表“汽车”中检索数据并将其显示在 HTML 表上。为此，我制作了一个名为“fetching”的方法。在此，我使用 ArrayList 但它不起作用。当我运行我的应用程序时，它会在 HTML 表格的每一列中显示以下内容。

'System.Collections.ArrayList'

这是我的存储过程：

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

这是我的“fetch”类，它有一个名为“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;
        }
    }
}

这是我的 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

这里有 2 个示例说明如何绑定 List<class> 并以表格格式获取数据。在这个 sn-p 中，我使用了 [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();