Building Simple Multilingual ASP.NET Core Website

이 자습서에서는 ASP.NET Core에서 새로운 다국어 웹 사이트를 만들고 IIS에 게시합니다. ASP.NET Core의 버전 1.0은 2016 년 6 월에 출시되었으므로 매우 새로운 도구입니다. 그것의 주요 특징은 Windows, Linux 및 Mac에서 크로스 플랫폼으로 앱을 개발하고 실행할 수 있다는 것입니다.

Katie Mikova Last Updated Feb 25, 2025 10min read

오늘은 Windows에 대해 집중적으로 설명하겠습니다. ASP.NET Core ASP.NET MVC 5와 비교하여 몇 가지 차이점이 있으므로 간단한 것부터 시작하는 것이 좋으며 3개 언어로 된 두 개의 웹 페이지로 구성된 웹 사이트부터 시작하는 것이 좋습니다.

Windows에서 .NET Core 환경 만들기

시작하려면 ASP.NET Core, Visual Studio 업데이트 2015가 설치된 Visual Studio 3이 필요합니다. 이미 둘 다 설치한 경우 이 단계를 건너뜁니다. 그렇지 않은 경우 Visual Studio Community 2015 다운로드 및 Visual Studio 업데이트 3 다운로드에서 Visual Studio Community를 무료로 다운로드할 수 있습니다. Visual Studio Community 2015를 설치하는 동안 기본 설치를 선택하기만 하면 됩니다.

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은 Visual Studio용 .NET Core 1.0 다운로드 및 .NET Core Windows Server 호스팅에서 다운로드할 수 있습니다.

웹 사이트 만들기

이러한 모든 필수품을 이미 설치한 경우 새 웹사이트 만들기를 진행할 수 있습니다. 이렇게 하려면 Visual Studio 2015를 열고 파일/새로 만들기/프로젝트로 이동한 다음 Visual C#/웹/ ASP.NET Core 웹 애플리케이션(.NET Core)을 선택합니다. 이름을 NETCoreWebsite로 지정합니다(그림 1).

그림 1 - ASP .NET Core 응용 프로그램 용 템플릿 만들기

다음 창에서 인증 유형과 함께 템플릿 유형을 선택해야 합니다. 우리의 경우 각각 Web Application과 No authentication이 될 것입니다. Host in cloud(클라우드 내 호스트) 옵션을 선택 취소해야 합니다(그림 2).

그림 2 – 올바른 템플릿 및 인증 유형 선택

새로운 ASP.NET Core 프로젝트가 방금 생성되었습니다. 또한 웹 브라우저에 표시할 수 있습니다. 이렇게 하려면 탐색 모음에서 IIS Express 버튼을 클릭합니다. 몇 초 후에 기본 웹 사이트가 웹 브라우저에 나타나야합니다. 탐색 모음에서 모든 항목 간에 전환할 수 있습니다.

그림 3 – 새 ASP.NET Core 프로젝트를 만드는 동안 만들어진 기본 웹 사이트

웹 페이지 및 정적 파일 추가

이제 우리는 우리 자신의 웹 사이트를 만들기 위해 계속 나아갑니다. 이 자습서에서 언급할 모든 디렉터리와 파일은 솔루션 탐색기 src/NETCoreWebsite에 배치됩니다.

우선, 불필요한 파일을 제거해야 합니다. 이렇게 하려면 보기/홈으로 이동하여 거기에 있는 세 개의 웹 페이지를 모두 삭제합니다. 그런 다음 wwwroot / images로 이동하여 해당 디렉토리에 포함 된 모든 이미지를 삭제하십시오.

이제 웹 페이지를 프로젝트에 추가할 차례입니다. Views/Home으로 이동하여 마우스 오른쪽 버튼을 클릭하고 Add/New item을 선택합니다(그림 4).

그림 4 – 프로젝트에 새 웹 페이지 추가

새 창에서.NET Core/ASP.NET/MVC 보기 페이지를 선택합니다. 이름을 FirstWebpage.cshtml로 지정합니다(그림 5).

그림 5 – 프로젝트에 새 웹 페이지 추가, 계속

웹 페이지가 방금 생성되었습니다. SecondWebpage.cshtml에 대해 해당 단계를 반복합니다.

이제 마지막 단계에서 만든 .cshtml 파일을 HTML 코드로 채웁니다. 중요 :.cshtml 파일에는 공유 요소 (예 : 탐색 모음 또는 바닥 글)< 선언 없이 body> 태그의 내용, CSS 파일에 대한 참조, 글꼴 및 <script> 태그 만 포함해야합니다. <body> 태그도 포함해서는 안 됩니다.

