Verwenden von Seitenprüfung mit einem integrierten Browser in ASP.NET MVC
von Tim Ammann
Seitenprüfung in Visual Studio 2012 ist ein Webentwicklungstool mit integriertem Browser. Wählen Sie ein beliebiges Element im integrierten Browser aus, und Seitenprüfung hebt sofort die Quelle und css des Elements hervor. Sie können eine beliebige MVC-Ansicht durchsuchen, die Quellen des gerenderten Markups schnell finden und Browsertools direkt in der Visual Studio-Umgebung verwenden.
In diesem Tutorial erfahren Sie, wie Sie den Überprüfungsmodus aktivieren und markup und CSS in Ihrem Webprojekt schnell suchen und bearbeiten. In diesem Tutorial wird ein MVC-Projekt verwendet, Sie können aber auch Seitenprüfung für Web Forms und andere ASP.NET-Anwendungen verwenden.
Das Tutorial umfasst die folgenden Abschnitte:
- Voraussetzungen
- Erstellen einer Webanwendung
- Verwenden von Seitenprüfung zum Navigieren zu einer Ansicht
- Aktivieren des Inspektionsmodus
- Verwenden von Seitenprüfung zum Vornehmen von Änderungen am Markup
- Inspektionsmodus und HTML-Fenster
- Vorschau von CSS-Änderungen im Fenster "Formatvorlagen"
- AUTOMATISCHE CSS-Synchronisierung
- Verwenden der CSS-Farbauswahl
- Zuordnen dynamischer Seitenelemente zu JavaScript
Voraussetzungen
Hinweis
Um die neueste Version von Seitenprüfung zu erhalten, verwenden Sie den Webplattform-Installer, um das Windows Azure SDK für .NET 2.0 zu installieren.
Seitenprüfung ist mit Microsoft Web Developer Tools gebündelt. Die neueste Version ist 1.3. Um zu überprüfen, welche Version Sie haben, führen Sie Visual Studio aus, und wählen Sie im Menü Hilfe die Option Info zu Microsoft Visual Studio aus.
Erstellen einer Webanwendung
Erstellen Sie zunächst eine Webanwendung, mit der Sie Seitenprüfung. Wählen Sie in Visual Studio Datei>Neues Projekt aus. Erweitern Sie links Visual C#, wählen Sie Web und dann ASP.NET MVC4-Webanwendung aus.
Klicken Sie auf OK.
Wählen Sie im Dialogfeld Neues ASP.NET MVC 4-Projektdie Option Internetanwendung aus. Übernehmen Sie Razor als Standardansichts-Engine.
Die Anwendung wird in der Quellansicht geöffnet.
Nachdem Sie nun über eine Anwendung verfügen, mit der Sie arbeiten können, können Sie Seitenprüfung verwenden, um sie zu untersuchen und zu ändern.
Verwenden von Seitenprüfung zum Navigieren zu einer Ansicht
In Visual Studio 2012 können Sie mit der rechten Maustaste auf eine beliebige Ansicht in Ihrem Projekt klicken, In Seitenprüfung anzeigen auswählen, und Seitenprüfung wird die Route ermitteln und die Seite anzeigen.
Erweitern Sie in Projektmappen-Explorer den Ordner Ansichten und dann den Ordner Start. Klicken Sie mit der rechten Maustaste auf die Datei Index.cshtml, und wählen Sie In Seitenprüfung anzeigen aus.
Standardmäßig wird Seitenprüfung als Fenster auf der linken Seite der Visual Studio-Umgebung angedockt. Wenn Sie möchten, können Sie es an einer anderen Stelle andocken oder das Fenster ausdocken. Weitere Informationen finden Sie unter Vorgehensweise: Anordnen und Andocken von Fenstern.
Im oberen Bereich des fensters Seitenprüfung wird die aktuelle Seite in einem Browserfenster angezeigt. Im unteren Bereich wird die Seite im HTML-Markup zusammen mit einigen Registerkarten angezeigt, auf denen Sie verschiedene Aspekte der Seite untersuchen können. Der untere Bereich ähnelt den F12-Entwicklertools in Internet Explorer.
In diesem Tutorial verwenden Sie die Registerkarten HTML und Formatvorlagen , um schnell zu navigieren und Änderungen an der Anwendung vorzunehmen.
EnableInspection Mode
Um Seitenprüfung in den Inspektionsmodus zu versetzen, klicken Sie auf die Schaltfläche Untersuchen. Wenn Sie im Inspektionsmodus den Mauszeiger auf einen Beliebigen Teil der gerenderten Seite halten, wird das entsprechende Quellmarkup oder der entsprechende Code hervorgehoben.
Bewegen Sie nun die Maus über verschiedene Teile der Seite innerhalb Seitenprüfung. Während Sie dies tun, ändert sich der Mauszeiger in ein großes Pluszeichen, und das Element darunter ist hervorgehoben:
Während Sie den Mauszeiger bewegen, hebt Visual Studio die entsprechende Razor-Syntax in der Quelldatei hervor. Wenn das HTML-Element aus einer anderen Quelldatei stammt, öffnet Visual Studio die Datei automatisch.
In Seitenprüfung zeigt die Registerkarte HTML den HTML-Code an, der aus der Razor-Syntax generiert wurde. Wenn Sie den Mauszeiger bewegen, werden die HTML-Elemente hervorgehoben. Auf der Registerkarte Formatvorlagen werden die CSS-Regeln für das Element angezeigt.
Verwenden von Seitenprüfung zum Vornehmen von Änderungen am Markup
mit Seitenprüfung können Sie Markup finden, dessen Position möglicherweise nicht offensichtlich ist. Anschließend können Sie das Markup ändern und die resultierenden Änderungen anzeigen.
Um dies anzuzeigen, klicken Sie auf Überprüfen, und scrollen Sie dann im fenster Seitenprüfung zum Unteren Rand der Seite.
Wenn Sie den Mauszeiger in den Fußzeilenbereich verschieben, öffnet Seitenprüfung die Datei _Layout.cshtml und hebt den Abschnitt der ausgewählten Layoutseite hervor. Wie Sie sehen können, wird der Fußzeilenbereich in der Layoutdatei und nicht in der Ansicht selbst definiert.
Bewegen Sie nun den Mauszeiger über die Zeile mit dem Copyright-Hinweis . Auf der Seite _Layout.cshtml ist die entsprechende Zeile hervorgehoben.
Fügen Sie text am Ende der Zeile in der Datei _Layout.cshtml hinzu.
<p>&Kopie; @DateTime.Now.Year - My ASP.NET MVC Application Rocks!</P>
Drücken Sie nun STRG+ALT+EINGABETASTE, oder klicken Sie auf die Updateleiste, um die Ergebnisse im Seitenprüfung Browserfenster anzuzeigen.
Sie haben vielleicht gedacht, dass die in Index.cshtml definierte Fußzeile, aber es stellte sich heraus, dass sie sich in der _Layout.cshtml befindet, und Seitenprüfung sie für Sie gefunden haben.
Inspektionsmodus und HTML-Fenster
Als Nächstes werfen Sie einen kurzen Blick auf das HTML-Fenster und die Zuordnung von Elementen für Sie.
Klicken Sie auf Überprüfen, um Seitenprüfung in den Inspektionsmodus zu versetzen.
Klicken Sie auf den oberen Teil der Seite mit der Meldung "Ihr Logo hier". Sie untersuchen ein bestimmtes Element ausführlicher, sodass sich die Anzeige im Browserfenster beim Bewegen des Mauszeigers nicht mehr ändert.
Bewegen Sie nun den Mauszeiger in das HTML-Fenster . Während Sie den Mauszeiger bewegen, umreißt Seitenprüfung das Element im HTML-Fenster und hebt das entsprechende Element im Browserfenster hervor.
Wie zuvor öffnet Seitenprüfung die Datei _Layout.cshtml für Sie auf einer temporären Registerkarte. Klicken Sie auf die temporäre Registerkarte _Layout.cshtml, und das entsprechende Markup wird im <Headerabschnitt> für Sie hervorgehoben:
Vorschau von CSS-Änderungen im Formatvorlagenfenster
Als Nächstes verwenden Sie das Fenster Seitenprüfung Formatvorlagen, um änderungen an CSS in der Vorschau anzuzeigen.
Klicken Sie auf Überprüfen, um Seitenprüfung in den Inspektionsmodus zu versetzen.
Bewegen Sie im Seitenprüfung Browserfenster den Mauszeiger über den Abschnitt "Startseite", bis die Bezeichnung div.content-wrapper angezeigt wird.
Klicken Sie einmal in den Abschnitt div.content-wrapper, und bewegen Sie den Mauszeiger zum Fenster Formatvorlagen . Im Fenster Formatvorlagen werden alle CSS-Regeln für dieses Element angezeigt. Scrollen Sie nach unten, um die Auswahl der .featured.content-wrapper-Klasse zu finden. Deaktivieren Sie nun das Kontrollkästchen für die Background-Color-Eigenschaft.
Beachten Sie, dass die Änderung sofort im Seitenprüfung Browserfenster angezeigt wird.
Aktivieren Sie das Kontrollkästchen erneut, doppelklicken Sie dann auf den Eigenschaftswert, und ändern Sie ihn in Rot. Die Änderung zeigt sofort:
Im Fenster Formatvorlagen können Sie CSS-Änderungen einfach testen und in der Vorschau anzeigen, bevor Sie die Änderungen auf das Stylesheet selbst commitsieren.
AUTOMATISCHE CSS-Synchronisierung
Hinweis
Für dieses Feature ist Version 1.3 von Seitenprüfung erforderlich.
Mit der Funktion für die automatische CSS-Synchronisierung können Sie eine CSS-Datei direkt bearbeiten und die Änderungen sofort im Seitenprüfung-Browser anzeigen.
Klicken Sie auf Überprüfen, um Seitenprüfung in den Inspektionsmodus zu versetzen.
Bewegen Sie im Seitenprüfung Browser den Mauszeiger über den Abschnitt "Startseite", bis die Bezeichnung div.content-wrapper angezeigt wird. Klicken Sie einmal, um dieses Element auszuwählen.
Im Fenster Formatvorlagen werden alle CSS-Regeln für dieses Element angezeigt. Scrollen Sie nach unten, um die Auswahl der .featured.content-wrapper-Klasse zu finden. Klicken Sie auf ".featured .content-wrapper". Seitenprüfung öffnet die CSS-Datei, die diese Formatvorlage definiert (Site.css) und hebt die entsprechende CSS-Formatvorlage hervor.
Ändern Sie nun den Wert für in background-color "rot". Die Änderung wird sofort im Seitenprüfung Browser angezeigt.
Verwenden der CSS-Farbauswahl
Der CSS-Editor in Visual Studio 2012 verfügt über eine Farbauswahl, die das Auswählen und Einfügen von Farben vereinfacht. Die Farbauswahl umfasst eine Standardpalette von Farben, unterstützt Standardfarbnamen, Hashcodes, RGB-, RGBA-, HSL- und HSLA-Farben und verwaltet eine Liste der Farben, die Sie zuletzt im Dokument verwendet haben.
Im vorherigen Abschnitt haben Sie den Wert der background-color Eigenschaft geändert. Um die Farbauswahl aufzurufen, platzieren Sie die Einfügemarke nach dem Eigenschaftennamen und geben Sie #rgb() ein.
Klicken Sie auf eine Farbe, um sie auszuwählen, oder drücken Sie die NACH-UNTEN-TASTE, und verwenden Sie dann die Pfeiltaste nach links und nach rechts, um die Farben zu durchlaufen. Wenn Sie eine Farbe aufrufen, wird der entsprechende Hexwert in der Vorschau angezeigt:
Wenn der Farbbalken nicht die gewünschte Farbe aufweist, können Sie die Farbauswahl verwenden. Klicken Sie zum Öffnen auf den Doppel-Chevron am rechten Ende der Farbleiste, oder drücken Sie ein- oder zweimal die NACH-UNTEN-TASTE auf der Tastatur.
Klicken Sie im vertikalen Balken auf der rechten Seite auf eine Farbe. Dadurch wird ein Farbverlauf für diese Farbe im fenster Standard angezeigt. Wählen Sie eine Farbe direkt aus dem vertikalen Balken aus, indem Sie die EINGABETASTE drücken, oder klicken Sie auf einen beliebigen Punkt im Standard Fensters, um die Auswahl mit größerer Genauigkeit zu erhöhen.
Wenn auf dem Computerbildschirm eine Farbe vorhanden ist, die Sie verwenden möchten (sie muss sich nicht innerhalb der Visual Studio-Benutzeroberfläche befinden), können Sie den Wert mit dem Pipettentool unten rechts erfassen.
Sie können auch die Deckkraft einer Farbe ändern, indem Sie den Schieberegler am unteren Rand der Farbauswahl bewegen. Dadurch werden Farbwerte in RGBA-Werte geändert, da das RGBA-Format Deckkraft darstellen kann.
Nachdem Sie eine Farbe ausgewählt haben, drücken Sie die EINGABETASTE, und geben Sie dann ein Semikolon ein, um den Hintergrundfarbeintrag in der Datei Site.css abzuschließen.
Die Seitenprüfung Updateleiste
Seitenprüfung erkennt sofort die Änderung an der Datei Site.css und zeigt eine Warnung in einer Updateleiste an.
Um alle Dateien zu speichern und den Seitenprüfung Browser zu aktualisieren, drücken Sie STRG+ALT+EINGABETASTE, oder klicken Sie auf die Updateleiste. Die Änderung der Hervorhebungsfarbe wird im Browser angezeigt.
Zuordnen dynamischer Seitenelemente zu JavaScript
In modernen Webanwendungen werden Elemente auf der Seite häufig dynamisch mit JavaScript generiert. Das bedeutet, dass es kein statisches Markup (entweder HTML oder Razor) gibt, das diesen Seitenelementen entspricht.
Mit Version 1.3 können Seitenprüfung jetzt Elemente, die der Seite dynamisch hinzugefügt wurden, dem entsprechenden JavaScript-Code zuordnen. Um dieses Feature zu veranschaulichen, verwenden wir die Vorlage Single Page Application (SPA).
Hinweis
Für die SPA-Vorlage ist das Update ASP.NET and Web Tools 2012.2 erforderlich.
Wählen Sie in Visual Studio Datei>Neues Projekt aus. Erweitern Sie links Visual C#, wählen Sie Web und dann ASP.NET MVC4-Webanwendung aus. Klicken Sie auf OK.
Wählen Sie im Dialogfeld Neues ASP.NET MVC 4-Projektdie Option Einzelseitenanwendung aus.
Erweitern Sie in Projektmappen-Explorer den Ordner Ansichten und dann den Ordner Start. Klicken Sie mit der rechten Maustaste auf die Datei Index.cshtml, und wählen Sie In Seitenprüfung anzeigen aus.
Das erste, was im Seitenprüfung-Browser angezeigt wird, ist eine Anmeldeseite. Klicken Sie auf "Registrieren", und erstellen Sie einen Benutzernamen und ein Kennwort. Nach der Registrierung meldet sich die Anwendung an und erstellt eine Aufgabenliste mit einigen Beispielelementen.
Klicken Sie auf Überprüfen, um Seitenprüfung in den Inspektionsmodus zu versetzen. Klicken Sie im Seitenprüfung Browser auf eines der To-Do-Elemente. Beachten Sie, dass das Element orange hervorgehoben ist, anstatt blau hervorgehoben zu werden, mit "JS" neben dem Elementnamen. Dies gibt an, dass das Element dynamisch über ein Skript erstellt wurde.
Darüber hinaus wird auf der Registerkarte Anrufliste eine orangefarbene Unterstreichung angezeigt. Dies gibt an, dass der Aufrufstapelbereich weitere Informationen zum Element enthält.
Klicken Sie auf die Registerkarte Anrufliste . Im Bereich Aufrufliste wird die Aufrufliste für den JavaScript-Aufruf angezeigt, der das Element erstellt hat. Aufrufe externer Bibliotheken wie jQuery werden reduziert, sodass Sie die Aufrufe Ihres Anwendungsskripts leicht sehen können.
Um den vollständigen Stapel anzuzeigen, einschließlich Aufrufen externer Bibliotheken, können Sie die Knoten mit der Bezeichnung "Externe Bibliotheken" erweitern:
Wenn Sie auf ein Element in der Aufrufliste klicken, öffnet Visual Studio die Codedatei und hebt das entsprechende Skript hervor.
Weitere Informationen
Einführung in ASP.NET MVC 4 mit Visual Studio (ASP.net Website)
Einführung in Seitenprüfung (Channel 9-Video)