Procedura dettagliata: utilizzo di frammenti HTML

In questa procedura dettagliata viene illustrato come aggiungere il markup a una pagina utilizzando frammenti di codice HTML. È possibile utilizzare frammenti di codice HTML in Visual Studio per risparmiare tempo e ridurre la digitazione quando si crea il markup della pagina Web nella visualizzazione Origine.

Di seguito sono elencate le diverse sezioni di questo argomento:

• Prerequisiti

• Funzionamento dei frammenti di codice

• Apertura di un progetto esistente o creazione di uno nuovo

• Inserimento di frammenti HTML

• Esecuzione della pagina

• Passaggi successivi

Prerequisiti

Per completare questa procedura dettagliata, è necessario quanto segue:

• Visual Studio o Visual Studio Express per il Web.

Funzionamento dei frammenti di codice

Visual Studio comprende più di 200 frammenti di codice per C#, Visual Basic, XML e HTML (che include il markup di ASP.NET). I frammenti di codice sono costituiti da markup o da codice di programmazione già scritto. In alcuni casi, il frammento contiene segnaposti per le informazioni (quale un nome di proprietà) che è possibile specificare dopo averlo inserito. È possibile utilizzare frammenti di codice nell'editor di codice e nella visualizzazione Origine quando si crea una pagina Web.

In questa procedura dettagliata verrà aggiunto il markup HTML e ASP.NET a una pagina Web Form. Per quasi tutti i frammenti è disponibile un sistema rapido per inserire il codice. Per inserire ad esempio un controllo server Button ASP.NET nelle pagine Web Form, è possibile digitare <bu, quindi premere due volte TAB. In alternativa, è possibile digitare button quindi premere una volta il tasto TAB. Una volta eseguita questa operazione, l'editor completa il markup per il controllo Button inserendo il markup seguente:

<asp:Button Text="text" runat="server" />

In questa procedura dettagliata viene illustrato il sistema più rapido per inserire i frammenti di codice. I frammenti di codice possono essere tuttavia inseriti anche nei modi seguenti:

• Posizionare il cursore dove si desidera visualizzare il frammento di codice inserito, fare clic con il pulsante destro del mouse sulla pagina, quindi scegliere Inserisci frammento di codice.

• Posizionare il cursore dove si desidera visualizzare il frammento di codice inserito, quindi premere il tasto di scelta rapida CTRL+K, CTRL+X. Viene visualizzato un elenco che consente di selezionare un frammento di codice.

• Selezionare una parola che si desidera racchiudere con un frammento di codice, quindi fare clic con il pulsante destro del mouse sulla parola e scegliere Racchiudi tra.

• Selezionare IntelliSense dal menu Modifica, quindi scegliere Inserisci frammento.

In Visual Studio, per visualizzare i frammenti di codice disponibili o aggiungerne, è possibile utilizzare Gestione frammenti di codice.

Nell'illustrazione seguente viene mostrata la finestra di dialogo Gestione frammenti di codice.

Finestra di dialogo Gestione frammenti di codice

Nella procedura seguente verranno visualizzati i frammenti di codice disponibili per gli elementi HTML.

Per visualizzare i frammenti di codice HTML disponibili con Gestione frammenti di codice

1. Aprire Visual Studio. Non è necessario aprire un progetto per visualizzare Gestione frammenti di codice.

2. Scegliere Gestione frammenti di codice dal menu Strumenti.

   Verrà visualizzata la finestra di dialogo Gestione frammenti di codice.

3. Nell'elenco Linguaggio selezionare HTML.

   Si noti che sono presenti diverse cartelle che contengono frammenti di codice correlati a HTML, ad esempio ASP.NET, ASP.NET MVC 2 e HTML.

4. In Percorso espandere la cartella HTML.

5. Selezionare div.

   Si noti che l'elenco Collegamenti alternativi include altri elementi HTML correlati, quali p, h1, h2 e così via. Gli elementi correlati dispongono inoltre di frammenti di codice che è possibile inserire utilizzando collegamenti <div, <p, <h1 e così via.

Apertura di un progetto esistente o creazione di uno nuovo

Se non si dispone ancora di un progetto di applicazione Web di Visual Studio o Visual Studio Express per il Web, attenersi a questi passaggi per crearne uno per questa procedura dettagliata. Nella procedura dettagliata verranno utilizzati i frammenti di codice nella pagina Default.aspx, ma se si utilizza un progetto esistente, è possibile eseguire le procedure in qualsiasi pagina.

Per creare un progetto di applicazione Web

