如何将List<List<string>>数据绑定到ASP.NET Core HTML页面？

我之前尝试将List<List<string>>类型的数据绑定到HTML页面，操作过程中的代码如下，最终已自行解决问题，分享给有需要的开发者。

控制器代码 #

namespace Cashiering_system.Areas.MainPage.Controllers
{
    [Area("MainPage")]
    public class MainController : Controller
    {
        public IActionResult MainPageLayout()
        {
            DatabaseOperation dbo = new DatabaseOperation();
            ViewBag.ListOfData = dbo.Read("Select * from database", 1 ,"MainController");
            return View();
        }
    }
}

数据读取方法（Read）代码 #

public List<List<string>> Read(string SQL, int column_no, string Function)
{
    List<List<string>> outterlist = new List<List<string>>();
    
    try
    {
        conn.Open();
        MySqlCommand cmd = new MySqlCommand(SQL, conn);
        MySqlDataReader rdr = cmd.ExecuteReader();
        while (rdr.Read())
        {
            List<string> innserlist = new List<string>();
            for (short i = 0; i < column_no; i++){
                innserlist.Add(rdr[i].ToString());
                System.Diagnostics.Debug.WriteLine("Loop: " + i + " Data :" + rdr[i].ToString());
            }
            outterlist.Add(innserlist);
            rdr.Close(); // 此处存在问题：会导致仅读取第一行数据就关闭DataReader
        }
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine(ex.ToString());
        innserlist.Add("Error Display data from, Function: " + Function);
        outterlist.Add(innserlist);
    }
    conn.Close();
    return outterlist;
}

解决方案 #

1. 修复Read方法的资源问题 #

原代码中在while (rdr.Read())循环内调用rdr.Close()，会导致DataReader仅读取第一行数据就被关闭，无法获取完整结果。同时建议使用using语句自动释放数据库资源，优化后的代码：

public List<List<string>> Read(string SQL, int column_no, string Function)
{
    List<List<string>> outterlist = new List<List<string>>();
    
    try
    {
        conn.Open();
        // 使用using语句自动释放MySqlCommand和MySqlDataReader资源
        using (MySqlCommand cmd = new MySqlCommand(SQL, conn))
        {
            using (MySqlDataReader rdr = cmd.ExecuteReader())
            {
                while (rdr.Read())
                {
                    List<string> innserlist = new List<string>();
                    for (short i = 0; i < column_no; i++)
                    {
                        innserlist.Add(rdr[i].ToString());
                        System.Diagnostics.Debug.WriteLine($"Loop: {i} Data :{rdr[i].ToString()}");
                    }
                    outterlist.Add(innserlist);
                }
            }
        }
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine(ex.ToString());
        var innserlist = new List<string>();
        innserlist.Add($"Error Display data from, Function: {Function}");
        outterlist.Add(innserlist);
    }
    finally
    {
        // 确保数据库连接被关闭
        if (conn.State == System.Data.ConnectionState.Open)
        {
            conn.Close();
        }
    }
    return outterlist;
}

2. 在Razor视图中绑定数据 #

在MainPageLayout.cshtml视图文件中，通过嵌套循环遍历ViewBag.ListOfData，将数据渲染为HTML表格（可根据需求调整为其他元素）：

@{
    // 将ViewBag中的数据转换为强类型
    var dataList = ViewBag.ListOfData as List<List<string>>;
}

@if (dataList != null && dataList.Any())
{
    <table border="1" cellpadding="4" cellspacing="0">
        @foreach (var row in dataList)
        {
            <tr>
                @foreach (var cell in row)
                {
                    <td>@cell</td>
                }
            </tr>
        }
    </table>
}
else
{
    <p>暂无数据或数据加载失败</p>
}

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