如何使用分页向控制器提交表单/列表？

Question

当我单击转到下一页时，我希望将用户的选择（选择的标签和每页显示的食谱）发送到控制器，以便下一页显示应用了过滤器的食谱。

目前，当我选择标签（食品/配料）并搜索包含这些标签的食谱时，我可以保留其他用户选择的每页要显示的食谱数量，反之亦然，但是当我更改时通过分页的页面我丢失了用户选择的标签，但是我保留了每页显示多少食谱（pageSize），因为我通过每个页面的锚标签将其传递给控制器​​

    @*Pages*@
    @Html.PagedListPager((IPagedList)Model.AllRecipes, page => Url.Action("Index", new
{
    page = page,
    pageSize = Model.PageSize
})

我认为我需要在更改页面时/在更改页面时提交表单，因为您无法将所选标签的列表 (Model.AllTags) 传递给控制器​​？

谢谢

<form asp-action="index" method="get" id="FindRecipesForm">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>

    @* Select Tags*@
    <div class="form-group">
        <ul class="list-group col-md-10 col-md-offset-1">
            <li class="list-group-item active" style="z-index: -10;">
                All tags
            </li>
            <li class="list-group-item">
                @for (var i = 0; i < Model.AllTags.Count(); i++)
                {
                    <label>
                        <input asp-for="AllTags[i].TagId" type="hidden"> <input asp-for="AllTags[i].Name" type="hidden">
                        <input type="checkbox" asp-for="AllTags[i].isChecked">@Html.DisplayFor(model => Model.AllTags[i].Name)
                    </label>
                }
            </li>
        </ul>
    </div>

    @*Sort and Filter - Open side panel button*@
    <div class="sort-filter-mobile">
        <button type="button" class="sort-filter-mobile-btn" onclick="openNav()">Sort and Filter</button>
    </div>

    @*Side Panel - Sort and Filter - Mobile*@
    <div id="mySidepanel" class="sidepanel" @*style="display:none;"*@>
        @*Top banner*@
        <div class="top-banner-sort-filter-mobile">
            <button class="sort-filter-close-btn" type="button" onclick="closeNav()"></button>
            <span class="refine-results-mobile"><strong>Refine:&nbsp;</strong>@ViewBag.NumRecipes results</span>
        </div>
        <div class="search-mobile-wrapper">
            @*Clear all button*@
            <button type="button" class="clear-all-search-btn-mobile">Clear all</button>
            <div class="pt-3">
                @*Recipes per page*@
                <div class="sorting-wrapper">
                    <label class="sort-and-result-label" for="results-per-page">Results per page</label>
                    @Html.DropDownListFor(m => m.PageSize, Model.PageSizeList, new { onchange = "this.form.submit()" })
                </div>
            </div>
        </div>
    </div>
    @*Side Panel - Sort and Filter - Mobile- End*@

    @* View Recipes*@
    <div class="form-group">
        @if (ViewBag.Tags != "")
        {
            <p class="search-results">Search results for <span class="text-primary">@ViewBag.Tags</span>  (@ViewBag.NumRecipes results)</p>
        }
        else
        {
            <p class="search-results">Search results (@ViewBag.NumRecipes results)</p>
        }
    </div>

    @*Grid*@
    <div class="grid">
        @foreach (var recipe in Model.AllRecipes)
        {
            <div>
                <img class="recipe-image" src=@recipe.ImageURL style="" />
                <div class="display-recipe-name" @*style="border: solid black 1px; "*@>@recipe.Name</div>
            </div>
        }
    </div>
    
    @*Search Recipes*@
    <div class="form-group mt-1">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Search" class="btn btn-primary" />
        </div>
    </div>

    @*Page and Recipe search result details*@
    Page @(Model.AllRecipes.PageCount < Model.AllRecipes.PageNumber ? 0 : Model.AllRecipes.PageNumber) of @Model.AllRecipes.PageCount - <span style="color:darkblue; font-weight:600">@ViewBag.NumRecipes Recipes</span>

    @*Pages*@
    @Html.PagedListPager((IPagedList)Model.AllRecipes, page => Url.Action("Index", new
{
    page = page,
    pageSize = Model.PageSize
}),
        new X.PagedList.Mvc.Core.Common.PagedListRenderOptions
        {
            //DisplayItemSliceAndTotal = true,
            ContainerDivClasses = new[] { "Navigation" },
            LiElementClasses = new[] { "page-item" },
            PageClasses = new[] { "page-link" },
        });
</form>

Answer 1

    @Html.PagedListPager((IPagedList)Model.AllRecipes, page => Url.Action("Index", new
{
    page = page,
    pageSize = Model.PageSize
}),
        new X.PagedList.Mvc.Core.Common.PagedListRenderOptions
        {
            //DisplayItemSliceAndTotal = true,
            ContainerDivClasses = new[] { "Navigation" },
            LiElementClasses = new[] { "page-item" },
            PageClasses = new[] { "page-link" },
        });

但是，当我通过分页更改页面时，我会丢失用户选择的标签，

问题与上面的代码（分页链接）有关，从上面的代码我们可以看出，分页链接的URL只包含page和pageSize参数，而不是包含选中的标签，所以，点击分页链接后, 选中的标签不会传递给 action 方法。

要解决这个问题，您可以参考以下步骤来修改您的代码：

1. 在Index动作方法中，添加一个selectedtags参数来接收选中的标签。

   当您单击“排序和过滤”按钮时，我想您会将表单提交给 Index 操作方法，然后您可以获取选定的标签，并使用 ViewBag 或 ViewData 将选定的标签传输到分页链接。

   public ActionResult Index(string sortOrder, string currentFilter, string searchString, int? page, int pageSize, string selectedtags)
    { 
         ...
   
         //Check if selectedtags contain value, if contains value, according to it to filter data.
   
        //After submitting the form, you could get all selected tags and add a separator 
        //Transfer the selected tags to the paging link using ViewBag
   
        //var tags = 
        //if (tags!=null && tags.Length >0)
        //{ 
        //    ViewBag.SelectTags = string.Join(",", tags);
        //}
   
        return View(recipes.ToPagedList(pageNumber, pageSize));
    }
   

2. 在 Index.cshtml 页面中：

    @Html.PagedListPager((IPagedList)Model.AllRecipes, page => Url.Action("Index", new
    {
         page = page,
         pageSize = Model.PageSize,
         selectedtags = ViewBag.SelectTags
     }), 
   

然后，渲染后的分页链接是这样的：

`<a href="/Foods?page=3&amp;selectedtags=Apple%2CBanana%2CPinapple">3</a>`

此外，您还可以使用 JQuery 获取所有选定的标签，并将选定的标签添加到分页链接的 url 的末尾（作为参数）。然后，在 Index 操作中，接收选定的标签并根据它来过滤数据。