Using Globalize - ASP.NET Core Localization Demo (2024)

Generic Light

Generic Dark

Generic Light Compact

Generic Dark Compact

@section ExternalDependencies { <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script>}@section Localization { <script src="@Url.Action( "CldrData", "Localization", new { t = CldrDataScriptBuilder.GetCacheParam() })"></script> <script src="https://cdn3.devexpress.com/jslib/23.2.5/js/localization/dx.messages.de.js"></script> <script src="https://cdn3.devexpress.com/jslib/23.2.5/js/localization/dx.messages.ru.js"></script>}@model IEnumerable<DevExtreme.NETCore.Demos.Models.Payment><div id="data-grid-demo"> @(Html.DevExtreme().DataGrid() .DataSource(Model) .Columns(columns => { columns.Add().DataField("PaymentId") .Caption(new JS("formatMessage('Number')")) .Width(100) .AllowEditing(false); columns.Add().DataField("ContactName") .Caption(new JS("formatMessage('Contact')")); columns.Add().DataField("CompanyName") .Caption(new JS("formatMessage('Company')")); columns.Add().DataField("Amount") .Caption(new JS("formatMessage('Amount')")) .DataType(GridColumnDataType.Number) .Format(Format.Currency) .EditorOptions(new { format = "currency", showClearButton = true }); columns.Add().DataField("PaymentDate") .Caption(new JS("formatMessage('PaymentDate')")) .DataType(GridColumnDataType.Date); }) .FilterRow(filterRow => filterRow .Visible(true) .ApplyFilter(GridApplyFilterMode.Auto) ) .Editing(c => c .Mode(GridEditMode.Popup) .AllowUpdating(true) .Popup(e => e .Width(700) .Height(345) ) ) ) <div class="options"> <div class="caption">Options</div> <div class="option"> <label for="selectInput">Language</label> @(Html.DevExtreme().SelectBox() .ID("selectBox") .InputAttr("id", "selectInput") .InputAttr("aria-label", "Language") .DataSource(new JS("locales")) .DisplayExpr("name") .ValueExpr("value") .Value(new JS("locale")) .OnValueChanged("changeLocale") ) </div> </div></div><script> var dictionary = { "en": { "Number": "Number", "Contact": "Contact", "Company": "Company", "Amount": "Amount", "PaymentDate": "Payment Date" }, "de": { "Number": "Nummer", "Contact": "Ansprechpartner", "Company": "Firma", "Amount": "Betrag", "PaymentDate": "Zahlungsdatum" }, "ru": { "Number": "Номер", "Contact": "Имя", "Company": "Организация", "Amount": "Сумма", "PaymentDate": "Дата оплаты" } }; Globalize.loadMessages(dictionary); var formatMessage = Globalize.formatMessage.bind(Globalize); var locales = [ { name: "English", value: "en" }, { name: "Deutsch", value: "de" }, { name: "Русский", value: "ru" } ]; var locale = getLocale(); Globalize.locale(locale); function changeLocale(data) { setLocale(data.value); document.location.reload(); } function getLocale() { var locale = sessionStorage.getItem("locale"); return locale != null ? locale : "en"; } function setLocale(locale) { sessionStorage.setItem("locale", locale); }</script>

using DevExtreme.AspNet.Mvc;using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;using System.Linq;namespace DevExtreme.NETCore.Demos.Controllers { public class LocalizationController : Controller { public ActionResult UsingGlobalize() { return View(SampleData.Payments); } public ActionResult CldrData() { return new CldrDataScriptBuilder() .SetCldrPath("~/wwwroot/cldr-data") .UseLocales(new[] { "de", "ru" }) .Build(); } }}

using System;using System.Collections.Generic;using System.Linq;namespace DevExtreme.NETCore.Demos.Models { public class Payment { public int PaymentId { get; set; } public string ContactName { get; set; } public string CompanyName { get; set; } public int Amount { get; set; } public DateTime PaymentDate { get; set; } }}

using System;using System.Collections.Generic;namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<Payment> Payments = new[] { new Payment { PaymentId = 1, ContactName = "Nancy Davolio", CompanyName = "Premier Buy", Amount = 1740, PaymentDate = DateTime.Parse("2013/01/06") }, new Payment { PaymentId = 2, ContactName = "Andrew Fuller", CompanyName = "ElectrixMax", Amount = 850, PaymentDate = DateTime.Parse("2013/01/13") }, new Payment { PaymentId = 3, ContactName = "Janet Leverling", CompanyName = "Video Emporium", Amount = 2235, PaymentDate = DateTime.Parse("2013/01/07") }, new Payment { PaymentId = 4, ContactName = "Margaret Peaco*ck", CompanyName = "Screen Shop", Amount = 1965, PaymentDate = DateTime.Parse("2013/01/03") }, new Payment { PaymentId = 5, ContactName = "Steven Buchanan", CompanyName = "Braeburn", Amount = 880, PaymentDate = DateTime.Parse("2013/01/10") }, new Payment { PaymentId = 6, ContactName = "Michael Suyama", CompanyName = "PriceCo", Amount = 5260, PaymentDate = DateTime.Parse("2013/01/17") }, new Payment { PaymentId = 7, ContactName = "Robert King", CompanyName = "Ultimate Gadget", Amount = 2790, PaymentDate = DateTime.Parse("2013/01/21") }, new Payment { PaymentId = 8, ContactName = "Laura Callahan", CompanyName = "EZ Stop", Amount = 3140, PaymentDate = DateTime.Parse("2013/01/01") }, new Payment { PaymentId = 9, ContactName = "Anne Dodsworth", CompanyName = "Clicker", Amount = 6175, PaymentDate = DateTime.Parse("2013/01/24") }, new Payment { PaymentId = 10, ContactName = "Clark Morgan", CompanyName = "Store of America", Amount = 4575, PaymentDate = DateTime.Parse("2013/01/11") } }; }}

.options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px;}.option { margin-top: 10px;}.caption { font-size: 18px; font-weight: 500;}.option > label { margin-right: 10px;}.option > .dx-selectbox { display: inline-block; vertical-align: middle;}