单击浏览器的后退按钮时如何保留搜索结果-ASP.NET Core MVC

问题描述 投票:0回答:1

我正在创建一个ASP.NET Core 3 MVC应用程序,该应用程序除了具有“主页”选项卡外,还具有“客户”选项卡。在“客户”选项卡上,有一个输入框,用户可以在其中添加搜索条件(天数)和“搜索”按钮。单击按钮后,下面显示了一个客户ID列表(使用jQuery和Partial View)。当用户单击客户ID时,客户信息将显示在另一个页面中。但是,当我单击浏览器的后退按钮或在“客户”选项卡上时,添加的条件和搜索结果就会消失。

我已尝试使用ResponseCache属性保留搜索结果,但无法使其正常工作。我也尝试过使用缓存标记帮助器,但再次失败。有人可以帮忙吗?

CustomersController

public class CustomersController : Controller
{
      private readonly DbContext _context;

      public CustomersController(DbContext context)
      {
          _context= context;
      }

      public IActionResult Index()
      {
          return View();
      }

      public IActionResult DisplayCustomerIdList(string searchText)
      {
          List<CustomerDetailViewModel> customers = _context.GetAll().ToList();

          CustomerIndexViewModel model = new CustomerIndexViewModel()
          {
              Customers = customers
          };

          return PartialView("_CustomerIdListView", model);
      }

      public IActionResult Detail(decimal? Id)
      {
          Customer customer = _context.GetCustomerById(Id);

          CustomerDetailViewModel model = new CustomerDetailViewModel(customer);

          return View(model);
      }

}

Index.cshtml

@{
    ViewData["Title"] = "Customers Page";
}

@section Scripts {
    <script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>

    <script>

    var url = '@Url.Action("DisplayCustomerIdList", "Customers")';

    $('#search').click(function () {
        var keyWord = $('#NumberOfDays').val();
        $('#searchResults').load(url, { searchText: keyWord });
        return false;
    })

    </script>
}


<body>
    <div class="input-group mb-3 w-50">
        <input type="text" class="form-control mr-2" placeholder="Number of days" autocomplete="off" id="NumberOfDays">
        <button id="search" class="btn btn-outline-info mb-2">Search</button>
    </div>

    <div id="searchResults"></div>

</body>

_ CustomerIdListView.cshtml

@model MyProject.Models.CustomerIndexViewModel

<div class="card border-info mb-3 shadow" style="width:220px; height: 625px; overflow-y: scroll;">
    <div class="card-header">Customer Ids</div>
    <div class="list-group">
        @foreach (CustomerDetailViewModel customerdetails in Model.Customers)
        {
            <a asp-controller="Customers" asp-action="Detail" asp-route-id="@customerdetails.CustomerId" class="list-group-item list-group-item-action">
                @customerdetails.CustomerId
            </a>
        }
    </div>
</div>

Detail.cshtml

@model MyProject.Models.CustomerDetailViewModel

<h3>Customer Information</h3>

<ul>
    <li>@Model.CustomerId</li>
    <li>@Model.FullName</li>
</ul>
c# jquery caching asp.net-core-mvc partial-views
1个回答
0
投票

通过GET请求(而不是发布)进行搜索。这样,向用户发送的实际URL包括查询。

<form action="/foo" method="get">
© www.soinside.com 2019 - 2024. All rights reserved.