在asp.net mvc中单击浏览器后退按钮时保留下拉列表的选定值

Question

我有一个下拉列表，用户在下拉列表中选择一个选项，然后根据该值填充一个仪表板。我的问题是当用户单击浏览器中的后退按钮时，我如何保留下拉列表值以及仪表板值。我尝试了 OutputCache 但输出缓存仅用于缓存呈现的 HTML 而不是数据，我尝试了内存缓存但也不起作用。

型号：

public class InternalViewModel
{
      public int totalclients { get; set; }
      public int clientid { get; set; }
      public DateTime? AsOFdate { get; set; }
}

控制器：

  public ActionResult Dropdownlist()
        {
            InternalViewModel app = new InternalViewModel();          
            app.totalclients = db2.AppClients.Count();          
            IEnumerable<SelectListItem> clients = db2.AppClients.Select(c => new SelectListItem
            {
                Value = c.ClientID.ToString(),
                Text = c.ClientName
            });
            ViewBag.clients = clients;       
            return PartialView(app);

        }

查看：

_dropdownlist.cshtml
             <div>
              @(Html.Kendo().DropDownListFor(model => model.clientid)
              .Name("clientid")
              .DataTextField("Text")
              .DataValueField("Value")
              .Filter("contains")
              .OptionLabel("--Select --")
              .BindTo((System.Collections.IEnumerable)ViewBag.clients)
              .HtmlAttributes(new { @id = "dropdown2", @class = "form-control" })
                    )
                </div>


  $('#dropdown2').change(function () {         
            var selectedID = $(this).val();
$('#RecDashboard').load("/InternalRec/Index", { clientid: selectedID }, function () {               
                $("#recstatus").load("/AppRec/Index", { clientid: selectedID })
            })

基于下拉列表值 - 调用 internalrec 控制器和 app rec 控制器。 InternalRec 控制器用于显示仪表板。而 AppRec 显示另一种仪表板。两个仪表板都由下拉列表选择驱动。

InternaRec 返回一个带有仪表板的视图，为了代码简洁，我没有包括所有这些。

但它是这样的

public ActionResult InternalRec(int? clientid)
{
//some stuff is done

//values to be displayed on dashboard are computed, all these values need clientid.

return PartialView();
}

因此，当用户单击浏览器上的后退按钮并返回此页面时。我希望用户能够看到选定的下拉列表值以及仪表板值，基本上不应该刷新页面。我怎样才能做到这一点？

谢谢

Answer 1

你必须以某种方式坚持这个选择。几乎有两种选择：

1. 只要下拉选择发生变化，就可以使用 AJAX 设置会话变量（服务器端）。渲染下拉菜单时，您应该检查此会话变量，如果存在，请将下拉菜单设置为它的值。

2. 使用本地存储。这是一种纯粹的客户端方法。基本上，您只需在更改下拉列表时在 localStorage 中设置一个键。在页面加载时，从 localStorage 中读取该键并相应地设置下拉菜单。

第一种方法将是您更安全、更跨浏览器的选择，但localStorage 甚至在一些旧版本的 IE 中也有相当不错的支持，因此它不像以前那样会破坏交易已经。

更新

要设置它，您首先需要一个动作服务器端来响应 AJAX 请求。最简单的情况是：

[HttpPost]
public ActionResult SetClientId(int clientId)
{
    Session["ClientId"] = clientId;
    return Json(new { success = true })
}

那么，你的 AJAX，客户端：

$('#clientid').on('change', function () {
    $.post('/url/to/action/above/', { clientId: $(this).val() });
    // omitted success function as there's nothing you really need to do,
    // just fire and forget
});

当您处于允许编辑clientid 的操作中时，您只需尝试从Session 进行设置：

model.clientid = Session["ClientId"] as int? ?? default(int);

这看起来有点奇怪，但主要是因为你有一个不可为空的 int 属性。首先，会话值存储为字符串，因此您需要将值转换为 nullable int (as int?)。由于我们使用as，如果该值不能转换为int，它将被设置为null，所以我们必须转换为可空值。但是，您仍然不能存储此属性的可为 null 的 int，因此如果它为 null，则使用 null-coalesce 运算符 (??) 将值设置为 default(int)。