연습: JavaScript 파일에 지역화된 리소스 포함

아티클
10/22/2014

업데이트: 2007년 11월

이 연습에서는 ECMAScript(JavaScript) 파일을 어셈블리의 포함 리소스로 추가하는 방법과 JavaScript 파일에 사용할 지역화된 문자열을 포함하는 방법을 설명합니다. 어셈블리와 함께 배포할 클라이언트 스크립트 구성 요소가 있을 경우 어셈블리에 JavaScript 파일을 포함합니다. 이 JavaScript 파일은 어셈블리를 등록하는 웹 응용 프로그램에서 참조할 수 있습니다. 다른 언어와 문화권용 JavaScript 파일에서 사용하는 값을 수정해야 할 경우 지역화된 리소스를 포함합니다.

사전 요구 사항

이 연습의 절차를 구현하려면 다음이 필요합니다.

Microsoft Visual Studio 2008.

참고:
Visual Web Developer Express Edition에서는 이 연습에 필요한 클래스 라이브러리 프로젝트를 만들 수 없으므로 Visual Web Developer Express Edition을 사용할 수 없습니다.

포함 JavaScript 파일을 포함하는 어셈블리 만들기

먼저 리소스로 처리할 JavaScript 파일을 포함하는 어셈블리(.dll 파일)를 만듭니다. 이렇게 하려면 Visual Studio에서 어셈블리를 출력으로 만드는 클래스 라이브러리 프로젝트를 만듭니다.

어셈블리에 클라이언트 스크립트 파일 및 리소스를 포함하려면

Visual Studio에서 LocalizingScriptResources라는 클래스 라이브러리 프로젝트를 새로 만듭니다.
System.Web 및 System.Web.Extensions 어셈블리에 대한 참조를 프로젝트에 추가합니다.
CheckAnswer.js라는 프로젝트에 새 JScript 파일을 추가합니다.

CheckAnswer.js 파일에 다음 코드를 추가합니다.

function CheckAnswer()
{
    var firstInt = $get('firstNumber').innerText;
    var secondInt = $get('secondNumber').innerText;
    var userAnswer = $get('userAnswer');

    if ((Number.parseLocale(firstInt) + Number.parseLocale(secondInt)) == userAnswer.value)
    {
        alert(Answer.Correct);
        return true;
    }
    else
    {
        alert(Answer.Incorrect);
        return false;
    }
}

function CheckAnswer()
{
    var firstInt = $get('firstNumber').innerText;
    var secondInt = $get('secondNumber').innerText;
    var userAnswer = $get('userAnswer');

    if ((Number.parseLocale(firstInt) + Number.parseLocale(secondInt)) == userAnswer.value)
    {
        alert(Answer.Correct);
        return true;
    }
    else
    {
        alert(Answer.Incorrect);
        return false;
    }
}

이 스크립트에서는 두 개의 숫자를 추가하는 결과를 확인합니다. alert 함수를 사용하여 대답이 올바른지 여부를 알려 줍니다. alert 대화 상자에 표시되는 메시지는 서버에 대한 포스트백 없이 지역화된 리소스에서 읽어 옵니다.

이 스크립트에서는 Answer라는 자리 표시자를 사용하여 지역화된 문자열이 포함된 리소스 파일을 식별합니다. Answer 자리 표시자는 이 절차의 뒷부분에서 정의합니다.

CheckAnswer.js의 속성 창에서 빌드 작업을 포함 리소스로 설정합니다.
ClientVerification이라는 클래스를 프로젝트에 추가합니다.

ClientVerification 클래스 파일의 모든 코드를 다음과 같이 바꿉니다.

Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Resources

Public Class ClientVerification
    Inherits Control

    Private _button As Button
    Private _firstLabel As Label
    Private _secondLabel As Label
    Private _answer As TextBox
    Private _firstInt As Int32
    Private _secondInt As Int32


    Protected Overrides Sub CreateChildControls()
        Dim random = New Random()
        _firstInt = random.Next(0, 20)
        _secondInt = random.Next(0, 20)

        Dim rm = New ResourceManager("LocalizingScriptResources.VerificationResources", Me.GetType().Assembly)
        Controls.Clear()

        _firstLabel = New Label()
        _firstLabel.ID = "firstNumber"
        _firstLabel.Text = _firstInt.ToString()

        _secondLabel = New Label()
        _secondLabel.ID = "secondNumber"
        _secondLabel.Text = _secondInt.ToString()

        _answer = New TextBox()
        _answer.ID = "userAnswer"

        _button = New Button()
        _button.ID = "Button"
        _button.Text = rm.GetString("Verify")
        _button.OnClientClick = "return CheckAnswer();"

        Controls.Add(_firstLabel)
        Controls.Add(New LiteralControl(" + "))
        Controls.Add(_secondLabel)
        Controls.Add(New LiteralControl(" = "))
        Controls.Add(_answer)
        Controls.Add(_button)
    End Sub

