MVC 3 jQuery Validierung/Globalisierung von Zahlen-/Dezimalfeld

Question 1

Bei Verwendung von globalization culture=”da-DK” in der Datei Web.config funktioniert die jQuery-Validierung nicht.

In Dänemark verwenden wir die Notation 19,95 anstelle der US-amerikanischen Schreibweise 19,95, wenn wir einen Preis für ein Produkt schreiben, und das hat mir ein Problem bereitet, das ich nicht lösen kann.

Ich habe VS2010, ein neues MVC 3-Projekt, gestartet, einen HomeController, eine Produktklasse und eine einfache Standard-Bearbeitungsansicht hinzugefügt, und der Fehler ist bereits da.

Produktklasse:

public class Product
{
    public string name { get; set; }
    public string itemNo { get; set; }
    public decimal price { get; set; }
}

HomeController:

public class homeController : Controller
{
    public ActionResult Index()
    {
        var product1 = new Product { name = "Testproduct", itemNo = "PRD-151541", price = 19 };
        return View(product1);
    }
}

Indexansicht:

@model WebUI.DomainModel.Product

<script src="https://stackoverflow.com/questions/5199835/@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="https://stackoverflow.com/questions/5199835/@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Product</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.name)
            @Html.ValidationMessageFor(model => model.name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.itemNo)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.itemNo)
            @Html.ValidationMessageFor(model => model.itemNo)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.price)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.price)
            @Html.ValidationMessageFor(model => model.price)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

Das Ergebnis:

Leider kann ich hier kein Bild hochladen – folgen Sie also bitte diesem Link, um das Ergebnis zu sehen:
http://www.designvision.dk/temp/mvc3_razor_validation_error.gif

SO – beim Ausführen der Website wird das Feld auf 19,00 gesetzt – was die korrekte Kulturdefinition IST – aber beim Speichern schlägt die Validierung fehl.

Bitte helfen…

Question 2

Du könntest es versuchen jQuery-Globalisierungs-Plugin von Microsoft:

<script src="https://stackoverflow.com/questions/5199835/@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="https://stackoverflow.com/questions/5199835/@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

<script src="https://stackoverflow.com/questions/5199835/@Url.Content("~/Scripts/jquery.glob.js")" type="text/javascript"></script>
<script src="https://stackoverflow.com/questions/5199835/@Url.Content("~/Scripts/globinfo/jquery.glob.da-dk.js")" type="text/javascript"></script>
<script type="text/javascript">
    $.validator.methods.number = function (value, element) {
        return !isNaN($.parseFloat(value));
    }

    $(function () {
        $.preferCulture('da-DK');
    });
</script>

Plugin wurde umbenannt und verschoben, sollten Sie verwenden Globalisieren (März 2012)

<script src="https://stackoverflow.com/questions/5199835/@Url.Content("~/Scripts/jquery.globalize/globalize.js")" type="text/javascript"></script>
<script src="https://stackoverflow.com/questions/5199835/@Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.da-DK.js")" type="text/javascript"></script>
<script type="text/javascript">
    $.validator.methods.number = function (value, element) {
        return !isNaN(Globalize.parseFloat(value));
    }

    $(document).ready(function () {
        Globalize.culture('da-DK');
    });
</script>

mehr dazu auf Scott Hanselman-Blogbeitrag

Question 3

Aktualisiertes Skript für die aktuelle Version von https://github.com/jquery/globalize mit optionaler Elementunterstützung

$.validator.methods.number = function (value, element) {
   return this.optional(element) || !isNaN(Globalize.parseFloat(value));
}

$(function () {
    Globalize.culture('%%culture%%');
});

Question 4

@shatl hat ab heute die richtige Antwort. Beachten Sie, dass Sie für das Bereichsattribut einen Hack benötigen, der unten gezeigt wird. Der vollständige hinzuzufügende Code ist unten dargestellt:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript" src="https://stackoverflow.com/questions/5199835/~/Scripts/globalize.js"></script>
    <script type="text/javascript" src="~/Scripts/globalize.culture.fr-FR.js"></script>
    <script type="text/javascript">
        $.validator.methods.number = function (value, element) {
            return this.optional(element) ||
                !isNaN(Globalize.parseFloat(value));
        }
        $(document).ready(function () {
            Globalize.culture('fr-FR');
        });

        jQuery.extend(jQuery.validator.methods, {    
            range: function (value, element, param) {        
                //Use the Globalization plugin to parse the value        
                var val = $.global.parseFloat(value);
                return this.optional(element) || (
                    val >= param[0] && val <= param[1]);
            }
        });
    </script>
}

