Building simple multilingual ASP.NET Core website

简介

在本教程中，我们将在ASP.NET Core中创建新的多语言网站并将其发布到IIS。ASP.NET Core版本1.0于2016年6月发布，因此它是一个相当新的工具。它的主要特点是，我们可以开发和运行我们的应用程序跨平台在Windows，Linux和Mac。今天我们将专注于Windows。与ASP.NET MVC 5相比，ASP.NET Core包含一些差异，所以从简单的东西开始是一个好主意，我们的网站由两个网页组成，都使用三种语言，这是一个很好的开始。

正在创建。Windows上的NET Core环境

要开始使用ASP.NET Core，我们需要安装Visual Studio Update 3的Visual Studio 2015。如果您已经安装了这两个步骤，请跳过此步骤。如果没有，你可以在这里免费获得Visual Studio社区:Visual Studio Community 2015下载Visual Studio Update 3:Visual Studio Update 3下载在安装Visual Studio Community 2015期间，只需选择默认安装。

正在安装。NET Core 1.0的Visual Studio和.NET Core Windows Server托管

现在我们需要安装。NET Core 1.0的Visual Studio和.NET Core Windows Server托管，因此我们将能够构建和发布我们的网站。你可以得到。NET Core 1.0的Visual Studio在这里:。NET Core 1.0 for Visual Studio下载和。NET Core Windows Server主机在这里:。NET Core Windows Server托管下载。

创建网站

如果我们已经安装了所有这些必需品，我们可以继续创建一个新网站。为此，请打开Visual Studio 2015，转到文件/新建/项目Visual C #/Web/ASP.NET Core Web应用程序 (.NET Core) 它的名字netcoreweb (图1)。图1-为ASP.NET Core应用程序
在下一个窗口中，我们需要选择模板类型以及身份验证类型。在我们的例子中，它将分别Web应用程序和无身份验证。主机在云中应取消选中选项 (图2)。

图2-选择正确的模板和类型的身份验证

新的ASP.NET Core项目刚刚创建。此外，我们可以在我们的web浏览器中显示它。为此，请单击导航栏上的 “ IIS Express ” 按钮。几秒钟后，默认网站应该出现在我们的网络浏览器中。我们可以在导航栏上的所有项目之间切换。图3-默认网站创建，同时创建新的ASP.NET Core项目

添加网页和静态文件

，现在我们继续创建自己的网站。本教程中提到的所有目录和文件都放在src/NETCoreWebsite in解决方案资源管理器首先，我们应该删除不必要的文件。为此，请转到视图/主页 ，并删除放置在那里的所有三个网页。之后去并删除wwwroot/images目录中包含的所有图像。现在是时候将我们的网页添加到项目中了。转到视图/主页上，右键单击它并选择添加/新建项目图4-添加新网页到项目
在新窗口中
选择。NET Core/ASP.NET/MVC视图页。它的名字FirstWebpage.cshtml (图5)。图5-添加新网页到项目，延续
我们的网页刚刚创建。重复该步骤SecondWebpage.cshtml .现在我们要填满。我们在最后一步用HTML代码创建的cshtml文件。重要: 。cshtml文件应仅包含 <body> 标记的内容不声明共享元素 (如导航栏或页脚)，引用CSS文件，字体和 <script> 标签。<body> 标签也不应该包括在内。现在是时候添加静态文件，如图像，CSS或JavaScript到我们的项目。几个步骤前，我们删除了不必要的图像wwwroot/images .现在，我们要将图像添加到此目录中。右键单击它并选择打开文件夹在文件资源管理器中 (图6)。这将在文件资源管理器中打开图像目录，现在我们所要做的就是在这里复制我们的图像。注意: 在每个图像路径的开头都要添加 “~/”。图6-打开目录在文件资源管理器中轻松添加新项目到它

非常相似的方式，我们可以添加CSS和JavaScript文件。我们只需要将它们添加到wwwroot/css orwwwroot/js .ASP.NET Core使用MVC模式，这意味着控制器负责向最终用户显示我们的视图。要显示我们的网页，我们需要编辑放置在HomeController.cs控制器目录。在HomeController.cs关于 () 和Contact() 的删除方法。然后复制Index() 方法并将其粘贴到原始Index() 方法的下方。之后，在第一种方法中将 “Index” 更改为 “firstwebage”，在第二种方法中将 “Index” 更改为 “SecondWebpage”。这些方法只返回视图，允许在浏览器中显示我们的网页。完成此步骤后，我们的HomeController.cs应该是这样的类:公共类主页控制:控制器{公共IActionResultFirstWebpage(){返回视图 ();}公共IActionResultSecondWebpage(){返回视图 ();}公共IActionResult错误 (){返回视图 ();}}
转到Startup.cs调用Configure类和find方法。在方法体中，我们会发现类似的代码:app.UseMvc (路由 =>{路线。MapRoute(姓名:“默认”,模板:“{controller = Home}/{action = Index}/{id?}”);}); Change{action = Index} to{action = FirstWebpage} 默认显示我们选择的网页。在下一步中，我们将添加对CSS和JavaScript文件的引用并提取共享文件。

提取共享文件

