How do I make globalization work with MVC2 and jquery?

Question

Hi,

I am trying out some globalization in an asp.net mvc2 application but can't get it to work fully. I am using the library http://github.com/nje/jquery-glob as a tool to display currency and dates etc according to user wishes. However something is bothering me a little. IU can't get the client / server side validation to actually accept the globalization using jQuery. No matter what I try if I post back 40.00 everything works ok but if I post 40,00 it is accepted as 0 (not a valid .NET invariant decimal value). I tried to follow @haacked's guide

This is in global.asax for server side handling:

private void SetCulture(string currencySymbol)
{
    AjaxHelper.GlobalizationScriptPath = 
        http://ajax.microsoft.com/ajax/4.0/1/globalization/";

    var culturePref = "sv-SE";
    var request = HttpContext.Current.Request;

    if (request.UserLanguages == null)
        return;

    var lang = request.UserLanguages[0];
    if (lang != null) {
        try {
            Thread.CurrentThread.CurrentCulture =
                CultureInfo.CreateSpecificCulture(lang);
        }
        catch {
            Thread.CurrentThread.CurrentCulture = 
                new CultureInfo(culturePref);
        }
    }

    Thread.CurrentThread.CurrentUICulture = 
        Thread.CurrentThread.CurrentCulture;
}

Then on the client side I have included the following scripts:

<script src="/Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="/Scripts/jquery.glob.js" type="text/javascript"></script>
<script src="/Scripts/globinfo/jquery.glob.sv-SE.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.culture = jQuery.cultures['sv-SE'];
        $.preferCulture('sv-SE');
    });
</script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.pack.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcJQueryValidation.js" type="text/javascript"></script>
<script src="/Scripts/jquery.metadata.js" type="text/javascript"></script>

So far so good but it doesn't do much. Don't get me wrong I can still get away with using it on the client but nothing really happens on the server side. The below jQuery changes the format's accordingly but when I post back 40,00 it becomes 0.00.

function globalizePage(culture) {
    // Set culture from select list
    $.preferCulture(culture);

    $("input[id$='Date']").val(function () {
        var dateString = $(this).val();
        var date = Date.parse(dateString);
        var dt = $.format(date, 'd', culture.name);
        return dt;
    });

    $("input[id$='Price']").val(function () {
        var price = $.parseInt($(this).val());
        var retVal = $.format(price, 'c', culture.name);
        return retVal;
    });
}

What do I need to do to make the above code work?

Answer 1

Problem solved, bacon saved or chicken fried. The reason this is happening is that jquery.validate and jquery.glob uses a function called "format" if validate is added after glob then the validate.format function is called which breaks globalization. On the other hand validate function. I don't know javascript or jquery good enough to tell you any workarounds. I'll just code the validation of the form manually and forget about the MicrosoftMVCjQueryValidation since that doesn't do the validate plugin justice.

<script src="https://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="https://ajax.microsoft.com/ajax/jQuery.Validate/1.7/jQuery.Validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.glob.js" type="text/javascript"></script>
<script src="/Scripts/globinfo/jquery.glob.sv-SE.js" type="text/javascript"></script>
<script src="/Scripts/jquery.forms.js" type="text/javascript"></script>