{"id":680,"date":"2016-10-13T14:52:00","date_gmt":"2016-10-13T14:52:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=680"},"modified":"2025-02-25T15:32:17","modified_gmt":"2025-02-25T15:32:17","slug":"multilingual-asp-net-core-website","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/multilingual-asp-net-core-website","title":{"rendered":"Building Simple Multilingual ASP.NET Core Website"},"content":{"rendered":"\n

Today we\u2019re going to concentrate on Windows. ASP.NET Core contains some differences compared to ASP.NET MVC 5, so it\u2019s a good idea to start with something simple and our website, which consist of two webpages, both in three languages, it\u2019s good offer to start with.<\/p>\n\n\n\n

Creating .NET Core environment on Windows<\/h2>\n\n\n\n

To start with ASP.NET Core, we need to have Visual Studio 2015 with Visual Studio Update 3 installed. Skip this step, if you already installed both of them. If not, you can get Visual Studio Community for free here: Visual Studio Community 2015 Download<\/a> and Visual Studio Update 3 here: Visual Studio Update 3 Download<\/a>. During installation of Visual Studio Community 2015, just select the default installation.<\/p>\n\n\n\n

Installing .NET Core 1.0 for Visual Studio and .NET Core Windows Server Hosting<\/h2>\n\n\n\n

Now we need to install .NET Core 1.0 for Visual Studio and .NET Core Windows Server Hosting, so we will be able to build and publish our website. You can get .NET Core 1.0 for Visual Studio here: .NET Core 1.0 for Visual Studio Download<\/a> and .NET Core Windows Server Hosting here: .NET Core Windows Server Hosting Download<\/a>.<\/p>\n\n\n\n

Creating a website<\/h2>\n\n\n\n

If we already have installed all these necessaries, we can proceed to create a new website. To do so, open Visual Studio 2015, go to File\/New\/Project <\/strong>and choose Visual C#\/Web\/ASP.NET Core Web Application (.NET Core)<\/strong>. Name it NETCoreWebsite<\/strong> (fig. 1).<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Figure 1 \u2013 creating template for ASP .NET Core application<\/p>\n\n\n\n

In the next window we need to choose type of template together with type of authentication. In our case, it will be respectively Web Application<\/strong> and No authentication<\/strong>. Host in the cloud<\/strong> option should be unchecked (fig. 2).<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Figure 2 \u2013 choosing right template and type of authentication<\/p>\n\n\n\n

New ASP.NET Core project has been just created. Moreover, we can display it in our web browser. To do so, click on IIS Express<\/strong> button on the navigation bar. After few second default website should appear in our web browser. We can switch between all items on navigation bar.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Figure 3 \u2013 default website made while creating new ASP.NET Core project<\/p>\n\n\n\n

Adding webpages and static files<\/h2>\n\n\n\n

Now we move on to create our own website. All directories and files which will be mentioned in this tutorial are placed in src\/NETCoreWebsite<\/strong> in Solution Explorer<\/strong>.<\/p>\n\n\n\n

First of all, we should remove unnecessary files. To do so, go to Views\/Home<\/strong> and delete all three webpages placed there. After that go to wwwroot\/images<\/strong> and delete all images that directory contains.<\/p>\n\n\n\n

Now it\u2019s time to add our webpages to project. Go to Views\/Home<\/strong>, right click on it and choose Add\/New item<\/strong> (fig. 4).<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Figure 4 \u2013 adding new webpage to project<\/p>\n\n\n\n

In new window choose .NET Core\/ASP.NET\/MVC View Page<\/strong>. Name it FirstWebpage.cshtml <\/strong>(fig. 5).<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Figure 5 \u2013 adding new webpage to project, continuation<\/p>\n\n\n\n

Our webpage has just been created. Repeat that step for SecondWebpage.cshtml<\/strong>.<\/p>\n\n\n\n

Now we\u2019re going to fill .cshtml files we\u2019ve created in last step with HTML code. IMPORTANT: <\/strong>those.cshtml files should contain only content of <body> tag without <\/strong>declaration of shared elements (like navigation bar or footer), references to CSS files, fonts and <script> tags. <body> tags shouldn\u2019t be included as well.<\/p>\n\n\n\n

It\u2019s time to add static files like images, CSS or JavaScript to our project. Few steps ago we deleted unnecessary images from wwwroot\/images<\/strong>. Now we\u2019re going to add our images right to this directory. Right click on it and choose Open Folder in File Explorer <\/strong>(fig. 6). That will open images directory in File Explorer and now all we have to do is simply copy our images here. NOTE:<\/strong> Remember to add \u201c~\/\u201d at beginning of every image path.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Figure 6 \u2013 opening directory in File Explorer to easily add new items to it<\/p>\n\n\n\n

In very similar way we can add CSS and JavaScript files. We just have to add them to wwwroot\/css <\/strong>or wwwroot\/js<\/strong>.<\/p>\n\n\n\n

ASP.NET Core using MVC pattern, which means that Controllers are responsible for display our Views to end users. To display our webpages, we need to edit HomeController.cs <\/strong>placed in Controllers<\/strong> directory.<\/p>\n\n\n\n

In HomeController.cs <\/strong>delete methods About() and Contact(). Then copy Index() method and paste it just below original Index() method. After that change \u201cIndex\u201d to \u201cFirstWebpage\u201d in first method and to \u201cSecondWebpage\u201d in second method. Those methods only return View which allow to display our webpages in browser. After complete this step, our HomeController.cs<\/strong> class should look like this:<\/p>\n\n\n\n

public class HomeController : Controller {\n    public IActionResult FirstWebpage() {\n        return View();\n    }\n\n    public IActionResult SecondWebpage() {\n        return View();\n    }\n\n    public IActionResult Error() {\n        return View();\n    }\n}<\/pre>\n\n\n\n
Go to Startup.cs<\/strong> class and find method called Configure. In method body we will find code similar to this:<\/p>\n\n\n\n
app.UseMvc(routes=> {\n        routes.MapRoute(name: \"default\",\n            template: \"{controller=Home}\/{action=Index}\/{id?}\");\n    });<\/pre>\n\n\n\n
Change {action=Index} to {action=FirstWebpage} so our chosen webpage will be display by default.<\/p>\n\n\n\n
In next step we will add references to our CSS and JavaScript files and extract shared files.<\/p>\n\n\n\n
Extracting shared files<\/h2>\n\n\n\n
To extract shared files, we have to edit _Layout.cshtml<\/strong> file. A layout page contains the structure and shared content of website. When a web page (content page) is linked to a layout page, it will be displayed according to the layout page (template).<\/p>\n\n\n\n
The layout page is just like a normal web page, except from a call to the @RenderBody() method where the content page will be included.<\/p>\n\n\n\n
Open _Layout.cshtml<\/strong>. As we can see, our <head> tag and references to CSS and JavaScript files are defined right here.<\/p>\n\n\n\n
Let\u2019s start with CSS. Find environment called Development<\/strong>. Note that there are two environments called like this, one in <head> and one in <body>. We want to add reference to CSS file, so of course we\u2019re going to change code of <head> Development<\/strong> environment.<\/p>\n\n\n\n
In Development<\/strong> we will find <link rel=”stylesheet” href=”~\/css\/site.css” \/>. We want to add reference to our own CSS file, so we need to simply change site.css to name of our CSS file.<\/p>\n\n\n\n
We need also to add reference to font that would be used on our website. Add <link rel=”stylesheet” href=”https:\/\/fonts.googleapis.com\/css?family=Open+Sans:400,600″ \/> just below CSS files reference.<\/p>\n\n\n\n
It\u2019s very important to copy contain of Development<\/strong> environment to Staging,Production<\/strong> environment (it can be found just below), so we will be able to use added references after publishing our project.<\/p>\n\n\n\n
Now we will add reference to JavaScript files.<\/p>\n\n\n\n
In declaration of <body> find environment called Development<\/strong>. There we will find line looks like this:<\/p>\n\n\n\n
<script<\/strong> src<\/strong>=”~\/js\/site.js” asp-append-version<\/strong>=”true”><\/script<\/strong>><\/p>\n\n\n\n
Just like before, all we have to do is to change site.js to name of our JavaScript file. In that case, it would be popups.js.<\/p>\n\n\n\n
Again, copy content of Development<\/strong> environment to Staging, Production<\/strong> environment.<\/p>\n\n\n\n
Last point of editing _Layout.cshtml<\/strong> is to define shared elements of our website. In our case, it will be navigation bar and footer, which are the same for both webpages. We just need to replace default navigation bar code with our own navigation bar code and repeat same step for footer.<\/p>\n\n\n\n
If it has been done, we can click IIS Express<\/strong> button and display our website in browser.<\/p>\n\n\n\n
Using resources to localize website<\/h2>\n\n\n\n
Using recourses is quick and easy way to localize our website. You can read more about it here: Globalization and localization<\/a>.<\/p>\n\n\n\n
Before we add any resources, we need to implement a strategy to select the language for each request. To do so, go to Startup.cs<\/strong> and find method called ConfigureServices<\/strong>. Replace method body with code like below:<\/p>\n\n\n\n
services.AddLocalization(options=> options.ResourcesPath=\"Resources\");\nservices.AddMvc() .AddViewLocalization(LanguageViewLocationExpanderFormat.Suffix) .AddDataAnnotationsLocalization();<\/pre>\n\n\n\n
We added the localization services to the services container and set resources path to Resources<\/strong> (we will create that in a moment). It will also allow us to base localization on the view file suffix.<\/p>\n\n\n\n
We want to localize our website in three languages: English, Polish and German. Default language is English. In Startup.cs <\/strong>find method called Configure<\/strong> and add to it code like below:<\/p>\n\n\n\n
var supportedCultures=new[] {\n    new CultureInfo(\"en-US\"),\n    new CultureInfo(\"pl-PL\"),\n    new CultureInfo(\"de-DE\")\n};\n\napp.UseRequestLocalization(new RequestLocalizationOptions {\n        DefaultRequestCulture=new RequestCulture(\"en-US\"),\n        SupportedCultures=supportedCultures,\n        SupportedUICultures=supportedCultures\n    });<\/pre>\n\n\n\n
At the very beginning of Startup.cs <\/strong>add following code:<\/p>\n\n\n\n
using\u00a0System.Globalization;\nusing\u00a0Microsoft.AspNetCore.Mvc.Razor;\nusing\u00a0Microsoft.AspNetCore.Localization;<\/pre>\n\n\n\n
Now we will add resources to localize our website. Right click on src\/NETCoreWebsite<\/strong> in Solution Explorer<\/strong> and choose Add\/New Folder <\/strong>(fig. 7). Name it Resources.<\/strong><\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Figure 7 \u2013 adding new directory which will contain our resource files<\/p>\n\n\n\n
After that, right click on Resources <\/strong>directory and choose Add\/New Item<\/strong> (fig. 8).<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
In new window choose .NET Core\/Code\/Resources File<\/strong>. Name it Views.Home.FirstWebpage.en.resx<\/strong> (fig. 9).<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Figure 9 \u2013 adding new resources file<\/p>\n\n\n\n
Resources file for FirstWebpage.cshtml<\/strong> in English language has just been created. Repeat this step for Polish and German language (remember to change en<\/strong> to respectively pl <\/strong>and de<\/strong>). After that we should have 3 resources files in our Resources <\/strong>directory.<\/p>\n\n\n\n
Now we need to create resources files for SecondWebpage.cshtml<\/strong>. Repeat above step three times (for each language). Remember to change FirstWebpage<\/strong> to SecondWebpage<\/strong> in name of the resources file and to change suffixes.<\/p>\n\n\n\n
We need also to create resources files for _Layout.cshtml<\/strong>. As you could notice, name of resources file is path to proper .cshtml file plus language suffix. Because _Layout.cshtml<\/strong> isn\u2019t placed in Home<\/strong> directory, but in Shared<\/strong> directory, our resources file name for English language will be Views.Shared._Layout.en.resx<\/strong>. Repeat this step for Polish and German language.<\/p>\n\n\n\n
We can move on to localize our website. Add following code at the very beginning of FirstWebpage.cshtml, SecondWebpage.cshtml <\/strong>and _Layout.cshtml<\/strong>:<\/p>\n\n\n\n
@using\u00a0Microsoft.AspNetCore.Mvc.Localization\n@inject\u00a0IViewLocalizer\u00a0Localizer<\/pre>\n\n\n\n
To localize any string in our code, we need to replace chosen string in .cshtml file with @Localizer[“String or it\u2019s ID”]. It\u2019s good practice to replace short sentences and one word strings with @Localizer[“String”] and long sentences with @Localizer[“ID”]. For example, if we want to localize Contact us<\/em>, we should write @Localizer[“Contact us”], but if we want to localize This tutorial will teach you building and publishing your multilanguage website on Windows using ASP .NET Core<\/em>, better write @Localizer[“About tutorial”].<\/p>\n\n\n\n
Let\u2019s assume that we used @Localizer[“About tutorial”] in our code. To translate it to other language, open proper resources file, in Key<\/strong> write About tutorial<\/em>and in Value<\/strong> translated sentence. That\u2019s all.<\/p>\n\n\n\n
We can choose proper language in navigation bar of our website. To make it working, we need to code buttons like this in _Layout.cshtml<\/strong>:<\/p>\n\n\n\n
    Create modern Web apps for any scenario with your favorite frameworks. Download Ignite UI<\/a> today and experience the power of Infragistics JavaScript\/HTML5 controls.<\/em><\/p>\n\n\n\n
\"\"\/<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"
In this tutorial we will create new multilingual website in ASP.NET Core and publish it to IIS. Version 1.0 of ASP.NET Core was released in June 2016, so it\u2019s quite new tool. Main feature of it is that we can develop and run our apps cross-platform on Windows, Linux and Mac. <\/p>\n","protected":false},"author":21,"featured_media":1219,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-680","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=680"}],"version-history":[{"count":3,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/680\/revisions"}],"predecessor-version":[{"id":1992,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/680\/revisions\/1992"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1219"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}