javascript - MVC 5 で Jquery Globalize を使用する

Question

MVC5 の jquery globalize プラグインで MVC の目立たない検証を使用しようとしています (パッケージjquery-validate-globalizeと組み合わせて)。学習目的で、 hereに従ってデモプロジェクトを開始しましたが、globalize で実行できません (デフォルトの Microsoft の目立たない検証で動作します)。モデルは非常に単純です。

public class GlobalizeModel
{
    [Range(10.5D, 20.3D)]
    public decimal Double { get; set; }

    [Required]
    public DateTime? DateTime { get; set; }
}

_Layout ページの下部で次のように Globalize を開始しようとします (ビューは 2 つの入力のみで最小限です): ( https://johnnyreilly.github.io/globalize-so-what-c ha から必要なファイルのリストを取得します) -したい/ )

<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<!--cldr scripts-->
<script src="~/Scripts/cldr.js"></script>
<script src="~/Scripts/cldr/event.js"></script>
<script src="~/Scripts/cldr/supplemental.js"></script>
<!--globalize scripts-->
<script src="~/Scripts/globalize.js"></script>
<script src="~/Scripts/globalize/number.js"></script>
<script src="~/Scripts/globalize/date.js"></script>
<!--jquery globalize-->
<script src="~/Scripts/jquery.validate.globalize.js"></script>


<script>

    $.when(
        $.getJSON("/Scripts/cldr/supplemental/likelySubtags.json"),
        $.getJSON("/Scripts/cldr/main/en/numbers.json"),
        $.getJSON("/Scripts/cldr/supplemental/numberingSystems.json"),
        $.getJSON("/Scripts/cldr/main/en/ca-gregorian.json"),
        $.getJSON("/Scripts/cldr/main/en/timeZoneNames.json"),
        $.getJSON("/Scripts/cldr/supplemental/timeData.json"),
        $.getJSON("/Scripts/cldr/supplemental/weekData.json"),
        $.getJSON("/Scripts/cldr/main/tr/numbers.json"),
        $.getJSON("/Scripts/cldr/main/tr/ca-gregorian.json"),
        $.getJSON("/Scripts/cldr/main/tr/timeZoneNames.json"),
        console.log("JSONs loaded")
        ).then(function () {
            console.log("start slicing");
            return [].slice.apply(arguments, [0]).map(function (result) {
                console.log("slicing done");
                return result[0];
            });
        }).then(Globalize.load).then(function () {
            Globalize.locale("en");
            console.log("Locale set to en");
        }).then(console.log("LOADED EVERYTHING"));


</script>

しかし、ページを実行すると、コンソールログJSOns loadedとLOADED EVERYTHING. さらに、数値テキストボックスに何かを入力してクライアント側の検証を試みると (そしてもちろんフォーカスが失われた場合)、コンソールに次のエラーが表示されます。

Uncaught Error: E_DEFAULT_LOCALE_NOT_DEFINED: Default locale has not been defined.

この投稿はこちらと似ていますが、そこにリストされているものを確認しようとしました. JSON オブジェクトがフェッチされていないと思いますが、私は aj JS が苦手なので、よくわかりません。次の項目を web.config に追加して、これがファイルサービスに関連するものであるかどうかを確認しましたが、役に立ちませんでした。

<system.webServer>
 <staticContent>
  <remove fileExtension=".json"/>
  <mimeMap fileExtension=".json" mimeType="application/json" />
 </staticContent>
</system.webServer>

カルチャは、次のように web.config で auto に設定されています。

<system.web>
  <globalization culture="auto" uiCulture="auto" />
  <compilation debug="true" targetFramework="4.5.2"/>
  <httpRuntime targetFramework="4.5.2"/>
</system.web>

Scriptsここでフォルダー構造を確認できます。

それで、ここで何が問題なのですか？どうすればこれを機能させることができますか？

score 4 · Accepted Answer

私は最近、I18n を MVC5 Web アプリに追加しようとして、同じ問題に遭遇しました。数日間の調査と、コードをベースとして部分的に使用した後、実装に役立つものがいくつか見つかりました。

私の解決策: 別のプロジェクトで、10 進数と DateTime のプロパティを ApplicationUser クラスに追加しました。

public class ApplicationUser : IdentityUser
{
    public async Task<ClaimsIdentity> GenerateUserIdentityAsync(UserManager<ApplicationUser> manager)
    {
        // Note the authenticationType must match the one defined in CookieAuthenticationOptions.AuthenticationType
        var userIdentity = await manager.CreateIdentityAsync(this, DefaultAuthenticationTypes.ApplicationCookie);
        // Add custom user claims here
        return userIdentity;
    }

    public DateTime birthdate { get; set; }
    public decimal balance { get; set; }
}

次のように、これらのプロパティを受け入れるように RegisterViewModel も変更しました。

public class RegisterViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }

    [Required]
    [DataType(DataType.DateTime)]
    public DateTime birthdate { get; set; }

    [Required]
    [DataType(DataType.Currency)]
    public decimal balance { get; set; }
}

