如何根据下拉列表选择在卡片中显示数据库统计值？

现有代码的核心问题 #

1. 硬编码参数值：方法里固定string value = "Category"，没有接收前端传入的选中分类，导致无论下拉选什么，都只会查询分类为"Category"的数据。
2. 不支持全量统计：初始需要显示所有分类的总和，但当前SQL强制加了WHERE Category = @Category条件，无法实现全量计算。
3. 方法名拼写错误：TodtalValue应为TotalValue（笔误）。

修正后端方法 #

修改方法，让它接收分类参数，同时支持全量统计（当参数为null或空字符串时，查询所有分类的总和）：

// 修正方法名，添加分类参数
public decimal TotalValue(string? selectedCategory)
{
    // 根据是否传入分类参数，拼接不同的SQL
    string query;
    if (string.IsNullOrEmpty(selectedCategory))
    {
        // 全量统计：不添加WHERE条件
        query = "SELECT SUM(Quantity) AS Totalunit FROM OrderDetail";
    }
    else
    {
        // 指定分类统计：添加WHERE条件
        query = "SELECT SUM(Quantity) AS Totalunit FROM OrderDetail WHERE Category = @Category";
    }

    string sqlDataSource = _configuration.GetConnectionString("DefaultConnection");
    decimal total = 0;

    using (SqlConnection con = new SqlConnection(sqlDataSource))
    {
        con.Open();
        using (SqlCommand cmd = new SqlCommand(query, con))
        {
            // 只有当指定分类时，才添加参数
            if (!string.IsNullOrEmpty(selectedCategory))
            {
                cmd.Parameters.AddWithValue("@Category", selectedCategory);
            }

            using (SqlDataReader dr = cmd.ExecuteReader())
            {
                if (dr.HasRows && dr.Read())
                {
                    if (!dr.IsDBNull(0))
                    {
                        total = dr.GetDecimal(0);
                    }
                }
            }
        }
        // using块会自动关闭连接，无需手动调用con.Close()
    }
    return total;
}

前端交互逻辑（以ASP.NET Core Razor为例） #

假设你用的是Razor页面，需要给下拉列表绑定变更事件，调用后端接口更新卡片数据：

1. 下拉列表代码

<select id="categorySelect" asp-items="@ViewBag.Categories">
    <option value="">所有分类</option>
</select>
<div id="totalCard">当前总数量：<span id="totalQuantity">@Model.TotalQuantity</span></div>

2. JavaScript事件处理

document.getElementById('categorySelect').addEventListener('change', async function() {
    const selectedCategory = this.value;
    // 调用后端API获取统计值
    const response = await fetch(`/YourController/TotalValue?selectedCategory=${encodeURIComponent(selectedCategory)}`);
    const total = await response.json();
    // 更新卡片显示
    document.getElementById('totalQuantity').textContent = total;
});

3. 后端API接口（如果是Controller）

[HttpGet]
public IActionResult TotalValue(string? selectedCategory)
{
    decimal total = _yourService.TotalValue(selectedCategory);
    return Ok(total);
}

关键注意事项 #

• 确保下拉列表的选项值与数据库中Category字段的取值完全匹配（大小写、空格等），否则会出现查询无结果的情况。
• 数据库中如果Quantity字段可能为NULL，SUM(Quantity)会自动忽略NULL值，无需额外处理。
• 始终使用参数化查询（已在代码中实现），避免SQL注入风险。

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