Страницы 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>

Ниже приведен один из заголовков столбцов представления списка, который при нажатии вызывает 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>

В приведенном выше коде заголовка таблицы вы можете видеть, что я жестко закодировал asp -route-rowPerPage со значением 10, это работает, но я застрял в том, что как получить выбранное значение из выпадающего списка выбора?

Answer 1

Поместите 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()
    {
        // ...
    }
}

Answer 2

Вы можете динамически изменить атрибут href этой ссылки в событии onchange выбора:

1. Добавить атрибут id (или имя) для тега a:

   <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('&'));
   }