이미지, CSS 또는 JavaScript와 같은 정적 파일을 프로젝트에 추가할 때입니다. 몇 단계 전에 wwwroot/images에서 불필요한 이미지를 삭제했습니다. 이제 이 디렉토리에 이미지를 바로 추가하겠습니다. 그것을 마우스 오른쪽 버튼으로 클릭하고 파일 탐색기에서 폴더 열기를 선택하십시오 (그림 6). 그러면 파일 탐색기에서 이미지 디렉토리가 열리고 이제 여기에 이미지를 복사하기만 하면 됩니다. 메모: 모든 이미지 경로의 시작 부분에 "~/"를 추가해야 합니다.

그림 6 – 파일 탐색기에서 디렉토리를 열어 새 항목을 쉽게 추가 할 수 있습니다.

매우 유사한 방식으로 CSS 및 JavaScript 파일을 추가할 수 있습니다. wwwroot/css 또는 wwwroot/js에 추가하기만 하면 됩니다.

ASP.NET Core MVC 패턴을 사용하는데, 이는 컨트롤러가 최종 사용자에게 뷰를 표시할 책임이 있음을 의미합니다. 웹 페이지를 표시하려면 Controllers 디렉토리에 있는 HomeController.cs 편집해야 합니다.

HomeController.cs에서 메서드 About() 및 Contact()를 삭제합니다. 그런 다음 Index() 메서드를 복사하여 원래 Index() 메서드 바로 아래에 붙여넣습니다. 그런 다음 첫 번째 방법에서 "Index"를 "FirstWebpage"로 변경하고 두 번째 방법에서 "SecondWebpage"로 변경합니다. 이러한 메소드는 브라우저에서 웹 페이지를 표시 할 수있는 View 만 반환합니다. 이 단계를 완료하면 HomeController.cs 클래스가 다음과 같이 표시됩니다.