End Class

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Resources;


namespace LocalizingScriptResources
{
    public class ClientVerification : Control
    {
        private Button _button;
        private Label _firstLabel;
        private Label _secondLabel;
        private TextBox _answer;
        private int _firstInt;
        private int _secondInt;

        protected override void CreateChildControls()
        {
            Random random = new Random();
            _firstInt = random.Next(0, 20);
            _secondInt = random.Next(0, 20);

            ResourceManager rm = new ResourceManager("LocalizingScriptResources.VerificationResources", this.GetType().Assembly);
            Controls.Clear();

            _firstLabel = new Label();
            _firstLabel.ID = "firstNumber";
            _firstLabel.Text = _firstInt.ToString();

            _secondLabel = new Label();
            _secondLabel.ID = "secondNumber";
            _secondLabel.Text = _secondInt.ToString();

            _answer = new TextBox();
            _answer.ID = "userAnswer";

            _button = new Button();
            _button.ID = "Button";
            _button.Text = rm.GetString("Verify");
            _button.OnClientClick = "return CheckAnswer();";

            Controls.Add(_firstLabel);
            Controls.Add(new LiteralControl(" + "));
            Controls.Add(_secondLabel);
            Controls.Add(new LiteralControl(" = "));
            Controls.Add(_answer);
            Controls.Add(_button);
        }
    }
}

이 코드는 사용자 지정 ASP.NET 컨트롤을 만듭니다. 여기에는 Label 컨트롤 두 개, TextBox 컨트롤 및 Button 컨트롤이 포함됩니다. 이 코드에서는 임의로 생성된 정수 두 개를 표시하며 대답을 입력할 텍스트 상자를 제공합니다. 단추를 클릭하면 CheckAnswer 함수가 호출됩니다.

프로젝트에 리소스 파일을 추가하고 이름을 VerificationResources.resx로 지정합니다.
값이 "Yes, your answer is correct"인 Correct라는 문자열 리소스를 추가합니다.
값이 "No, your answer is incorrect"인 Incorrect라는 문자열 리소스를 추가합니다.
값이 "Verify Answer"인 Verify라는 문자열 리소스를 추가합니다.

이 리소스는 클라이언트 스크립트를 사용하여 검색되지 않습니다. 대신 단추를 만들 때 Button 컨트롤의 Text 속성을 설정하는 데 사용됩니다.
VerificationResources.resx 파일을 저장하고 닫습니다.
프로젝트에 VerificationResources.it.resx라는 리소스 파일을 추가합니다.

이 파일에는 이탈리아어 리소스 문자열이 포함됩니다.
값이 "Si, la risposta e’ corretta"인 Correct라는 문자열 리소스를 추가합니다.
값이 "No, la risposta e’ sbagliata"인 Incorrect라는 문자열 리소스를 추가합니다.
값이 "Verificare la risposta"인 Verify라는 문자열 리소스를 추가합니다.

영어로 만든 "Verify" 리소스와 마찬가지로 이 리소스도 클라이언트 스크립트를 사용하여 검색되지 않습니다. 대신 단추를 만들 때 Button 컨트롤의 Text 속성을 설정하는 데 사용됩니다.
VerificationResources.it.resx 파일을 저장하고 닫습니다.

AssemblyInfo 파일에 다음 줄을 추가합니다. ScriptResourceAttribute 특성에서 형식 이름에 대해 임의의 이름을 지정할 수 있지만 이 이름은 클라이언트 스크립트에서 사용되는 형식 이름과 일치해야 합니다. 이 예제에서는 이름을 Answer로 설정합니다.

<Assembly: System.Web.UI.WebResource("LocalizingScriptResources.CheckAnswer.js", "application/x-javascript")> 
<Assembly: System.Web.UI.ScriptResource("LocalizingScriptResources.CheckAnswer.js", "LocalizingScriptResources.VerificationResources", "Answer")>

