Razor Pages下拉列表值变更时调用OnGet重载编辑表单页面的咨询

完全可以在下拉列表选中值变更时触发OnGet方法调用，下面是两种适配你现有代码的常用实现方案，改动量都很小：

方案1：下拉框变更触发GET跳转（最简方案，无需修改后端逻辑） #

第一步：调整下拉框标签，添加选中状态匹配 #

<select id="categorySelector">
    <option value="" selected="selected">Seleziona una categoria</option>
    @foreach (var category in Model.Categories)
    {
        <!-- 新增selected判断，页面加载后自动匹配当前选中的分类 -->
        <option value="@category.Code" selected="@(Model.SelectedCategory?.Code == category.Code)">@category.Name</option>
    }
</select>

第二步：添加JS监听下拉框变更事件 #

在页面底部插入以下JS代码即可：

<script>
document.getElementById('categorySelector').addEventListener('change', function() {
    const selectedCode = this.value;
    // 用Razor内置方法生成基础路径，避免硬编码路由出错
    const baseUrl = '@Url.Page("Details")';
    if (selectedCode) {
        // 携带选中分类编码触发GET请求，命中OnGet方法
        window.location.href = `${baseUrl}?categoryCode=${encodeURIComponent(selectedCode)}`;
    } else {
        // 选中默认空选项时跳转无参数页面，清空表单
        window.location.href = baseUrl;
    }
});
</script>

实现逻辑 #

下拉框值变更时直接触发当前页的GET跳转，参数会自动绑定到OnGet方法的categoryCode入参，后端加载完对应分类数据后重新渲染页面，表单所有输入框会通过asp-for自动绑定SelectedCategory的对应值，完全符合你的需求。

方案2：AJAX局部刷新（无整页刷新，体验更好） #

如果不希望整页刷新，可以用AJAX调用OnGet接口拿数据后手动填充表单：

第一步：修改后端OnGet方法，支持返回Json数据 #

public async Task<IActionResult> OnGet(string categoryCode = null)
{
    this.Categories = await this._client.GetCategories();
    if (!string.IsNullOrWhiteSpace(categoryCode))
    {
        this.SelectedCategory = await this._client.GetCategoryDetails(categoryCode);
        // 判断是AJAX请求时直接返回分类Json数据
        if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
        {
            return new JsonResult(SelectedCategory);
        }
    }
    return Page();
}

第二步：JS改为AJAX请求逻辑 #

<script>
document.getElementById('categorySelector').addEventListener('change', async function() {
    const selectedCode = this.value;
    if (!selectedCode) {
        // 选中空选项时清空表单
        document.querySelector('form').reset();
        return;
    }
    // 发起AJAX GET请求调用OnGet
    const res = await fetch(`@Url.Page("Details")?categoryCode=${encodeURIComponent(selectedCode)}`, {
        headers: {
            "X-Requested-With": "XMLHttpRequest"
        }
    });
    const category = await res.json();
    // 手动填充表单字段
    document.querySelector('input[name="SelectedCategory.Code"]').value = category.code;
    document.querySelector('input[name="SelectedCategory.Name"]').value = category.name;
    document.querySelector('input[name="SelectedCategory.InboundTelephoneNumber"]').value = category.inboundTelephoneNumber;
    document.querySelector('input[name="SelectedCategory.OutboundTelephoneNumber"]').value = category.outboundTelephoneNumber;
    document.querySelector('input[name="SelectedCategory.FeePercentage"]').value = category.feePercentage;
    document.querySelector('input[name="SelectedCategory.MinFeeRealizable"]').value = category.minFeeRealizable;
    document.querySelector('input[name="SelectedCategory.MaxFeeRealizable"]').value = category.maxFeeRealizable;
    document.querySelector('input[name="SelectedCategory.OrderInMenu"]').value = category.orderInMenu;
});
</script>

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