Razor Page控件事件：如何将.cshtml视图选中的PayeeID回传到后台代码文件

以下两种方案覆盖常规使用场景，可根据你的业务需求选择：

方案1：表单同步提交（适用于选值后刷新页面/跳转场景） #

无需额外写JS，依托原生表单提交能力即可完成值传递：

• 视图层.cshtml代码：

<form method="post">
    <!-- name属性值要和后端接收的参数/属性名完全一致，选中的value会自动带入提交参数 -->
    <select asp-for="SelectedPayeeId" asp-items="Model.PayeeList" name="SelectedPayeeId" onchange="this.form.submit()">
        <option value="">请选择收款人</option>
    </select>
</form>

如果不需要选完自动提交，删掉onchange属性，在表单内加提交按钮即可：<button type="submit">确认选择</button>

• 后端接收代码：
  如果你用的是Razor Pages，在PageModel中定义同名属性加绑定注解即可：

  public class YourPageModel : PageModel
  {
      [BindProperty]
      public int SelectedPayeeId { get; set; }
      // 你的其他属性，比如Payee下拉选项列表
      public List<SelectListItem> PayeeList { get; set; }
  
      public IActionResult OnPost()
      {
          // 此处直接用SelectedPayeeId即可，已经是选中的PayeeID
          // 执行你的数据库操作
          return Page();
      }
  }
  

  如果你用的是ASP.NET MVC，直接在Controller的Post方法中加同名参数即可：

  [HttpPost]
  public IActionResult YourActionName(int SelectedPayeeId)
  {
      // 直接使用SelectedPayeeId执行业务逻辑
      return View();
  }
  

方案2：AJAX异步提交（适用于选值后不刷新页面，局部更新内容场景） #

• 视图层.cshtml代码：

<select asp-items="Model.PayeeList" id="payeeSelect">
    <option value="">请选择收款人</option>
</select>
<!-- 页面自带的防伪令牌，post请求必须携带否则会被拦截 -->
@Html.AntiForgeryToken()

<script>
document.getElementById('payeeSelect').addEventListener('change', function() {
    const payeeId = this.value;
    if (!payeeId) return;

    fetch('@Url.Action("HandlePayeeSelect", "YourControllerName")', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        },
        body: JSON.stringify(payeeId)
    }).then(res => res.json())
    .then(result => {
        // 这里处理后端返回的结果，比如刷新其他下拉框的选项
    });
});
</script>

• 后端接收代码：
  Razor Pages 命名处理器示例：

  public IActionResult OnPostHandlePayeeSelect([FromBody] int payeeId)
  {
      // 拿到payeeId执行数据库操作
      return new JsonResult(new { success = true });
  }
  

  MVC Controller 示例：

  [HttpPost]
  public IActionResult HandlePayeeSelect([FromBody] int payeeId)
  {
      // 执行业务逻辑
      return Json(new { success = true });
  }
  

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