[assembly: System.Web.UI.WebResource("LocalizingScriptResources.CheckAnswer.js", "application/x-javascript")]
[assembly: System.Web.UI.ScriptResource("LocalizingScriptResources.CheckAnswer.js", "LocalizingScriptResources.VerificationResources", "Answer")]

참고:
AssemblyInfo.vb 파일은 솔루션 탐색기의 My Project 노드에 있습니다. My Project 노드에 파일이 없으면 프로젝트 메뉴에서 모든 파일 표시를 클릭합니다. AssemblyInfo.cs 파일은 솔루션 탐색기의 속성 노드에 있습니다.

WebResource 정의에는 어셈블리의 기본 네임스페이스와 .js 파일 이름이 포함되어 있어야 합니다. ScriptResource 정의에는 파일 이름 확장명이나 지역화된 .resx 파일이 포함되지 않습니다.

프로젝트를 빌드합니다.

컴파일이 끝나면 LocalizingScriptResources.dll이라는 어셈블리가 생깁니다. CheckAnswer.js 파일의 JavaScript 코드와 두 .resx 파일의 리소스가 이 어셈블리에 리소스로 포함됩니다.

서버 코드의 이탈리아어 리소스가 포함된 LocalizingScriptResources.resources.dll(위성 어셈블리)이라는 어셈블리도 생깁니다.

포함 스크립트 및 리소스 참조

이제 AJAX 사용 ASP.NET 웹 사이트에서 어셈블리를 사용할 수 있습니다. 클라이언트 스크립트에서 .js 파일과 리소스 값을 읽을 수 있습니다.

참고:
클래스 라이브러리 프로젝트와 웹 사이트를 동일한 Visual Studio 솔루션에서 만들 수도 있지만 이 연습에서는 이렇게 하는 것으로 가정하지 않습니다. 프로젝트를 별도의 솔루션에서 만들면 컨트롤 개발자와 페이지 개발자가 따로 작업하는 방식을 모방할 수 있습니다. 그러나 편의상 두 프로젝트를 같은 솔루션에서 만들고 이 연습의 절차에 맞게 약간 조정할 수 있습니다.

클래스 라이브러리 프로젝트와 웹 사이트를 동일한 Visual Studio 솔루션에서 만들 수도 있지만 이 연습에서는 이렇게 하는 것으로 가정하지 않습니다. 프로젝트를 별도의 솔루션에서 만들면 컨트롤 개발자와 페이지 개발자가 따로 작업하는 방식을 모방할 수 있습니다. 그러나 편의상 두 프로젝트를 같은 솔루션에서 만들고 이 연습의 절차에 맞게 약간 조정할 수 있습니다.

포함 스크립트와 리소스를 참조하려면

Visual Studio에서 새로운 AJAX 사용 웹 사이트를 만듭니다.
웹 사이트 루트 아래에 Bin 폴더를 추가합니다.

클래스 라이브러리 프로젝트의 LocalizingScriptResources.dll 어셈블리를 Bin 폴더에 추가합니다.

참고:
동일한 Visual Studio 솔루션에서 클래스 라이브러리 프로젝트와 웹 사이트를 만든 경우 클래스 라이브러리 프로젝트와 웹 사이트 사이의 참조를 추가할 수 있습니다. 자세한 내용은 방법: 웹 사이트의 Visual Studio 프로젝트에 대한 참조 추가를 참조하십시오.

Bin 폴더 안에 폴더를 만들고 이름을 it으로 지정합니다(이탈리아어인 경우).
LocalizingScriptResources 프로젝트의 it 폴더에 있는 LocalizingScriptResources.resources.dll 위성 어셈블리를 웹 사이트의 it 폴더에 추가합니다.
새 ASP.NET 웹 페이지를 프로젝트에 추가합니다.

페이지의 코드를 다음 코드로 바꿉니다.

