ASP.NET MVC Multi-language feature does not work as expected

Question

I have the app working using Radio buttons e.g.

@using (Html.BeginForm("SetCulture", "Home"))
{
<input type="radio" name="culture" id="en-us" value="en-us" class="culture" /> English
<input type="radio" name="culture" id="tr" value="tr" class="culture" /> Türk
}

but when i use input of image type it does not send the wanted VALUE

@using (Html.BeginForm("SetCulture", "Home"))
{
<input type="image" src="~/Content/Images/en.png" name="culture" id="en-us" value="en-us" class="culture" /> 
<input type="image" src="~/Content/Images/tr.png" name="culture" id="tr" value="tr" class="culture" />
}

jQuery code:

$(".culture").click(function () {
     $(this).parents("form").submit(); // post form
});

HomeController Code:

public ActionResult SetCulture(string culture){
    // action code here
}

I see no reason why the images wouldn't work but for some reason it happens. Any ideas?

Thank you so much

score 1 · Accepted Answer · 2015-09-28T03:00:38.970

1

In the first code block (using <input type="radio" .. />), you form will only post back one value for culture (the value of the selected radio button).

In the second code block (using <input type="image" .. />) your form will post back the values of both inputs, so your form data is culture=en-US&culture=tr

The DefaultModelBinder will bind the first value and ignore the second value so the value of culture in the POST method will always be "en-US" irrespective of which image you click.

One option would be to disable the other input (disabled inputs do not post back a value, for example

$(".culture").click(function () {
    $(this).siblings().prop('disabled', true); // disable the other input
    $(this).parents("form").submit(); // post form
});

Another option for handling this is to use <img> tags in conjunction with a hidden input for the culture value

<input type="hidden" name="culture" id="culture"/>
<img src="~/Content/Images/en.png" data-culture="en-US" class="culture" />
<img src="~/Content/Images/tr.png" data-culture="tr" class="culture" />

$('.culture').click(function () {
    $('#culture').val($(this).data('culture')); // update the hidden input
    $('form').submit();
})

edited Sep 28 '15 at 03:00

answered Sep 27 '15 at 23:33

Though this makes a perfect sense the fix didn't work – Elizabeth Dimova Sep 28 '15 at 01:40
Then is the code in your question the exact code in your real view (what I have shown does work)? – Sep 28 '15 at 01:41
Yes it does work with text too (beside the radio) but i need to have flag images to be clicked. Is there another control that could possibly meet the requirements? Thx – Elizabeth Dimova Sep 28 '15 at 02:01
One problem you may have is that `type="image"` will do a submit depending on the browser (i.e. your doing it twice). You can add `return false` as the last line of code in the script to prevent the default submit. – Sep 28 '15 at 02:02
I have updated the fiddle to use `type="image"` and seems to work fine. – Sep 28 '15 at 02:10
Note I had assumed that your `type="image"` was not submitting the form, but my best guess now is that it actually is, in which case you do not need the script at all. Try commenting it out. – Sep 28 '15 at 02:18
I disabled the script and everything but no luck. I don't know how it works for you. It keeps sending the very first value which is en-US for me – Elizabeth Dimova Sep 28 '15 at 02:27
There must be something else in your code causing the issue that you have not shown us. Not only does the fiddle work, I have also created a new test project in VS with the exact code you have posted and it does work correctly (clicking on the second image posts back `"tr"`) – Sep 28 '15 at 02:32
This is the project that i used as basis http://afana.me/post/aspnet-mvc-internationalization.aspx i just replaced the radio buttons with inputs of image type and realize that it does not work anymore. – Elizabeth Dimova Sep 28 '15 at 02:36
1

You can always consider styling your radio buttons as images - some examples [here](http://stackoverflow.com/questions/3896156/how-do-i-style-radio-buttons-with-images-laughing-smiley-for-good-sad-smiley) and [here](http://stackoverflow.com/questions/17541614/use-image-instead-of-radio-button) – Sep 28 '15 at 02:40
Well i would like to make it working with the image input but if it's not possible i will have to check those links. Thank you so much for your help. It's greatly appreciated. – Elizabeth Dimova Sep 28 '15 at 02:48
I have added another option to handle this. – Sep 28 '15 at 03:00

ASP.NET MVC Multi-language feature does not work as expected

1 Answers1