Procedura dettagliata: incorporamento di risorse localizzate per un file JavaScript

Articolo
10/22/2014

Aggiornamento: novembre 2007

In questa procedura dettagliata viene illustrato come includere un file ECMAScript (JavaScript) come risorsa incorporata in un assembly e come includere le stringhe localizzate da utilizzare nel file JavaScript. Si incorpora un file JavaScript in un assembly quando si dispone di un componente script client che deve essere distribuito con l'assembly. È possibile fare riferimento al file JavaScript da un'applicazione Web che registra l'assembly. Si incorporano risorse localizzate quando è necessario modificare valori utilizzati dal file JavaScript per lingue e impostazioni cultura diverse.

Prerequisiti

Per implementare le procedure in questa procedura dettagliata è necessario:

Microsoft Visual Studio 2008.

Nota:
Non è possibile utilizzare Visual Web Developer Express Edition, perché Visual Web Developer Express Edition non consente di creare il progetto Libreria di classi richiesto nella procedura dettagliata.

Creazione di un assembly che contiene un file JavaScript incorporato

Si inizierà creando un assembly (file dll) che contiene il file JavaScript che si vuole trattare come risorsa. A tale scopo si creerà un progetto Libreria di classi in Visual Studio, con la conseguente creazione di un assembly come output.

Per incorporare un file script client e risorse in un assembly

In Visual Studio, creare un nuovo progetto Libreria di classi denominato LocalizingScriptResources.
Aggiungere al progetto riferimenti agli assembly System.Web e System.Web.Extensions.
Aggiungere un nuovo file JScript al progetto denominato CheckAnswer.js.

Aggiungere il seguente codice al file 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;
    }
}

Lo script verifica il risultato dell'utente con l'aggiunta di due numeri. Utilizza la funzione alert per consentire all'utente di sapere che la risposta è corretta. Il messaggio visualizzato nella finestra di dialogo alert viene letto da una risorsa localizzata senza un postback al server.

Un segnaposto denominato Answer viene utilizzato nello script per identificare i file di risorse che contengono le stringhe localizzate. Il segnaposto Answer sarà definito in un secondo momento in questa procedura.

Nella finestra Proprietà di CheckAnswer.js, impostare Operazione di compilazione su Risorsa incorporata.
Aggiungere al progetto una classe denominata ClientVerification.

Sostituire il codice nella classe ClientVerification con il codice seguente:

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);
        }
    }
}

Il codice crea un controllo ASP.NET personalizzato. Contiene due controlli Label, un controllo TextBox e un controllo Button. Nel codice vengono visualizzati due numeri interi casualmente generati e viene fornita una casella di testo per una risposta. Quando si fa clic sul pulsante, viene chiamata la funzione CheckAnswer.

Aggiungere un file di risorse al progetto e denominarlo VerificationResources.resx.
Aggiungere una risorsa di tipo stringa denominata Correct con un valore di "Yes, your answer is correct".
Aggiungere una risorsa di tipo stringa denominata Incorrect con un valore di "No, your answer is incorrect".
Aggiungere una risorsa di tipo stringa denominata Verify con un valore di "Verify Answer".

Questa risorsa non viene recuperata utilizzando lo script client. Viene invece utilizzata per impostare la proprietà Text del controllo Button quando il pulsante viene creato.
Salvare e chiudere il file VerificationResources.resx.
Aggiungere un file di risorse denominato VerificationResources.it.resx al progetto.

Questo file conterrà stringhe di tipo risorsa in italiano.
Aggiungere una risorsa di tipo stringa denominata Correct con un valore di "Sì, la risposta è corretta".
Aggiungere una risorsa di tipo stringa denominata Incorrect con un valore di "No, la risposta è sbagliata".
Aggiungere una risorsa di tipo stringa denominata Verify con un valore di "Verificare la risposta".

Come per la risorsa "Verify" creata in inglese, questa risorsa non viene recuperata utilizzando lo script client. Viene invece utilizzata per impostare la proprietà Text del controllo Button quando il pulsante viene creato.
Salvare e chiudere il file VerificationResources.it.resx.

Aggiungere il codice seguente al file AssemblyInfo. È possibile specificare qualsiasi nome di tipo nell'attributo ScriptResourceAttribute, ma deve corrispondere al nome del tipo utilizzato nello script client. In questo esempio, è impostato su 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")]

Nota:
Il file AssemblyInfo.vb si trova nel nodo Progetto di Esplora soluzioni. Se non sono presenti file nel nodo Progetto, scegliere Mostra tutti i file dal menu Progetto. Il file AssemblyInfo.cs si trova nel nodo Proprietà di Esplora soluzioni.

La definizione WebResource deve includere lo spazio dei nomi predefinito dell'assembly e il nome del file js. La definizione ScriptResource non include l'estensione di file né i file resx localizzati.

Generare il progetto.

