javascript - 使用 UmbracoV7 中的选择框更改每页的项目数

Question

我正在使用 Umbraco7 并创建了一个 View ，该 View 使用分页来显示工作正常的项目列表，但我现在想实现允许用户通过选择选择每页列出多少项目的功能盒子

查看

@{
    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 SelectedPageSize = Request.Form["dropdownmenu"] ?? "1";

这意味着您正在从 Request.Form 集合中读取内容。

如果你用谷歌搜索，你会发现 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();
   });
})

上面的 jquery 代码片段的意思是:

当下拉菜单id dropdownmenu发生变化时，请提交表单id myForm， 因为您的下拉列表位于表单中，所以它将被提交，然后当页面加载时，您的 Request.Form["dropdownmenu"] 将能够从提交中获取值。

确保您的页面引用 jquery 库以使 jquery 代码段正常工作。

jquery 代码片段实际上并没有使用 ajax，它只是在下拉列表更改时提交表单。

如果您在理解 jquery 时遇到困难，我建议您查看一些在线类(class)，例如来自代码学校的类(class) https://www.codeschool.com/courses/try-jquery

希望以上内容足够清楚