How to change labels of a form with json and razor snytax in .Net MVC3

Question

I'm trying to use json for my web page's globalization options.. id like to change the labels of my form just by using a little dropdownbox and without refreshing the whole page and more interesting part is i got more than two form in my view.

so far i have done this:

My Json:

public JsonResult Globalx(String incoming)
{
    System.Globalization.CultureInfo Cult = new System.Globalization.CultureInfo(incoming, true);
    System.Threading.Thread.CurrentThread.CurrentCulture = Cult;
    System.Threading.Thread.CurrentThread.CurrentUICulture = Cult;
    Resources.Global.Culture = System.Threading.Thread.CurrentThread.CurrentCulture;
    Global.ResourceManager.GetResourceSet(Cult, false, true);

    ViewData["Name"] = Global.Name;
    ViewData["Surname"] = Global.Surname;
    ViewData["Birth"] = Global.Birth;

    String lnginfo = Resources.Global.Culture.TwoLetterISOLanguageName.ToString();
    ViewData["Languages"] = new SelectList(myList, "Value", "Text", lnginfo);


    return Json(ViewData, JsonRequestBehavior.AllowGet);
}

My View:

@model MyCustomers.Models.Customers
@{
    ViewBag.Title = ViewData["NewCustomer"];
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript" language="javascript">

$(document).ready(function () {
    function changeLang() {
        var lang = $("#LanguageBox").val();
        $.getJSON('@Url.Content("~/Home/People/")', { incoming: lang }, function (data) {
            // what should i do here to get my label's language changed?
        })
    }
}

</script>

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "LanguageForm" }))
{
<fieldset>
    <legend>@ViewData["LanguagesTitle"]</legend>
    @Html.DropDownListFor(x => x.SelectedLanguage, (SelectList)ViewData["Languages"], new { onchange = "changeLang()", id = "LanguageBox" })
</fieldset>
}

@using (Html.BeginForm("PeopleForm", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "PeopleForm" }))
{
<fieldset>
    <legend>@ViewData["SalesContract"]</legend>
        <div>
            <div class="Name">
                @Html.Label(ViewData["Name"].ToString()) <!--> HERE </!-->
                @Html.EditorFor(x => x.People.Name)
            </div>
            <div class="Surname">
                @Html.Label(ViewData["Surname"].ToString()) <!--> HERE </!-->
                @Html.EditorFor(x => x.People.Surname)
            </div>
            <div class="Birth">
                @Html.Label(ViewData["Birth"].ToString()) <!--> AND HERE </!-->
                @Html.EditorFor(x => x.People.Birth)
            </div>
        </div>
</fieldset>
}

No im not actually using this method im refreshing the whole page each time to change the language of my labels but some friend of mine told me it could be done without refreshing and the first thing that came in my mind was Json.. I dont know if its possible or not im just trying. Any other ideas are wellcome.

I think the title is a little confusing and im asuming my problem here is understood so if anyone can find a better title please attempt to fix it.

Answer 1

In your Json result you would need to identify each of the labels that you have provided the text for, say each label has a Json object:

Id: 'label1',
Text: 'Enter your first name'

You provide one of these objects for each label on your page in an array,

{Id: 'label1', Text: 'Enter your first name'},
{Id: 'label2', Text: 'Enter your second name'},
{Id: 'label3', Text: 'Enter your telephone number'},

Then you deal with each of these on the requesting end,

$.getJSON('@Url.Content("~/Home/People/")', { incoming: lang }, function (data) {
    for(i = 0; i < data.length; i++){
        $('#'+data[i].Id).Html(data[i].Text);
    }
})

I'm not 100% sure that Html will be the best thing to use - there may be sub DOM elements created by MVC that would need to be taken into account in your selector.

If you wanted to stick to the method you're using now you'll need to hard code each of the assigned values one at a time.

$.getJSON('@Url.Content("~/Home/People/")', { incoming: lang }, function (data) {
    $('#Name').Html(data['Name']);
    $('#Birth').Html(data['Birth']);        
})