ASP.Net MVC ActionResult returns cached View?

Question

After asking several questions on how to refresh a page depending on a selected value of a dropdown control I now have a new question - Somehow my "ChangeLanguage" Method returns a cached version of my View.

View:

@model ViewModels.HomeViewModel

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<title id="Title">Default</title>
</head>
<body>
<div class="Header">
    <div class="HeaderTextArea">
        <span id="HeaderText">
            @Model.Title.Where(o => o.Language.Equals(Model.SelectedLanguage)).FirstOrDefault().ControlText
        </span>
    </div>
    <div class="HeaderImageArea">
        <img id="RB_Image" src="~/Content/Images/RB_Logo.png" alt="RB_IMAGE" />
    </div>
    <div class="LanguageSelection">
        @{
            @Html.DropDownList("SelectedLanguage", new SelectList(Model.AvailableLanguages, "ID", "Description"))
        }
    </div>
</div>
<div class="Content">
    @RenderBody()
</div>

<script>
var url = '@Url.Action("ChangeLanguage", "Home")';
$('#SelectedLanguage').change(function () {
    $.getJSON(url, {
        ID: $(this).val(), Model: @Html.Raw(Json.Encode(Model))
        });
});

Note that this is my Layout-View. I also tried this on my Index with the same result.

Controller:

public class HomeController : Controller
{
    public ViewModels.HomeViewModel HVM { get; private set; }
    // GET: Home
    public ActionResult Index()
    {
        this.HVM = new ViewModels.HomeViewModel();
        this.HVM.SelectedLanguage = this.HVM.AvailableLanguages.First();
        return View(this.HVM);
    }

    public ActionResult ChangeLanguage(int id, ViewModels.HomeViewModel model) {
        model.SelectedLanguage = model.AvailableLanguages.Where(o => o.ID.Equals(id)).First();
        model.SelectedTitle = model.Title.Where(o => o.Language.Equals(model.SelectedLanguage)).First();
        return View("Index", model);
    }
}

The ChangeLanguage Method gets called, modifies the required data and returns a "new" View as expected - the logic inside the View does it's job, too - but the expected content does not show up - instead the data from the "first View" shows up. So the data and the displayed data differs.

Ps. I know that Views should be dumb and no logic should be placed inside - but this is just for test purpose. At the end everything should be located inside my ViewModels.

Answer 1

Your not cacheing anything. An ajax call stays on the same page. You are calling a method which returns a view (it should be a partial view) but then you don't do anything with that content (ie update the DOM). Your script also uses $.getJSON() which expects json, yet your controller method returns html so it would not work anyway. In addition, do not pass back the whole model using @Html.Raw(Json.Encode(Model) . That would pass the original model (unchanged) which you already have access to in the controller so its just degrading performance.

3 options you could consider

1. Pass the selected language to a controller method that returns json as I indicated in my answer to one of your previous questions . This will give the best performance
2. Pass the selected language to a controller method that returns a partial view and update the DOM

Controller (note remove public ViewModels.HomeViewModel HVM { get; private set; } )

public PartialViewResult ChangeLanguage(int id) {
  HomeViewModel model = new HomeViewModel();
  model.SelectedLanguage = model.AvailableLanguages.Where(o => o.ID.Equals(id)).First();
  model.SelectedTitle = model.Title.Where(o => o.Language.Equals(model.SelectedLanguage)).First();
  return PartialView(model); // the partial just contains the elements you want to update
}

View

<div id="mycontent"></div>

$('#SelectedLanguage').change(function () {
  $('#mycontent').load(url, { ID: $(this).val() });
});

3. If your not concerned with performance, put the dropdownlist in a form with a submit button and do a normal submit (there is no real point in using ajax if you want to generate a complete new view)

Answer 2

add OutputCache attribute as shown below

 [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
 public ActionResult ChangeLanguage(int id, ViewModels.HomeViewModel model) {