1. Scegliere Nuovo progetto dal menu File.

   Verrà visualizzata la finestra di dialogo Nuovo progetto.

2. Selezionare il nodo Web, quindi selezionare Applicazione Web ASP.NET dalla sezione Modelli Visual Studio installati.

3. Nel campo Nome digitare SnippetTest.

4. Fare clic su OK.

   Visual Studio crea un progetto di applicazione Web.

Inserimento di frammenti HTML

In IntelliSense i frammenti di codice HTML disponibili vengono visualizzati come gli altri elementi HTML. Diverse funzionalità dei frammenti di codice ne velocizzano l'inserimento e la modifica. Alcuni frammenti di codice includono inoltre segnaposti di cui è possibile immettere il valore senza che sia necessario spostare il punto di inserimento sull'attributo.

In questa procedura vengono inseriti gli elementi ASP.NET che sono inclusi nella sezione HTML di Gestione frammenti di codice.

Per inserire frammenti HTML nel markup

1. Aprire la pagina Default.aspx se non è già aperta.

2. Passare alla visualizzazione Origine.

3. Posizionare il cursore prima del tag </asp:Content> di chiusura.

4. Digitare <che.

   Nell'elenco a discesa vengono visualizzati i nomi degli elementi e i frammenti. Un'icona contenente parentesi angolari indica un elemento HTML, come mostrato nell'illustrazione seguente:

   

   Un'icona che rappresenta un foglio di carta indica un frammento di codice, come mostrato nell'illustrazione seguente:

   

   Alcuni frammenti hanno lo stesso nome dell'elemento HTML relativo e presentano sia l'icona del frammento che l'icona del tag.

5. Premere due volte TAB.

   Viene visualizzato il markup di un controllo CheckBox e viene evidenziato il valore della proprietà text.

   Nota

   Se non si è posizionati tra i tag di apertura e di chiusura di un elemento, è possibile che si ottengano risultati diversi.

6. Digitare Check box e premere INVIO per completare l'elemento.

   Il cursore si sposta alla fine dell'elemento. Non è necessario utilizzare il tasto TAB per completare l'elemento.

7. Premere INVIO per passare alla riga successiva.

8. Posizionare il cursore all'inizio della riga e fare clic con il pulsante destro del mouse sulla pagina.

9. Selezionare Inserisci frammento di codice per visualizzare le cartelle dei frammenti disponibili.

10. Fare doppio clic sulla cartella dei frammenti HTML.

11. Digitare br e premere TAB.

    Viene visualizzato il markup per un elemento di interruzione di riga (br).

12. Premere INVIO per passare alla riga successiva.

13. Posizionare il cursore all'inizio della riga e premere i tasti di scelta rapida CTRL+K, CTRL+X.

    Verrà visualizzato l'elenco di cartelle dei frammenti di codice.

14. Premere TAB per scegliere la cartella dei frammenti di codice ASP.NET.

15. Digitare ra e premere TAB.

    Viene visualizzato il markup per un controllo RadioButton e text viene evidenziato.

16. Digitare Radio Button. Premere INVIO per completare l'elemento.

17. Premere INVIO per passare alla riga successiva.

18. Digitare <br, quindi premere TAB due volte.

19. Premere INVIO per passare alla riga successiva.

20. Selezionare IntelliSense dal menu Modifica, quindi scegliere Inserisci frammento.

    Verrà visualizzato l'elenco di cartelle dei frammenti.

21. Fare doppio clic sulla cartella dei frammenti ASP.NET.

22. Digitare la e premere TAB due volte.

    Verrà visualizzato il markup per un controllo Label. Il valore della proprietà text viene evidenziato.

23. Digitare Text box e premere INVIO.

24. Passare alla riga successiva.

25. Digitare <textb e premere TAB due volte.

    Verrà visualizzato il markup per un controllo TextBox.

Esecuzione della pagina

Il passaggio finale è il test della pagina. Per eseguire il test di una pagina, è possibile utilizzare IIS Express, che viene eseguito a livello locale e per il quale non è richiesto IIS.

Per eseguire la pagina

1. Premere CTRL+F5 per eseguire la pagina.

2. Scorrere verso il basso. I controlli casella di controllo, pulsante di opzione, etichetta e casella di testo si trovano nella parte inferiore della pagina.

Passaggi successivi

In questa procedura dettagliata è stato illustrato come aggiungere frammenti di codice HTML al progetto Visual Studio. Per ulteriori informazioni sull'utilizzo dei frammenti di codice, vedere gli argomenti nella pagina Frammenti di codice.