Razor Pages - 如何将 select 下拉值插入 asp-route？

Question

我有一个下拉列表 select，其中包含我在剃刀列表中使用的每页行的值。剃须刀列表已配置分页、排序和过滤。

这里输入select：

<div class="col-3 pr-0">
                    <select asp-for="@Model.RowsPerPage" class="form-control" onchange="onChangeRowsPerPageSelect()" id="rowsPerPageSelect">
                        <option value="">Select</option>
                        <option value="10">10</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="500">500</option>
                        <option value="1000">1000</option>
                    </select>
                </div>

下面是列表视图的列 header 之一，单击它时将调用页面模型中的 OnGet 以及相关的排序依据和过滤器 url。

<th>
  <a asp-page="./Index" asp-route-sortOrder="@Model.NameSort"
    asp-route-rowsPerPage="10"
    asp-route-currentFilter="@Model.CurrentFilter">
    @Html.DisplayNameFor(model => model.TcpServer[0].Name)
  </a>
</th>

在上面的 table header 代码中，您可以看到我已经将 asp-route-rowsPerPage 的值硬编码为 10，这可行，但我坚持的是如何从 select 下拉框中获取 selected 值？

Answer 1

您可以在 select 的 onchange 事件中动态更改 link 的 href 属性：

为 a 标签添加 id（或名称）属性：

<a  id="testLink" asp-page="./Index" asp-route-sortOrder="@Model.NameSort"
asp-route-rowsPerPage="10"
asp-route-currentFilter="@Model.CurrentFilter">
@Html.DisplayNameFor(model => model.TcpServer[0].Name)

在onchange事件中修改href link :

<script>
function onChangeRowsPerPageSelect() {
    var selectedValue = $("#rowsPerPageSelect").val();

    var url = $("#testLink").attr("href").split('&');
    url[1] = "rowsPerPage=" + selectedValue;
    $("#testLink").attr('href', url.join('&'));
}

Answer 2

将 select 放入表单中并让它提交 onchange 事件：

<form method="get">
    <select asp-for="@Model.RowsPerPage" onchange="this.form.submit()">
        <!-- options... -->
    </select>

    <!-- put other filters inside the form as well -->
</form>

从模型中获取 RowsPerPage 值：

<a asp-route-rowsPerPage="@Model.RowsPerPage"
   .
   .
   .>
      @Html.DisplayNameFor(model => model.TcpServer[0].Name)
</a>

在后端，您应该使用 OnGet() 方法并为 RowsPerPage 启用绑定：

public class IndexModel : PageModel
{
    [BindProperty(SupportsGet = true)]
    public int RowsPerPage { get; set; } = 10;

    // Do the same for other filters...

    public void OnGet()
    {
        // ...
    }
}

Razor Pages - 如何将 select 下拉值插入 asp-route？

Razor Pages - How to insert a select dropdown value into an asp-route?

asp.net-core

razor-pages