Razor 页面 - 如何将选择下拉值插入到 asp 路由中?

Question

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

此处的选择输入：

<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>

下面是列表视图的列标题之一，单击该列标题时，将使用关联的排序依据和筛选 URL 在页面模型中调用 OnGet。

<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>

在上面的表标题代码中，您可以看到我已经硬编码了值为 10 的 asp-route-rowsPerPage，这有效，但我坚持的是如何从选择下拉框中获取所选值？

Answer 1

将选择放在表单中，并让它提交更改事件：

<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()
{
// ...
}
}

Answer 2

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

1. 为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)
   

2. onchange事件中修改 href 链接：

   <script>
   function onChangeRowsPerPageSelect() {
   var selectedValue = $("#rowsPerPageSelect").val();
   var url = $("#testLink").attr("href").split('&');
   url[1] = "rowsPerPage=" + selectedValue;
   $("#testLink").attr('href', url.join('&'));
   }