共用方式為

逐步解說：將已當地語系化的資源加入至 JavaScript 檔

  • 發行項

更新：2007 年 11 月

本逐步解說示範如何將當地語系化資源包含在 ECMAScript (JavaScript) 檔案中。本逐步解說中的資源為字串。當您建立了獨立的 JavaScript 檔案，以及應用程式必須提供不同語言和文化特性的不同值時，需要將當地語系化的資源包含在 JavaScript 檔案中。

獨立的 JavaScript 不會嵌入成組件中的資源，因此無法存取資源檔中的值。您應該將當地語系化的字串值直接加入至指令碼檔案中才對。當指令碼在瀏覽器中執行時，會擷取當地語系化的值。

您要為每一個支援的語言和文化特性，建立一個獨立的指令碼檔案。在每一個指令碼檔案中，您要以 JSON 格式包含物件，此物件內含該語言和文化特性的當地語系化的資源值。

必要條件

若要實作本教學課程中的程序，您需要：

  • Microsoft Visual Studio 2005 或 Microsoft Visual Web Developer Express 版。

  • 具備 AJAX 能力的 ASP.NET 網站。

建立包含當地語系化資源值的 JavaScript 檔案

若要將資源值加入至 JavaScript 檔案

  1. 在網站的根目錄中，新增名為 Scripts 的資料夾。

  2. 在 Scripts 資料夾中，新增名為 CheckAnswer.js 的 JScript 檔案，然後將下列程式碼加入至檔案中。

    Sys.Application.add_load(SetButton);
function SetButton()
{
    $get('Button1').value = Answer.Verify;
}
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;
    }
}

Answer={
"Verify":"Verify Answer",
"Correct":"Yes, your answer is correct.",
"Incorrect":"No, your answer is incorrect."
};

    Sys.Application.add_load(SetButton);
function SetButton()
{
    $get('Button1').value = Answer.Verify;
}
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;
    }
}

Answer={
"Verify":"Verify Answer",
"Correct":"Yes, your answer is correct.",
"Incorrect":"No, your answer is incorrect."
};

    指令碼程式碼會為 Sys.Application 類別的 load 事件加入處理常式。處理常式會設定按鈕文字。此處理常式不會將文字設定為字串，而是將文字設定為名為 Answer.Verify 的類別中所定義的值。這麼做可讓程式碼使用當地語系化的值。

    指令碼也包含一個函式，會檢查使用者加入兩個數字的結果。它會使用 alert 函式讓使用者知道答案是否正確。至於按鈕文字，alert 對話方塊中所顯示的訊息會設定為當地語系化的字串值，而不會回傳給伺服器。

    名為 Answer 的型別會使用於指令碼中，用以定義要用在檔案中之當地語系化的值集合。Answer 型別在 CheckAnswer.js 檔案的結尾定義為 JSON 格式。

  3. 在 Scripts 資料夾中，新增名為 CheckAnswer.it-IT.js 的 JScript 檔案。將下列程式碼加入至該檔案中。

    Sys.Application.add_load(SetButton);
function SetButton()
{
    $get('Button1').value = Answer.Verify;
}
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;
    }
}
Answer={
"Verify":"Verificare la risposta",
"Correct":"Si, la risposta e’ corretta.",
"Incorrect":"No, la risposta e’ sbagliata."
};

    Sys.Application.add_load(SetButton);
function SetButton()
{
    $get('Button1').value = Answer.Verify;
}
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;
    }
}
Answer={
"Verify":"Verificare la risposta",
"Correct":"Si, la risposta e’ corretta.",
"Incorrect":"No, la risposta e’ sbagliata."
};

    這個檔案與 CheckAnswer.js 檔案完全相同，不過此檔案內含 Answer 型別，其值為義大利文。

    若要提供其他語言的當地語系化文字，您可以建立多個 JavaScript 檔案。JavaScript 程式碼永遠都一樣，但 Answer 型別中所定義之值的語言則不同。每一個 JavaScript 檔案的名稱都必須包括適當的語言和地區設定。

在 ASP.NET 頁面中使用 JavaScript 資源值

您現在可以建立 ASP.NET 網頁，此網頁會使用您剛才建立的指令碼程式碼。此頁面可讓您測試變更語言的效果。

