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

Artikel
11/21/2024

Die neue Version von Visual Studio führt eine Reihe von Verbesserungen ein, die sich auf die Verbesserung der Erfahrung und Leistung bei der Arbeit mit Webtechnologien konzentrieren. Visual Studio-Editoren für CSS, JavaScript und HTML wurden vollständig überarbeitet, um viele der gefragtesten Codehilfen wie IntelliSense und automatischen Einzug einzuschließen. Hinsichtlich Der Leistung sind Bündelung und Minimierung jetzt als integrierte Features integriert, um die Ladezeit der Seite 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 nutzt.

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-Compliance mit Ihren Skripts überprüfen und Syntaxfehler frühzeitig erkennen.

Zuletzt implementiert diese Visual Studio-Version integrierte Bündelung und Minimierung. Ihre Skriptdateien und Stylesheets werden gepackt und komprimiert, sodass die Website schneller ausgeführt wird.

Diese Übung führt Sie durch die Verbesserungen und neuen Features, die zuvor beschrieben wurden, indem kleinere Änderungen auf eine Beispielwebanwendung angewendet werden, die im Quellordner bereitgestellt wird.

Ziele

In dieser praktischen Übung erfahren Sie, wie Sie:

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 (lesen Sie Anhang A , um Anweisungen zur Installation zu erhalten).
Windows PowerShell (für Setupskripts – bereits unter Windows 8 und Windows Server 2008 R2 installiert)
Internet Explorer 10 – oder ein HTML5-kompatibler Browser

Übungen

Diese praktische Übung 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 Minifizierung

Geschätzte Zeit zum Abschließen dieser Übung: 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 bei der CSS-Formatierung ist die browserübergreifende Kompatibilität. Es kommt häufig vor, dass Sie nach dem Anwenden von Formatvorlagen auf Ihre Website feststellen, dass sie 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, in den anderen unterbrochen wird.

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

Aufgabe 1 – Neue Editorfeatures

In dieser Aufgabe entdecken Sie die neuen Features des CSS-Editors. Dieser neue Editor hilft Ihnen, Ihre Produktivität zu steigern, indem Sie den neuen intelligenten Einzug, die verbesserten Codekommentare und die erweiterte IntelliSense-Liste nutzen.

Starten Sie Visual Studio, und öffnen Sie die WhatsNewASPNET.sln Projektmappe, die sich im Ordner "Source\WhatsNewASPNET" dieses Labors befindet.
Öffnen Sie in Projektmappen-Explorer die Site.css Datei, die sich unter dem Ordner "Formatvorlagen" befindet. Stellen Sie sicher, dass die Text-Editor-Tools auf der Symbolleiste sichtbar sind. Wählen Sie dazu die Menüoption "Symbolleisten anzeigen | " aus, und überprüfen Sie die Text-Editor-Optionen. Sie werden feststellen, dass seit dieser neuen Version auch die Schaltfläche "Kommentar " ( ) und die Schaltfläche "Kommentar aufheben" ( ) für den CSS-Editor aktiviert sind.

Aktivieren von Editor- und CSS-Tools
Scrollen Sie den 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 "Kommentar aufheben( )", um die Änderungen rückgängig zu machen.
Klicken Sie auf die Schaltflächen "Reduzieren" ( ) und "Erweitern ( ) ", die sich am linken Rand des Texts befinden. Beachten Sie, dass Sie jetzt die Formatvorlagen ausblenden können, die Sie nicht für eine übersichtlichere Ansicht verwenden.

Reduzieren von CSS-Klassen
Stellen Sie sicher, dass das Intelligente Einzugsfeature aktiviert ist. Wählen Sie die Menüoption "Extras | " aus, und wählen Sie dann im linken Bereich des Bildschirms die Seite "CSS-Formatierung | des Text-Editors | " aus. Überprüfen Sie die Hierarchische Einzugsoption .

