Изменить количество элементов на странице, используя поле выбора в UmbracoV7

Question

Я использую Umbraco7 и создал представление, которое использует разбиение на страницы, чтобы отобразить список элементов, которые отлично работают, но теперь я хотел бы реализовать функциональность, которая позволит пользователю выбрать, сколько элементов в список на странице через поле выбора

Посмотреть

@{ 
    var SelectedPageSize = Request.Form["dropdownmenu"] ?? "1"; // Get the selectbox value or default to 1 

    string[] DropDownValues = {"1", "2", "3", "4"}; // values for the selectbox dropdowns 

    int PAGE_SIZE = int.Parse(SelectedPageSize); // parse those values 

    var SearchResults = Umbraco.TypedSearch(Query, searchProvider: "SiteSearchSearcher", useWildCards: false).OrderBy(r => r.SortOrder); 
    var TotalSearchResults = SearchResults.Count(); 
    var TotalPages = (int)Math.Ceiling((double)TotalSearchResults/PAGE_SIZE); 
    var CurrentPageNumber = 1; 
    bool Parsed = int.TryParse(Request.QueryString["page"], out CurrentPageNumber); 

    if (!Parsed || CurrentPageNumber < 1 || CurrentPageNumber > TotalPages) 
    { 
     CurrentPageNumber = 1; 
    } 

    <div class="containterdropdown"> 
     <div class="dropdown"> 
      Results Per Page 
     </div> 
     <select class="dropdownmenu" id="dropdownmenu" name="dropdownmenu"> 
     @foreach (var Item in DropDownValues) 
     { 
      <option value="@Item">@Item</option> 
     } 
     </select> 
    </div> 
}; 

Я хотел бы знать, как я могу получить значение из от выбора опции, после каждого изменения, в переменная с именем «SelectedPageSize». Я знаю, что мне понадобится какой-то javascript или ajax, но я ничего не знаю об одном из них, но я чувствую себя немного потерянным. Я пытался использовать ниже фрагмент JS, но я не уверен, что это на самом деле делать или как заставить его работать

$(document).ready(function() { 
('.containterdropdown').length) { 
     var drpDnwBox = $('.containterdropdown select'); 
     drpDnwBox.on('change', function() { $(this).parents('form').submit(); }); 

Любая помощь будет здорово ... Спасибо заранее.

Answer 1

В конце концов я получил выберите поле работать. Он позволяет пользователю выбирать, сколько элементов они будут перечислены на странице.

Посмотреть

var Query = Request.QueryString["q"] ?? ""; // The search term entered 
var PageSize = Request.QueryString["PageSize"] ?? "20"; // The selected page size or default value 
string[] DropDownValues = { "10", "20", "30", "40", "50" }; 

<div class="containterdropdown"> 
      <div class="dropdown"> 
       Results Per Page 
      </div> 
      <form method="get"> 
       <select class="dropdownmenu" id="dropdownmenu" name="dropdownmenu"> 
        @foreach (var Item in DropDownValues) 
        { 
         if (PageSize == Item) // used to retain the selected value 
         { 
          <option value="@Item" selected>@Item</option> 
         } 
         else 
         { 
          <option value="@Item">@Item</option> 
         } 
        } 
       </select> 
      </form> 
     </div> 

JS

<script> 
    $(function() { 
     var url = "@Model.Content.Url"; // get default url 
     $('.dropdownmenu').on('change', function() { 
      var SelectedValue = $('.dropdownmenu').val(); // on change assign the current selectbox value to the variable named "SelectedValue" 
      window.location.href = url + '?q=@Query&PageSize=' + SelectedValue; // Reload the page with URL + the serch term + the page size 
     }); 
    }); 
</script> 

Я поставил способ получить на форме, а затем вместо того, чтобы использовать Reqeust.Form использовали Request.QueryString.

Вышеуказанный JS добавит размер страницы к URL-адресу и перезагрузит страницу каждый раз, когда будет выбрано новое значение.

Answer 2

По внешнему виду вашего кода, вы получаете размер страницы первого высказывания:

var SelectedPageSize = Request.Form["dropdownmenu"] ?? "1"; 

Это означает, что вы читаете из Request.Form коллекции.

Если вы google вокруг, вы поймете, что Request.Form - это элементы в html form элемент.

Зная вышеуказанное утверждение, первое, что вы заметите, это то, что вам не хватает элемента формы (по крайней мере, из фрагмента кода, его нет), поэтому добавьте элемент формы в раскрывающийся список, например :

<div class="containterdropdown"> 
    <div class="dropdown"> 
     Results Per Page 
    </div> 
    <form id="myForm"> 
    <select class="dropdownmenu" id="dropdownmenu" name="dropdownmenu"> 
    @foreach (var Item in DropDownValues) 
    { 
     <option value="@Item">@Item</option> 
    } 
    </select> 
    </form> 
</div> 

тогда мы посмотрим на JQuery вы предоставили:

Я упростят вашу JQuery, чтобы что-то вроде:

$(document).ready(function() { 
    $('#dropdownmenu').change(function(){ 
     $("#myForm").submit(); 
    }); 
}) 

The Jquery сниппета выше среднего s:

при выпадающем меню id dropdownmenu изменяется, пожалуйста, отправьте форму id myForm, и потому, что ваш раскрывающийся список находится в форме, он будет отправлен, а затем при загрузке страницы ваш Request.Form ["dropdownmenu"] смогут получить стоимость от представления.

Убедитесь, что ваша страница ссылается на библиотеку jquery для фрагмента jquery.

И фрагмент jquery на самом деле не использует ajax, он просто отправляет форму при изменении списка.

Если у вас возникли проблемы с пониманием JQuery, я предлагаю проверить некоторые из онлайновых курсов, таких, как этот от кода школы https://www.codeschool.com/courses/try-jquery

надежда выше достаточно ясно