如何将变量从 Razor Pages 中的 select 列表路由到另一个页面

Question

这可能有一个简单的解决方案，但我现在已经苦苦挣扎了一段时间。

我有一个带有 select 列表的表单，我想 select 一个项目，然后使用同一表单中的按钮将该项目值发送到新页面。出于某种原因，我无法弄清楚如何保存项目价值，我不知道我错过了什么。

第 1 页html

<form method="post" class="container">
    <h4>Generate printable list by lab</h4>
    <div class="form-group form-row">
        <select asp-for="LabNumberToFilter" asp-items="Model.LabNumberListOptions" class="form-control col-md-2">
            <option value="">Select a lab number</option>
        </select>
        <span asp-validation-for="LabNumberToFilter" class="text-danger"></span>
        <a class="btn btn-info btn-lg col-md-2" asp-page="./Page2"
               asp-route-labNumber="@Model.LabNumberToFilter" />Create List<a/>
    </div>
</form>

第1页型号

[BindProperty]
public int LabNumberToFilter { get; set; }
public SelectList LabNumberListOptions { get; set; }

public async Task<IActionResult> OnGetAsync() {
     (…)
 
     LabNumberListOptions = new SelectList(_context.LabTours, nameof(LabTour.LabNumber), nameof(LabTour.LabNumber));

     return Page();
}

第 2 页html

@page "{labNumber:int?}"
(…)

第2页型号

public int LabNumber { get; set; }

public IList<LabTour> LabTourList { get; set; }

public async Task OnGetAsync(int? labNumber)
{
    LabNumber = labNumber.Value;
    LabTourList = await _context.LabTours.Where(l => l.LabNumber == LabNumber).ToListAsync();
}

如果我为我的 LabNumberToFilter 设置默认值，按钮会正确路由默认值，所以问题是我的 select 列表没有 save/use 新的当我点击重定向到第 2 页的按钮时输入的值。我做错了什么？

Answer 1

我建议使用 datalist

您必须循环加载它，然后您可以从输入中访问值，例如

    <form method="post">
         <input type="text" asp-for="LabNumberToFilter" list="labNumbers" placeholder="Select or enter a lab number"/>
         <datalist id="labNumbers">
                    @foreach (var labNum in Model.LabNumberListOptions)
                    {
                        <option value="@labNum"></option>
                    }
         </datalist>
         <button type="submit" ...
    </form>

Answer 2

在指向第 2 页的表单中指定一个操作。您可以通过显式设置操作属性来执行此操作：

<form method="post" action="/Page2">

或者通过将页面名称传递给 asp=page 属性：

<form method="post" asp-page="/Page2">

然后在Page2中，将[BindProperty]属性添加到public属性中，与[=33中的asp-for属性指定的参数同名=] 元素 (LabNumberToFilter):

[BindProperty]
public int LabNumberToFilter { get; set; }

这将捕获发布的值。您不需要处理程序方法或路由模板中的参数。

请注意，表单的方法是 Post，因此页面 2 中的 OnGet 处理程序将不会执行。

有关 Razor Pages 中模型绑定的更多背景信息，请参阅此处：https://www.learnrazorpages.com/razor-pages/model-binding

如何将变量从 Razor Pages 中的 select 列表路由到另一个页面

How do I route a variable to another page from a select list in Razor Pages

asp.net-core

razor-pages

selectlist

asp.net-core-tag-helpers