ASP.NET Core Razor and others

The DomBinder works well in Razor pages. You can render the initial state on the server (for SEO) and let the client-side library take over for interactions.

WARNING

For installing the vue build inside razor or similar traditional MPAs, see the Vue integration for more info. integrations/vue.html#using-in-razor-or-in-other-mpas

1. Add the library in your layout

Make sure to put it inside the head tag.

html

<head>
  <script src="https://unpkg.com/@ardinsys/intl"></script>
</head>

2. Prepare the ViewModel

Pass your translation bundles and current locale to the view.

csharp

public class IntlViewModel
{
    public string CurrentLocale { get; set; } = "en";
}

public class PageViewModel : IntlViewModel
{
    public string UserName { get; set; };
    public decimal ViewCount { get; set; };
    public decimal Total { get; set; };
}

3. The Razor View (`Index.cshtml`)

The key is properly formatting the data-params attribute. Since Razor renders server-side, we want to ensure the parameters are valid JSON.

html

@model PageViewModel

<!-- Should move scripts to body -->
@section Scripts {
<script>
  const initialLocale = "@Model.CurrentLocale";
  const bundles = {
    en: {
      messages: {
        pageTitle: "Name of the page",
        welcome: {
          user: "Hello {name}",
        },
      },
      numberFormats: { default: { minimumFractionDigits: 2 } },
    },
    hu: {
      messages: {
        pageTitle: "Oldal neve",
        welcome: {
          user: "Szia {name}",
        },
      },
      numberFormats: { default: { minimumFractionDigits: 2 } },
    },
  };

  const translator = ardinIntl.createIntl(initialLocale, bundles);

  // Bind to DOM and expose globally (optional)
  window.binder = new ardinIntl.DomBinder(translator);
</script>
}

<h1 data-t="pageTitle">
  <!-- Your fallback content if required (mostly for better SEO) -->
  My page
</h1>

<p
  data-t="welcome.user"
  data-params="@Json.Serialize(new { name = Model.UserName })"
>
  <!-- Your fallback content if required (mostly for better SEO) -->
  Hello @Model.UserName
</p>

<span data-n="@Model.ViewCount" data-fmt="compact">
  <!-- Your fallback content if required (mostly for better SEO) -->
  @Model.ViewCount
</span>

<span data-c="@Model.Total" data-curr="USD">
  <!-- Your fallback content if required (mostly for better SEO) -->
  @Model.Total.ToString("C")
</span>

<button onclick="window.binder.setLocale('en')">English</button>
<button onclick="window.binder.setLocale('hu')">Magyar</button>

ASP.NET Core Razor and others ​

1. Add the library in your layout ​

2. Prepare the ViewModel ​

3. The Razor View (Index.cshtml) ​

ASP.NET Core Razor and others

1. Add the library in your layout

2. Prepare the ViewModel

3. The Razor View (`Index.cshtml`)