在单个Razor页面展示两个SQL表遇重复数据问题求助

问题场景 #

在单个Razor页面展示TopStock和BottomStock两个SQL表的数据时，两个表格显示完全相同的内容，但单个表展示正常。

错误代码分析 #

后端错误代码 #

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Data.SqlClient;

namespace WebStoreTest.Pages
{
public class FreezerModel : PageModel
{
    public List<FreezerInfo> listFreezer = new List<FreezerInfo>();

    public void OnGet()
    {
        try
        {
            string connectionString = "Data Source=LAPTOP\\SQLEXPRESS;Initial Catalog=test;user id=sa;password=****;";
            using (SqlConnection connection = new SqlConnection(connectionString))
            {
                connection.Open();
                string sql = "SELECT * FROM TopStock";

                using (SqlCommand command = new SqlCommand(sql, connection))
                {
                    using (SqlDataReader reader = command.ExecuteReader())
                    {
                        while (reader.Read())
                        {
                            FreezerInfo TopStock = new FreezerInfo();
                            TopStock.id = reader.GetInt32(0);
                            TopStock.Description = reader.GetString(1);
                            TopStock.Quantity = reader.GetString(2);
                            listFreezer.Add(TopStock);
                        }
                    }
                }
            }
        }
        catch (Exception ex)
        {
        }
    }
}

public class FreezerInfo
{
    public int id;
    public string Description;
    public string Quantity;
 }

}


public class FreezerModel : PageModel
{
public List<FreezerInfo> listFreezer = new List<FreezerInfo>();

public void OnGet()
{
    try
    {
        string connectionString = "Data Source=LAPTOP\\SQLEXPRESS;Initial Catalog=test;user id=sa;password=****;";
        using (SqlConnection connection = new SqlConnection(connectionString))
        {
            connection.Open();
            string sql = "SELECT * FROM BottomStock";

            using (SqlCommand command = new SqlCommand(sql, connection))
            {
                using (SqlDataReader reader = command.ExecuteReader())
                {
                    while (reader.Read())
                    {
                        FreezerInfo BottomStock = new FreezerInfo();
                        BottomStock.Description = reader.GetString(1);
                        BottomStock.Quantity = reader.GetString(2);
                        listFreezer.Add(BottomStock);
                    }
                }
            }
        }
    }
    catch (Exception ex)
    {
    }
}
}

public class FreezerInfo
{
public int id;
public string Description;
public string Quantity;
}

前端错误代码 #

@page
@model WebStoreTest.Pages.FreezerModel
@{}


<br />
<h2>Top Freezer Stock</h2>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
    body {
        font-family: Arial;
        font-size: 10pt;
    }

    table {
        border: 1px solid #ccc;
        border-collapse: collapse;
        background-color: #fff;
    }

        table th {
            background-color: #B8DBFD;
            color: #333;
            font-weight: bold;
        }

        table th, table td {
            padding: 5px;
            border: 1px solid #ccc;
        }

        table, table table td {
            border: 0px solid #ccc;
        }
</style>
</head>
<body>
<table class="table">
<thead>
    <tr>
        <th>Description</th>
        <th>Quantity</th>
       </tr>
     

    @foreach (var TopStock in Model.listFreezer)
    {
        <tr>
            <td>@TopStock.Description</td>
            <td>@TopStock.Quantity</td>
         </tr>
    }
    
</table>

<table class="table">

    <tr>
        <th>Description</th>
        <th>Quantity</th>
    </tr>


    @foreach (var BottomStock in Model.listFreezer)
    {
        <tr>
            <td>@BottomStock.Description</td>
            <td>@BottomStock.Quantity</td>
        </tr>
    }

</table>
</body>
</html>

错误原因 #

1. 后端重复定义类：代码中重复定义了FreezerModel和FreezerInfo类，C#中同名类会被覆盖，最终只会执行第二个OnGet方法，仅读取BottomStock表的数据到listFreezer中。
2. 前端数据源重复：两个表格都绑定同一个Model.listFreezer集合，自然显示相同内容。

修正方案 #

修正后的后端代码 #

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Data.SqlClient;
using System.Collections.Generic;

namespace WebStoreTest.Pages
{
    public class FreezerModel : PageModel
    {
        // 分别定义两个列表存储两个表的数据
        public List<FreezerInfo> TopStockList { get; set; } = new List<FreezerInfo>();
        public List<FreezerInfo> BottomStockList { get; set; } = new List<FreezerInfo>();

        public void OnGet()
        {
            string connectionString = "Data Source=LAPTOP\\SQLEXPRESS;Initial Catalog=test;user id=sa;password=****;";
            
            // 读取TopStock数据
            using (SqlConnection connection = new SqlConnection(connectionString))
            {
                connection.Open();
                string sql = "SELECT * FROM TopStock";
                using (SqlCommand command = new SqlCommand(sql, connection))
                {
                    using (SqlDataReader reader = command.ExecuteReader())
                    {
                        while (reader.Read())
                        {
                            TopStockList.Add(new FreezerInfo
                            {
                                id = reader.GetInt32(0),
                                Description = reader.GetString(1),
                                Quantity = reader.GetString(2)
                            });
                        }
                    }
                }
            }

            // 读取BottomStock数据
            using (SqlConnection connection = new SqlConnection(connectionString))
            {
                connection.Open();
                string sql = "SELECT * FROM BottomStock";
                using (SqlCommand command = new SqlCommand(sql, connection))
                {
                    using (SqlDataReader reader = command.ExecuteReader())
                    {
                        while (reader.Read())
                        {
                            BottomStockList.Add(new FreezerInfo
                            {
                                Description = reader.GetString(1),
                                Quantity = reader.GetString(2)
                            });
                        }
                    }
                }
            }
        }
    }

    // 只需要定义一次FreezerInfo类
    public class FreezerInfo
    {
        public int id;
        public string Description;
        public string Quantity;
    }
}

修正后的前端代码 #

@page
@model WebStoreTest.Pages.FreezerModel
@{
}

<br />
<h2>Top Freezer Stock</h2>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }

        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            background-color: #fff;
        }

        table th {
            background-color: #B8DBFD;
            color: #333;
            font-weight: bold;
        }

        table th, table td {
            padding: 5px;
            border: 1px solid #ccc;
        }

        table, table table td {
            border: 0px solid #ccc;
        }
    </style>
</head>
<body>
    <!-- 绑定TopStockList -->
    <table class="table">
        <thead>
            <tr>
                <th>Description</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.TopStockList)
            {
                <tr>
                    <td>@item.Description</td>
                    <td>@item.Quantity</td>
                </tr>
            }
        </tbody>
    </table>

    <h2>Bottom Freezer Stock</h2>
    <!-- 绑定BottomStockList -->
    <table class="table">
        <thead>
            <tr>
                <th>Description</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.BottomStockList)
            {
                <tr>
                    <td>@item.Description</td>
                    <td>@item.Quantity</td>
                </tr>
            }
        </tbody>
    </table>
</body>
</html>

关键修改点 #

• 后端：合并重复的FreezerModel和FreezerInfo类，添加两个独立的列表TopStockList和BottomStockList，分别读取对应表的数据。
• 前端：两个表格分别遍历Model.TopStockList和Model.BottomStockList，绑定不同的数据源。

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