Condividi tramite

Procedura dettagliata: creazione di una pagina Web di base con separazione del codice in Visual Web Developer

  • Articolo

Aggiornamento: novembre 2007

Dopo aver creato le pagine Web ASP.NET e scritto il codice all'interno di queste, è possibile scegliere tra due modelli per la gestione degli elementi visibili (controlli, testo) e del codice di programmazione. Nel modello a file singolo, gli elementi visibili e il codice sono conservati insieme nello stesso file. Nel modello alternativo, denominato "separazione di codice", gli elementi visibili sono contenuti in un file mentre il codice è contenuto in un altro file, definito file di "codice sottostante". In questa procedura dettagliata vengono illustrate le pagine Web che utilizzano la separazione del codice.

Il modello a file singolo viene presentato nella Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer. In questa procedura dettagliata viene illustrato come creare una pagina Web con la stessa funzionalità della pagina presente nella procedura dettagliata a file singolo, tuttavia con una particolare attenzione sull'utilizzo della separazione del codice.

La scelta di utilizzare pagine a file singolo o pagine con separazione del codice dipende principalmente dalle esigenze e dalle preferenze personali. La funzionalità dei due modelli di Microsoft Visual Web Developer è simile; entrambi i modelli forniscono un supporto quasi equivalente nell'editor e, inoltre, offrono prestazioni analoghe durante l'esecuzione della pagina. La pagina con separazione del codice consente contemporaneamente il lavoro di progettazione Web di un layout di una pagina e quello del programmatore che crea il codice per la pagina, dal momento che le due pagine possono essere modificate separatamente.

Di seguito sono elencate le attività illustrate nella procedura dettagliata:

  • Utilizzo di Visual Web Developer per creare una pagina ASP.NET con separazione di codice.

  • Aggiunta di controlli.

  • Aggiunta di gestori eventi.

  • Esecuzione delle pagine con il server di sviluppo ASP.NET

Prerequisiti

Per completare questa procedura dettagliata è necessario:

  • Visual Web Developer e NET Framework.

Creazione di un sito e di una pagina Web

In questa parte della procedura dettagliata, sarà creato un sito Web a cui sarà aggiunta una pagina. Sarà inoltre aggiunto un testo HTML e la pagina sarà eseguita nel browser Web.

Se è già stato creato un sito Web in Visual Web Developer (ad esempio, seguendo i passaggi della Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer), è possibile utilizzare quel sito Web e passare a "Creazione di una nuova pagina", più avanti nella procedura dettagliata. In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla procedura riportata di seguito.

Per creare un sito Web di file system

  1. Aprire Visual Web Developer.

  2. Scegliere Nuovosito Web dal menu File.

    Viene visualizzata la finestra di dialogo Nuovo sito Web.

  3. In Modelli Visual Studio installati, fare clic su Sito Web ASP.NET.

  4. Nella casella Percorso, selezionare File system e immettere il nome della cartella in cui salvare le pagine del sito Web.

    Digitare, ad esempio, il nome cartella C:\BasicWebSite.

  5. Nell'elenco Linguaggio, fare clic su Visual Basic oppure su Visual C#.

    Nota:

    In Visual Web Developer non è attualmente supportata la creazione di pagine di codice Visual J# sottostante.

    Il linguaggio di programmazione scelto sarà il linguaggio predefinito per il sito Web; tuttavia, è possibile impostare il linguaggio di programmazione per ogni singola pagina.

  6. Scegliere OK.

    In Visual Web Developer vengono create la cartella e una nuova pagina denominata Default.aspx.

Creazione di una nuova pagina

Quando si crea un nuovo sito Web, in Visual Web Developer viene aggiunta una pagina denominata Default.aspx e, per impostazione predefinita, viene creata una pagina con separazione di codice.

Per aggiungere una pagina con separazione di codice al sito Web

  1. Chiudere la pagina Default.aspx. Per eseguire tale operazione, fare clic con il pulsante destro del mouse sulla scheda in cui è contenuto il nome del file e selezionare Chiudi.

  2. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul sito Web (ad esempio C:\BasicWebSite) e scegliere Aggiungi nuovo elemento.

  3. In Modelli Visual Studio installati scegliere Web Form.

  4. Nella casella Nome digitare WebPageSeparated.

  5. Dall'elenco Linguaggio, scegliere il linguaggio di programmazione da utilizzare (Visual Basic o C#)

  6. Verificare che la casella di controllo Inserisci codice in file separato sia selezionata.

    Per impostazione predefinita, questa casella di controllo è selezionata.

  7. Fare clic su Aggiungi.

    In Visual Web Developer verranno creati due file. Nel primo file, WebPageSeparated.aspx, aperto nell'editor, saranno contenuti il testo e i controlli della pagina. Un secondo file, WebPageSeparated.aspx.vb o WebPageSeparated.aspx.cs (in base al linguaggio di programmazione selezionato), è il file di codice. Facendo clic sul segno (+) accanto al file WebPageSeparated.aspx, in Esplora soluzioni è possibile visualizzare entrambi i file; il file di codice è stato creato ma non aperto. Verrà aperto più avanti nella procedura dettagliata quando si scrive il codice.