若要在 ASP.NET 網頁中使用 JavaScript 資源值

  1. 建立 ASP.NET 網頁。

  2. 以下列標記和程式碼取代網頁的內容：

    <%@ Page Language="VB" AutoEventWireup="true" UICulture="auto" Culture="auto" %>

<script >


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        Dim _firstInt As Int32
        Dim _secondInt As Int32

        Dim _random As New Random()
        _firstInt = _random.Next(0, 20)
        _secondInt = _random.Next(0, 20)

        firstNumber.Text = _firstInt.ToString()
        secondNumber.Text = _secondInt.ToString()

        If (IsPostBack) Then
            userAnswer.Text = ""
            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 Path="scripts/CheckAnswer.js" ResourceUICultures="it-IT" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <asp:Label ID="firstNumber" ></asp:Label>
        +
        <asp:Label ID="secondNumber" ></asp:Label>
        =
        <asp:TextBox ID="userAnswer" ></asp:TextBox>
        <asp:Button ID="Button1"  OnClientClick="return CheckAnswer()" />
        <br />
        <asp:Label ID="labeltest" ></asp:Label>
        </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" AutoEventWireup="true" UICulture="auto" Culture="auto" %>
<script >


    protected void Page_Load(object sender, EventArgs e)
    {   
        int _firstInt;
        int _secondInt;

        Random random = new Random();
        _firstInt = random.Next(0, 20);
        _secondInt = random.Next(0, 20);

        firstNumber.Text = _firstInt.ToString();
        secondNumber.Text = _secondInt.ToString();

        if (IsPostBack)
        {
            userAnswer.Text = "";
            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 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 Path="scripts/CheckAnswer.js" ResourceUICultures="it-IT" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <asp:Label ID="firstNumber" ></asp:Label>
        +
        <asp:Label ID="secondNumber" ></asp:Label>
        =
        <asp:TextBox ID="userAnswer" ></asp:TextBox>
        <asp:Button ID="Button1"  OnClientClick="return CheckAnswer()" />
        <br />
        <asp:Label ID="labeltest" ></asp:Label>
        </div>
    </form>
</body>
</html>

    標記會建立一個 DropDownList 控制項、兩個 Label 控制項、一個 TextBox 控制項和一個 Button 控制項。此頁面會顯示兩個隨機產生的整數，並詢問使用者是否要加入它們，並提供解答的文字方塊。按一下按鈕時，會呼叫 JavaScript CheckAnswer 函式。

    DropDownList 控制項可讓您在不需變更瀏覽器設定的情況下變更語言設定。當 DropDownList 控制項的 SelectedIndex 屬性變更時，CurrentThread 執行個體的 CurrentUICulture 屬性會設定為您所選取的值。

    注意事項：

    如需設定執行緒之文化特性資訊的詳細資訊，請參閱 HOW TO：設定 ASP.NET Web 網頁全球化的文化特性和 UI 文化特性。

    ScriptManager 控制項包含 CheckAnswer.js 指令碼檔案的參考。因此，當頁面執行時就會擷取 CheckAnswer.js 檔案。

    參考的 ResourceUICultures 屬性設定為 "it-IT"，指出網站內含義大利文版的指令碼。因此，當您從 DropDownList 控制項中選取「義大利文」，或將「義大利文」設定為瀏覽器的預設語言時，ScriptManager 物件會擷取義大利文版本。

  3. 執行網頁。

    您會看到一個加法問題 (含兩個隨機產生的號碼)，以及一個可用於輸入解答的 TextBox 控制項。當您輸入答案並按一下 [Verify Answer] 按鈕時，會看到訊息視窗中的回應，告訴您答案是否正確。

    根據預設，回應顯示為英文。

  4. 選取下拉式清單中的「義大利文」，將語言變更為義大利文。

  5. 再次執行問答。

    這次答案顯示為義大利文。

檢閱

本逐步解說示範如何將當地語系化的資源值加入至獨立的 JavaScript 檔案。當地語系化的值會建立成 JSON 格式的物件，這些物件是個別當地語系化 JavaScript 檔案的一部分。參考 JSON 物件 (而不是使用硬式編碼的字串) 就會顯示當地語系化的值。當地語系化字串的顯示，會根據瀏覽器中的語言設定，或使用者所提供的語言設定。

請參閱

工作

元件庫資源當地語系化概觀

逐步解說：嵌入已當地語系化的資源供 JavaScript 檔使用