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

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

目前，当我选择标签（食品/配料）并搜索包含这些标签的食谱时，我能够保留其他用户对每页显示的食谱数量的选择，反之亦然，但是当我通过分页更改页面时，我会丢失用户选择的标签，但是，我保留了每页要显示的食谱数量（

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>

@*选择标签*@


所有标签


@对于（var i=0；imodel.AllTags[i].Name）
}


@*分拣和过滤器-打开侧面板按钮*@
排序和筛选
@*侧面板-分拣和过滤器-移动式*@
@*头条*@
优化：@ViewBag.NumRecipes结果
@*清除所有按钮*@
清除所有
@*每页食谱*@
每页结果
@DropDownListFor（m=>m.PageSize，Model.PageSizeList，new{onchange=“this.form.submit（）”}）
@*侧面板-分拣和过滤器-移动-端部*@
@*查看配方*@
@如果（ViewBag.Tags！=“”）
{
搜索@ViewBag.Tags（@ViewBag.NumRecipes results）的结果
}
其他的
{
搜索结果（@ViewBag.NumRecipes results）
}
@*网格*@
@foreach（Model.AllRecipes中的var配方）
{
@配方。名称
}
@*搜索食谱*@
@*页面和配方搜索结果详细信息*@
@Model.AllRecipes.PageCount-@ViewBag.NumRecipes的@页（Model.AllRecipes.PageCountUrl.Action（“Index”，新建）
{
第页，
pageSize=Model.pageSize
}),
新的X.PagedList.Mvc.Core.Common.PagedListRenderations
{
//DisplayItemSliceAndTotal=true，
ContainerDivClasses=new[]{“导航”}，
LiElementClasses=new[]{“页面项”}，
PageClasses=new[]{“页面链接”}，
});

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

这个问题与上面的代码（分页链接）有关，正如我们从上面的代码中看到的，分页链接的URL只包含页面和pageSize参数，而不包含所选的标记，因此，在单击分页链接后，所选的标记将不会传递给action方法

要解决此问题，可以参考以下步骤修改代码：

在索引操作方法中，添加selectedtags参数以接收所选标记

当您单击“排序和筛选”按钮时，我想您会将表单提交到Index action方法，然后您可以获取所选的标记，并使用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));
 }

在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末尾（作为参数）。然后，在索引操作中，接收所选标记并基于它过滤数据

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