Aktivieren des hierarchischen Einzugs
Suchen Sie die Hauptklassendefinition (.main), und fügen Sie eine Formatvorlage an die div-Elemente an. Sie werden feststellen, dass der Code automatisch ausgerichtet wird und den Benutzern hilft, die übergeordneten Klassen auf einen Blick zu finden.

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 DIV-Hauptklasse 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 während der Eingabe gefiltert wird. In der Liste werden die Elemente angezeigt, die in einem beliebigen Teil des Worts oben enthalten (In früheren Versionen von Visual Studio wird die Liste nach den Elementen gefiltert, die mit dem Begriff beginnen).

IntelliSense-Verbesserungen in CSS

Vorgang 2 – Die Farbauswahl

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

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

Suchen des Cursors
Löschen Sie den Doppelpunkt (:) und schreiben Sie ihn 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 der html-Farbcode (#fff) den aktuellen Farbcode im Stylesheet.

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

Farbauswahlfarbverlauf
Bewegen Sie im Opacity-Schieberegler die Auswahl in die Mitte der Leiste, 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 Farbdurchsichtigkeitswert für ein einzelnes Element definieren. Im Gegensatz zur Deckkraft - ein ähnliches CSS-Attribut - RGBA-Farben sind 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 die CSS-Headerklassendefinition (HEADER), und platzieren Sie den Cursor unter dem /*border radius*/ -Platzhalter, 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 Codeausschnitt einzufügen. Geben Sie dann eine Radiusgröße in Pixel ein, und drücken Sie die EINGABETASTE. Geben Sie z. B. 15px ein.

Die vom Codeausschnitt hinzugefügten CSS3-Attribute rendern abgerundete Rahmen in den meisten HTML5-Compliance-Browsern, 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 Lösung auszuführen. Beachten Sie, dass jede Seite jetzt abgerundete Rahmen aufweist.

Abgerundete Ecken
Schließen Sie den Browser und kehren Sie zu Visual Studio zurück.
Öffnen Sie die datei Custom.css , die sich im Ordner "Formatvorlagen" befindet, und platzieren Sie den Cursor in "div.images ul li img "-Klassendefinition.
Drücken Sie die EINGABETASTE, um die IntelliSense-Liste anzuzeigen, geben Sie den Feldschatten ein, und drücken Sie zweimal die TAB-TASTE , um den standardmäßigen Schattencodeausschnitt in die Klassendefinition einzufügen. Legen Sie die Schattenwerte auf 10px 10px 5px #888 fest. Geben Sie dann den Rahmenradius 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

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

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

div.images ul li img:hover
{

}
```

Geben Sie die Transformation ein, und drücken Sie zweimal die TAB-TASTE , um den Transformationsausschnitt einzufügen. Geben Sie dann rotate(-15deg) ein, um den Drehwinkelwert zu ändern, wenn Bilder darauf zeigen.

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 Lösung auszuführen und zur CSS3-Seite zu navigieren. Beachten Sie, dass die Bilder abgerundete Ecken und Boxschatten aufweisen. Zeigen Sie mit der Maus auf die Bilder, und beobachten Sie, wie sie gedreht werden.

Transformieren eines Codeausschnitts 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 auf "Dokumentmodus" zu klicken, um zu IE10-Standards zu wechseln.

Übung 2: Neuerungen im HTML-Editor

Visual Studio verfügt über einen verbesserten HTML-Editor. Einige der Verbesserungen, die in dieser Version enthalten sind, sind intelligente Einzüge in HTML-Dokumenten, HTML5-Codeausschnitten, HTML-Start- und Endtagabgleich und HTML-Validierung. In dieser Übung sehen Sie, wie diese Änderungen Ihre Fluency verbessern, wenn Sie im Websitemarkup arbeiten.

Wie der CSS-Editor wurde auch der HTML-Editor verbessert. Die meisten dieser Verbesserungen sind kleine Verbesserungen, die das Leben des Webentwicklers vereinfachen. Dinge wie weitere Codeausschnitte für HTML5, intelligente Einzug, abgleichende Start- und Endtags beim Bearbeiten und Überprüfen auf das HTML-Dokument DOCTYPE sind einige dieser Verbesserungen.

Aufgabe 1 – Verbesserte DOCTYPE-Validierung

Der HTML-Editor hat jetzt die Möglichkeit, den DOCTYPE Ihrer Seite zu überprüfen, obwohl sich die Definition möglicherweise auf der Gestaltungsvorlage befindet. Je nach DOCTYPE Ihrer Seite überprüft der HTML-Editor mit dem richtigen Satz von Regeln 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 WhatsNewASPNET.sln Projektmappe, die sich im Ordner "Source\WhatsNewASPNET " dieses Labors befindet.
Öffnen Sie die Seite "Site.Master ".
Beachten Sie das Zielschema für die Überprüfungssymbolleiste. Die Art und Weise, wie sich der HTML-Editor verhält (Validierung, IntelliSense usw.), ändert sich ordnungsgemäß, um den ausgewählten Doctype anzupassen.

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

Ändern des Dokumenttyps in der HTML-Symbolleiste für die Quellbearbeitung
Platzieren Sie den Cursor unter dem Textkörperelement , 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
Die Änderungen am Zielschema für die Überprüfungssymbolleiste rückgängig machen, indem Sie DOCTYPE: XHTML5 aus der Dropdownliste auswählen.

Doctype in der HTML-Quellbearbeitungssymbolleiste zurücksetzen
Platzieren Sie den Cursor unter dem Textkörperelement, 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.

HTML5-Elemente, die aufgelistet werden

Aufgabe 2 – Automatische Aktualisierung von Start-/Endtags

Visual Studio aktualisiert nun die HTML-Öffnen- oder Schließenstags des Elements, das Sie bearbeiten, um einander zu entsprechen. 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 Projektmappe.
Suchen Sie auf der seite Default.aspx den Cursor unter dem 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 die Audiodatei der Lösung 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 Codeausschnitte ausprobieren, die in Visual Studio enthalten sind, 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 die IntelliSense-Liste das asp:GridView-Steuerelement anzeigt.

IntelliSense im HTML-Editor bietet jetzt die Suche im Titel-Groß-/Kleinschreibung sowie einen teilweisen Abgleich (Abrufen aller Elemente, die den Ausdruck enthalten).

Einfügen einer GridView mit IntelliSense-Listen

Wenn Sie ein Raster eingeben<, erhalten Sie alle Elemente, die dem Ausdruck entsprechen, aber Visual Studio schlägt das Rasteransicht-Steuerelement vor:

Einfügen einer GridView mit IntelliSense-Listen und teilweisem Abgleich

Aufgabe 4 – Smarttags im HTML-Editor

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

Ö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 am unteren Rand des Elements angezeigt wird. Klicken Sie darauf, um das Menü "Intelligente Aufgaben" zu öffnen. Beachten Sie, dass Sie schnell auf einige Aufgaben im Zusammenhang mit dem Menüsteuerelement zugreifen können.

Intelligente Aufgaben für das Menüsteuerelement

Vorgang 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üherer Version von Visual Studio war der intelligente Einzug im XML-Editor, aber nicht im HTML-Editor verfügbar.

Stellen Sie sicher, dass die Einzugskonfiguration im HTML-Editor auf "Smart Indentation" festgelegt ist. Wählen Sie dazu die Tools | Options menu option and then select the Text Editor | HTML | Registerkartenseite im linken Bereich des Bildschirms . Wählen Sie die Option "Intelligenter Einzug" aus.

HTML-Editoreinstellungen
Entfernen Sie auf der Seite Default.aspx alle Inhalte 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.

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

Aufgabe 6 – Extrahieren in die Benutzersteuerung

Die in Visual Studio enthaltenen Umgestaltungstools, z. B. das Extrahieren eines Teils von Code in eine Funktion, sind großartige Features, die die Verbesserung und die Umgestaltung des vorhandenen Codes erleichtern. Das Gegenstück für ASP.NET Seiten wäre die Extraktion von HTML-Code zu einem Benutzersteuerelement. Das manuelle Ausführen 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 "In Benutzersteuerung extrahieren" automatisch alle diese Schritte für Sie aus.

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

Wählen Sie auf der Seite Default.aspx die H2 - und Audioelemente aus.
Klicken Sie mit der rechten Maustaste, und wählen Sie "In Benutzersteuerelement extrahieren" aus.

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

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

Die Seite wird automatisch aktualisiert, um das neue Benutzersteuerelement zu verwenden.
Drücken Sie F5 , um die Seite auszuführen und zu überprüfen, 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 in der Größe zu wachsen beginnt und Sie sich mit langen Dateien und Hunderten von Funktionen beschäftigen. Skriptentwickler müssen in der Regel einige zusätzliche Aufgaben ausführen, um die Code-Lesbarkeit aufrechtzuerhalten und dateienübergreifend zu navigieren. Mit der Einbeziehung von JavaScript-Bibliotheken wie jQuery ist die Skriptnavigation aufgrund der Codelänge zu einer Herausforderung geworden.

Visual Studio hat den JavaScript-Editor mit der Zusage erneuert, den Codemodus barrierefrei und organisiert zu machen. Viele Visual Studio-Features, die bereits in C#- oder VB-Editoren vorhanden sind, werden jetzt im JavaScript-Editor implementiert: Gehe zu Definition, automatischer Einzug, Dokumentation und Validierung beim Schreiben. Mit der erneuerten IntelliSense-Liste stehen Ihnen der JavaScript-Funktionskatalog zur Verfügung.

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

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 die Verbesserung der Benutzererfahrung konzentrieren.

Wenn noch nicht geöffnet, starten Sie Visual Studio , und öffnen Sie die WhatsNewASPNET.sln Projektmappe, die sich im Ordner "Source\WhatsNewASPNET " dieses Labors befindet.
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 erhöht wird.

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

Der folgende Code verwendet den lokalen HTML5-Speicher, um eine pageLoadCount-Variable zu speichern, die die Anzahl speichert, mit der die Seite vom aktuellen Benutzer besucht wurde. Lokaler Speicher ist eine clientseitige Schlüsselwertdatenbank, 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 der 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 lokaler Speicher und ihre inneren Methoden enthält.

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

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

JavaScript-Code wird automatisch ausgerichtet

Aufgabe 2 – Überprüfen von JavaScript

In dieser Aufgabe entdecken Sie die neue JavaScript-Überprüfung für den ECMAScript5-Standard. Dieses Feature hilft Ihnen, kompatiblen JavaScript-Code zu schreiben, während Skriptprobleme vor der Websitebereitstellung verhindert werden.

Hinweis

Visual Studio 2010 implementierte ECMAStript3-Compliance, während Visual Studio 2012 ECMAScript5-Compliance bereitstellt.

Ö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 " use strict " -Richtung in der ersten Zeile der Datei auschecken, wodurch ECMAScript5 strict modus aktiviert wird. Dieser Modus besteht aus einer Teilmenge der Sprache, die Mehrdeutigkeiten aus der letzten Edition klarstellt, und fügt einige neue Features hinzu, z. B. Getters und Setter, Bibliotheksunterstützung für JSON und umfassendere Reflexion über Objekteigenschaften.
Öffnen sie die Fehlerliste , wenn sie noch nicht geöffnet wurde (Menü "Ansicht" | Fehlerliste). Beachten Sie, dass die Funktionsdeklaration unterstrichen ist. Dies liegt daran, dass in ECMA5-Standardfunktionen nicht innerhalb von Sprachstrukturen geschachtelt werden können. In der nachstehenden Fehlerliste werden die Warnungsdetails angezeigt.

JavaScript-Überprüfungsfehlermeldung
Kommentieren Sie die Richtung "Streng verwenden" , und beachten Sie, dass Fehler verschwinden, aber die Warnungen bleiben erhalten.
Schreiben Sie in der letzten Zeile der Datei eine beliebige Zeichenfolge wie "test" (schließen Sie die Anführungszeichen ein, um anzugeben, dass sie als Zeichenfolge gilt). Schreiben Sie einen Punkt neben der Zeichenfolge, um die IntelliSense-Liste anzuzeigen, und wählen Sie die Option zum Kürzen aus.

In ECMAScript5-Standard haben Zeichenfolgenwerte und Variablen auch Zeichenfolgenmethoden definiert, z. B. Trim, Großbuchstaben, Suchen und Ersetzen.

IntelliSense-Liste in JavaScript

Aufgabe 3 – XML-Dokumentation für JavaScript

In dieser Aufgabe werden Sie visual Studio-Features für die XML-Dokumentation in JavaScript erkunden. Die JavaScript IntelliSense-Liste zeigt nun die XML-Dokumentation jeder Funktion an. 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 XML-Dokumentation zu den einzelnen JavaScript-Funktionen.

In IntelliSense integrierte JavaScript-XML-Dokumentation
Erstellen Sie unter der Add-Funktion in XMLDoc.js Datei eine neue Funktion mit dem Namen "Test".
Rufen Sie in der Testfunktion die Multiplikationsfunktion auf, die zwei Parameter empfängt . Beachten Sie, dass das QuickInfo-Feld die Dokumentation der Multiplikationsfunktion anzeigt.
```
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 zum Hinzufügen von Funktionen ein. 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 im HTML-Code.
Drücken Sie F12 , und navigieren Sie zur Definition. Beachten Sie, dass Sie jetzt auf Ihren JavaScript-Code zugreifen und diese durchsuchen können, ohne das Tool "Suchen " zu verwenden.
Suchen Sie den Cursor in der jQuery-Anweisung vor dem Signaturblock unten in der Codedatei. Drücken Sie F12. Sie navigieren zur jQuery-Bibliotheksdatei. Beachten Sie, dass Sie auch über die jQuery-Dateien mit F12 navigieren können.

Navigieren zu jQuery-Definitionen

Hinweis

Stellen Sie sicher, dass GotoDefinition.js vor dem Speichern der Datei keine Syntaxfehler aufweist.

Übung 4: Bündelung und Minifizierung

Wie oft enthalten Ihre Websites mehrere JavaScript- oder CSS-Dateien? 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 minimiert wird ( d. h. das Entfernen nicht erforderlicher Leerzeichen, Entfernen von Kommentaren, Reduzieren von Bezeichnern).

Bündelung und Minimierung in ASP.NET 4.5 wird zur Laufzeit durchgeführt, damit der Prozess den Benutzer-Agent (z. B. IE, Mozilla usw.) identifizieren und so die Komprimierung verbessern kann, indem er auf den Benutzerbrowser abzielt (z. B. Entfernen von Inhalten, die Mozilla spezifisch sind, wenn die Anforderung von IE stammt).

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

Aufgabe 1 – Installieren des Bündelungs- und Minification-Pakets von NuGet

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

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

Aufgabe 2 – Standardbundle

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 minimierte 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 referenzieren und die resultierende Ausgabe anzeigen.

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

Beachten Sie, dass die Anwendung mehrere CSS- und JS-Dateien 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. Entfernen Sie die Kommentare zur Verwendung der Direktive, 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 Kommentare des EnableDefaultBundles-Aufrufs auf, wie im folgenden Codeausschnitt dargestellt. Auf diese Weise können wir auf eine gebündelte Sammlung von CSS-Dateien in einem Ordner verweisen, indem wir den Pfad zu diesem Ordner sowie das Suffix "CSS" oder "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 Optimization.aspx Datei, und suchen Sie das Inhaltssteuerelement für HeadContent.

Beachten Sie, dass die CSS-Dateien und die JS-Dateien ein einzelnes Tag haben, 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 auf die Bündel in der Datei "Site.Master". In diesem Beispielcode stellen Sie fest, dass einige der gebündelten Dateien auch von der Datei "Site.Master" referenziert werden, wodurch 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. "Scripts\custom" abzurufen.

Sie können den Pfad Scripts/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 mit den Standardpaketen.
```
<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 eingerückten Code, leere Leerzeichen und Kommentare enthält, die die Datei vergrößern. (Außerdem enthält die JavaScript-Datei Leerzeichen und Kommentare).

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

Sehen Sie sich die minimierte 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 JS Bundle-Link , um die gebündelte JavaScript-Datei zu öffnen. Sie können die Explorer-Warnung 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 früheren ASP.NET-Versionen wesentlich komplizierter. Jetzt müssen Sie, wie Sie gesehen haben, nur eine Zeile in der Datei "Global.asax " hinzufügen, um das Bündeln zu aktivieren, und dann auf die gebündelten Dateien von Ihrer Website verweisen.

Aufgabe 3 – Statische Bündel

Mit dem statischen Bündelansatz können Sie die Gruppe der zu bündelnden Dateien, den Verweis und die verwendete Minimierungsmethode anpassen.

In dieser Aufgabe konfigurieren Sie ein statisches Bündel, um eine bestimmte Gruppe 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 die Application_Start Methode.

Heben Sie die Kommentare des statischen Bündelcodes auf, wie im folgenden Code dargestellt.

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

Beachten Sie, dass sich die Dateien nicht an demselben Ort 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 Optimization.aspx Datei.

Beachten Sie, dass der Link zu Static JS Bundle den Pfad verwendet, den Sie deklariert haben, wenn Sie das statische Bündel in der Global.asax.cs Datei konfiguriert 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 minimierte gebündelte JavaScript-Datei die Ausgabe für alle JavaScript-Dateien ist, die in der statischen Bundledatei unter dem Pfad "/StaticBundle" konfiguriert sind.

Statisches JavaScript-Dateibundle
Schließen Sie den Browser und kehren Sie zu Visual Studio zurück.

Aufgabe 4 – Dynamische Ordnerbundle

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. Daher ist eine Verarbeitung erforderlich, bevor die Bündelung ausgeführt wird.

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

Öffnen Sie die datei Global.asax.cs , und suchen Sie die Application_Start Methode.

Heben Sie die Kommentare des dynamischen Bündelcodes auf, wie im folgenden Code dargestellt.

Sie definieren ein dynamisches Ordnerbundle, das den benutzerdefinierten CoffeeMinify-Prozessor verwendet, der nur für die Dateien mit der Erweiterung ".coffee" (CoffeeScript-Dateien) gilt. 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 dazu das Menü "Andere Windows | Paket-Manager konsole anzeigen | ".
Geben Sie in der Paket-Manager Konsole "Install-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 mit der rechten Maustaste auf die CoffeeMinify.cs Datei in der Projektmappen-Explorer, und wählen Sie "In Project einschließen" aus.

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

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, zur Verbesserung der Platz- und Lesbarkeit von JavaScript sowie zum Hinzufügen weiterer Features wie Arrayverständnis und Musterabgleich.

Öffnen Sie die datei Optimization.aspx , und suchen Sie die Bundlelinks.

Beachten Sie, dass der Link zu Dynamic JS Bundle mithilfe des /Coffee Suffix, das Sie für das dynamische Ordnerbundle konfiguriert haben, auf den Ordner "Skripts/Bundle" verweist.

<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 .coffee-Dateien enthält. Sie können auch sehen, dass der CoffeeScript-Code in JavaScript kompiliert wurde und die auskommentierten Zeilen entfernt wurden.

Dynamic JS files bundle

Hinweis

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

Zusammenfassung

Diese Übung 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.

Wenn Sie dieses Praktische Übungslabor abschließen, haben Sie erfahren, wie Sie die neuen Features und Verbesserungen in Visual Studio 2012-Editoren für CSS, JavaScript und HTML verwenden. Darüber hinaus haben Sie erfahren, wie Visual Studio 2012 integrierte Bündelung und Minimierung implementiert.

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

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

Wechseln Sie zu [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Wenn Sie das Webplattform-Installationsprogramm bereits installiert haben, können Sie es öffnen und nach dem Produkt "Visual Studio Express 2012 for Web with Windows Azure SDK" suchen.
Klicken Sie auf "Jetzt installieren". Wenn Sie nicht über das Webplattform-Installationsprogramm verfügen, werden Sie umgeleitet, um es zuerst herunterzuladen und zu installieren.
Klicken Sie nach dem Öffnen des Webplattform-Installers 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 den Vorgang fortzusetzen.

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

Installationsfortschritt
Wenn die Installation abgeschlossen ist, klicken Sie 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 VS Express für Webkachel.

VS Express für Webkachel

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

In diesem Anhang wird gezeigt, wie Sie eine neue Website über das Windows Azure-Verwaltungsportal erstellen und die Anwendung veröffentlichen, die Sie erhalten haben, indem Sie 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 wächst. 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, die Sie steuern und verwalten können. Mit der Option "Schnellerstellung" können Sie eine fertige Webanwendung von außerhalb des Portals auf der Windows Azure-Website bereitstellen. Sie enthält keine Schritte zum Einrichten einer Datenbank.

Erstellen einer neuen Website mithilfe der Schnellerstellung
Warten Sie, bis die neue Website erstellt wird.
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 wird ausgeführt
Wechseln Sie zurück zum Portal, und klicken Sie auf den Namen der Website unter der Spalte "Name ", um die Verwaltungsseiten anzuzeigen.

Öffnen der Websiteverwaltungsseiten
Klicken Sie auf der Seite "Dashboard " im Abschnitt "Schnellblick " 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 Publikationsmethode erforderlich sind. Das Veröffentlichungsprofil enthält die URLs, Benutzeranmeldeinformationen und Datenbankzeichenfolgen, die erforderlich sind, um eine Verbindung mit jedem der Endpunkte herzustellen und zu authentifizieren, für die eine Publikationsmethode aktiviert ist. 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 Veröffentlichungsprofils der Website
Laden Sie die Veröffentlichungsprofildatei an einen bekannten Speicherort herunter. 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 sql Server nicht verwendet, überspringen Sie diese Aufgabe möglicherweise.

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 im Dashboard von Sql Databases | Servers anzeigen | . Wenn Sie keinen Server erstellt haben, können Sie einen mit der Schaltfläche "Hinzufügen " auf der Befehlsleiste erstellen. Notieren Sie sich den Servernamen und die URL, den Administratoranmeldungsnamen und das Kennwort, wie 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 von 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 aus der aktuellen Client-IP-Adresse aus, und fügen Sie sie in die Textfelder "START-IP-Adresse " und "IP-Adresse beenden" 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.

Änderungen bestätigen

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

Wechseln Sie 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).

Webbereitstellungskonfiguration
Konfigurieren Sie die Datenbankverbindung wie folgt:
- Geben Sie im Servernamen ihre SQL-Datenbank Server-URL mit dem Präfix tcp: ein.
- Geben Sie unter " Benutzername" den Anmeldenamen des Serveradministrators ein.
- Geben Sie im Kennwort das Anmeldekennwort ihres Serveradministrators ein.
- Geben Sie einen neuen Datenbanknamen ein, z. B. MVC4SampleDB.
  
  Konfigurieren von Ziel-Verbindungszeichenfolge
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.

Anwendung veröffentlicht in Windows Azure