在 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 控制器用于显示 dashboard.And AppRec 显示另一种仪表板。两个仪表板均由下拉列表选择驱动。

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

但是是这样的

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

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

每当下拉选择发生变化时，使用AJAX设置会话变量（服务器端）。渲染下拉列表时，您应该检查此会话变量，如果存在，则将下拉列表设置为它具有的值。
使用本地存储。这是一种纯粹的客户端方法。基本上，您只需在更改下拉列表时在 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);

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

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

Retain the selected value of dropdownlist on clicking browser back button in asp.net mvc

asp.net-mvc-4

caching

drop-down-menu

outputcache

memorycache