使用 UmbracoV7 中的 select 框更改每页的项目数

Question

我正在使用 Umbraco7 并创建了一个视图，该视图使用分页显示工作正常的项目列表，但我现在想实现允许用户 select 显示多少项目的功能通过 select 框

每页列出

查看

@{
    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>
};

我想知道如何在每次更改后从 select 选项中获取值到名为 "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 合集。

如果你 google 周围，你会发现 Request.Form 是 html form 元素中的项目。

知道上面的语句后，您首先会注意到您缺少一个表单元素（至少从您的代码片段中，有 none），因此请将表单元素添加到您的下拉列表中下列表，如：

<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，我建议您查看一些在线课程，例如来自代码学校的这门课程 https://www.codeschool.com/courses/try-jquery

希望以上内容足够清楚

Answer 2

我最终让 select 盒子工作了。它允许用户 select 他们希望在一个页面上列出多少项目。

查看

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>

我在表单上放置了一个 get 方法，然后没有使用 Reqeust.Form，而是使用了 Request.QueryString.

上述 JS 会将页面大小附加到 url 并在每次 selected 时重新加载页面。

使用 UmbracoV7 中的 select 框更改每页的项目数

Change number of items per page using select box in UmbracoV7

javascript

c#

ajax

asp.net-mvc

umbraco7