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

我想知道如何在每次更改后从select选项中获取值到名为＆＃34; SelectedPageSize＆＃34;的变量中。我知道我需要某种javascript或ajax，但我不知道其中任何一个，所以我觉得有点迷失。我试图使用下面的js片段，但我不确定它实际上在做什么或如何让它工作

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

任何帮助都会很棒......提前致谢。

Answer 1

通过代码看，您将通过第一个语句获取页面大小：

$combinations = array();
foreach ($material as $value1) {
   foreach ($size as $value2) {
      foreach ($color as $value3) {
            combinations[] = array($value1,$value2,$value3);
      }
   }
}

这意味着您正在阅读var SelectedPageSize = Request.Form["dropdownmenu"] ?? "1";集合。

如果您在谷歌周围，您会发现Request.Form是html 表单元素中的项目。

了解了上述语句后，您首先要注意的是您缺少表单元素（至少从您的代码片段中没有），因此请在下拉列表中添加表单元素，例如：

Request.Form

然后我们看看你提供的jquery：

我会将你的jquery简化为：

<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片段意味着：

当下拉菜单ID下拉菜单更改时，请提交表单ID myForm，并且因为您的下拉列表在表单中，它将被提交，然后当页面加载时，您的Request.Form [“dropdownmenu”]将能够从提交中获取值。

确保您的页面引用jquery库以使jquery片段生效。

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

如果您在理解jquery时遇到问题，我建议您查看一些在线课程，例如来自代码学校的https://www.codeschool.com/courses/try-jquery

希望以上是足够清楚的

Answer 2

我最终让选择框工作了。它允许用户选择他们希望在页面上列出的项目数。

查看

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会将页面大小附加到网址，并在每次选择新值时重新加载页面。

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

2 个答案: