Reputation:

Add Localization to _Layout.cshtml in ASP:Net Razor Pages

i'm developing my first multilanguage webpage in ASP.NET Core 5.0 Preview. For the multilanguage support i'm using Resources. My problem is that the multilanguage support is working fine on every page except the _Layout.cshtml. I can't figure out who to make the Navabr and the overall Layout multilanguage.

On my index.cshtml i have the followingthat works fine :

@page
@inject IStringLocalizer<IndexModel> localizer
@inject IHtmlLocalizer<IndexModel> htmlLocalizer
@model IndexModel
@{
    ViewData["Title"] = "Home page";
    var requestCultureFeature = HttpContext.Features.Get<IRequestCultureFeature>();
    var requestCulture = requestCultureFeature.RequestCulture;
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>@htmlLocalizer["Welcome"].</p>


</div>

But i cannot add @page to _Layout.cshtml becuase it isn't a page (also the @renderbody wouldn't work anymore), but in my case i will need it because of the HttpContext that needs it. How can I make this multilanguage as the index.cshtml above?

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WHERE I WANT TO INSERT THE RESOURCE TEXT</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">Parish_N_S</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
                <vc:culture-switcher />
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - ParishNatzSchabs - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Upvotes: 1

Answers (2)

Luis Leuppi

Reputation: 78

Edit:

It seems like you always need to add .Key when the translated text should be inside of a @Html.ActionLink("", "") element.

So:

@Html.ActionLink(localizer["KEY"].Value, "actionToRedirectTo")

Old:
The solution for me was to use

@localizer["KEY"].Value

instead of

@localizer["KEY"]

I only need to explicitly use .Value when using the IViewLocalizer in the _Layout.cshtml. In any other view it works fine without it.

Upvotes: 2

Fei Han

Reputation: 27803

My problem is that the multilanguage support is working fine on every page except the _Layout.cshtml. I can't figure out who to make the Navabr and the overall Layout multilanguage.

You can try to achieve the requirement by using ViewLocalizer, like below.

Inject IViewLocalizer in _Layout.cshtml

@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer

Apply localization on _Layout.cshtml

<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
    <ul class="navbar-nav flex-grow-1">
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="" asp-page="/Index">@Localizer["Home"]</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">@Localizer["Privacy"]</a>
        </li>
    </ul>
</div>

Test Result

Upvotes: 1

Add Localization to _Layout.cshtml in ASP:Net Razor Pages

Answers (2)

Related Questions