Question 5

Ich bin schließlich den Ratschlägen in Scott Hanselmans Blog zu diesem Thema gefolgt – Sie können darüber hier lesen:

http://www.hanselman.com/blog/GlobalizationInternationalizationAndLocalizationInASPNETMVC3JavaScriptAndJQueryPart1.aspx

Ich musste einige Änderungen vornehmen, um Globalize anstelle von jQuery Global zu verwenden (jetzt ist jQuery Global tot). Ich habe dies im folgenden Blog-Beitrag aufgeschrieben, falls das hilfreich ist:

http://icanmakethiswork.blogspot.co.uk/2012/09/globalize-and-jquery-validate.html

Question 6

Nur für die Zukunft, was bei mir funktioniert hat, war Folgendes:

Denken Sie daran, die richtige jQuery-Version und die richtige Kultur festzulegen, die in diesem Beispiel dänisch ist.
Wenn der Wert keine Punkte enthalten darf, kommentieren Sie den Kommentar aus.

<script src="https://stackoverflow.com/questions/5199835/@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
    type="text/javascript"></script>
<script src="https://stackoverflow.com/questions/5199835/@Url.Content("~/Scripts/jquery.validate.min.js")"
    type="text/javascript"></script>
<script src="https://stackoverflow.com/questions/5199835/@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
    type="text/javascript"></script>
<script src="https://stackoverflow.com/questions/5199835/@Url.Content("~/Scripts/jquery.globalize/globalize.js")"
    type="text/javascript"></script>
<script src="https://stackoverflow.com/questions/5199835/@Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.da-DK.js")"
    type="text/javascript"></script>
<script type="text/javascript">
        $.validator.methods.number = function (value, element) {
            // if (value.indexOf(".") >= 0) {
            //     return false;
            // }
            return (Globalize.parseFloat(value));
        }

        $(document).ready(function () {
            Globalize.culture('da-DK');
        });

        jQuery.extend(jQuery.validator.methods, {
            range: function (value, element, param) {
                //Use the Globalization plugin to parse the value
                var val = Globalize.parseFloat(value);
                return this.optional(element) || (val >= param[0] && val <= param[1]);
            }
        });
</script>

Question 7

Danke für diese Seite, hat mir viel Ärger erspart, ich musste den Globalize-Code jedoch reparieren. Die schwedische Kultur akzeptiert keinen Punkt als Trennzeichen, aber da parseFloat das zugrunde liegende Java-Skript verwendet, werden Punkte als Dezimaltrennzeichen akzeptiert, aber serverseitig werden diese abgelehnt. Um dies zu beheben, überschreibe ich das parseFloat wie folgt

Globalize.orgParaseFloat = Globalize.parseFloat;
Globalize.parseFloat = function(value) {
    var culture = this.findClosestCulture();
    var seperatorFound = false;
    for (var i in culture.numberFormat) {
        if (culture.numberFormat[i] == ".") {
            seperatorFound = true;
        }
    }

    if (!seperatorFound) {
        value = value.replace(".", "NaN");
    }

    return this.orgParaseFloat(value);
};

Ich habe ein Ticket bei ihrem Github eröffnet, vielleicht wird das behoben

Question 8

nach einiger Recherche … fand ich eine Lösung.

Web.config
in <system.web> hinzufügen

<globalization culture="auto" uiCulture="auto" enableClientBasedCulture="true"/>

HtmlHelper-Klasse erweitern

namespace System.Web.Mvc
{
    public static class LocalizationHelper
    {
        public static IHtmlString MetaAcceptLanguage(this HtmlHelper html)
        {
            var acceptLang = HttpUtility.HtmlAttributeEncode(Thread.CurrentThread.CurrentUICulture.ToString());
            return new HtmlString(string.Format("<meta name="accept-language" content="{0}"/>", acceptLang));
        }
    }
}

_Layout.cshtml
am Ende von <head> hinzufügen

@Html.MetaAcceptLanguage();
<script type="text/javascript">
    $(document).ready(function () {
        var data = $("meta[name="accept-language"]").attr("content");
        $.global.preferCulture(data);
    });
</script>

Nach diesen Änderungen kann ich Dezimalzahlen mit meiner Web-GUI manipulieren.

Gruß Giacomo