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

Question

I have a dropdownlist, the user selects an option in the dropdownlist and based on that value there's a dashboard that gets populated. My issue is how do i retain the dropdownlist value as well as the dashboard values when the user clicks back button in the browser. I tried OutputCache but output cache is only to cache the rendered HTML and not data, I tried memory cache but that didn't work either.

Model:

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

Controller:

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

        }

View:

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

Based on dropdownlist value - calls are made to internalrec controller and app rec controller. InternalRec controller is used to display dashboard.And AppRec displays another kind of dashboards. Both the dashboards are driven by the dropdownlist selection.

The InternaRec returns a view with the dashboard, I'm not including all of that for code brevity.

But it's something like this

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

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

return PartialView();
}

So when the user clicks on back button on the browser and comes back to this page. I want the user to be able to see the selected dropdownlist value along with the dashboard values, basically the page should not be refreshed. How can I achieve this?

Thanks

Answer 1

You must persist that choice somehow. There's pretty much two options:

1. Use AJAX to set a session variable (server-side) any time the drop down selection is changed. When rendering the drop down, you should check this session variable, and if it exists, set the drop down to the value it has.

2. Use localStorage. This is a pure client-side approach. Basically, you just set a key in localStorage when the drop down is changed. On page load, read that key from localStorage and set the drop down accordingly.

The first approach is going to be your safer, more cross-browser option, but localStorage does have pretty decent support even among even some older versions of IE, so it's not as much a deal-breaker as it once might have been.

UPDATE

To set it, you first need an action server-side to response to the AJAX request. At its simplest, that would look something like:

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

Then, you AJAX, client-side:

$('#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
});

When you are in an action that will allow editing of clientid, you simply try to set it from Session:

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

That looks at little odd, but it's mostly so because you've got a non-nullable int property. First, session values are stored as strings, so you need to cast the value to a nullable int (as int?). Since we're using as, if the value cannot be converted to an int, it will be set as null, instead, so we have to cast to a nullable. However, you still can't store a nullable int for this property, so the null-coalesce operator (??) is used to set the value to default(int) if it's null, instead.