ASP.NET Core Razor Pages中Chart.js如何通过输入框传参更新图表？

核心思路 #

放弃在Razor代码中直接绑定JS变量的方式，让JavaScript直接从DOM获取输入框的当前值，彻底避免服务器端与客户端代码的解析冲突。

具体实现步骤 #

1. 定义带标识的HTML输入框
   给两个数字输入框设置唯一id，方便JS精准获取值：

<input type="number" id="startIdx" placeholder="起始索引" min="0" />
<input type="number" id="endIdx" placeholder="结束索引" min="0" />
<button onclick="clickupdate()">更新图表范围</button>

2. 编写独立的clickupdate()函数
   在页面的<script>标签中直接读取输入框值，不需要依赖任何Razor变量：

function clickupdate() {
    // 从DOM获取输入框的当前数值
    const start = parseInt(document.getElementById('startIdx').value);
    const end = parseInt(document.getElementById('endIdx').value);

    // 基础合法性校验
    if (isNaN(start) || isNaN(end) || start < 0 || end < start) {
        alert('请输入有效的索引范围（结束索引需大于等于起始索引）');
        return;
    }

    // 更新Chart.js图表数据范围
    // 假设你的Chart实例已提前定义为chartInstance
    chartInstance.data.labels = originalLabels.slice(start, end + 1);
    chartInstance.data.datasets[0].data = originalData.slice(start, end + 1);
    chartInstance.update();
}

3. 预存原始图表数据
   提前在全局作用域保存从Razor模型传递来的原始数据，方便后续切片使用：

// 用Razor将模型数据序列化为JS可识别的格式
const originalLabels = @Html.Raw(Json.Serialize(Model.ChartLabels));
const originalData = @Html.Raw(Json.Serialize(Model.ChartData));

// 初始化Chart实例
const chartInstance = new Chart(document.getElementById('targetChart'), {
    type: 'line', // 或你的图表类型
    data: {
        labels: originalLabels,
        datasets: [{ data: originalData }]
    },
    options: { /* 你的图表配置 */ }
});

方案优势 #

• 彻底分离服务器端Razor代码与客户端JS逻辑，从根源解决CS0103编译错误。
• 实现逻辑简洁直接，无需额外的URL参数传递或复杂的绑定机制。
• 保留了Razor传递原始数据的能力，同时让客户端独立处理范围更新逻辑。

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