<%@ Page Language="VB" AutoEventWireup="true" UICulture="auto" Culture="auto" %>
<%@ Register TagPrefix="Samples" Namespace="LocalizingScriptResources" Assembly="LocalizingScriptResources" %>
<script >

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If (IsPostBack) Then
            System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue)
        Else
            selectLanguage.Items.FindByValue(System.Threading.Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName).Selected = True
        End If
    End Sub

    Protected Sub selectLanguage_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
        System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue)
    End Sub
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Client Localization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:DropDownList  AutoPostBack="true" ID="selectLanguage" OnSelectedIndexChanged="selectLanguage_SelectedIndexChanged">
            <asp:ListItem Text="English" Value="en"></asp:ListItem>
            <asp:ListItem Text="Italian" Value="it"></asp:ListItem>
        </asp:DropDownList>
        <br /><br />
        <asp:ScriptManager ID="ScriptManager1" EnableScriptLocalization="true" >
        <Scripts>
            <asp:ScriptReference Assembly="LocalizingScriptResources" Name="LocalizingScriptResources.CheckAnswer.js" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <Samples:ClientVerification ID="ClientVerification1"  ></Samples:ClientVerification>
        </div>
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" UICulture="auto" Culture="auto" %>
<%@ Register TagPrefix="Samples" Namespace="LocalizingScriptResources" Assembly="LocalizingScriptResources" %>
<script >

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue);
        }
        else
        {
            selectLanguage.Items.FindByValue(System.Threading.Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName).Selected = true;
        }
    }

    protected void selectLanguage_SelectedIndexChanged(object sender, EventArgs e)
    {
        System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue);
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title>Client Localization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:DropDownList  AutoPostBack="true" ID="selectLanguage" OnSelectedIndexChanged="selectLanguage_SelectedIndexChanged">
            <asp:ListItem Text="English" Value="en"></asp:ListItem>
            <asp:ListItem Text="Italian" Value="it"></asp:ListItem>
        </asp:DropDownList>
        <br /><br />
        <asp:ScriptManager ID="ScriptManager1" EnableScriptLocalization="true" >
        <Scripts>
            <asp:ScriptReference Assembly="LocalizingScriptResources" Name="LocalizingScriptResources.CheckAnswer.js" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <Samples:ClientVerification  ></Samples:ClientVerification>
        </div>
    </form>
</body>
</html>

LocalizingScriptResources 프로젝트에서 만든 컨트롤이 페이지에 포함됩니다. 이 컨트롤에서는 사용자가 추가하는 두 개의 숫자와 사용자가 대답을 입력할 TextBox 컨트롤을 표시합니다. 또한 클릭하면 CheckAnswer 함수의 스크립트를 호출하는 단추도 표시합니다. CheckAnswer 함수는 브라우저에서 실행되며 대답이 올바른지 여부를 나타내는 지역화된 메시지를 표시합니다.

ScriptManager 컨트롤에서 지역화된 리소스를 검색할 수 있게 하려면 ScriptManager 개체의 EnableScriptLocalization 속성을 true로 설정해야 합니다. 또한 문화권과 UI 문화권을 "auto"로 설정하여 브라우저 설정을 기반으로 하는 문자열을 표시해야 합니다.

이 페이지에는 브라우저의 설정을 변경하지 않고도 언어 설정을 변경하는 데 사용할 수 있는 DropDownList 컨트롤이 포함됩니다. DropDownList 컨트롤의 SelectedIndex 속성이 변경되면 CurrentThread 인스턴스의 CurrentUICulture 속성이 선택한 값으로 설정됩니다.

프로젝트를 실행합니다.

임의로 생성된 두 개의 숫자와 대답을 입력할 TextBox 컨트롤이 있는 더하기 문제가 표시됩니다. 대답을 입력하고 Verify Answer 단추를 클릭하면 메시지 창에 대답이 올바른지 여부를 알려 주는 응답이 표시됩니다. 기본적으로 이 응답은 영어로 반환됩니다.

그러나 브라우저의 기본 설정 언어를 이탈리아어로 설정한 경우 대답이 이탈리아어로 반환됩니다. DropDownList 컨트롤에서 언어를 선택하거나 브라우저의 기본 설정 언어를 변경하여 응답에 사용할 언어를 변경할 수 있습니다.

검토

이 연습에서는 어셈블리에 JavaScript 파일을 리소스로 포함하고 지역화된 문자열을 포함하는 개념을 소개했습니다. 포함 스크립트 파일은 해당 어셈블리를 포함하는 웹 응용 프로그램에서 참조하고 액세스할 수 있습니다. 브라우저의 언어 설정이나 사용자가 지정하는 언어에 맞는 지역화된 문자열이 표시됩니다.

참고 항목

작업

구성 요소 라이브러리에 대한 리소스 지역화 개요

연습: JavaScript 파일에 지역화된 리소스 추가

다음을 통해 공유