Razor页面（非MVC）下拉列表自动回发功能实现问题求助

问题分析 #

你的现有代码存在两处核心问题：

1. 前端<select>标签语法错误：new { onchange = "DoPostBack();" }是MVC HtmlHelper写法，Razor页面直接写HTML属性即可，无需此语法
2. 后端方法不符合Razor页面请求规则：Razor页面不支持直接调用普通方法，需遵循OnPost/OnGet命名规范处理请求

方案一：表单提交式回传（刷新页面） #

适合需要刷新页面展示结果的场景

前端代码

<form method="post">
    <select id="ddlDList" class="form-control" name="PredefineID" asp-items="@Model.ListModes" onchange="this.form.submit();">
        <option value="0">Please select</option>
    </select>
    <!-- Razor页面Post请求必须包含防伪造令牌 -->
    @Html.AntiForgeryToken()
</form>

后端代码（Razor页面.cs文件）

// 处理表单Post请求，PredefineID自动绑定下拉框选中值
public IActionResult OnPost(int PredefineID)
{
    // 编写选中选项后的业务逻辑
    string listdefine = ""; // 替换为你的实际处理逻辑
    
    // 将结果存入ViewData用于页面展示
    ViewData["ProcessResult"] = listdefine;
    
    // 返回当前页面刷新展示结果
    return Page();
}

方案二：AJAX无刷新回传 #

无需刷新页面，适合异步加载数据的场景

前端代码

<select id="ddlDList" class="form-control" name="PredefineID" asp-items="@Model.ListModes">
    <option value="0">Please select</option>
</select>
<!-- 展示返回结果的容器 -->
<div id="resultContainer"></div>

<script>
// 监听下拉框变化事件
document.getElementById('ddlDList').addEventListener('change', function() {
    const selectedValue = this.value;
    // 选中默认选项时不触发回传
    if (selectedValue === '0') return;

    // 发送Post请求到后端指定处理方法
    fetch('?handler=DoPostBack', {
        method: 'POST',
        headers: {
            // 携带防伪造令牌验证请求合法性
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value,
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        // 传递选中的参数
        body: `PredefineID=${selectedValue}`
    })
    .then(response => response.text())
    .then(data => {
        // 将后端返回结果展示到页面
        document.getElementById('resultContainer').textContent = data;
    })
    .catch(error => console.error('请求出错:', error));
});
</script>
@Html.AntiForgeryToken()

后端代码（Razor页面.cs文件）

// 处理AJAX请求的方法，命名规则为OnPost[HandlerName]
public IActionResult OnPostDoPostBack(int PredefineID)
{
    // 编写业务逻辑
    string listdefine = ""; // 替换为你的实际处理逻辑
    
    // 返回文本结果给前端
    return Content(listdefine);
}

关键注意事项 #

• Razor页面后端请求处理方法必须遵循OnPost/OnGet前缀命名规则，自定义方法需添加HandlerName（如OnPostDoPostBack对应前端?handler=DoPostBack）
• 所有Post请求必须携带防伪造令牌，否则会被Razor页面默认验证拦截
• 下拉框name属性值需与后端方法参数名一致，才能实现自动参数绑定

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