Aggiunta di HTML alla pagina

In questa parte della procedura dettagliata, sarà aggiunto testo statico HTML alla pagina WebPageSeparated.aspx.

Per aggiungere il testo alla pagina

  1. Nella parte inferiore della finestra del documento, fare clic sulla scheda Progettazione per passare alla visualizzazione Progettazione.

    Nella visualizzazione Progettazione viene visualizzata la pagina utilizzata in modalità analoga alla visualizzazione WYSIWYG. In questa fase, non si dispone di alcun testo o controlli nella pagina; quindi, la pagina è vuota.

  2. Posizionare il puntatore di inserimento nell'elemento div che già è nella pagina.

  3. Digitare Welcome to Visual Web Developer Using Code Separation.

  4. Passare alla visualizzazione Origine.

    È possibile visualizzare l'HTML creato digitando nella visualizzazione Progettazione. A questo punto, la pagina è simile a una comune pagina HTML; l'unica differenza sta nella direttiva <%@ Page %> nella parte superiore della pagina:

Aggiunta e programmazione dei controlli

In questa parte della procedura dettagliata, verranno aggiunti un pulsante, una casella di testo e un controllo label alla pagina e verrà scritto il codice per gestire l'evento Click del pulsante. I controlli server, inclusi i pulsanti, le etichette, le caselle di testo e altri controlli comuni, forniscono funzionalità di elaborazione basate su form per le pagine Web ASP.NET. È possibile, tuttavia, programmare i controlli con un codice eseguibile nel server e non nel client.

Per aggiungere controlli alla pagina

  1. Fare clic sulla scheda Progettazione per passare alla visualizzazione Progettazione.

  2. Posizionare il puntatore di inserimento dopo il testo aggiunto in precedenza.

  3. Premere INVIO alcune volte per creare spazio.

  4. Dalla scheda Standard della Casella degli strumenti trascinare nella pagina tre controlli: un controllo TextBox, un controllo Button e un controllo Label.

  5. Posizionare il puntatore di inserimento di fronte alla casella di testo, quindi digitare Enter your name:.

    Il testo statico HTML rappresenta la didascalia per il controllo TextBox. È possibile combinare l'HTML statico e i controlli server nella stessa pagina.

Impostazione delle proprietà di controllo

In Visual Web Developer sono presenti varie modalità di impostazione delle proprietà dei controlli nella pagina. In questa parte della procedura dettagliata, le proprietà verranno utilizzate sia in visualizzazione Progettazione sia in visualizzazione Origine.

Per impostare le proprietà di controllo

  1. Selezionare il controllo Button, quindi nella finestra Proprietà impostare la relativa proprietà Text su Display Name.

  2. Passare alla visualizzazione Origine.

    In visualizzazione Origine viene visualizzato l'HTML per la pagina, inclusi gli elementi creati in Visual Web Developer per i controlli server. I controlli vengono dichiarati utilizzando la sintassi simile all'HTML, eccetto i tag per cui si utilizza il prefisso asp: e viene incluso l'attributo .

    Le proprietà dei controlli vengono dichiarate come attributi. Ad esempio, quando la proprietà Text per il pulsante viene impostata su Step 1, in effetti si imposta l'attributo Text nel tag del controllo.

    Notare che tutti i controlli sono all'interno di un elemento form, in cui è presente anche l'attributo . Mediante l'attributo e il prefisso asp: per i tag di controllo, i controlli vengono contrassegnati per essere eseguiti da ASP.NET quando si esegue la pagina.

Programmazione del controllo pulsante

Per questa procedura dettagliata, è necessario scrivere il codice che consente di leggere il nome immesso nella casella di testo e di visualizzalo nel controllo Label.

Per aggiungere un gestore eventi del pulsante predefinito

  1. Passare alla visualizzazione Progettazione

  2. Fare doppio clic sul controllo Button.

    In Visual Web Developer viene aperto il file WebPageSeparated.aspx.vb o WebPageSeparated.aspx.cs in una finestra separata dell'editor. Nel file è contenuto una struttura di gestore eventi Click per il pulsante.

  3. Completare il gestore eventi Click aggiungendo il codice evidenziato riportato di seguito.

    Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button1.Click
        Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub

    protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

    Tenere presente che, durante la digitazione, IntelliSense semplifica le scelte sensibili al contesto. Si verifica un comportamento analogo durante la codifica in una pagina a file singolo.

