如何在ASP.NET Core Web应用中通过HTML滑块调用C#后端方法

问题根源 #

1. asp-page-handler属性仅在提交类控件（如<button>、<input type="submit">）上生效，无法直接作用于range类型的输入框。
2. 滑块本身不会自动触发表单提交，且原代码中asp-route-level未绑定滑块的实时值，导致后端无法接收参数。

方案一：表单自动提交（整页刷新） #

修改前端代码，通过JavaScript监听滑块变化并提交表单：

<form method="post" id="volumeForm">
    <!-- 增加name属性对应后端参数，添加隐藏字段指定handler -->
    <input type="range" min="1" max="100" name="level" id="volumeSlider" />
    <input type="hidden" asp-page-handler="Volume" />
</form>

<script>
// 监听滑块值变化，触发表单提交
document.getElementById('volumeSlider').addEventListener('input', function() {
    document.getElementById('volumeForm').submit();
});
</script>

后端OnPostVolume方法无需修改，name="level"会自动匹配方法的int level参数。

方案二：AJAX提交（无刷新） #

如果希望避免整页刷新，用AJAX异步提交：

<!-- 先添加CSRF令牌，ASP.NET Core默认需要验证 -->
@Html.AntiForgeryToken()
<input type="range" min="1" max="100" id="volumeSlider" />

<script>
document.getElementById('volumeSlider').addEventListener('input', function() {
    const level = this.value;
    // 获取CSRF令牌
    const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
    
    fetch(window.location.pathname, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `__RequestVerificationToken=${token}&handler=Volume&level=${level}`
    });
});
</script>

这种方式不会刷新页面，体验更流畅，后端方法保持不变即可。

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