Al termine della compilazione, si avrà un assembly denominato LocalizingScriptResources.dll. Il codice JavaScript nel file CheckAnswer.js e le risorse nei due file resx sono incorporati in questo assembly come risorse.

Si avrà inoltre un assembly denominato LocalizingScriptResources.resources.dll (assembly satellite) che contiene le risorse in italiano per il codice server.

Riferimento allo script e alle risorse incorporati

Ora è possibile utilizzare l'assembly in un sito Web ASP.NET con supporto AJAX. Sarà possibile leggere il file js e i valori delle risorse nello script client.

Nota:
Anche se è possibile creare il progetto Libreria di classi e il sito Web nella stessa soluzione Visual Studio, in questa procedura dettagliata non si presuppone questo tipo di procedura. La presenza dei progetti in soluzioni separate consente di simulare la modalità di lavoro separata di uno sviluppatore di controlli e uno sviluppatore di pagine. Per praticità è comunque possibile creare entrambi i progetti nella stessa soluzione e apportare piccole rettifiche alle procedure nella procedura dettagliata.

Anche se è possibile creare il progetto Libreria di classi e il sito Web nella stessa soluzione Visual Studio, in questa procedura dettagliata non si presuppone questo tipo di procedura. La presenza dei progetti in soluzioni separate consente di simulare la modalità di lavoro separata di uno sviluppatore di controlli e uno sviluppatore di pagine. Per praticità è comunque possibile creare entrambi i progetti nella stessa soluzione e apportare piccole rettifiche alle procedure nella procedura dettagliata.

Per fare riferimento allo script e alle risorse incorporati

In Visual Studio creare un nuovo sito Web con supporto AJAX.
Aggiungere una cartella Bin sotto la radice del sito Web.

Aggiungere l'assembly LocalizingScriptResources.dll dal progetto Libreria di classi alla cartella Bin.

Nota:
Se il progetto Libreria di classi e il sito Web sono stati creati nella stessa soluzione Visual Studio, è possibile aggiungere un riferimento dal progetto Libreria di classi al sito Web. Per informazioni dettagliate, vedere Procedura: aggiungere un riferimento a un progetto Visual Studio in un sito Web.

Creare una cartella nella cartella Bin e denominarla it (per l'italiano).
Aggiungere l'assembly satellite di LocalizingScriptResources.resources.dll dalla cartella it nel progetto LocalizingScriptResources alla cartella it nel sito Web.
Aggiungere una nuova pagina Web ASP.NET al progetto.

Sostituire il codice nella pagina con il codice seguente:

<%@ 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>

Il controllo creato nel progetto LocalizingScriptResources viene incluso nella pagina. Questo controllo visualizza due numeri che l'utente dovrà aggiungere e un controllo TextBox per l'immissione della risposta dell'utente. Visualizza anche un pulsante che, quando scelto, chiama lo script nella funzione CheckAnswer. La funzione CheckAnswer viene eseguita nel browser, in cui visualizza un messaggio localizzato indicante se la risposta è corretta o meno.

È necessario impostare la proprietà EnableScriptLocalization dell'oggetto ScriptManager su true per consentire al controllo ScriptManager di recuperare le risorse localizzate. È inoltre necessario specificare "auto" per le impostazioni cultura e le impostazioni cultura dell'interfaccia utente, in modo da visualizzare le stringhe basate sulle impostazioni del browser.

La pagina contiene un controllo DropDownList che è possibile utilizzare per modificare le impostazioni della lingua senza modificare le impostazioni nel browser. Quando la proprietà SelectedIndex del controllo DropDownList viene modificata, la proprietà CurrentUICulture dell'istanza CurrentThread viene impostata sul valore selezionato.

Eseguire il progetto.

Verrà visualizzata un'addizione con due numeri generati casualmente e un controllo TextBox per l'immissione di una risposta. Quando si immette una risposta e si fa clic il pulsante Verify Answer, verrà visualizzata la risposta in una finestra di messaggio che indica se la risposta è corretta. Per impostazione predefinita, la risposta sarà restituita in inglese.

Tuttavia, se è stato impostato l'italiano come lingua preferita nel browser, la risposta sarà in italiano. È possibile modificare la lingua della risposta selezionando una lingua nel controllo DropDownList o modificando la linguaggio preferita nel browser.

Verifica

In questa procedura dettagliata viene introdotto il concetto di incorporamento di un file JavaScript come risorsa in un assembly e di inclusione di stringhe localizzate. È possibile fare riferimento e accedere al file script incorporato in un'applicazione Web che contiene l'assembly. Le stringhe localizzate verranno visualizzate in base all'impostazione della lingua nel browser o della lingua specificata dall'utente.

Vedere anche

Attività

Cenni preliminari sulla localizzazione delle risorse per le librerie di componenti

Procedura dettagliata: aggiunta di risorse localizzate a un file JavaScript

Condividi tramite