如何将SQL数据库数据填充到ASP.NET网页自定义HTML表格中

实现步骤 #

1. 先调整前端表格代码

你可以直接给<tbody>标签加上runat="server"和ID，操作起来比操作外层div更方便，同时删掉原来写了注释的静态空行，改成如下结构：

<div class="card">
  <div class="card-header border-transparent">
    <h3 class="card-title">Devices</h3>
    <div class="card-tools">
      <button type="button" class="btn btn-tool" data-card-widget="collapse">
        <i class="fas fa-minus"></i>
      </button>
      <button type="button" class="btn btn-tool" data-card-widget="remove">
        <i class="fas fa-times"></i>
      </button>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive" id="devices" runat="server">
      <table class="table m-0">
        <thead>
          <tr>
            <th>Host</th>
            <th>Name</th>
            <th>Status</th>
            <th>Description</th>
          </tr>
        </thead>
        <!-- 这里给tbody加了runat和ID -->
        <tbody id="deviceTbody" runat="server">
          <!-- 静态空tr全部删掉，动态生成 -->
        </tbody>
      </table>
    </div>
  </div>
</div>

2. 编写后台绑定数据的代码

在Dashboard.aspx.cs的Page_Load事件中添加如下逻辑，你需要根据自己的实际数据库配置修改连接字符串、SQL查询语句和字段名：

using System.Data;
using System.Data.SqlClient;
using System.Web.UI.HtmlControls;

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindDeviceData();
    }
}

private void BindDeviceData()
{
    // 替换为你自己的数据库连接字符串
    string connStr = "你的SQL Server连接字符串";
    // 替换为你自己的查询语句，字段要和你实际表的字段对应
    string sql = "SELECT Host, Name, Status, Description FROM 你的设备表名";
    
    DataTable dt = new DataTable();
    using (SqlConnection conn = new SqlConnection(connStr))
    {
        using (SqlCommand cmd = new SqlCommand(sql, conn))
        {
            conn.Open();
            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            sda.Fill(dt);
        }
    }

    // 清空之前的行，避免重复绑定
    deviceTbody.Controls.Clear();

    // 遍历数据，逐行生成表格
    foreach (DataRow row in dt.Rows)
    {
        HtmlTableRow tr = new HtmlTableRow();
        
        // 生成Host单元格
        HtmlTableCell tdHost = new HtmlTableCell();
        tdHost.InnerText = row["Host"].ToString();
        tr.Cells.Add(tdHost);
        
        // 生成Name单元格
        HtmlTableCell tdName = new HtmlTableCell();
        tdName.InnerText = row["Name"].ToString();
        tr.Cells.Add(tdName);
        
        // 生成Status单元格，如果你需要根据状态加样式可以在这里修改
        HtmlTableCell tdStatus = new HtmlTableCell();
        tdStatus.InnerText = row["Status"].ToString();
        // 示例：如果状态是在线就加绿色样式
        // if(tdStatus.InnerText == "在线") tdStatus.Attributes.Add("class", "text-success");
        tr.Cells.Add(tdStatus);
        
        // 生成Description单元格
        HtmlTableCell tdDesc = new HtmlTableCell();
        tdDesc.InnerText = row["Description"].ToString();
        tr.Cells.Add(tdDesc);

        // 把行添加到tbody中
        deviceTbody.Controls.Add(tr);
    }
}

补充说明

如果你不想修改前端给tbody加runat属性，也可以通过原来的devices控件查找子元素找到tbody节点，不过操作起来不如直接给tbody加ID方便，更推荐上面的方案。如果需要给单元格加自定义样式、点击事件等，只需要在生成HtmlTableCell的时候给对应的属性赋值即可，完全可以保留你原来设计的表格样式，不会像GridView那样生成多余的代码。

内容的提问来源于stack exchange，提问作者Allrounder