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

【问题标题】：How to retain search results when clicking browser's back button - ASP.NET Core MVC单击浏览器的后退按钮时如何保留搜索结果 - ASP.NET Core MVC
【发布时间】：2020-04-06 01:08:50
【问题描述】：

我正在创建一个 ASP.NET Core 3 MVC 应用程序，该应用程序除了主页选项卡外还有一个客户选项卡。在客户选项卡上有一个输入框，用户可以在其中添加搜索条件（天数）和搜索按钮。单击该按钮后，下方会显示一个客户 ID 列表（使用 jQuery 和部分视图）。当用户单击客户 ID 时，客户信息将显示在不同的页面中。但是，当我单击浏览器的后退按钮或“客户”选项卡时，添加了标准并且搜索结果消失了。

我曾尝试使用 ResponseCache 属性来保留搜索结果，但我无法使其工作。我也尝试过使用 Cache Tag Helper，但还是没有成功。有人可以帮忙吗？

客户控制器

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

}

索引.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】：

通过 GET 请求（而不是发布）进行搜索。这样，用户被发送到的实际 URL 包括查询。

<form action="/foo" method="get">

【讨论】：

如何使用 GET 请求在同一页面上显示搜索结果？
不清楚您是否在发出 AJAX 请求。本质上，您仍然必须更改 URL，因为这决定了用户“返回”到的内容。但是，JS 有一个 History API，您可以使用它，而无需实际更改页面。 developer.mozilla.org/en-US/docs/Web/API/History_API

【解决方案2】：

我已经弄清楚为什么这不起作用，并想在此处添加它，以防其他人遇到同样的问题。

事实证明，当输入参数是一个对象时，jQuery .load() 方法会创建一个 POST 请求（当它是一个字符串时会创建一个 GET 请求）。因此，由于 ResponseCache 属性不适用于 POST 请求，因此缓存不起作用。

【讨论】：