Uso di Controllo pagina con un browser integrato in ASP.NET MVC
di Tim Ammann
Controllo pagina in Visual Studio 2012 è uno strumento di sviluppo Web con un browser integrato. Selezionare qualsiasi elemento nel browser integrato e Controllo pagina evidenzia immediatamente l'origine e CSS dell'elemento. È possibile esplorare qualsiasi visualizzazione MVC, trovare rapidamente le origini del markup sottoposto a rendering e usare gli strumenti del browser direttamente nell'ambiente di Visual Studio.
Questa esercitazione illustra come abilitare la modalità di ispezione e quindi individuare e modificare rapidamente markup e CSS all'interno del progetto Web. L'esercitazione usa un progetto MVC, ma è anche possibile usare Controllo pagina per Web Forms e altre applicazioni ASP.NET.
L'esercitazione include le sezioni seguenti:
- Prerequisiti
- Creare un'applicazione Web
- Usare Controllo pagina per passare a una visualizzazione
- Abilitare la modalità di ispezione
- Usare Controllo pagina per apportare modifiche al markup
- Modalità di ispezione e finestra HTML
- Anteprima delle modifiche CSS nella finestra Stili
- Sincronizzazione automatica CSS
- Uso del selettore colori CSS
- Mapping di elementi di pagina dinamici a JavaScript
Prerequisiti
Nota
Per ottenere la versione più recente di Controllo pagina, usare Il programma di installazione della piattaforma Web per installare Windows Azure SDK per .NET 2.0.
Controllo pagina è in bundle con Microsoft Web Developer Tools. La versione più recente è 1.3. Per verificare la versione in uso, eseguire Visual Studio e selezionare Informazioni su Microsoft Visual Studio dal menu Guida .
Creare un'applicazione Web
Creare prima di tutto un'applicazione Web con cui si userà Controllo pagina. In Visual Studio scegliere File>Nuovo progetto. A sinistra espandere Visual C#, selezionare Web e quindi selezionare ASP.NET applicazione Web MVC4.
Fare clic su OK.
Nella finestra di dialogo Nuovo ASP.NET progetto MVC 4 selezionare Applicazione Internet. Lasciare Razor come motore di visualizzazione predefinito.
L'applicazione viene aperta nella visualizzazione Origine .
Dopo aver usato un'applicazione, è possibile usare Controllo pagina per esaminarla e modificarla.
Usare Controllo pagina per passare a una visualizzazione
In Visual Studio 2012 è possibile fare clic con il pulsante destro del mouse su qualsiasi visualizzazione nel progetto, selezionare Visualizza in Controllo pagina e Controllo pagina verrà visualizzata la route e visualizzata la pagina.
In Esplora soluzioni espandere la cartella Visualizzazioni e quindi la cartella Home. Fare clic con il pulsante destro del mouse sul file Index.cshtml e scegliere Visualizza in Controllo pagina.
Per impostazione predefinita, Controllo pagina è ancorato come finestra sul lato sinistro dell'ambiente di Visual Studio. Se si preferisce, è possibile ancorarlo altrove o scollegare la finestra. Vedere Procedura: disporre e ancorare Windows.
Il riquadro superiore della finestra Controllo pagina mostra la pagina corrente in una finestra del browser. Il riquadro inferiore mostra la pagina nel markup HTML, insieme ad alcune schede che consentono di esaminare diversi aspetti della pagina. Il riquadro inferiore è simile a F12 Developer Tools in Internet Explorer.
In questa esercitazione si useranno le schede HTML e Stili per spostarsi rapidamente e apportare modifiche all'applicazione.
Modalità EnableInspection
Per inserire Controllo pagina in modalità di ispezione, fare clic sul pulsante Controlla. In Modalità di ispezione, quando si tiene premuto il puntatore del mouse su qualsiasi parte della pagina di cui è stato eseguito il rendering, viene evidenziato il markup o il codice sorgente corrispondente.
Spostare ora il mouse su diverse parti della pagina all'interno di Controllo pagina. Come si fa, il puntatore del mouse cambia in un segno più grande e l'elemento sottostante è evidenziato:
Quando si sposta il puntatore del mouse, Visual Studio evidenzia la sintassi Razor corrispondente nel file di origine. Se l'elemento HTML proviene da un altro file di origine, Visual Studio apre automaticamente il file.
In Controllo pagina la scheda HTML mostra il codice HTML generato dalla sintassi Razor. Quando si sposta il puntatore del mouse, gli elementi HTML vengono evidenziati. La scheda Stili mostra le regole CSS per l'elemento.
Usare Controllo pagina per apportare modifiche al markup
Controllo pagina consente di trovare il markup il cui percorso potrebbe non essere ovvio. È quindi possibile modificare il markup e visualizzare le modifiche risultanti.
Per visualizzare questa operazione, fare clic su Controlla e quindi scorrere fino alla fine della pagina nella finestra Controllo pagina.
Quando si sposta il puntatore del mouse nell'area del piè di pagina, Controllo pagina apre il file _Layout.cshtml e evidenzia la sezione della pagina di layout selezionata. Come si può notare, l'area piè di pagina è definita nel file di layout e non nella visualizzazione stessa.
Spostare ora il puntatore del mouse sulla riga con l'avviso sul copyright . Nella pagina _Layout.cshtml viene evidenziata la riga corrispondente.
Aggiungere un testo alla fine della riga nel file _Layout.cshtml.
<p>&copia; @DateTime.Now.Year - My ASP.NET MVC Application Rocks!</P>
Premere CTRL+ALT+INVIO o fare clic sulla barra di aggiornamento per visualizzare i risultati nella finestra del browser Controllo pagina.
Si potrebbe pensare che il piè di pagina definito in Index.cshtml, ma si è rivelato essere nel _Layout.cshtml e Controllo pagina trovato per l'utente.
Modalità di ispezione e finestra HTML
Successivamente, si avrà un'occhiata rapida alla finestra HTML e al modo in cui esegue il mapping degli elementi.
Fare clic su Controlla per inserire Controllo pagina in modalità di ispezione.
Fare clic sulla parte superiore della pagina che indica "Il logo qui". Si esamina un particolare elemento in modo più dettagliato, quindi la visualizzazione nella finestra del browser non cambia più quando si sposta il puntatore del mouse.
Spostare ora il puntatore del mouse nella finestra HTML . Quando si sposta il puntatore del mouse, Controllo pagina struttura l'elemento all'interno della finestra HTML e evidenzia l'elemento corrispondente nella finestra del browser.
Come prima, Controllo pagina apre il file _Layout.cshtml in una scheda temporanea. Fare clic sulla scheda temporanea _Layout.cshtml e il markup corrispondente verrà evidenziato nella <sezione intestazione> per l'utente:
Anteprima delle modifiche CSS nella finestra Stili
Verrà quindi usata la finestra stili di Controllo pagina per visualizzare in anteprima le modifiche apportate a CSS.
Fare clic su Controlla per inserire Controllo pagina in modalità di ispezione.
Nella finestra del browser Controllo pagina spostare il puntatore del mouse sulla sezione "Home Page" finché non viene visualizzata l'etichetta div.content-wrapper.
Fare clic all'interno della sezione div.content-wrapper una sola volta e quindi spostare il puntatore del mouse nella finestra Stili . La finestra Stili mostra tutte le regole CSS per questo elemento. Scorrere verso il basso per trovare il selettore di classi .content-wrapper in primo piano. Deselezionare ora la casella di controllo per la proprietà colore di sfondo.
Si noti come le anteprime delle modifiche si trovano immediatamente nella finestra del browser Controllo pagina.
Selezionare di nuovo la casella di controllo, quindi fare doppio clic sul valore della proprietà e modificarlo in rosso. La modifica mostra immediatamente:
La finestra Stili semplifica il test e l'anteprima delle modifiche CSS prima di eseguire il commit delle modifiche al foglio di stile stesso.
Sincronizzazione automatica CSS
Nota
Questa funzionalità richiede la versione 1.3 di Controllo pagina.
La funzionalità di sincronizzazione automatica CSS consente di modificare direttamente un file CSS e di visualizzare le modifiche immediatamente nel browser Controllo pagina.
Fare clic su Controlla per inserire Controllo pagina in modalità di ispezione.
Nel browser Controllo pagina spostare il puntatore del mouse sulla sezione "Home Page" finché non viene visualizzata l'etichetta div.content-wrapper. Fare clic una sola volta per selezionare questo elemento.
La finestra Stili mostra tutte le regole CSS per questo elemento. Scorrere verso il basso per trovare il selettore di classi .content-wrapper in primo piano. Fare clic su ".content-wrapper in primo piano". Controllo pagina apre il file CSS che definisce questo stile (Site.css) e evidenzia lo stile CSS corrispondente.
Modificare ora il valore per background-color in "rosso". La modifica viene visualizzata immediatamente nel browser Controllo pagina.
Uso del selettore colori CSS
L'editor CSS in Visual Studio 2012 include un selettore colori che semplifica la scelta e l'inserimento dei colori. Il selettore colori include una tavolozza standard di colori, supporta nomi di colori standard, codici hash, RGB, RGBA, HSL e HSLA colori e mantiene un elenco dei colori usati più di recente nel documento.
Nella sezione precedente è stato modificato il valore della background-color proprietà. Per richiamare la selezione colori, posizionare il punto di inserimento dopo il nome della proprietà e il tipo # o rgb(.
Fare clic su un colore per selezionarlo oppure premere il tasto freccia giù e quindi usare i tasti freccia sinistra e destra per attraversare i colori. Quando si visita un colore, il valore esadecimale corrispondente viene visualizzato in anteprima:
Se la barra dei colori non ha il colore esatto desiderato, è possibile usare il selettore colori popup. Per aprirlo, fare clic sul doppio chevron alla fine destra della barra dei colori oppure premere freccia giù una o due volte sulla tastiera.
Fare clic su un colore dalla barra verticale a destra. In questo modo viene visualizzata una sfumatura per tale colore nella finestra principale. Scegliere un colore direttamente dalla barra verticale premendo INVIO o facendo clic su qualsiasi punto della finestra principale per scegliere con maggiore precisione.
Se nella schermata del computer è presente un colore che si vuole usare (non deve trovarsi all'interno dell'interfaccia utente di Visual Studio), è possibile acquisire il relativo valore usando lo strumento di controllo dell'occhio in basso a destra.
È anche possibile modificare l'opacità di un colore spostando il dispositivo di scorrimento nella parte inferiore della selezione colori. In questo modo vengono modificati i valori di colore nei valori RGBA, perché il formato RGBA può rappresentare l'opacità.
Dopo aver scelto un colore, premere INVIO e quindi digitare un punto e virgola per completare la voce di colore di sfondo nel file Site.css .
Barra di aggiornamento Controllo pagina
Controllo pagina rileva immediatamente la modifica al file Site.css e visualizza un avviso in una barra di aggiornamento.
Per salvare tutti i file e aggiornare il browser Controllo pagina, premere CTRL+ALT+INVIO o fare clic sulla barra di aggiornamento. La modifica del colore di evidenziazione viene visualizzata nel browser.
Mapping di elementi di pagina dinamici a JavaScript
Nelle applicazioni Web moderne gli elementi nella pagina vengono spesso generati dinamicamente con JavaScript. Ciò significa che non esiste markup statico (HTML o Razor) che corrisponde a questi elementi di pagina.
Con la versione 1.3, Controllo pagina può ora eseguire il mapping degli elementi aggiunti dinamicamente alla pagina al codice JavaScript corrispondente. Per illustrare questa funzionalità, si userà il modello Applicazione a pagina singola (SPA).
Nota
Il modello SPA richiede l'aggiornamento ASP.NET and Web Tools 2012.2.
In Visual Studio scegliere File>Nuovo progetto. A sinistra espandere Visual C#, selezionare Web e quindi selezionare ASP.NET applicazione Web MVC4. Fare clic su OK.
Nella finestra di dialogo Nuovo ASP.NET progetto MVC 4 selezionare Applicazione pagina singola.
In Esplora soluzioni espandere la cartella Visualizzazioni e quindi la cartella Home. Fare clic con il pulsante destro del mouse sul file Index.cshtml e scegliere Visualizza in Controllo pagina.
La prima cosa visualizzata nel browser Controllo pagina è una pagina di accesso. Fare clic su "Iscrizione" e creare un nome utente e una password. Dopo aver eseguito l'iscrizione, l'applicazione esegue l'accesso e crea un elenco da eseguire con alcuni elementi di esempio.
Fare clic su Controlla per inserire Controllo pagina in modalità di ispezione. Nel browser Controllo pagina fare clic su uno degli elementi da eseguire. Si noti che invece di essere evidenziato in blu, l'elemento è evidenziato in arancione, con "JS" accanto al nome dell'elemento. Ciò indica che l'elemento è stato creato dinamicamente tramite script.
Inoltre, viene visualizzata una sottolineatura arancione nella scheda Stack di chiamate . Questo indica che il riquadro Stack di chiamate contiene altre informazioni sull'elemento.
Fare clic sulla scheda Stack di chiamate . Il riquadro Stack di chiamate mostra lo stack di chiamate per la chiamata JavaScript che ha creato l'elemento. Le chiamate alle librerie esterne, ad esempio jQuery, sono compresse, in modo da poter visualizzare facilmente le chiamate allo script dell'applicazione.
Per visualizzare lo stack completo, incluse le chiamate alle librerie esterne, è possibile espandere i nodi etichettati "Librerie esterne":
Se si fa clic su un elemento nello stack di chiamate, Visual Studio apre il file di codice e evidenzia lo script corrispondente.
Vedere anche
Introduzione a ASP.NET MVC 4 con Visual Studio (sito Web ASP.net)
Introduzione Controllo pagina (video canale 9)