Exemplarische Vorgehensweise: Verwenden von HTML-Codeausschnitten

In dieser exemplarischen Vorgehensweise wird erläutert, wie einer Seite mit HTML-Codeausschnitten Markup hinzugefügt wird. Sie können HTML-Codeausschnitte in Visual Studio verwenden, um Zeit zu sparen und weniger Text eingeben zu müssen, wenn Sie das Markup einer Webseite in der Quellansicht erstellen.

Dieses Thema enthält folgende Abschnitte:

• Vorbereitungsmaßnahmen

• Funktionsweise der Codeausschnitte

• Öffnen Sie ein vorhandenes Projekt, oder erstellen Sie ein neues Projekt.

• Einfügen von HTML-Ausschnitten

• Ausführen der Seite

• Nächste Schritte

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

• Visual Studio oder Visual Studio Express for Web.

Funktionsweise der Codeausschnitte

Visual Studio enthält über 200 Codeausschnitte für C#, Visual Basic, XML und HTML (einschließlich ASP.NET-Markup). Codeausschnitte bestehen aus vordefiniertem Programmcode oder Markup. In einigen Fällen enthält der Ausschnitt Platzhalter für Informationen (z. B. einen Eigenschaftenname), die Sie angeben können, nachdem Sie den Codeausschnitt eingefügt haben. Sie können Codeausschnitte im Code-Editor und in der Quellansicht des HTML-Editors verwenden, wenn Sie eine Webseite erstellen.

In dieser exemplarischen Vorgehensweise fügen Sie einer Web Foms-Seite HTML- und ASP.NET-Markup hinzu. Fast alle Ausschnitte verfügen über eine Methode, um den Code schnell einzufügen. Um beispielsweise das ASP.NET-Serversteuerelement Button in Web Forms-Seiten einzufügen, können Sie <bu eingeben und dann die TAB-TASTE zweimal drücken. Alternativ können Sie button eingeben und die TAB-TASTE einmal drücken. In diesem Fall schließt der Editor das Markup für das Button-Steuerelement ab, indem er das folgende Markup einfügt:

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

In dieser exemplarischen Vorgehensweise wird die schnellste Möglichkeit zum Einfügen von Codeausschnitten veranschaulicht. Sie können Codeausschnitte jedoch auch auf die folgende Weise einfügen:

• Positionieren Sie den Cursor an der Stelle, an der der Codeausschnitt eingefügt werden soll, klicken Sie mit der rechten Maustaste auf die Seite, und wählen Sie dann Ausschnitt einfügen aus.

• Positionieren Sie den Cursor an der Stelle, an der der Codeausschnitt eingefügt werden soll, und drücken Sie dann die Tastenkombination STRG+K, STRG+X. Eine Liste wird angezeigt, aus der Sie einen Ausschnitt auswählen können.

• Wählen Sie ein Wort aus, das von einem Codeausschnitt umschlossen werden soll. Klicken Sie dann mit der rechten Maustaste auf das Wort, und klicken Sie auf Umschließen mit.

• Zeigen Sie im Menü Bearbeiten auf IntelliSense, und wählen Sie dann Ausschnitt einfügen aus.

Um in Visual Studio zu sehen, welche Codeausschnitte verfügbar sind, oder um Ausschnitte hinzuzufügen, können Sie den Codeausschnitt-Manager verwenden.

Die folgende Abbildung zeigt das Dialogfeld Codeausschnitt-Manager.

Dialogfeld "Codeausschnitt-Manager"

In der nächsten Prozedur sehen Sie, welche Ausschnitte für HTML-Elemente verfügbar sind.

So zeigen Sie verfügbare HTML-Codeausschnitte mit dem Codeausschnitt-Manager an

1. Öffnen Sie Visual Studio. Sie müssen kein Projekt öffnen, um den Codeausschnitt-Manager anzuzeigen.

2. Klicken Sie im Menü Extras auf Codeausschnitt-Manager.

   Das Dialogfeld Codeausschnitt-Manager wird angezeigt.

3. Wählen Sie in der Liste Sprache die Option HTML aus.

   Beachten Sie, dass in mehreren Ordnern HTML-bezogene Ausschnitte enthalten sind, z. B. ASP.NET, ASP.NET MVC 2 und HTML.

4. Erweitern Sie unter Speicherort den HTML-Ordner.

5. Wählen Sie div aus.

   Beachten Sie, dass die Liste Alternative Verknüpfungen zugehörige HTML-Elemente, z. B. p, h1, h2, enthält. Die zugehörigen Elemente verfügen auch über Ausschnitte, die Sie einfügen können, indem Sie die Verknüpfungen <div, <p, <h1 usw. verwenden.

Öffnen Sie ein vorhandenes Projekt, oder erstellen Sie ein neues Projekt.

Wenn Sie noch kein Visual Studio- oder Visual Studio Express for Web-Anwendungsprojekt haben, erstellen Sie mithilfe der folgenden Prozedur ein Projekt für diese exemplarische Vorgehensweise. In der exemplarischen Vorgehensweise arbeiten Sie mit Ausschnitten auf der Seite "Default.aspx", aber Sie können dieselben Schritte für eine Seite eines vorhandenen Projekts verwenden.

So erstellen Sie ein Webanwendungsprojekt

1. Klicken Sie im Menü Datei auf Neues Projekt.

   Das Dialogfeld Neues Projekt wird angezeigt.

2. Wählen Sie den Knoten Web aus, und wählen Sie dann im Abschnitt Von Visual Studio installierte Vorlagen die Option ASP.NET-Webanwendung aus.

