使用下拉菜单更改 Web 应用程序的语言 - 在 ASP.NET Core 中使用视图和部分视图

问题描述 投票：0回答：1

我有一个使用 MVC 的 ASP.NET Core 基本 Web 应用程序。要求是有某种切换、按钮、下拉菜单，可以更改页面的语言（波兰语和英语） - 目前导航栏、主页和关于页面。我使用共享资源、本地化等方法来做到这一点，但后来我被要求更直接地做到这一点，通过使用两种变体的所有视图和部分视图：波兰语（即 Index_pl.cshtml）和英语（即 Index.cshtml）。 cshtml）。 我用两个按钮完成了下拉菜单，复制了所有视图和部分视图。我尝试实现一些 JavaScript 函数并更新控制器以单击更改此语言，但它在此状态下不起作用。 有谁知道我可以在这段代码中添加什么或者如何更改我的实现？

Views structure

_Layout.cshtml：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MelanomaWebApp</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/MelanomaWebApp.styles.css" asp-append-version="true" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
</head>
<body>
    <header>
        <partial name="~/Views/Shared/_NavBar.cshtml"></partial>
    </header>

    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2024 - MelanomaWebApp - <a asp-area="" asp-controller="Home" asp-action="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)

    <script>
        function changeLanguage(language) {
            currentLanguage = language;

            location.reload();
        }
    </script>
</body>
</html>

_NavBar.cshtml（相同的代码位于_NavBar_pl.cshtml - 仅将英语单词翻译为波兰语）：

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
    <div class="container-fluid">
        <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MelanomaWebApp</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 justify-content-between">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-controller="About" asp-action="Index">About</a>
                </li>
            </ul>
        </div>
        <div>
            <div class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown" role="button" data-toggle="button" data-bs-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    <i class="bi bi-globe-americas"></i>
                    Change language (PL/EN)
                </a>
                <div class="dropdown-menu dropdown-menu-end bg-light text-center" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item text-secondary" style="text-decoration: none;" href="#" onclick="changeLanguage('PL')">
                        <i class="pl-icon"></i>
                        Polski (PL)
                    </a>
                    <a class="dropdown-item text-secondary" style="text-decoration: none;" href="#" onclick="changeLanguage('EN')">
                        <i class="flag flag-united-kingdom"></i>
                        English (EN)
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>

Home View的Index.cshtml（与Index_pl.cshtml中的代码相同）：

@{
    ViewData["Title"] = "Home Page";
}

<div class="container text-center mt-5 mb-5 fs-3 fw-bold">
    <p>The name of the project is confidential</p>
</div>
<div class="container text-center mt-5 mb-5">
    <p>Research project No. xxxx<br />
        of some Research State<br />
        Location
    </p>
</div>
<div class="container fixed-bottom mb-2">
    <div class="row d-flex mb-5 text-center text-muted">
        <div class="col p-2">
            <p>Department of something <br />
            Some university <br />
            address <br />
            address</p>
        </div>
        <div class="col ms-auto p-2">
            <p>name of institute <br />
            address<br />
            address</p>
        </div>
    </div>
</div>

About View的Index.cshtml（与Index_pl.cshtml中的代码相同）：

<body>
    <div class="text-center">
        <p>This is some about page content</p>
    </div>
</body>

家庭控制器：

using MelanomaWebApp.Models;
using Microsoft.AspNetCore.Mvc;
using System.Diagnostics;

namespace MelanomaWebApp.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;
        private string CurrentLanguage { get; set; } = "EN";

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

        public IActionResult Index()
        {
            string viewName = "Index";

            if (CurrentLanguage == "PL") 
            {
                viewName += "_pl";
            }
            return View(viewName);
        }

        public IActionResult Index_pl()
        {
            return View();
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

在这种状态下，当我点击EN或PL按钮时，什么也没有发生，我仍然显示默认的英文页面。

javascript c# html css asp.net-core-mvc
1个回答
0
投票

通过在两种变体中使用所有视图和部分视图：抛光（即 Index_pl.cshtml）和英语（即 Index.cshtml）。

您可以使用 JavaScript 更改前端页面 URL 中的语言参数，并将其传递到后端，然后从查询参数中获取语言参数值，以重新加载页面以应用新的语言参数。以下是您可以用作参考的示例：

为了有效区分语言页面，我在index_pl页面中添加了

<h2>PL Content</h2>
元素。

<div class="container text-center mt-5 mb-5 fs-3 fw-bold">
    <p>The name of the project is confidential</p>
</div>
<div class="container text-center mt-5 mb-5">
    <p>
        Research project No. xxxx<br />
        of some Research State<br />
        Location content
    </p>
    <h2>PL Content</h2>
</div>
<div class="container fixed-bottom mb-2">
    <div class="row d-flex mb-5 text-center text-muted">
        <div class="col p-2">
            <p>
                Department of something <br />
                Some university <br />
                address <br />
                address
            </p>
        </div>
        <div class="col ms-auto p-2">
            <p>
                name of institute <br />
                address<br />
                address
            </p>
        </div>
    </div>
</div>

_Layout中的js：

<script>
    function changeLanguage(language) {
            
        var url = window.location.href;
        var newUrl;

        if (url.indexOf('?') > -1) {
            if (url.indexOf('language') > -1) {
                newUrl = url.replace(/(language=)[^\&]+/, '$1' + language);
            } else {
                newUrl = url + '&language=' + language;
            }
        } else {
            newUrl = url + '?language=' + language;
        }

        window.location.href = newUrl;
    }
</script>

控制器：

private readonly ILogger<HomeController> _logger;
        
public HomeController(ILogger<HomeController> logger)
{
    _logger = logger;
}

public IActionResult Index()
{
    string currentLanguage = HttpContext.Request.Query["language"];

            
    if (string.IsNullOrEmpty(currentLanguage) || currentLanguage != "PL")
    {
        currentLanguage = "EN";
    }

    string viewName = "Index";
    if (currentLanguage == "PL")
    {
        viewName += "_pl";
    }

    return View(viewName);
}

默认语言为英语：

选择PL后：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.