Send parameter to server and reload page

Question

My first ASP.NET MVC 6 / jQuery web site - the site header has a "Change Language" selector (named LanguagePicker) - this is actually placed in a _Layout view, a container shared by all views.

When users change the language, I need to save that in the db, and reload current page, with language changed.

I have this on client-side:

$('#LanguagePicker').selectpicker('val', '@CultureHelper.GetCurrentLanguage()');
$('#LanguagePicker').on('change', function () {
            var currentPageUrl = 'TODO'; // Get current Url here
            window.location = "/Base/ChangeLanguage/" + 
                $('.selectpicker option:selected').val() + 
                "?returnUrl=" + currentPageUrl ;
        });
    });

Is there a better way to do this, both in client side code and in server side? Ideally, the purpose is to send a newLanguage param to the server, save to db, and then refresh the current page so that the resources associated with the new language are displayed. it should obviously work from whatever page it is triggered.

Answer 1

To get the current page you could use this (as long as the javascript is in your layout file or other view, this will not work if in an external js file):

<%= Request.Url.PathAndQuery %>

I would suggest using ajax to call an api that returns json with a success status since you sound like you are using jquery quite a bit. If the call is successful, then set the window.location to the current page, if it fails, then you can gracefully handle the error. Here is an example of the controller:

public JsonResult UpdateLanguage(string language)
{
   var languageUpdated = LanguageEngine.UpdateLanguage(language);  // Your code to update db

   var json = new 
   {
       success = languageUpdated,
       newLanguage = language
   };
   return Json(json);
} 

Then you can use a regular ajax call or something like jQuery getJSON function:

$.getJSON("../UpdateLanguage", { language: "Chinese" },
    function (data) {
        if (data.success === true) {
            window.location = currentPageUrl;
        } 
        else { 
            alert("Sorry, we failed to update the language to '" + data.newLanguage + "'.  Please try again.");
        }
    }
};

Is this way much better? That I am not so sure.

Another strategy would be to include a base model that all your view models inherit from that contains a property for language and current page (with query results if you use them), then set this when then they change the drop down and call a controller to update the language which should take the base model object as a param, after the controller finishes the update, it can then redirect you back to that page. The nice thing about this strategy is you can include other information that is typically useful on every page, such as the logged in user object. This is also more "MVC-y" in my opinion, but probably a lot more work depending how far your project is.