ASP.Net MVC Refresh Page without destroying ViewModel

Question

I want to create a multilingual webpage. To switch between languages I've got a dropdown on my page. If the change event of the dropdown gets fired the Method called "ChangeLanguage" in my Controller is called.

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

    public JsonResult ChangeLanguage(int id) {
        return Json(new {Success = true});
    }

Now I'd like to to change my "SelectedLanguage" Property in my ViewModel (HVM) - but the Reference is null. May anyone explain why HVM is null in my ChangeLanguage Method?

After my SelectedLanguage Property is changed I'd like to reload my whole page to display it's texts in another language

eg

@model ViewModels.HomeViewModel
<html>
<div class="HeaderText">
    Text = @{
        @Model.TextToDisplay.Where(o => 
        o.Language.Equals(Model.SelectedLanguage)).First()
    }
</div>

Here's what I want to do in PseudoCode:

PseudoCode:

public JsonResult ChangeLanguage(int id) {
    this.HVM.SelectedLanguage = 
    this.HVM.AvailableLanguages.Where(o => 
    o.ID.Equals(id)).First();

    Page.Reload();
    return Json(new {Success = true});
}

Answer 1

May anyone explain why HVM is null in my ChangeLanguage Method?

Adhering to stateless nature of HTTP protocol, all (unless explicitly added into request header) requests (MVC method calls) loose state data associated with it. Web server treats every request a new request and creates new instances of classes right from controller itself.

In your case since it is a new request, controller has a HVM property defined but in ChangeLanguage it is not instantiated (it gets instantiated only into Index method which is not called when you invoke ChangeLanguage) hence it is null.

After my SelectedLanguage Property is changed I'd like to reload my whole page to display it's texts in another language.

Option 1: Refresh page

Simple option to implement. Pass the language selection to server, server will return a new view with specific data. Drawback, whole page will refresh.

Option 2: Update view selectively

If option 1 is really not acceptable, then consider this option. There are multiple ways you can achieve it. Basically it involves either (a) breaking you view into partial view and update only the portion that is affect by selection or (b) bind data element with a JS object.

(a) - Not much need to be said for this.

(b) - Data binding can easily be done if you employ a JS library like KnockoutJS.

Answer 2

Change your methods to these methods , This trick will work for you =>pass your model to Change language from view. Also update JsonResult to ActionResult.

public ActionResult ChangeLanguage(ViewModels.HomeViewModel model,int id)
{
this.HVM.SelectedLanguage = 
this.HVM.AvailableLanguages.Where(o => 
o.ID.Equals(id)).First();
return RedirectToAction("Index",model);
}

public ActionResult Index(ViewModels.HomeViewModel model)
 {
if(model == null)
{
    this.HVM = new ViewModels.HomeViewModel();

}
return View(this.HVM);
}