Neue Funktionen für die Webentwicklung mit ASP.NET und Visual Studio 2012

Artikel
07/13/2023

Die neue Version von Visual Studio enthält eine Reihe von Verbesserungen, die sich auf die Verbesserung der Benutzerfreundlichkeit und Leistung beim Arbeiten mit Webtechnologien konzentrieren. Visual Studio-Editoren für CSS, JavaScript und HTML wurden vollständig überarbeitet, um viele der am häufigsten nachgefragten Codehilfsmittel wie IntelliSense und automatische Einzuge zu enthalten. In Bezug auf die Leistung sind Bündelung und Minimierung jetzt als integrierte Features integriert, um die Seitenladezeit zu reduzieren.

Mit Visual Studio können Sie mit den neuesten Websitetechnologien arbeiten. Sie können browserübergreifende CSS3-Codeausschnitte verwenden, um sicherzustellen, dass Ihre Website unabhängig von der Clientplattform funktioniert und gleichzeitig die neuen HTML5-Elemente und -Features nutzen.

Das Schreiben und Profilieren von JavaScript-Code sollte mit dieser Visual Studio-Version einfacher sein. IntelliSense-Listen, integrierte XML-Dokumentation und Navigationsfeatures sind jetzt für JavaScript-Code verfügbar. Sie haben jetzt den JavaScript-Katalog zur Hand. Darüber hinaus können Sie die ECMAScript5-Konformität mit Ihren Skripts überprüfen und Syntaxfehler frühzeitig erkennen.

Nicht zuletzt implementiert diese Visual Studio-Version integrierte Bündelung und Minimierung. Ihre Skriptdateien und Stylesheets werden gepackt und komprimiert, damit die Website schneller funktioniert.

Dieses Lab führt Sie durch die zuvor beschriebenen Verbesserungen und neuen Features, indem kleinere Änderungen auf eine Beispielwebanwendung angewendet werden, die im Ordner Quelle bereitgestellt wird.

Ziele

In diesem praktischen Lab lernen Sie Folgendes:

Verwenden der neuen Features und Verbesserungen im CSS-Editor
Verwenden der neuen Features und Verbesserungen im HTML-Editor
Verwenden der neuen Features und Verbesserungen im JavaScript-Editor
Konfigurieren und Verwenden von Bündelung und Minimierung

Voraussetzungen

Microsoft Visual Studio Express 2012 für Web oder höher (Anweisungen zur Installation finden Sie in Anhang A).
Windows PowerShell (für Setupskripts – bereits unter Windows 8 und Windows Server 2008 R2 installiert)
Internet Explorer 10 – oder einen HTML5-kompatiblen Browser

Übungen

Dieses praktische Lab umfasst die folgenden Übungen:

Übung 1: Neuerungen im CSS-Editor
Übung 2: Neuerungen im HTML-Editor
Übung 3: Neuerungen im JavaScript-Editor
Übung 4: Bündelung und Minimierung

Geschätzte Zeit für die Durchführung dieses Labs: 60 Minuten.

Übung 1: Neuerungen im CSS-Editor

Webentwickler sollten mit vielen Der Schwierigkeiten im Zusammenhang mit der CSS-Bearbeitung vertraut sein. Eines der größten Probleme des CSS-Stylings ist die browserübergreifende Kompatibilität. Es kommt häufig vor, dass Sie nach dem Anwenden von Formatvorlagen auf Ihre Website feststellen, dass es anders aussieht, wenn Sie sie in einem anderen Browser oder Gerät öffnen. Daher können Sie viel Zeit damit verbringen, diese visuellen Probleme zu beheben, um zu erkennen, dass, wenn Sie es endlich in einem Browser funktionieren lassen, es in den anderen unterbrochen wird.

Visual Studio enthält jetzt Features, mit denen Entwickler effektiv auf CSS-Stylesheets zugreifen, diese bearbeiten und organisieren können. In dieser Übung lernen Sie die neuen Features für eine effektive organization und Edition sowie die CSS3-Codeausschnitte für browserübergreifende Kompatibilität kennen.

Aufgabe 1: Neue Editorfeatures

In dieser Aufgabe entdecken Sie die neuen Features des CSS-Editors. Mit diesem neuen Editor können Sie Ihre Produktivität steigern, indem Sie die vorteile der neuen intelligenten Einzugsfunktion, der verbesserten Codekommentare und der erweiterten IntelliSense-Liste nutzen.

Starten Sie Visual Studio , und öffnen Sie die Projektmappe WhatsNewASPNET.sln im Ordner Quelle\WhatsNewASPNET dieses Labs.
Öffnen Sie in Projektmappen-Explorer die Datei Site.css, die sich unter dem Ordner Styles befindet. Stellen Sie sicher, dass die Text-Editor-Tools auf der Symbolleiste sichtbar sind. Wählen Sie dazu die MenüoptionSymbolleistenanzeigen | aus, und überprüfen Sie die Optionen des Text-Editors. Sie werden feststellen, dass seit dieser neuen Version auch die Kommentarschaltfläche ( ) und die Schaltfläche Unkommentierung ( ) für den CSS-Editor aktiviert sind.

Aktivieren von Editor- und CSS-Tools
Scrollen Sie im Code, und wählen Sie eine beliebige CSS-Klassendefinition aus. Klicken Sie auf die Schaltfläche Kommentar ( ), um die ausgewählten Zeilen zu kommentieren. Klicken Sie dann auf die Schaltfläche Auskommentierung aufheben ( ), um die Änderungen rückgängig zu machen.
Klicken Sie auf die Schaltflächen Reduzieren ( ) und Erweitern ( ) am linken Rand des Texts. Beachten Sie, dass Sie jetzt die Stile ausblenden können, die Sie nicht verwenden, um eine sauberere Ansicht zu erhalten.

Reduzieren von CSS-Klassen
Stellen Sie sicher, dass das Feature für den intelligenten Einzug aktiviert ist. Wählen Sie die Menüoption Extras | Optionen aus, und wählen Sie dann im linken Bereich des Bildschirms die SeiteText-Editor-CSS-Formatierung | | aus. Aktivieren Sie die Hierarchische Einzugsoption .

Aktivieren des hierarchischen Einzugs
Suchen Sie die Standard-Klassendefinition (.Standard), und fügen Sie den div-Elementen eine Formatvorlage an. Sie werden feststellen, dass der Code automatisch ausgerichtet wird, sodass Benutzer die übergeordneten Klassen auf einen Blick finden können.

CSS
```
.main
{
  padding: 0px 12px;
  margin: 12px 8px 8px 8px;
  min-height: 420px;
}
  .main div
  {
    border: 0px;
  }
```
Hierarchische Ausrichtung in CSS
Suchen Sie in der .Standard div-Klasse den Cursor am Ende des Rahmens: 0px, und drücken Sie die EINGABETASTE, um die IntelliSense-Liste anzuzeigen. Beginnen Sie mit der Eingabe oben , und beachten Sie, wie die Liste gefiltert wird, während Sie eingeben. In der Liste werden die Elemente angezeigt, die oben an einem beliebigen Teil des Worts enthalten (In früheren Versionen von Visual Studio wird die Liste nach den Elementen gefiltert, die mit dem Begriff beginnen ).

