ASP.NET Core中带查询参数时reset按钮无法重置select标签助手怎么办

使用ASP.NET Core 7开发的表单中，type="reset"按钮在URL无查询参数时能正常重置表单，但URL带有过滤后的查询参数（如https://localhost:44331/admin/course?PageIndex=1&PageSize=10&AgeCategory=1）时，无法重置select标签助手的选项，其他表单元素也无法回到初始状态。

表单代码如下：

<form asp-area="admin" asp-controller="course" asp-action="index" method="get" id="filter-form">
    <input type="hidden" asp-for="PageIndex" />
    <input type="hidden" asp-for="PageSize" />

    <div class="mb-3">
        <label class="form-label"> Title:</label>
        <input asp-for="Title" class="form-control">
    </div> 

    <div class="mb-3">
        <label class="form-label"> Age Category:</label>
        <select class="form-select" asp-for="AgeCategory" asp-items="Html.GetEnumSelectList<AgeCategoryEnum>()"></select>
    </div>

    <div class="modal-footer">
        <button type="reset" class="btn btn-warning">
            <i class="bi bi-repeat"></i>
            reset
        </button>
        <button type="submit" class="btn btn-primary">Filter</button>
    </div>
</form>

原生type="reset"按钮的行为是将表单元素恢复到页面加载时的初始值。当URL带有查询参数时，ASP.NET Core的标签助手会自动把这些参数值填充为表单元素的初始值，所以此时点击reset只会恢复到参数对应的状态，而非清空或回到默认状态。

方案一：直接跳转到无参数的初始页面（最简便） #

修改重置按钮为普通按钮，绑定点击事件直接跳转到不带查询参数的控制器方法：

1. 修改重置按钮的type为button并添加ID：

<button type="button" class="btn btn-warning" id="reset-btn">
    <i class="bi bi-repeat"></i>
    reset
</button>

2. 添加JavaScript代码：

document.getElementById('reset-btn').addEventListener('click', function() {
    // 生成无参数的页面URL
    window.location.href = '@Url.Action("index", "course", new { area = "admin" })';
});

这种方式直接回到初始页面，所有过滤参数都会被清空，实现成本最低。

方案二：手动重置表单元素并提交 #

如果需要保留表单在当前页面重置而非跳转，可以手动清空各元素值再提交：

document.getElementById('reset-btn').addEventListener('click', function() {
    const form = document.getElementById('filter-form');
    
    // 清空标题输入框
    form.querySelector('[asp-for="Title"]').value = '';
    // 重置select到第一个选项
    form.querySelector('[asp-for="AgeCategory"]').selectedIndex = 0;
    // 重置分页参数到默认值（根据你的业务调整）
    form.querySelector('[asp-for="PageIndex"]').value = '1';
    form.querySelector('[asp-for="PageSize"]').value = '10';
    
    // 提交表单，触发无参数的查询
    form.submit();
});

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