在转到分页的第二页时，保持下拉菜单的状态 [英] Maintain the state of dropdown while moving to second page in pagination

问题描述

我的下拉菜单中没有几个项目.当我基于下拉项搜索记录时，它会为我提供与之相关的结果.我也已在其中实现了分页.

I have dropdown with few items in it. When I search record based on dropdown item, it gives me results associated with it.I have also implemented pagination in it.

当我移至第二页时，下拉值返回其初始状态，这是不正确的行为.除非刷新整个页面，否则它应保持其状态.

When I move to second page, dropdown value returns to its initial state which is not a correct behavior. It should retain its state unless I refresh the whole page.

分页和搜索工作正常.我在维持下拉菜单状态时遇到问题.

The pagination and search is working fine. I have problem maintaining the state of dropdown.

例如，如果我从下拉菜单中选择了A，那么即使我在分页中移至搜索的第二页，它也应保留A.

For example, If I have selected A from dropdown then it should retain A even If I move to second page of searching in my pagination.

我简化了显示行为的代码.

I have simplified the code to show the behavior.

控制器

Public async Task<IActionResult> Index(string searchText, string currentFilter, int? page)
    {

            int selectedPage = page ?? 1;
            int bypassCount = (selectedPage - 1) * _pagingOptions.PageSize;

            if (searchText != null)
            {
                page = 1;
            }
            else
            {
                searchText = currentFilter;

            }

            ViewBag.CurrentFilter = searchText;

    }

索引

<form asp-action="Index" method="get">

            <select class="custom-select" asp-for="searchText" value="@(ViewBag.CurrentFilter)">
                <option value="">All</option>
                <option value="AA">AA</option>
                <option value="AE">AE</option>
                <option value="AR">AR</option>
            </select>

         <div class="col-md-12">
            <button class="btn btn-primary" type="submit">Search</button>
         </div>                
        </form>

    <table class="table">
        <thead>
            <tr >
                <th>Message Id</th>
                <th>Status</th>
                <th>Resent</th>
                <th>Resent Date</th>
                <th>Created Date</th>
            </tr>
        </thead>
        <tbody>
            @if (Model.Items.TotalItemCount > 0)
            {
                @foreach (var item in Model.Items.ToList())
                {
                        <td>@Html.DisplayFor(modelItem => item.MessageId)</td>
                        <td>@Html.DisplayFor(modelItem => item.Status)</td>
                        <td>@Html.DisplayFor(modelItem => resentString)</td>
                        <td>@Html.DisplayFor(modelItem => resentDateString)</td>
                        <td>@Html.DisplayFor(modelItem => createdDateString)</td>
                    </tr>

                }
            }

        </tbody>
    </table>
</div>

            @if (Model.Items.PageCount > 1)
            {
                @Html.PagedListPager(Model.Items, page => Url.Action("Index", new { page = page, currentFilter = ViewBag.CurrentFilter}),
                                     new PagedListRenderOptions
                                     {
                                         UlElementClasses = new string[] { "pagination", "justify-content-left" },
                                         LiElementClasses = new string[] { "page-item" },
                                         PageClasses = new string[] { "page-link" },
                                         LinkToPreviousPageFormat = "Previous",
                                         LinkToNextPageFormat = "Next",
                                         DisplayEllipsesWhenNotShowingAllPageNumbers = true,
                                         DisplayLinkToPreviousPage = PagedListDisplayMode.Always,
                                         DisplayLinkToNextPage = PagedListDisplayMode.Always
                                     })
            }

推荐答案

尝试在视图中添加js代码，以指定@ViewBag.CurrentFilter的值以手动选择框:

Try to add js code in your view to assign the value of @ViewBag.CurrentFilter to select box manually:

<select id="mySelect" class="custom-select" asp-for="searchText" value="@(ViewBag.CurrentFilter)">
            <option value="">All</option>
            <option value="AA">AA</option>
            <option value="AE">AE</option>
            <option value="AR">AR</option>
</select>
@section Scripts {     
   <script>
       $(document).ready(function () {
           var data = '@ViewBag.CurrentFilter';

           document.getElementById("mySelect").value = data;
       });
   </script>
}

这篇关于在转到分页的第二页时，保持下拉菜单的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！