public class HomeController : Controller {
    public IActionResult FirstWebpage() {
        return View();
    }

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

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

Startup.cs 클래스로 이동하여 Configure라는 메소드를 찾으십시오. 메소드 본문에서 다음과 유사한 코드를 찾을 수 있습니다.

app.UseMvc(routes=> {
        routes.MapRoute(name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });

{action=Index}를 {action=FirstWebpage}로 변경하여 선택한 웹 페이지가 기본적으로 표시되도록 합니다.

다음 단계에서는 CSS 및 JavaScript 파일에 대한 참조를 추가하고 공유 파일을 추출합니다.

공유 파일 추출

공유 파일을 추출하려면_Layout.cshtml 파일을 편집해야 합니다. 레이아웃 페이지에는 웹 사이트의 구조와 공유 콘텐츠가 포함되어 있습니다. 웹 페이지(콘텐츠 페이지)가 레이아웃 페이지에 연결되면 레이아웃 페이지(템플릿)에 따라 표시됩니다.

레이아웃 페이지는 콘텐츠 페이지가 포함될 @RenderBody() 메서드를 호출하는 것을 제외하고는 일반 웹 페이지와 같습니다.

_Layout.cshtml을 엽니다. 보시다시피 <head> 태그와 CSS 및 JavaScript 파일에 대한 참조가 바로 여기에 정의되어 있습니다.

CSS부터 시작하겠습니다. 개발 이라는 환경을 찾습니다. 이와 같이 호출되는 두 개의 환경이 있는데, 하나는 <head>이고 다른 하나는 <body>입니다. CSS 파일에 대한 참조를 추가하고 싶기 때문에 당연히 <head> Development 환경의 코드를 변경할 것입니다.

개발에서 <link rel="stylesheet" href="~/css/site.css" />를 찾을 수 있습니다. 자체 CSS 파일에 대한 참조를 추가하고 싶으므로 site.css CSS 파일의 이름으로 변경하기만 하면 됩니다.

또한 웹 사이트에서 사용할 글꼴에 대한 참조를 추가해야 합니다. CSS 파일 참조 바로 아래에 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" />를 추가합니다.

개발 환경의 포함을 Staging, Production 환경 (바로 아래에 찾을 수 있음)에 복사하는 것이 매우 중요하므로 프로젝트를 게시 한 후 추가 참조를 사용할 수 있습니다.

이제 JavaScript 파일에 대한 참조를 추가합니다.

<body> 선언에서 Development 라는 환경을 찾습니다. 거기에서 다음과 같은 선을 찾을 수 있습니다.

< script src ="~/js/site.js" asp-append-version ="true"></ script >

이전과 마찬가지로 우리가 해야 할 일은 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 Configure 라는 메소드를 찾아 아래와 같이 코드를 추가하십시오.

var supportedCultures=new[] {
    new CultureInfo("en-US"),
    new CultureInfo("pl-PL"),
    new CultureInfo("de-DE")
};

app.UseRequestLocalization(new RequestLocalizationOptions {
        DefaultRequestCulture=new RequestCulture("en-US"),
        SupportedCultures=supportedCultures,
        SupportedUICultures=supportedCultures
    });

Startup.cs의 맨 처음에 다음 코드를 추가하십시오.

using System.Globalization;
using Microsoft.AspNetCore.Mvc.Razor;
using Microsoft.AspNetCore.Localization;

이제 웹 사이트를 현지화하기 위한 리소스를 추가하겠습니다. 솔루션 탐색기에서 src/NETCoreWebsite를 마우스 오른쪽 버튼으로 클릭하고 추가/새 폴더를 선택합니다(그림 7). 이름을 Resources로 지정합니다.

그림 7 – 리소스 파일을 포함 할 새 디렉토리 추가

그런 다음 Resources 디렉토리를 마우스 오른쪽 버튼으로 클릭하고 Add/New Item을 선택합니다(그림 8).

In new window choose .NET Core/Code/Resources File. Name it Views.Home.FirstWebpage.en.resx (fig. 9).

그림 9 – 새 리소스 파일 추가

FirstWebpage.cshtml에 대한 리소스 파일(영어)이 방금 생성되었습니다. 폴란드어 및 독일어에 대해 이 단계를 반복합니다(en을 각각 pl 및 de로 변경해야 함). 그 후 Resources 디렉토리에 3개의 리소스 파일이 있어야 합니다.

이제 SecondWebpage.cshtml에 대한 리소스 파일을 만들어야 합니다. 각 언어에 대해 위의 단계를 세 번 반복합니다. 리소스 파일의 이름에서 FirstWebpage를 SecondWebpage로 변경하고 접미사를 변경해야 합니다.

또한_Layout.cshtml에 대한 리소스 파일을 만들어야 합니다. 알 수 있듯이 리소스 파일의 이름은 적절한 .cshtml 파일의 경로와 언어 접미사입니다._Layout.cshtml은 홈 디렉터리에 있지 않지만 공유 디렉터리에 있기 때문에 영어의 리소스 파일 이름은 Views.Shared._Layout.en.resx가 됩니다. 폴란드어 및 독일어에 대해 이 단계를 반복합니다.

웹 사이트 현지화로 넘어갈 수 있습니다. FirstWebpage.cshtml, SecondWebpage.cshtml 및_Layout.cshtml의 시작 부분에 다음 코드를 추가합니다.

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

코드에서 문자열을 지역화하려면 .cshtml 파일에서 선택한 문자열을 @Localizer["String or it's ID"]로 바꿔야 합니다. 짧은 문장과 한 단어 문자열을 @Localizer["String"]으로, 긴 문장을 @Localizer["ID"]로 바꾸는 것이 좋습니다. 예를 들어 Contact us를 지역화하려면 @Localizer["Contact us"]를 작성해야 하지만 지역화하려는 경우이 자습서에서는 ASP .NET Core를 사용하여 Windows에서 다국어 웹 사이트를 빌드하고 게시하는 방법을 배우 므로 @Localizer["About tutorial"]을 작성하는 것이 좋습니다.

코드에서 @Localizer["About tutorial"]을 사용했다고 가정해 보겠습니다. 다른 언어로 번역하려면 적절한 리소스 파일을 열고 Key(키)에서 About tutorial(자습서 정보)을 작성하고 Value translated sentence(번역 된 문장)를 엽니다. 그게 전부에요.

웹 사이트의 탐색 모음에서 적절한 언어를 선택할 수 있습니다. 작동하려면_Layout.cshtml과 같은 단추를 코딩해야 합니다.

좋아하는 프레임워크를 사용하여 모든 시나리오에 대한 최신 웹 앱을 만드세요. 지금 Ignite UI 다운로드하고 Infragistics JavaScript/HTML5 컨트롤의 강력한 기능을 경험해 보세요.

어떻게