Analisi del file di pagina e di codice

Sono disponibili al momento due file che costituiscono la pagina WebPageSeparated completa: WebPageSeparated.aspx e WebPageSeparated.aspx.vb oppure WebPageSeparated.aspx.cs. In questa sezione della procedura dettagliata, verranno analizzate la struttura dei file e la rispettiva correlazione.

Per analizzare il file di pagina e di codice

  1. Per passare al file di pagina, fare clic sulla scheda WebPageSeparated.aspx nella parte superiore della finestra dell'editor.

  2. Passare alla visualizzazione Origine.

    Nella parte superiore della pagina è presente una direttiva @ page che associa questa pagina al file di codice: La direttiva è simile al codice riportato di seguito:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="WebPageSeparated.aspx.vb" Inherits="WebPageSeparated" %>

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPageSeparated.aspx.cs" Inherits="WebPageSeparated" %>

    La riga non ritorna a capo in automatico nell'editor e, inoltre, l'attributo di linguaggio e le estensioni dei nome dei file determineranno la corrispondenza con il linguaggio di programmazione selezionato.

    Quando viene eseguita la pagina, in ASP.NET viene creata in modo dinamico un'istanza di una classe che rappresenta la pagina. L'attributo Inherits consente di identificare la classe definita nel file di codice sottostante da cui la pagina aspx viene derivata. Per impostazione predefinita, in Visual Web Developer viene utilizzato il nome della pagina come base per il nome della classe nel file di codice sottostante.

    L'attributo CodeFile consente di identificare il file di codice per questa pagina. In pratica, nel file di codice sottostante è contenuto il codice di gestione degli eventi per la pagina.

  3. Per passare al file di codice, scegliere la scheda WebPageSeparated.aspx.vb o WebPageSeparated.aspx.cs.

    Nel file di codice è contenuto il codice simile a una definizione di classe. Non si tratta, tuttavia, di una definizione di classe completa, piuttosto di una "classe parziale" contenente solo una parte della classe completa che costituirà la pagina. In particolare, nella classe parziale definita nel file di codice sono contenuti i gestori eventi e altro codice personalizzato da scrivere. In fase di esecuzione, in ASP.NET viene generata un'altra classe parziale contenente il codice utente. Questa classe completa viene quindi utilizzata come classe base per eseguire il rendering della pagina. Per ulteriori informazioni, vedere Cenni preliminari sulla classe delle pagine ASP.NET.

    Nota:

    Se si conosce il modello di codice sottostante utilizzato in Microsoft Visual Studio .NET 2003, considerare che, nel nuovo modello, la classe di codice sottostante non contiene codice generato oltre alla definizione delle classe stessa. La classe, ad esempio, non contiene variabili di istanza per i controlli nella pagina. Questo tipo di codice generato non è più necessario.

Esecuzione della pagina

È ora possibile eseguire il test della pagina.

Per eseguire la pagina

  1. Premere CTRL+F5 per eseguire la pagina nel browser.

    La pagina viene eseguita utilizzando il server di sviluppo ASP.NET.

    Nota:

    Se nel browser viene visualizzato un errore 502 oppure un errore indicante l'impossibilità di visualizzare la pagina, è possibile che occorra configurare il browser in modo da ignorare i server proxy per le richieste locali. Per informazioni dettagliate, vedere Procedura: ignorare un server proxy per le richieste Web locali.

  2. Immettere un nome nella casella di testo e fare clic sul pulsante.

    Il nome immesso viene visualizzato nel controllo Label.

  3. Nel browser, visualizzare l'origine della pagina in esecuzione.

  4. Chiudere il browser.

    La pagina funziona esattamente come se si trattasse di una pagina a file singolo. Se sono stati seguiti i passaggi nella Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer per creare una pagina a file singolo, è possibile confrontare le due pagine per verificare che sono uguali durante l'esecuzione.

Passaggi successivi

In questa procedura dettagliata è stato illustrato come creare e modificare una pagina Web in cui viene utilizzato la separazione di codice. Dal punto di vista della creazione e dell'esecuzione della pagina, non esiste una differenza significativa tra una pagina a file singolo e una pagina con separazione di codice.

Si consiglia di esaminare altre funzionalità. Può, ad esempio, essere necessario:

Vedere anche

Attività

Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer

Concetti

Tipi di siti Web in Visual Web Developer