3. Geben Sie im Feld Name den Text SnippetTest ein.

4. Klicken Sie auf OK.

   Von Visual Studio wird ein Webanwendungsprojekt erstellt.

Einfügen von HTML-Ausschnitten

IntelliSense zeigt die verfügbaren HTML-Codeausschnitte ebenso wie andere HTML-Elemente an. Mehrere Funktionen der Codeausschnitte ermöglichen ein schnelles Einfügen und Bearbeiten der Ausschnitte. Außerdem enthalten einige Codeausschnitte Platzhalter, deren Wert Sie eingeben können, ohne die Einfügemarke zum Attribut verschieben zu müssen.

In dieser Prozedur fügen Sie ASP.NET-Elemente ein. Diese sind im HTML-Abschnitt des Codeausschnitt-Managers enthalten.

So fügen Sie HTML-Ausschnitte in Markup ein

1. Öffnen Sie die Seite Default.aspx, wenn dies noch nicht geschehen ist.

2. Wechseln Sie zur Quellansicht.

3. Positionieren Sie den Cursor vor dem </asp:Content>-Endtag.

4. Geben Sie <che ein.

   In der Dropdownliste werden Elementnamen und Ausschnitte angezeigt. Ein Symbol, das schließende spitze Klammern enthält, gibt ein HTML-Element an, wie in der folgenden Abbildung gezeigt:

   

   Ausschnitte werden durch ein Symbol mit einem Blatt Papier angegeben, wie in der folgenden Abbildung gezeigt:

   

   Einige Ausschnitte haben den gleichen Namen wie ihr HTML-Element und verfügen sowohl über das Ausschnittsymbol als auch das Tagsymbol.

5. Drücken Sie zweimal die TAB-TASTE.

   Das Markup für ein CheckBox-Steuerelement wird angezeigt, und der text-Eigenschaftswert wird hervorgehoben.

   Hinweis

   Wenn der Cursor nicht zwischen dem Start- und Endtag eines Elements positioniert ist, sind andere Ergebnisse möglich.

6. Geben Sie "Check box " ein, und drücken Sie die EINGABETASTE, um das Element abzuschließen.

   Der Cursor wird an das Ende des Elements verschoben. Sie müssen nicht die TAB-TASTE verwenden, um das Element abzuschließen.

7. Drücken Sie die EINGABETASTE, um zur nächsten Zeile zu wechseln.

8. Positionieren Sie den Cursor am Anfang der Zeile, und klicken Sie mit der rechten Maustaste auf die Seite.

9. Wählen Sie Ausschnitt einfügen aus, um die verfügbaren Ausschnittordner anzuzeigen.

10. Doppelklicken Sie auf den Ausschnittordner HTML.

11. Geben Sie br ein, und drücken Sie die TAB-TASTE.

    Das Markup für ein Zeilenumbruchelement (br) wird angezeigt.

12. Drücken Sie die EINGABETASTE, um zur nächsten Zeile zu wechseln.

13. Positionieren Sie den Cursor am Anfang der Zeile, und drücken Sie die Tastenkombination STRG+K, STRG+X.

    Die Liste mit Ausschnittordnern wird angezeigt.

14. Drücken Sie TAB, um den Ausschnittordner ASP.NET auszuwählen.

15. Geben Sie ra ein, und drücken Sie die TAB-TASTE.

    Das Markup für ein RadioButton-Steuerelement wird angezeigt, und text wird hervorgehoben.

16. Geben Sie "Radio Button" ein. Drücken Sie die EINGABETASTE, um das Element abzuschließen.

17. Drücken Sie die EINGABETASTE, um zur nächsten Zeile zu wechseln.

18. Geben Sie <br ein, und drücken Sie zweimal die TAB-TASTE.

19. Drücken Sie die EINGABETASTE, um zur nächsten Zeile zu wechseln.

20. Zeigen Sie im Menü Bearbeiten auf IntelliSense, und wählen Sie dann Ausschnitt einfügen aus.

    Die Liste mit Ausschnittordnern wird angezeigt.

21. Doppelklicken Sie auf den ASP.NET-Ausschnittordner.

22. Geben Sie la ein, und drücken Sie zweimal die TAB-TASTE.

    Das Markup für ein Label-Steuerelement wird angezeigt. Der text-Eigenschaftswert wird hervorgehoben.

23. Geben Sie "Text box" ein, und drücken Sie die EINGABETASTE.

24. Führen Sie einen Umbruch in die nächste Zeile durch.

25. Geben Sie <textb ein, und drücken Sie zweimal die TAB-TASTE.

    Das Markup für ein TextBox-Steuerelement wird angezeigt.

Ausführen der Seite

Abschließend testen Sie die Seite. Um eine Seite zu testen, können Sie IIS Express verwenden, das lokal ausgeführt wird und IIS nicht benötigt.

So führen Sie die Seite aus

1. Drücken Sie STRG+F5, um die Seite auszuführen.

2. Führen Sie einen Bildlauf nach unten durch. Die Kontrollkästchen-, Optionsfeld-, Bezeichnungs- und Textfeld-Steuerelemente befinden sich am Ende der Seite.

Nächste Schritte

In dieser exemplarischen Vorgehensweise haben Sie gelernt, wie Sie HTML-Codeausschnitte zum Visual Studio-Projekt hinzufügen können. In den Themen auf der Seite Codeausschnitte erfahren Sie mehr zum Verwenden von Codeausschnitten.