Rendering di siti Pagine Web ASP.NET (Razor) per dispositivi mobili
Questo articolo descrive come creare pagine in un sito Pagine Web ASP.NET (Razor) che eseguirà il rendering appropriato nei dispositivi mobili.
Contenuto dell'esercitazione:
- Come usare una convenzione di denominazione per specificare che una pagina è progettata in modo specifico per i dispositivi mobili.
Versioni software usate nell'esercitazione
- Pagine Web ASP.NET (Razor) 3
Questa esercitazione funziona anche con Pagine Web ASP.NET 2.
Pagine Web ASP.NET consente di creare visualizzazioni personalizzate per il rendering del contenuto in dispositivi mobili o altri dispositivi.
Il modo più semplice per creare una pagina specifica del dispositivo in un sito Pagine Web ASP.NET consiste nell'usare un modello di denominazione dei file simile al seguente: FileName.Mobile.cshtml. È possibile creare due versioni di una pagina, ad esempio una denominata MyFile.cshtml e una denominata MyFile.Mobile.cshtml. In fase di esecuzione, quando un dispositivo mobile richiede MyFile.cshtml, ASP.NET esegue il rendering del contenuto da MyFile.Mobile.cshtml. In caso contrario, viene eseguito il rendering di MyFile.cshtml .
Nell'esempio seguente viene illustrato come abilitare il rendering per dispositivi mobili aggiungendo una pagina di contenuto per i dispositivi mobili. Page1.cshtml contiene contenuto più una barra laterale di spostamento. Page1.Mobile.cshtml contiene lo stesso contenuto, ma omette la barra laterale.
In un sito Pagine Web ASP.NET creare un file denominato Page1.cshtml e sostituire il contenuto corrente con il markup seguente.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 13em; margin-right: 10em; } </style> </head> <body> <div id="navigation"> <h3>Related Sites</h3> <ul> <li><a href="http://www.adventure-works.com/">Adventure Works</a></li> <li><a href="http://www.contoso.com/">Contoso, Ltd</a></li> <li><a href="http://www.treyresearch.net/">Trey Research</a></li> </ul> </div> <div id="content"> <h1>Lorem ipsum dolor</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </body> </html>Creare un file denominato Page1.Mobile.cshtml e sostituire il contenuto esistente con il markup seguente. Si noti che la versione mobile della pagina omette la sezione di spostamento per migliorare il rendering in uno schermo più piccolo.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #content { margin-left: 2em; margin-right: 5em; } </style> </head> <body> <div id="content"> <h1>Lorem ipsum dolor</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </body> </html>Eseguire un browser desktop e passare a Page1.cshtml.
Eseguire un browser per dispositivi mobili (o un emulatore di dispositivi mobili) e passare a Page1.cshtml. Si noti che non si include .mobile. come parte dell'URL. Anche se la richiesta è page1.cshtml, ASP.NET esegue il rendering di Page1.Mobile.cshtml.
Nota
Per testare le pagine per dispositivi mobili, è possibile usare un simulatore di dispositivi mobili in esecuzione in un computer desktop. Questo strumento consente di testare le pagine Web in quanto sembrano sui dispositivi mobili, ovvero in genere con un'area di visualizzazione molto più piccola. Un esempio di simulatore è il componente aggiuntivo Switcher agente utente per Mozilla Firefox, che consente di emulare vari browser per dispositivi mobili da una versione desktop di Firefox.