C# Razor重复使用分部视图时数据复用错误的解决需求

核心原因 #

出现数据复用的问题，通常是因为分部视图没有为每个实例维护独立状态——可能是DOM元素ID重复、JS全局变量污染、匿名类型传递的隐式绑定问题，或者分部视图被意外缓存导致的。

分步解决方案 #

1. 改用强类型ViewModel传递参数（替代匿名类型）

匿名类型在视图绑定中可能存在隐式匹配的不确定性，创建一个明确的ViewModel类来传递数据：

// 在项目中定义ViewModel类
public class WindroseChartViewModel
{
    public string YAxis { get; set; }
    public string ChartName { get; set; }
}

然后在主视图中调用分部视图时，使用这个ViewModel：

<div class="A">
    @{
        var yAxis1 = Model.GetWindroseReadings(0);
        await Html.RenderPartialAsync("Charts/Partial/ChartWindroseVariable", 
            new WindroseChartViewModel { YAxis = yAxis1, ChartName = "Chart1Hour" });
    }
</div>
<div class="B">
    @{
        var yAxis2 = Model.GetWindroseReadings(1);
        await Html.RenderPartialAsync("Charts/Partial/ChartWindroseVariable", 
            new WindroseChartViewModel { YAxis = yAxis2, ChartName = "Chart24Hour" });
    }
</div>

2. 确保分部视图内DOM元素ID唯一

分部视图中所有和图表相关的DOM元素（比如canvas、容器）必须使用传入的ChartName生成唯一ID，避免JS选择元素时混淆：

@model WindroseChartViewModel

<!-- 用ChartName生成唯一容器和canvas ID -->
<div id="@Model.ChartName-container" class="windrose-container">
    <canvas id="@Model.ChartName"></canvas>
</div>

<script>
// 仅针对当前实例的canvas初始化图表
(function() {
    var ctx = document.getElementById('@Model.ChartName').getContext('2d');
    var windroseChart = new Chart(ctx, {
        type: 'windrose',
        data: @Html.Raw(Model.YAxis),
        options: {
            // 配置项中如果涉及ID或名称，也要使用Model.ChartName区分
            title: {
                text: '@Model.ChartName'
            }
        }
    });
})();
</script>

3. 隔离JS变量避免全局污染

用立即执行函数表达式（IIFE）包裹图表初始化代码，确保每个实例的变量都是局部的，不会互相覆盖：

<script>
// IIFE隔离变量作用域
(function(chartId, chartData) {
    var ctx = document.getElementById(chartId).getContext('2d');
    new Chart(ctx, {
        type: 'windrose',
        data: chartData,
        // 其他配置
    });
})('@Model.ChartName', @Html.Raw(Model.YAxis));
</script>

4. 禁用分部视图的不必要缓存

如果分部视图被框架缓存，会导致第二次调用返回第一次的内容。可以在分部视图顶部添加禁用缓存的代码：

@{
    // 禁止当前分部视图被缓存
    ResponseCache.SetNoStore();
}

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