要提取共享文件，我们必须编辑文件 _layout.cshtml。布局页面包含网站的结构和共享内容。当网页 (内容页) 链接到布局页时，它将根据布局页 (模板) 显示。布局页面就像一个普通的网页，除了调用 @ RenderBody() 方法，其中将包括内容页面。打开_Layout.cshtml .正如我们所看到的，我们的 <head> 标签以及对CSS和JavaScript文件的引用就在这里定义。让我们从CSS开始。查找名为的环境发展。请注意，有两个这样调用的环境，一个在 <head> 中，一个在 <body> 中。我们想添加对CSS文件的引用，所以我们当然要更改 <head> 的代码发展环境。在发展我们会发现<链接rel= “样式表”href= “~/css/site.css”/> .我们想添加对我们自己的CSS文件的引用，所以我们需要简单地更改site.css到我们的CSS文件的名称。我们还需要添加对我们网站上使用的字体的引用。添加<链接rel= “样式表”href= ” https://fonts.googleapis.com/css？family=Open+Sans : 400,600″/> 下面的CSS文件引用。复制包含的内容非常重要开发环境暂存，生产环境 (可以在下面找到)，所以我们将能够在发布我们的项目后使用添加的引用。现在我们将添加对JavaScript文件的引用。在 <body> 的声明中查找名为的环境发展。在那里，我们会发现线看起来像这样:<脚本src= “~/js/site.js”asp-append-版本= “true”></脚本> 就像以前一样，我们要做的就是改变site.js我们的JavaScript文件的名称。在这种情况下，这将是popups.js .再次，复制的内容开发环境环境暂存、生产。编辑的最后一点_layout.cshtml用于定义我们网站的共享元素。在我们的例子中，它将是导航栏和页脚，这两个网页是相同的。我们只需要用我们自己的导航条形码替换默认的导航条形码，并对页脚重复相同的步骤。如果已经完成，我们可以点击IIS Express的按钮，并在浏览器中显示我们的网站。

使用资源本地化网站

是快速和简单的方法来本地化我们的网站。你可以在这里阅读更多关于它:全球化和本地化在添加任何资源之前，我们需要实现一个策略来为每个请求选择语言。为此，请转到Startup.cs调用和查找方法ConfigureServices。用下面的代码替换方法体:services.AddLocalization(options => options.ResourcesPath = “Resources”);services.AddMvc()。AddViewLocalization(LanguageViewLocationExpanderFormat.Suffix) 。AddDataAnnotationsLocalization();我们将本地化服务添加到服务容器，并将资源路径设置为资源 (我们将在稍后创建)。它还将允许我们基于视图文件后缀进行本地化。我们希望将我们的网站本地化为三种语言: 英语，波兰语和德语。默认语言为英语。在Startup.cs调用的查找方法配置并添加如下代码:varsupportedCultures =新[]{新CultureInfo(“en-US”),新CultureInfo(“pl-PL”),新CultureInfo(“de-DE”)};app.UseRequestLocalization(新RequestLocalizationOptions{DefaultRequestCulture =新RequestCulture(“en-US”),SupportedCultures = supportedCultures,SupportedUICultures = 支持的文化});
在一开始Startup.cs以下代码添加:使用系统。全球化;使用Microsoft.AspNetCore.Mvc.Razor;使用Microsoft.AspNetCore.Localization; 我们现在将添加资源来本地化我们的网站。右键单击src/NETCoreWebsite in解决方案资源管理器，然后选择添加/新建文件夹 (图7)。它的名字资源。
图7-添加新目录，其中将包含我们的资源文件

之后，右键单击资源目录并选择添加/新建项目 (图8)。在新窗口中选择。NET核心/代码/资源文件。它的名字Views.Home.FirstWebpage.en.resx (fig. 9).图9-添加新资源文件的
资源文件英语的FirstWebpage.cshtml刚刚创建。对波兰语和德语重复此步骤 (请记住更改en分别为pl和de )。之后，我们应该在我们的3个资源文件资源目录。现在我们需要创建资源文件SecondWebpage.cshtml .重复上述步骤三次 (每种语言)。记得要改变FirstWebpage toSecondWebpage在资源文件的名称和更改后缀。我们还需要创建资源文件_Layout.cshtml .正如你所注意到的，资源文件的名称是正确的路径。cshtml文件加语言后缀。因为_layout.cshtml未放置在主目录 ，但在共享目录，我们的英语资源文件名将Views.Shared._Layout.en.resx .对波兰语和德语重复此步骤。我们可以继续本地化我们的网站。在的开头添加以下代码第一个网页.cshtml，第二个网页.cshtml_Layout.cshtml:@使用Microsoft.AspNetCore.Mvc.本地化@ injectIViewLocalizer本地化要本地化代码中的任何字符串，我们需要替换中选择的字符串。cshtml文件与@航向信标 [“字符串或它的ID”] 。这是一个很好的做法，以取代短句和单词字符串@航向信标 [“字符串”] 和长句@航向信标 [“ID”] 。例如，如果我们想要本地化联系我们 ，我们应该写@航向信标 [“联系我们”] ，但如果我们想本地化本教程将教您使用ASP在Windows上建立和发布多语言网站。NET Core,更好地写@航向信标 [“关于教程”] 。让我们假设我们使用@航向信标 [“关于教程”] 在我们的代码中。要将其翻译成其他语言，请打开适当的资源文件，在密钥写入关于教程 值翻译的句子。就这样.我们可以在我们网站的导航栏中选择适当的语言。为了使其工作，我们需要在_Layout.cshtml:<李><ahref= “?culture = pl-PL”>PL</a></李><李><ahref= “?culture = en-US”>EN</a></李><李><ahref= “?culture = de-DE”>DE</a></李>

使用您喜欢的框架为任何场景创建现代Web应用程序。下载Ignite UI今天体验一下Infragistics JavaScript/HTML5控件的强大功能。

<br