如何从局部视图的下拉列表更新Razor Pages模型中的值

IndexModel是我的主页，我通过_statusService获取数据并在局部视图_MyPartial中渲染。目前遇到的问题是，该局部视图内有一个ID为sel-options的下拉列表，我希望根据选中项获取对应的数据。刚接触Razor Pages，现有代码如下：

主页代码 #

@page
@model IndexModel
@{
    ViewData["Title"] = "Home";
}

<section class="hero-style-2">
    <div class="slider">
        ....
    </div>
</section>
<div id="partial-container">
    <partial name="_MyPartial" model="@Model.StatusReport" />
</div>

局部视图代码 #

@using Models.Entities;
@model StatusReport

@if (Model != null)
{
<div class="row">
  <div class="col-md">
    <label class="label-text" for="sel-options">Status</label>
  </div>
  <div class="col-md-2">
    <select id="sel-options" class="form-control label-text">
      <option value="Do" @(Model.Status == "Do" ? "selected" : "")>Done</option>
      <option value="Done" @(Model.Status == "Done" ? "selected" : "")>Done</option>
      <option value="Canceled" @(Model.Status == "Canceled" ? "selected" : "")>Canceled</option>
    </select>
  </div>
</div>
<div>
... other things to be done with StatusReport ...
</div>
}

IndexModel.cs代码 #

namespace Demo.Pages;

public class IndexModel : PageModel
{
  [BindProperty]
  public StatusReport StatusReport { get; set; } = new();
  [BindProperty]
  public string status { get; set; } = "Do";
  private readonly IStatusService _statusService;
  public IndexModel(IStatusService statusService)
  {
    _statusService = statusService;
  }
  public async Task<IActionResult> OnGet()
  {
    StatusReport = await _statusService.GetItemsWithSatus(status);
    return Page();
  }
}

要实现下拉选项切换时动态更新数据，需要结合Razor Pages后端方法与前端异步请求，具体步骤如下：

1. 新增后端异步处理方法 #

在IndexModel.cs中添加一个用于根据状态过滤数据的OnGet handler：

public async Task<IActionResult> OnGetFilterByStatus(string status)
{
    StatusReport = await _statusService.GetItemsWithSatus(status);
    // 返回更新后的局部视图
    return Partial("_MyPartial", StatusReport);
}

2. 前端添加下拉框事件监听 #

在主页的末尾添加JavaScript代码，监听下拉框的change事件，发起异步请求更新局部视图内容：

<script>
    // 获取下拉框元素
    const statusSelect = document.getElementById('sel-options');
    // 添加change事件监听
    statusSelect.addEventListener('change', async function() {
        const selectedStatus = this.value;
        // 发起GET请求到后端的FilterByStatus handler
        const response = await fetch(`?handler=FilterByStatus&status=${encodeURIComponent(selectedStatus)}`);
        
        if (response.ok) {
            // 获取返回的局部视图HTML
            const newPartialHtml = await response.text();
            // 替换页面上的局部视图容器内容
            document.getElementById('partial-container').innerHTML = newPartialHtml;
        }
    });
</script>

3. 修正下拉框初始选中状态（可选） #

当前局部视图的下拉框选项存在值重复（"Do"和"Done"都显示"Done"），建议统一选项值避免混淆，比如修改为：

<select id="sel-options" class="form-control label-text">
    <option value="Pending" @(Model.Status == "Pending" ? "selected" : "")>Pending</option>
    <option value="Done" @(Model.Status == "Done" ? "selected" : "")>Done</option>
    <option value="Canceled" @(Model.Status == "Canceled" ? "selected" : "")>Canceled</option>
</select>

同时将IndexModel中的默认status值改为"Pending"，保持初始状态一致。

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