如何在.cshtml页面中根据下拉框选中值展示对应结构不同的数据库表

针对你这个场景，用动态结构适配不同表结构是最简便的方案，不需要为每个表单独写视图，具体操作步骤如下：

后端核心处理 #

• 先做表名映射避免SQL注入，不要直接把真实数据库表名暴露给前端，定义一个预存的映射字典：

// 键是下拉框显示的名称，值是数据库真实表名
private readonly Dictionary<string, string> _tableMap = new()
{
    {"用户数据", "Users"},
    {"订单数据", "Orders"},
    {"商品数据", "Products"}
    // 其他表自行补充
};

• 用DataTable接收查询结果，它本身支持动态列结构，不需要提前为每个表定义实体类：

private DataTable QueryTableData(string tableKey)
{
    // 校验传入的选项是否合法，避免非法请求
    if (!_tableMap.TryGetValue(tableKey, out var realTableName))
    {
        throw new ArgumentException("无效的表选项");
    }
    var dataTable = new DataTable();
    // 替换为你自己的数据库连接字符串
    using var connection = new SqlConnection("DatabaseConnectionString");
    using var command = new SqlCommand($"SELECT * FROM [{realTableName}]", connection);
    using var adapter = new SqlDataAdapter(command);
    adapter.Fill(dataTable);
    return dataTable;
}

• 写接口返回结构化数据给前端：

public IActionResult GetTableData(string tableKey)
{
    var dt = QueryTableData(tableKey);
    // 提取所有列名
    var columns = dt.Columns.Cast<DataColumn>().Select(c => c.ColumnName).ToList();
    // 提取所有行数据
    var rows = dt.AsEnumerable().Select(row => columns.ToDictionary(col => col, col => row[col])).ToList();
    return Json(new { columns, rows });
}

前端交互实现 #

• 先在index.cshtml里定义下拉框和表格容器：

<select id="tableSelector">
    <!-- 可以直接从后端遍历_tableMap渲染选项 -->
    @foreach (var item in _tableMap)
    {
        <option value="@item.Key">@item.Key</option>
    }
</select>
<!-- 表格渲染容器 -->
<div id="tableContainer"></div>

• 监听下拉框变化事件，动态生成表格：

document.getElementById('tableSelector').addEventListener('change', function() {
    const selectedKey = this.value;
    fetch(`/你的控制器名/GetTableData?tableKey=${encodeURIComponent(selectedKey)}`)
        .then(res => res.json())
        .then(data => {
            let tableHtml = '<table border="1" cellpadding="8">';
            // 生成表头
            tableHtml += '<thead><tr>';
            data.columns.forEach(col => {
                tableHtml += `<th>${col}</th>`;
            });
            tableHtml += '</tr></thead><tbody>';
            // 生成行数据
            data.rows.forEach(row => {
                tableHtml += '<tr>';
                data.columns.forEach(col => {
                    tableHtml += `<td>${row[col] ?? ''}</td>`;
                });
                tableHtml += '</tr>';
            });
            tableHtml += '</tbody></table>';
            document.getElementById('tableContainer').innerHTML = tableHtml;
        });
})

补充说明 #

如果需要对日期、金额等特殊格式的列做展示优化，只需要在前端生成单元格的时候加字段判断做对应的格式化即可，不需要修改后端逻辑。

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