IntelliSense-Verbesserungen in CSS

Aufgabe 2: Die Farbauswahl

In dieser Aufgabe entdecken Sie die neue CSS-Farbauswahl, die in Visual Studio IntelliSense integriert ist.

Suchen Sie in Site.css nach der Headerklassendefinition (.header), und platzieren Sie den Cursor neben dem Attribut background-color zwischen den Zeichen ":" und "#" in dieser Codezeile .

Suchen des Cursors
Doppelpunkt löschen (:) und schreiben Sie sie erneut, um die Farbauswahl anzuzeigen. Beachten Sie, dass die ersten Farben, die Sie sehen, die häufigsten Farben Ihrer Website sind. Wenn Sie auf die weiße Farbe klicken, ersetzt dessen HTML-Farbcode (#fff) den aktuellen Farbcode im Stylesheet.

Farbauswahl
Drücken Sie die Schaltfläche Erweitern ( ) in der Farbauswahl, um den Farbverlauf anzuzeigen, und ziehen Sie dann den Farbverlaufscursor, um eine andere Farbe auszuwählen. Klicken Sie anschließend auf die Schaltfläche Eyedropper , und wählen Sie eine beliebige Farbe auf dem Bildschirm aus. Beachten Sie, dass sich der Wert der Hintergrundfarbe dynamisch ändert, während Sie den Cursor bewegen.

Farbauswahlverlauf
Bewegen Sie im Deckkraftschieberegler den Selektor in die Mitte des Balkens, um die Deckkraft zu verringern. Beachten Sie, dass der Hintergrundfarbwert jetzt seine Skalierung in RGBA ändert.

Farbauswahl Deckkraft

Hinweis

Mit der RGBA-Farbdefinition (Rot, Grün, Blau, Alpha) in CSS3 können Sie den Farbopacity-Wert für ein einzelnes Element definieren. Im Gegensatz zur Deckkraft sind die RGBA-Farben eines ähnlichen CSS-Attributs - auch mit den neuesten Browsern kompatibel.

Aufgabe 3: CSS-kompatible Codeausschnitte

In dieser Aufgabe erfahren Sie, wie Sie browserübergreifende kompatible CSS3-Codeausschnitte verwenden, um einige Features in Ihrer Website zu implementieren.

Suchen Sie in der Datei Site.css nach der CSS-Klassendefinition des Headers (.header), und platzieren Sie den Cursor unter dem Platzhalter /*border radius*/ , um einen neuen Codeausschnitt hinzuzufügen. Drücken Sie die EINGABETASTE , um die IntelliSense-Liste anzuzeigen, und geben Sie radius ein, um die Liste zu filtern. Wählen Sie die Option Rahmenradius aus der Liste mit einem Doppelklick aus, und drücken Sie dann die TAB-TASTE , um den Ausschnitt einzufügen. Geben Sie dann eine Radiusgröße in Pixel ein, und drücken Sie die EINGABETASTE. Geben Sie für instance 15px ein.

Die durch den Codeausschnitt hinzugefügten CSS3-Attribute rendern abgerundete Rahmen in den meisten HTML5-Compliancebrowsern, einschließlich Mozilla- und WebKit-basierten Browsern.

Verwenden eines Rahmenradiusausschnitts

Wenden Sie dieselben Rahmenausschnitte im Seitenformat (.page) an.

CSS

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    /*border radius*/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

Drücken Sie F5, um die Projektmappe auszuführen. Beachten Sie, dass jede Seite jetzt gerundete Rahmen aufweist.

Abgerundete Ecken
Schließen Sie den Browser und kehren Sie zu Visual Studio zurück.
Öffnen Sie die Datei Custom.css im Ordner Styles , und platzieren Sie den Cursor in der Definition der div.images ul li img-Klasse .
Drücken Sie die EINGABETASTE, um die IntelliSense-Liste anzuzeigen, geben Sie box-shadow ein, und drücken Sie zweimal die TAB-TASTE , um den Standardschattencodeausschnitt in die Klassendefinition einzufügen. Legen Sie die Schattenwerte auf 10px 10px 5px #888 fest. Geben Sie dann border-radius ein, und fügen Sie den Codeausschnitt ein. Geben Sie 15px ein, um die Radiusgröße festzulegen, und drücken Sie die EINGABETASTE.

Abgerundete Ecken mit Schatten

Hinweis

In diesem Moment wird das Schattenattribut mit dem entsprechenden Präfix (moz, webkit, o) eingefügt, um die Browser Mozilla und Webkit (Chrome, Safari, Konkeror) zu unterstützen.
Erstellen Sie eine neue Klasse div.images ul li img:hover unterhalb der definition der div.images ul li img-Klasse , und platzieren Sie den Cursor in den Klammern .

CSS
```
div.images ul li img
{
  ...
}

div.images ul li img:hover
{

}
```

Geben Sie transform ein , und drücken Sie zweimal die TAB-TASTE , um den Transformationsausschnitt einzufügen. Geben Sie dann rotate(-15deg) ein, um den Wert des Drehwinkels zu ändern, wenn Bilder mit dem Mauszeiger angezeigt werden.

CSS

div.images ul li img
{
  padding-top: 50px;
  padding-right: 15px;
  width: 150px;
  ...
}

div.images ul li img:hover
{
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

Drücken Sie F5 , um die Projektmappe auszuführen, und navigieren Sie zur CSS3-Seite. Beachten Sie, dass die Bilder abgerundete Ecken und Boxschatten aufweisen. Zeigen Sie mit der Maus auf die Bilder, und watch sie sich drehen.

Transformieren eines Ausschnitts beim Drehen eines Bilds

Hinweis

Wenn Sie internet Explorer 10 verwenden und die Schatten nicht sehen können, stellen Sie sicher, dass der Dokumentmodus auf IE10-Standards festgelegt ist. Drücken Sie F12, um internet Explorer Entwicklertools zu öffnen, und klicken Sie auf Dokumentmodus, um zu IE10-Standards zu wechseln.

Übung 2: Neuerungen im HTML-Editor

Visual Studio verfügt über einen verbesserten HTML-Editor. Einige der Verbesserungen in dieser Version sind intelligente Einzuge in HTML-Dokumenten, HTML5-Codeausschnitte, HTML-Start- und Endtagabgleich und HTML-Validierung. In dieser Übung werden Sie sehen, wie diese Änderungen Ihre Fließendkeit beim Arbeiten im Website-Markup verbessern.

Wie der CSS-Editor wurde auch der HTML-Editor verbessert. Die meisten dieser Verbesserungen sind kleine, die dem Webentwickler das Leben erleichtern. Weitere Codeausschnitte für HTML5, intelligente Einzuge, übereinstimmende Start- und Endtags beim Bearbeiten und Überprüfen des HTML-Dokuments DOCTYPE sind einige dieser Verbesserungen.

Aufgabe 1: Verbesserte DOCTYPE-Überprüfung

Der HTML-Editor kann jetzt den DOCTYPE Ihrer Seite überprüfen, auch wenn sich die Definition möglicherweise auf der master Seite befindet. Je nach DOCTYPE Ihrer Seite überprüft der HTML-Editor den richtigen Regelsatz und filtert die IntelliSense-Liste unter Berücksichtigung der DOCTYPE-Elemente.

In dieser Aufgabe ändern Sie den DOCTYPE einer Seite, um zu sehen, wie sich das Verhalten des HTML-Editors entsprechend ändert.

Wenn noch nicht geöffnet, starten Sie Visual Studio , und öffnen Sie die Projektmappe WhatsNewASPNET.sln , die sich im Ordner Source\WhatsNewASPNET dieses Labs befindet.
Öffnen Sie die Seite Site.Master .
Beachten Sie das Zielschema für die Überprüfungssymbolleiste. Das Verhalten des HTML-Editors (Validierung, IntelliSense usw.) ändert sich ordnungsgemäß, um dem ausgewählten Doctype zu entsprechen.

Verwenden von Doctype in der Symbolleiste für die HTML-Quellbearbeitung
Ändern Sie das Zielschema in HTML 4.01.

Ändern des Doctypes in der Symbolleiste für die HTML-Quellbearbeitung
Platzieren Sie den Cursor unter dem body-Element , und beginnen Sie mit der Eingabe des Namens eines HTML5-Elements (z. B. Video). Beachten Sie, dass das Element in der IntelliSense-Liste nicht verfügbar ist.

HTML5-Elemente nicht aufgeführt
Rückgängig machen Sie die Änderungen an der Symbolleiste des Zielschemas für die Validierung, indem Sie DOCTYPE: XHTML5 aus der Dropdownliste auswählen.

Zurücksetzen des Doctypes in der Symbolleiste für die HTML-Quellbearbeitung
Platzieren Sie den Cursor unter dem Body-Element , und beginnen Sie erneut mit der Eingabe eines HTML5-Elements (z. B. video). Beachten Sie, dass die HTML5-Elemente jetzt in der IntelliSense-Liste verfügbar sind.

Aufgeführte HTML5-Elemente

Aufgabe 2: Automatisches Aktualisieren von Start-/Endtags

Visual Studio aktualisiert jetzt die HTML-Tags zum Öffnen oder Schließen des Elements, das Sie bearbeiten, so, dass sie zueinander passen. Dieses neue Feature verbessert Ihre Produktivität beim Bearbeiten von HTML-Tags.

Fügen Sie auf der Seite Default.aspx ein H3-Element mit einem Titel hinzu (z. B. Visual Studio 2012 Rocks!).

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h3>Visual Studio 2012 Rocks!!</h3>
</asp:Content>

Ändern Sie das H3-Tag , und geben Sie H2 oder H1 ein.

Beachten Sie, dass das Endtag automatisch aktualisiert wird. Sie können auch das Endtag ändern, um zu sehen, dass auch das Starttag entsprechend aktualisiert wird.

Automatische Aktualisierung des Endtags

Aufgabe 3: Neue HTML5-Codeausschnitte

Visual Studio enthält jetzt mehrere HTML5-Codeausschnitte. In dieser Aufgabe verwenden Sie einige dieser Codeausschnitte.

Fügen Sie dem Stammverzeichnis des Websiteordners einen neuen Ordner mit dem Namen audio hinzu. Öffnen Sie Windows Explorer, und kopieren Sie eine beliebige Audiodatei in den Audioordner der WhatsNewASPNET.sln-Lösung.
Suchen Sie auf der Seite Default.aspx den Cursor unter web11 Rocks!! Header. Geben Sie audio ein, und drücken Sie die TAB-TASTE.

Der neue HTML-Editor enthält Codeausschnitte für HTML5-Inhalte. Denken Sie daran, die richtige DOCTYPE-Definition zu verwenden, um die HTML5-Codeausschnitte zu aktivieren.

Einfügen von HTML5-Codeausschnitten

Aktualisieren Sie die Audioquelle so, dass sie auf eine vorhandene Audiodatei verweist.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h2>Visual Studio 2012 Rocks!!</h2>
  <audio controls="controls">
    <source src="audio/Kalimba.mp3" />
  </audio>
</asp:Content>

Hinweis

Sie müssen der Lösung die Audiodatei hinzufügen.

Drücken Sie F5 , um die Website auszuführen und die Audiowiedergabe wiederzugeben.

Ausführen des Audiosteuerelements

Hinweis

Sie können auch weitere in Visual Studio enthaltene Codeausschnitte ausprobieren, z. B. Video, Abbildung usw.
Versuchen Sie nun, ein Steuerelement in einen Teil der Seite einzufügen. Versuchen Sie beispielsweise, ein GridView-Steuerelement einzufügen, aber anstatt Gri einzugeben<, beginnen Sie mit der Eingabe von< GV. Beachten Sie, dass in der IntelliSense-Liste das asp:GridView-Steuerelement angezeigt wird.

IntelliSense im HTML-Editor bietet jetzt eine Suche nach Titeln und eine partielle Übereinstimmung (abrufen aller Elemente, die den Begriff enthalten).

Einfügen einer GridView mit IntelliSense-Listen

Wenn Sie raster eingeben<, erhalten Sie alle Elemente, die mit dem Begriff übereinstimmen, Visual Studio schlägt jedoch das Gridview-Steuerelement vor:

Einfügen eines GridView-Steuerelements mit IntelliSense-Listen und partiellem Abgleich

Aufgabe 4: HTML-Editor-Smarttags

Eine weitere Verbesserung im HTML-Editor ist die Smarttag-Funktion. Smarttags erleichtern die Durchführung häufiger oder sich wiederholender Entwicklungsaufgaben pro Steuerung. Dieses Feature war bereits im HTML-Designer verfügbar, aber nicht im HTML-Editor.

Öffnen Sie Site.Master, und suchen Sie das asp:Menu-Element . Platzieren Sie den Cursor auf das Starttag, und beachten Sie, dass die kleine Glyphe unten im Element angezeigt wird. Klicken Sie darauf, um das Menü für intelligente Aufgaben zu öffnen. Beachten Sie, dass Sie schnellen Zugriff auf einige Aufgaben im Zusammenhang mit dem Menüsteuerelement haben.

Intelligente Aufgaben für das Menü-Steuerelement

Aufgabe 5: Intelligenter Einzug

Eine der bewährten Methoden in HTML ist das Einrücken der geschachtelten Elemente, um den Code lesbar zu halten. In Visual Studio 2012 werden Sie feststellen, dass der Editor die Elemente automatisch einrückt, während Sie den Code schreiben.

Hinweis

In früheren Versionen von Visual Studio war der intelligente Einzug im XML-Editor, aber nicht im HTML-Editor verfügbar.

Stellen Sie sicher, dass die Einzüge-Konfiguration im HTML-Editor auf Smart Indentation festgelegt ist. Wählen Sie dazu tools | Menüoption "Optionen ", und wählen Sie dann den Text-Editor | HTML | Registerkartenseite im linken Bereich des Bildschirms. Wählen Sie die Option Intelligenter Einzug aus.

Einstellungen des HTML-Editors
Entfernen Sie auf der Seite Default.aspx den gesamten Inhalt unter dem Audioelement.
Platzieren Sie den Cursor am Ende des öffnenden Audioelements , und drücken Sie die EINGABETASTE.

Beachten Sie, dass die neue Position des Cursors über eine zusätzliche Einzugsebene verfügt.

Intelligenter Einzug im HTML-Editor
Stellen Sie das Audiotag mit dem entfernten Inhalt wieder her, oder schließen Sie Default.aspx , ohne die Änderungen zu speichern.

Aufgabe 6: Extrahieren in die Benutzersteuerung

Die in Visual Studio enthaltenen Refactoring-Tools, z. B. das Extrahieren eines Teils von Code in eine Funktion, sind hervorragende Features, die die Verbesserung und das Refactoring des vorhandenen Codes erleichtern. Die Entsprechung für ASP.NET Seiten wäre die Extraktion von HTML-Code in ein Benutzersteuerelement. Die manuelle Ausführung umfasst mehrere Schritte, z. B. das Erstellen eines neuen Benutzersteuerelements, das Verschieben des Codeabschnitts in das Benutzersteuerelement, das Registrieren eines Tagpräfixes für das Benutzersteuerelement und schließlich das Instanziieren des Benutzersteuerelements auf den Seiten. Jetzt führt das neue Tool Zum Extrahieren in die Benutzersteuerung alle diese Schritte automatisch für Sie aus.

In dieser Aufgabe verwenden Sie den neuen Kontextvorgang In Benutzersteuerung extrahieren, um ein neues Benutzersteuerelement aus dem ausgewählten Code zu generieren.

Wählen Sie auf der Seite Default.aspx die Elemente H2 und audio aus.
Klicken Sie mit der rechten Maustaste, und wählen Sie In Benutzersteuerung extrahieren aus.

Menüoption "In Benutzersteuerung extrahieren"
Geben Sie einen Namen für das neue Benutzersteuerelement ein. Für instance Jukebox.ascx, und klicken Sie dann auf OK.

Speichern des extrahierten Benutzersteuerelements
Beachten Sie, dass der ausgewählte Code in ein Benutzersteuerelement extrahiert und der ursprüngliche Speicherort des ausgewählten Codes durch eine instance des neuen Benutzersteuerelements ersetzt wurde.

.

Seite wurde automatisch aktualisiert, um das neue Benutzersteuerelement zu verwenden
Drücken Sie F5 , um die Seite auszuführen, und überprüfen Sie, ob das Steuerelement funktioniert.

Übung 3: Neuerungen im JavaScript-Editor

Das Schreiben oder Bearbeiten von JavaScript-Code ist keine einfache Aufgabe, insbesondere wenn Ihre Anwendung zu wachsen beginnt und Sie mit langen Dateien und Hunderten von Funktionen zu tun haben. Skriptentwickler müssen in der Regel zusätzliche Arbeit leisten, um die Lesbarkeit von Code zu gewährleisten und zwischen Dateien zu navigieren. Mit der Einbindung von JavaScript-Bibliotheken wie jQuery ist die Skriptnavigation aufgrund der Codelänge selbst zu einer Herausforderung geworden.

Visual Studio hat den JavaScript-Editor mit dem Versprechen erneuert, den Codemodus barrierefrei und organisiert zu machen. Viele Visual Studio-Features, die bereits in C#- oder VB-Editoren vorhanden waren, sind jetzt im JavaScript-Editor implementiert: Gehe zu Definition, automatischer Einzug, Dokumentation und Validierung beim Schreiben. Mit der erneuerten IntelliSense-Liste haben Sie den JavaScript-Funktionskatalog zur Hand.

In dieser Übung lernen Sie einige der neuen Features und Verbesserungen des JavaScript-Editors kennen. Sie durchsuchen Beispieldateien und entdecken die neuen Merkmale, die Ihre JavaScript-Programmierung in Visual Studio 2012 effizienter machen.

Aufgabe 1: Neue Features des JavaScript-Editors

Diese Aufgabe führt Sie in einige der neuen JavaScript-Editorfeatures ein, die sich auf die Organisation Ihres Codes und eine bessere Benutzererfahrung konzentrieren.

Wenn noch nicht geöffnet, starten Sie Visual Studio , und öffnen Sie die Projektmappe WhatsNewASPNET.sln im Ordner Source\WhatsNewASPNET dieses Labs.
Drücken Sie F5 , um die Anwendung auszuführen, und klicken Sie dann auf den JavaScript-Link in der Navigationsleiste. Aktualisieren Sie die Seite mehrmals, und überprüfen Sie, wie der Zähler inkrementiert wird.

Seitenzähler
Schließen Sie den Browser, und wechseln Sie zurück zu Visual Studio.
Öffnen Sie die Seite JavaScript.aspx , und suchen Sie den <Skriptblock> (siehe unten).

Der folgende Code verwendet den lokalen HTML5-Speicher, um eine pageLoadCount-Variable zu speichern, die speichert, wie oft die Seite vom aktuellen Benutzer besucht wurde. Der lokale Speicher ist eine clientseitige Schlüssel-Wert-Datenbank, die mit dem HTML5-Standard eingeführt wurde. Die Daten werden auf dem lokalen Computer im Browser des Benutzers gespeichert.
```
<script>
  addCount(1);
  document.getElementById('count').innerHTML = getCount();

  function getCount() {
    var storage = window.localStorage;
    if (!storage.pageLoadCount)
      storage.pageLoadCount = 0;

    return storage.pageLoadCount;
  }

  function addCount(value) {
    window.localStorage.pageLoadCount = parseInt(getCount(), 10) + value;
  }

  ...   
</script>
```
Hinweis

Stellen Sie sicher, dass DOCTYPE auf XHTML5 festgelegt ist, bevor Sie mit den nächsten Schritten fortfahren.
Bearbeiten Sie den Code, und beachten Sie, dass IntelliSense für JavaScript HTML5-Features wie den lokalen Speicher und deren innere Methoden enthält.

HTML5-JavaScript-Features in JavaScript
Klicken Sie im Skriptcode auf eine geöffnete Klammer ({), und beachten Sie, dass die Klammern hervorgehoben sind.

Klammern sind hervorgehoben
Heben Sie die Auskommentierung der Funktion testAutoAlign() auf (wählen Sie die drei Zeilen aus, und Sie können STRG + K verwenden; STRG + U) suchen und den Cursor im Funktionscode suchen. Drücken Sie die EINGABETASTE, um eine zweite Zeile anzufügen. Beachten Sie, dass der Code jetzt ausgerichtet und automatisch eingerückt ist.

JavaScript-Code wird automatisch ausgerichtet

Aufgabe 2: Überprüfen von JavaScript

In dieser Aufgabe entdecken Sie die neue JavaScript-Validierung für den ECMAScript5-Standard. Dieses Feature hilft Ihnen beim Schreiben von kompatiblem JavaScript-Code und verhindert gleichzeitig Skriptprobleme vor der Bereitstellung der Website.

Hinweis

In Visual Studio 2010 wurde ECMAStript3-Konformität implementiert, während Visual Studio 2012 ECMAScript5-Konformität bietet.

Öffnen Sie ECMA5script5.js unter dem Ordner Skripts\benutzerdefiniertes Projekt. Sie testen nun die Validierung für den ECMAScript5-Standard.
```
"use strict";

if (true) {
    function StrictModeError()
    {
    }
}
```
Sie können die Richtung " use strict " in der ersten Zeile der Datei auschecken, wodurch der ECMAScript5 Strict-Modus aktiviert wird. Dieser Modus besteht aus einer Teilmenge der Sprache, die Mehrdeutigkeiten aus der vergangenen Edition verdeutlicht, und fügt einige neue Features hinzu, z. B. Getter und Setter, Bibliotheksunterstützung für JSON und eine umfassendere Reflektion von Objekteigenschaften.
Öffnen Sie die Fehlerliste , wenn sie noch nicht geöffnet ist (Menü Ansicht | Fehlerliste). Beachten Sie, dass die Funktionsdeklaration unterstrichen ist. Dies liegt daran, dass in ECMA5 Standardfunktionen nicht in Sprachstrukturen geschachtelt werden können. In der folgenden Fehlerliste werden die Warnungsdetails angezeigt.

JavaScript-Validierungsfehlermeldung
Kommentieren Sie die Richtung "strikt verwenden" aus, und stellen Sie fest, dass Fehler verschwinden, die Warnungen jedoch erhalten bleiben.
Schreiben Sie in der letzten Zeile der Datei eine beliebige Zeichenfolge wie "test" (fügen Sie die Anführungszeichen ein, um anzugeben, dass sie als Zeichenfolge ist). Schreiben Sie einen Punkt neben der Zeichenfolge, um die IntelliSense-Liste anzuzeigen, und wählen Sie die Option kürzen aus.

Im ECMAScript5-Standard sind für Zeichenfolgenwerte und Variablen auch Zeichenfolgenmethoden definiert, z. B. Kürze, Großbuchstaben, Suchen und Ersetzen.

IntelliSense-Liste in JavaScript

Aufgabe 3: XML-Dokumentation für JavaScript

In dieser Aufgabe untersuchen Sie visual Studio-Features für die XML-Dokumentation in JavaScript. In der JavaScript-IntelliSense-Liste wird nun die XML-Dokumentation der einzelnen Funktionen angezeigt. Darüber hinaus entdecken Sie das Navigationsfeature in JavaScript.

Öffnen Sie XMLDoc.js Datei, die sich im Ordner Skripts/benutzerdefiniertes Projekt befindet. Diese Datei enthält eine XML-Dokumentation zu den einzelnen JavaScript-Funktionen.

Integrierte JavaScript-XML-Dokumentation in IntelliSense
Fügen Sie unter XMLDoc.js Datei funktion hinzu, und erstellen Sie eine neue Funktion mit dem Namen test.
Rufen Sie in der Testfunktion die Multiplikationsfunktion auf, die zwei Parameter empfängt. Beachten Sie, dass im QuickInfo-Feld die Dokumentation zur Multiplikationsfunktion angezeigt wird.
```
function test() {
  multiply(
}
```
XML-Dokumentation für JavaScript-Funktionen
Schließen Sie die Funktionsaufrufanweisung ab, und geben Sie einen Punkt ein, um die IntelliSense-Liste für den zurückgegebenen Wert zu öffnen. Beachten Sie, dass Visual Studio den Rückgabewert in der Dokumentation erkennt und den Wert als Zahl behandelt.

XML-Dokumentation für Rückgabetypen
Fügen Sie nun einen Aufruf ein, um eine Funktion hinzuzufügen. Beachten Sie, dass der JavaScript-Editor jetzt Funktionsüberladungen unterstützt. Wenn Sie einen Funktionsnamen schreiben, können Sie eine der verfügbaren Überladungen auswählen, die in der Dokumentation angegeben sind.

XML-Dokumentation für Überladungen
Öffnen Sie GotoDefinition.js Datei, und suchen Sie den Funktionsaufruf $().html(). Suchen Sie den Cursor in HTML.
Drücken Sie F12 , und navigieren Sie zur Definition. Beachten Sie, dass Sie jetzt auf Ihren JavaScript-Code zugreifen und durchsuchen können, ohne das Tool Suchen zu verwenden .
Suchen Sie den Cursor in der jQuery-Anweisung vor dem Signaturblock am unteren Rand der Codedatei. Drücken Sie F12. Sie navigieren zur jQuery-Bibliotheksdatei. Beachten Sie, dass Sie auch mithilfe von F12 durch die jQuery-Dateien navigieren können.

Navigieren zu jQuery-Definitionen

Hinweis

Stellen Sie sicher, dass GotoDefinition.js keine Syntaxfehler aufweist, bevor Sie die Datei speichern.

Übung 4: Bündelung und Minimierung

Wie oft enthalten Ihre Websites mehr als eine JavaScript- oder CSS-Datei? Dies ist ein sehr häufiges Szenario, in dem Bündelung und Minimierung dazu beitragen können, die Dateigröße zu reduzieren und die Leistung der Website zu beschleunigen. Das neue Bündelungsfeature in ASP.NET 4.5 packt eine Reihe von JS- oder CSS-Dateien in ein einzelnes Element und reduziert seine Größe, indem der Inhalt verkleinert wird (d. h. nicht erforderliche Leerzeichen entfernen, Kommentare entfernen, Bezeichner reduzieren).

Die Bündelung und Minimierung in ASP.NET 4.5 wird zur Laufzeit durchgeführt, sodass der Prozess den Benutzer-Agent identifizieren kann (z. B. IE, Mozilla usw.), und so die Komprimierung verbessern kann, indem er auf den Benutzerbrowser ausgerichtet ist (für instance, wobei Mozilla-spezifische Inhalte entfernt werden, wenn die Anforderung von IE kommt).

In dieser Übung erfahren Sie, wie Sie die verschiedenen Arten der Bündelung und Minimierung in ASP.NET 4.5 aktivieren und verwenden.

Aufgabe 1: Installieren des Pakets "Bündelung und Minimierung" aus NuGet

Wenn noch nicht geöffnet, starten Sie Visual Studio , und öffnen Sie die Projektmappe WhatsNewASPNET.sln , die sich im Ordner Source\WhatsNewASPNET dieses Labs befindet.
Öffnen Sie die NuGet-Paket-Manager-Konsole. Verwenden Sie hierzu das MenüAndereWindows-Paket-Manager-Konsole | anzeigen | .

Öffnen der Paket-Manager-Konsole
Geben Sie in der Paket-Manager-KonsoleInstall-Package Microsoft.Web.Optimization ein, und drücken Sie die EINGABETASTE.

Aufgabe 2: Standardbündel

Die einfachste Möglichkeit, Bündelung und Minimierung zu verwenden, besteht darin, die Standardbündel zu aktivieren. Diese Methode verwendet Konventionen, damit Sie auf die gebündelte und verknaktete Version für die JS- und CSS-Dateien in einem Ordner verweisen können.

In dieser Aufgabe erfahren Sie, wie Sie die gebündelten und minimierten JS- und CSS-Dateien aktivieren und darauf verweisen und die resultierende Ausgabe anzeigen.

Wenn noch nicht geöffnet, starten Sie Visual Studio , und öffnen Sie die Projektmappe WhatsNewASPNET.sln , die sich im Ordner Source\WhatsNewASPNET dieses Labs befindet.
Erweitern Sie im Projektmappen-Explorer die Ordner Styles, Scripts\custom und Scripts\bundle.

Beachten Sie, dass die Anwendung mehr als eine CSS- und JS-Datei verwendet.

Mehrere Stylesheets und JavaScript-Dateien in der Anwendung
Öffnen Sie die Datei Global.asax.cs .

Beachten Sie, dass der neue Microsoft.Web.Optimization-Namespace am Anfang der Datei auskommentiert ist. Heben Sie die Auskommentierung der using-Anweisung auf, um die Bündelungs- und Minimierungsfeatures einzuschließen.
```
using System;
using Microsoft.Web.Optimization;
```
Suchen Sie die Application_Start-Methode .

Heben Sie in dieser Methode die Auskommentierung des EnableDefaultBundles-Aufrufs auf, wie im folgenden Codeausschnitt gezeigt. Dies ermöglicht es uns, auf eine gebündelte Auflistung von CSS-Dateien in einem Ordner zu verweisen, indem wir den Pfad zu diesem Ordner plus das Suffix "CSS" oder das Suffix "JS" verwenden.
```
void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js 
    BundleTable.Bundles.EnableDefaultBundles();

    ...
}
```
Öffnen Sie die Datei Optimization.aspx, und suchen Sie das Inhaltssteuerelement für HeadContent.

Beachten Sie, dass die CSS-Dateien und die JS-Dateien über ein einzelnes Tag verfügen, auf das verwiesen wird.
```
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <link href="Styles/CSS" rel="stylesheet" type="text/css" />
  <script src="Scripts/custom/JS"></script>
</asp:Content>
```
Hinweis

Dieser Code dient zu Demozwecken. Im Idealfall verweisen Sie in der Datei Site.Master auf die Bundles. In diesem Beispielcode werden Sie feststellen, dass einige der gebündelten Dateien auch von der Datei Site.Master referenziert werden, sodass dieser letzte Verweis redundant ist.
Beachten Sie, dass die Links die Bündelungskonventionen im href-Attribut verwenden, um alle CSS- oder JS-Dateien aus dem Ordner Styles bzw. Skripts\custom abzurufen.

Sie können den Pfad Skripts/custom/JS wie unten gezeigt verwenden, um alle JS-Dateien in einem Skript-/benutzerdefinierten Ordner zu bündeln und zu minimieren. Dies ist das Standardverhalten bei den Standardbündeln.
```
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
```
Öffnen Sie die Datei Styles\Site.css .

Beachten Sie, dass die ursprüngliche CSS-Datei eingezogenen Code, Leerzeichen und Kommentare enthält, die die Datei vergrößern. (Auch die JavaScript-Datei enthält Leerzeichen und Kommentare).

Eine der ursprünglichen CSS-Dateien im Ordner Skripts
Drücken Sie F5 , um die Anwendung auszuführen, und navigieren Sie zur Seite Optimierung .
Klicken Sie auf den LINK CSS Bundle , um die Datei herunterzuladen und zu öffnen.

Sehen Sie sich die verknaktete gebündelte Datei an. Sie werden feststellen, dass alle Leerzeichen, Kommentare und Einzugszeichen entfernt wurden, wodurch eine kleinere Datei generiert wird.

Gebündelte CSS-Dateien
Klicken Sie nun auf den Link JS Bundle , um die gebündelte JavaScript-Datei zu öffnen. Sie können die Explorerwarnung sicher ignorieren. Beachten Sie, dass die JavaScript-Dateien unter dem benutzerdefinierten Ordner ebenfalls gebündelt und minimiert werden.

Gebündelte JavaScript-Dateien

Das Aktivieren der Komprimierung für CSS- oder JS-Dateien war in der vorherigen ASP.NET Version viel komplizierter. Nun müssen Sie, wie Sie gesehen haben, nur eine Zeile in der Datei Global.asax hinzufügen, um die Bündelung zu aktivieren, und dann von Ihrer Website aus auf die gebündelten Dateien verweisen.

Aufgabe 3: Statische Bündel

Mit dem statischen Bündelansatz können Sie den Satz von Dateien für das Bündeln, den Verweis und die verwendete Minimierungsmethode anpassen.

In dieser Aufgabe konfigurieren Sie ein statisches Bündel, um einen bestimmten Satz von Dateien zu definieren, die gebündelt und minimiert werden sollen.

Schließen Sie den Browser.
Öffnen Sie die Datei Global.asax.cs , und suchen Sie nach der Application_Start-Methode .

Heben Sie die Auskommentierung des statischen Bündelcodes auf, wie im folgenden Code gezeigt.

Sie definieren ein statisches Bündel, auf das mit dem virtuellen Pfad "~/StaticBundle" verwiesen wird, und verwenden JsMinify für die Minimierung aller angegebenen Dateien mit der AddFile-Methode . Schließlich fügen Sie das statische Bundle zur BundleTable hinzu und aktivieren es.

Beachten Sie, dass sich die Dateien nicht an derselben Stelle befinden. Dies ist ein weiterer Vorteil gegenüber der Standardbündelung.

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    Bundle b = new Bundle("~/StaticBundle", typeof(JsMinify));
    b.AddFile("~/scripts/custom/ECMAScript5.js");
    b.AddFile("~/scripts/custom/GoToDefinition.js");
    b.AddFile("~/scripts/bundle/JScript1.js");
    b.AddFile("~/scripts/bundle/JScript2.js");

    BundleTable.Bundles.Add(b);

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it: http://localhost:54716/scripts/coffee
    // DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    // BundleTable.Bundles.Add(fb);
}

Öffnen Sie die Datei Optimization.aspx .

Beachten Sie, dass der Link zu Static JS Bundle den Pfad verwendet, den Sie beim Konfigurieren des statischen Bundles in der Datei Global.asax.cs deklariert haben: /StaticBundle.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

Drücken Sie F5 , um die Anwendung auszuführen, und navigieren Sie dann zur Seite Optimierung .
Klicken Sie auf den Link Static JS Bundle , um die Datei zu öffnen.

Beachten Sie, dass die verknaktete gebündelte JavaScript-Datei die Ausgabe für alle JavaScript-Dateien ist, die in der statischen Bündeldatei unter dem Pfad "/StaticBundle" konfiguriert sind.

Bundle für statische JavaScript-Dateien
Schließen Sie den Browser und kehren Sie zu Visual Studio zurück.

Aufgabe 4: Dynamische Ordnerbündel

In dieser Aufgabe erfahren Sie, wie Sie dynamische Ordnerbündel konfigurieren. Die Leistungsfähigkeit der dynamischen Bündelung besteht darin, dass Sie statisches JavaScript sowie andere Dateien in Sprachen einschließen können, die in JavaScript kompiliert werden und daher eine gewisse Verarbeitung erfordern, bevor die Bündelung ausgeführt wird.

In diesem Beispiel erfahren Sie, wie Sie mit der DynamicFolderBundle-Klasse ein dynamisches Bündel für in CofeeScript geschriebene Dateien erstellen. CofeeScript ist eine Programmiersprache, die in JavaScript kompiliert wird und eine einfachere Syntax zum Schreiben von JavaScript-Code bietet, wodurch die Kürze und Lesbarkeit von JavaScript verbessert wird.

Öffnen Sie die Datei Global.asax.cs , und suchen Sie nach der Application_Start-Methode .

Heben Sie die Auskommentierung des dynamischen Bündelcodes auf, wie im folgenden Code gezeigt.

Sie definieren ein dynamisches Ordnerpaket, das den benutzerdefinierten CoffeeMinify-Verminungsprozessor verwendet, der nur auf die Dateien mit der Erweiterung ".coffee" (CoffeeScript-Dateien) angewendet wird. Beachten Sie, dass Sie ein Suchmuster verwenden können, um die Dateien auszuwählen, die in einem Ordner gebündelt werden sollen, z. B. "*.coffee".

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    ...

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it:
         // http://localhost:54716/scripts/coffee
    DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    BundleTable.Bundles.Add(fb);
}

Öffnen Sie die NuGet-Paket-Manager-Konsole. Verwenden Sie hierzu das MenüAndereWindows-Paket-Manager-Konsole | anzeigen | .
Geben Sie in der Paket-Manager-KonsoleInstall-Package CoffeeSharp ein, und drücken Sie die EINGABETASTE.
Klicken Sie im Fenster Projektmappen-Explorer auf die Schaltfläche Alle Dateien anzeigen.

Alle Dateien anzeigen
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Datei CoffeeMinify.cs, und wählen Sie In Projekt einschließen aus.

Einschließen der Datei "CoffeeMinify.cs" in das Projekt
Öffnen Sie die Datei CoffeeMinify.cs .

Diese Klasse erbt von JsMinify, um die JavaScript-Ausgabe zu minimieren, die sich aus der CoffeeScript-Codekompilierung ergibt. Er ruft den CoffeeScript-Compiler auf, um zuerst den JavaScript-Code zu generieren, und sendet ihn dann an die JsMinify.Process-Methode, um den resultierenden Code zu minimieren.
```
public class CoffeeMinify : JsMinify
{
    public override void Process(BundleResponse bundle)
    {
        var compiler = new CoffeeScriptEngine();
        bundle.Content = compiler.Compile(bundle.Content);

        base.Process(bundle);
    }
}
```
Öffnen Sie die Dateien Script1.coffee und Script2.coffee aus dem Ordner Scripts/bundle .

Diese Dateien enthalten den CoffeScript-Code, der kompiliert werden soll, während die Bündelung mit der CoffeeMinify-Klasse ausgeführt wird.

Der Einfachheit halber enthalten die bereitgestellten CoffeeScript-Dateien nur CoffeeScript-Beispielcode. Die Kommentare werden vom JsMinify-Prozess ausgeschlossen.

CoffeeScript-Dateien

Hinweis

CofeeScript bietet eine einfachere Syntax zum Schreiben von JavaScript-Code, verbessert die Kürze und Lesbarkeit von JavaScript sowie das Hinzufügen anderer Features wie arrayverstehend und Musterabgleich.

Öffnen Sie die Datei Optimization.aspx, und suchen Sie nach den Bundlelinks.

Beachten Sie, dass der Link zum dynamischen JS-Bundle auf den Ordner Skripts/Bundle verweist, indem sie das Suffix /Coffee verwendet, das Sie für das dynamische Ordnerpaket konfiguriert haben.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

Drücken Sie F5 , um die Anwendung auszuführen, und navigieren Sie dann zur Seite Optimierung .
Klicken Sie auf den Link Dynamic JS Bundle , um die generierte Datei zu öffnen.

Beachten Sie, dass der Inhalt, der in diesem Bundle enthalten war, nur Kaffeedateien enthält. Sie können auch sehen, dass der CoffeeScript-Code in JavaScript kompiliert wurde und die auskommentierten Zeilen entfernt wurden.

Bundle für dynamische JS-Dateien

Hinweis

Darüber hinaus können Sie diese Anwendung auf Windows Azure-Websites bereitstellen: Anhang B: Veröffentlichen einer ASP.NET MVC 4-Anwendung mithilfe von Web Deploy.

Zusammenfassung

Dieses Lab hilft Ihnen zu verstehen, was Neu in ASP.NET und Webentwicklung in Visual Studio 2012 ist und wie Sie die Vielfalt der Verbesserungen in Visual Studio 2012 nutzen können.

Durch Abschluss dieses Hands-On Lab haben Sie gelernt, wie Sie die neuen Features und Verbesserungen in Visual Studio 2012-Editoren für CSS, JavaScript und HTML verwenden. Darüber hinaus haben Sie gelernt, wie Visual Studio 2012 integrierte Bündelung und Minimierung implementiert.

Anhang A: Installieren Visual Studio Express 2012 für Web

Sie können Microsoft Visual Studio Express 2012 für Web oder eine andere Express-Version mithilfe des Microsoft-Webplattform-Installer installieren. Die folgenden Anweisungen führen Sie durch die Schritte, die zum Installieren von Visual Studio Express 2012 für Web mithilfe von Microsoft-Webplattform-Installer erforderlich sind.

Wechseln Sie zu [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Alternativ können Sie den Webplattform-Installer öffnen und nach dem Produkt "Visual Studio Express 2012 für Web mit dem Windows Azure SDK" suchen.
Klicken Sie auf Jetzt installieren. Wenn Sie nicht über den Webplattform-Installer verfügen, werden Sie umgeleitet, ihn zuerst herunterzuladen und zu installieren.
Sobald der Webplattform-Installer geöffnet ist, klicken Sie auf Installieren , um das Setup zu starten.

Installieren von Visual Studio Express
Lesen Sie alle Lizenzen und Bedingungen der Produkte, und klicken Sie auf Ich stimme zu, um fortzufahren.

Akzeptieren der Lizenzbedingungen
Warten Sie, bis der Download- und Installationsvorgang abgeschlossen ist.

Installationsstatus
Klicken Sie nach Abschluss der Installation auf Fertig stellen.

Installation abgeschlossen
Klicken Sie auf Beenden , um den Webplattform-Installer zu schließen.
Um Visual Studio Express für Web zu öffnen, wechseln Sie zum Startbildschirm, und beginnen Sie mit dem Schreiben von "VS Express", und klicken Sie dann auf die Kachel VS Express für Web.

VS Express für Webkachel

Anhang B: Veröffentlichen einer ASP.NET MVC 4-Anwendung mithilfe von Web Deploy

In diesem Anhang erfahren Sie, wie Sie eine neue Website über das Windows Azure-Verwaltungsportal erstellen und die Anwendung veröffentlichen, die Sie erhalten haben, indem Sie dem Lab folgen und dabei die Von Windows Azure bereitgestellte Web Deploy-Veröffentlichungsfunktion nutzen.

Aufgabe 1: Erstellen einer neuen Website über das Windows Azure-Portal

Wechseln Sie zum Windows Azure-Verwaltungsportal , und melden Sie sich mit den Microsoft-Anmeldeinformationen an, die Ihrem Abonnement zugeordnet sind.

Hinweis

Mit Windows Azure können Sie 10 ASP.NET Websites kostenlos hosten und dann skalieren, wenn Ihr Datenverkehr zunimmt. Sie können sich hier registrieren.

Anmelden beim Windows Azure-Verwaltungsportal
Klicken Sie auf der Befehlsleiste auf Neu .

Erstellen einer neuen Website
Klicken Sie auf Computewebsite | . Wählen Sie dann die Option Schnellerstellung aus . Geben Sie eine verfügbare URL für die neue Website an, und klicken Sie auf Website erstellen.

Hinweis

Eine Windows Azure-Website ist der Host für eine Webanwendung, die in der Cloud ausgeführt wird und die Sie steuern und verwalten können. Mit der Schnellerstellungsoption können Sie eine abgeschlossene Webanwendung auf der Windows Azure-Website von außerhalb des Portals bereitstellen. Es enthält keine Schritte zum Einrichten einer Datenbank.

Erstellen einer neuen Website mithilfe der Schnellerstellung
Warten Sie, bis die neue Website erstellt wurde.
Nachdem die Website erstellt wurde, klicken Sie auf den Link unter der URL-Spalte . Überprüfen Sie, ob die neue Website funktioniert.

Navigieren zur neuen Website

Website, die ausgeführt wird
Zurück zum Portal, und klicken Sie unter der Spalte Name auf den Namen der Website, um die Verwaltungsseiten anzuzeigen.

Öffnen der Websiteverwaltungsseiten
Klicken Sie auf der Seite Dashboard im Abschnitt "Schnellansicht " auf den Link Veröffentlichungsprofil herunterladen .

Hinweis

Das Veröffentlichungsprofil enthält alle Informationen, die zum Veröffentlichen einer Webanwendung auf einer Windows Azure-Website für jede aktivierte Veröffentlichungsmethode erforderlich sind. Das Veröffentlichungsprofil enthält die URLs, Benutzeranmeldeinformationen und Datenbankzeichenfolgen, die benötigt werden, um eine Verbindung mit den einzelnen Endpunkten herzustellen, für die eine Veröffentlichungsmethode aktiviert wurde, und eine Authentifizierung durchzuführen. Microsoft WebMatrix 2, Microsoft Visual Studio Express für Web und Microsoft Visual Studio 2012 unterstützen das Lesen von Veröffentlichungsprofilen, um die Konfiguration dieser Programme zum Veröffentlichen von Webanwendungen auf Windows Azure-Websites zu automatisieren.

Herunterladen des Websiteveröffentlichungsprofils
Laden Sie die Veröffentlichungsprofildatei an einen bekannten Speicherort herunter. Weiter in dieser Übung erfahren Sie, wie Sie diese Datei verwenden, um eine Webanwendung in einer Windows Azure-Website aus Visual Studio zu veröffentlichen.

Speichern der Veröffentlichungsprofildatei

Aufgabe 2: Konfigurieren des Datenbankservers

Wenn Ihre Anwendung SQL Server Datenbanken verwendet, müssen Sie einen SQL-Datenbank-Server erstellen. Wenn Sie eine einfache Anwendung bereitstellen möchten, die nicht SQL Server können Sie diese Aufgabe überspringen.

Sie benötigen einen SQL-Datenbank Server zum Speichern der Anwendungsdatenbank. Sie können die SQL-Datenbank Server aus Ihrem Abonnement im Windows Azure-Verwaltungsportal unter Sql Databases | Server-Dashboard | anzeigen. Wenn Sie keinen Server erstellt haben, können Sie einen server erstellen, indem Sie die Schaltfläche Hinzufügen auf der Befehlsleiste verwenden. Notieren Sie sich den Servernamen und die URL, den Anmeldenamen und das Kennwort des Administrators, da Sie sie in den nächsten Aufgaben verwenden werden. Erstellen Sie die Datenbank noch nicht, da sie in einer späteren Phase erstellt wird.

SQL-Datenbank Serverdashboard
In der nächsten Aufgabe testen Sie die Datenbankverbindung aus Visual Studio. Aus diesem Grund müssen Sie Ihre lokale IP-Adresse in die Liste der zulässigen IP-Adressen des Servers aufnehmen. Klicken Sie dazu auf Konfigurieren, wählen Sie die IP-Adresse unter Aktuelle Client-IP-Adresse aus, und fügen Sie sie in die Textfelder IP-Adresse starten und End-IP-Adresse ein. Geben Sie einen Namen für die Regel ein, und klicken Sie auf die Schaltfläche .

Hinzufügen der Client-IP-Adresse
Nachdem die Client-IP-Adresse der Liste zulässiger IP-Adressen hinzugefügt wurde, klicken Sie auf Speichern , um die Änderungen zu bestätigen.

Bestätigen von Änderungen

Aufgabe 3: Veröffentlichen einer ASP.NET MVC 4-Anwendung mithilfe von Web Deploy

Zurück zur ASP.NET MVC 4-Lösung. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Websiteprojekt, und wählen Sie Veröffentlichen aus.

Veröffentlichen der Website
Importieren Sie das Veröffentlichungsprofil, das Sie in der ersten Aufgabe gespeichert haben.

Importieren des Veröffentlichungsprofils
Klicken Sie auf Verbindung überprüfen. Klicken Sie nach Abschluss der Überprüfung auf Weiter.

Hinweis

Die Überprüfung ist abgeschlossen, sobald neben der Schaltfläche Verbindung überprüfen ein grünes Häkchen angezeigt wird.

Überprüfen der Verbindung
Klicken Sie auf der Seite Einstellungen im Abschnitt Datenbanken auf die Schaltfläche neben dem Textfeld ihrer Datenbankverbindung (d. h. DefaultConnection).

Web deploy-Konfiguration
Konfigurieren Sie die Datenbankverbindung wie folgt:
- Geben Sie unter Servername ihre SQL-Datenbank Server-URL mit dem Präfix tcp: ein.
- Geben Sie unter Benutzername den Anmeldenamen ihres Serveradministrators ein.
- Geben Sie unter Kennwort ihr Anmeldekennwort für den Serveradministrator ein.
- Geben Sie einen neuen Datenbanknamen ein, z. B. MVC4SampleDB.
  
  Konfigurieren der Zielverbindungszeichenfolge
Klicken Sie dann auf OK. Wenn Sie aufgefordert werden, die Datenbank zu erstellen, klicken Sie auf Ja.

Erstellen der Datenbank
Die Verbindungszeichenfolge, die Sie zum Herstellen einer Verbindung mit SQL-Datenbank in Windows Azure verwenden, wird im Textfeld Standardverbindung angezeigt. Klicken Sie dann auf Weiter.

Verbindungszeichenfolge, die auf SQL-Datenbank zeigt
Klicken Sie auf der Seite Vorschau auf Veröffentlichen.

Veröffentlichen der Webanwendung
Sobald der Veröffentlichungsprozess abgeschlossen ist, öffnet Ihr Standardbrowser die veröffentlichte Website.

In Windows Azure veröffentlichte Anwendung