次に、他のコントローラーが継承するベースコントローラーにカルチャを設定します。

public class BaseController : Controller
{
    protected override IAsyncResult BeginExecuteCore(AsyncCallback callback, object state)
    {
        string[] cultures = { "es-CL", "es-GT", "en-US" };
        Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo(cultures[1]);
        Thread.CurrentThread.CurrentUICulture = Thread.CurrentThread.CurrentCulture;

        return base.BeginExecuteCore(callback, state);
    }
}

これはテスト目的のためだけであり、実際のアプリで文化を取得する方法ではありません。

私のファイル構造はあなたのものと同じで、web.config ファイルを変更していません。

依存関係についてもこのリンクを使用しました。しかし、次に、Register.cshtml のスクリプトセクションでいくつか変更を加えました。

<!-- CLDR -->
<script src="~/Scripts/cldr.js"></script>
<script src="~/Scripts/cldr/event.js"></script>
<script src="~/Scripts/cldr/supplemental.js"></script>
<!-- Globalize -->
<script src="~/Scripts/globalize.js"></script>
<script src="~/Scripts/globalize/number.js"></script>
<script src="~/Scripts/globalize/date.js"></script>
<!-- $ validate -->
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.globalize.js"></script>
<!-- fetch files -->
<script>
    $.when(
        $.getJSON("/Scripts/cldr/supplemental/likelySubtags.json"),
        $.getJSON("/Scripts/cldr/main/en/numbers.json"),
        $.getJSON("/Scripts/cldr/supplemental/numberingSystems.json"),
        $.getJSON("/Scripts/cldr/main/en/ca-gregorian.json"),
        $.getJSON("/Scripts/cldr/main/en/timeZoneNames.json"),
        $.getJSON("/Scripts/cldr/supplemental/timeData.json"),
        $.getJSON("/Scripts/cldr/supplemental/weekData.json"),
        $.getJSON("/Scripts/cldr/main/tr/numbers.json"),
        $.getJSON("/Scripts/cldr/main/tr/ca-gregorian.json"),
        $.getJSON("/Scripts/cldr/main/tr/timeZoneNames.json"),
        ).then(function () {
            console.log("start slicing");
            return [].slice.apply(arguments, [0]).map(function (result) {
                console.log("slicing done");
                return result[0];
            });
        }).then(Globalize.load).then(function () {
            Globalize.locale("en");
            console.log("Locale set to en");
        }).then(console.log("LOADED EVERYTHING"));
</script>

_Layout ビュースクリプトはまったく変更されておらず、コンソールログにも問題はありませんでした。

それだけで、私はうまくいきました。非常によく似たケースなので、あなたにもうまくいくことを願っています。

javascript - MVC 5 で Jquery Globalize を使用する

1 に答える 1

Related

Reference