Le principali funzionalità in Pagine Web ASP.NET 2

Articolo
06/16/2023

Questo articolo offre una panoramica delle nuove funzionalità principali nel Pagine Web ASP.NET 2 RC, un framework di programmazione Web leggero incluso in Microsoft WebMatrix 2 RC.

Cosa è incluso:

Installazione di WebMatrix

Funzionalità nuove e avanzate

Modifiche per la versione RC

Modifiche per la versione Beta

Uso dei modelli di sito nuovi e aggiornati

Convalida dell'input utente

Abilitazione degli account di accesso da Facebook e altri siti tramite OAuth e OpenID

Aggiunta di Mappe usando l'helper mappe

Esecuzione di applicazioni pagine Web affiancate

Pagine di rendering per dispositivi mobili

Risorse aggiuntive

Nota

In questo argomento si presuppone che si usi WebMatrix per usare il codice Pagine Web ASP.NET 2. Tuttavia, come per le pagine Web 1, è anche possibile creare siti Web Pages 2 usando Visual Studio, che offre funzionalità e debug avanzati di IntelliSense. Per usare pagine Web in Visual Studio, è prima necessario installare Visual Studio 2010 SP1, Visual Web Developer Express 2010 SP1 o Visual Studio 11 Beta. Installare quindi il ASP.NET MVC 4 Beta, che include modelli e strumenti per la creazione di applicazioni MVC 4 e Pagine Web 2 ASP.NET in Visual Studio.

Ultimo aggiornamento: 18 giugno 2012

Installazione di WebMatrix

Per installare Pagine Web, è possibile usare la Installazione guidata piattaforma Web Microsoft, che è un'applicazione gratuita che semplifica l'installazione e la configurazione delle tecnologie correlate al Web. Si installerà il WebMatrix 2 Beta, che include Web Pages 2 Beta.

Passare alla pagina di installazione per la versione più recente del programma di installazione della piattaforma Web:

https://www.microsoft.com/web/downloads/platform.aspx

Nota

Se è già installato WebMatrix 1, questa installazione viene aggiornata in WebMatrix 2 Beta. È possibile eseguire siti Web creati usando la versione 1 o 2 nello stesso computer. Per altre informazioni, vedere la sezione Relativa all'esecuzione di applicazioni pagine Web affiancate.
Scegliere Installa ora.

Se si usa Internet Explorer, passare al passaggio successivo. Se si usa un browser diverso, ad esempio Mozilla Firefox o Google Chrome, viene richiesto di salvare il file Webmatrix.exe nel computer. Salvare il file e quindi fare clic su di esso per avviare il programma di installazione.
Eseguire il programma di installazione e scegliere il pulsante Installa . In questo modo viene installato WebMatrix e pagine Web.

Funzionalità nuove e avanzate

Modifiche per la versione RC (giugno 2012)

La versione RC di giugno 2012 ha alcune modifiche apportate all'aggiornamento della versione Beta rilasciata nel marzo 2012. Queste modifiche sono:

Un Validation.AddFormError metodo è stato aggiunto all'helper Validation . Ciò è utile se si esegue la convalida manualmente , ad esempio si convalida un valore passato nella stringa di query e si vuole aggiungere un messaggio di errore che può essere visualizzato dal Html.ValidationSummary metodo . Per altre informazioni, vedere la sezione Convalida dei dati che non provengono direttamente dagli utenti nella convalida dell'input utente nei siti Pagine Web ASP.NET (Razor).
La funzionalità per il raggruppamento e la minificazione sono stati rimossi dagli assembly di base Pagine Web ASP.NET 2. Di conseguenza, l'helper Assets elencato più avanti in questo documento non è disponibile. È invece necessario installare il pacchetto NuGet di ottimizzazione ASP.NET . Per altre informazioni, vedere Bundling and Minifying Assets in un sito Pagine Web ASP.NET (Razor).
Sono stati aggiunti assembly aggiuntivi per supportare Pagine Web ASP.NET 2. L'unico effetto evidente di questa modifica è che potrebbero essere visualizzati più assembly nella cartella bin di un sito dopo aver creato un sito o distribuito un sito in un provider di hosting.

Modifiche per la versione beta (febbraio 2012)

La versione Beta rilasciata nel febbraio 2012 ha solo alcune modifiche dalla versione Beta rilasciata nel dicembre 2011. Queste modifiche sono:

Razor supporta ora gli attributi condizionali. In un elemento HTML, se si imposta un attributo su un valore che viene risolto nel codice del server su false o null, ASP.NET non esegue il rendering dell'attributo. Si supponga, ad esempio, di avere il markup seguente per una casella di controllo:
```
<input type="checkbox"
name="check1"
value="check1"
checked="@checked1" />
```
Se il valore di checked1 si risolve in o in nullfalse , l'attributo non viene eseguito il checked rendering. Rappresenta una modifica di rilievo.
Il Validation.GetHtml metodo è stato rinominato in Validation.For. Si tratta di un cambiamento di rilievo; Validation.GetHtml non funzionerà nella versione Beta.
È ora possibile includere l'operatore ~ nel markup per fare riferimento alla radice del sito senza usare la Href funzione. Ovvero, il parser Razor può ora trovare e risolvere l'operatore ~ senza richiedere una chiamata esplicita al Hrefmetodo . Il Href metodo funziona ancora, quindi non si tratta di una modifica di rilievo.

Ad esempio, se in precedenza si disponeva di markup simile al seguente:

<a href="@Href("~/Default.cshtml")">Home</a>

È ora possibile usare il markup come illustrato di seguito:

<a href="~/Default.cshtml">Home</a>
Il Scripts helper per la gestione delle risorse (risorsa) è stato sostituito con l'helper Assets , che ha metodi leggermente diversi, ad esempio quanto segue:
- Per Scripts.Add, usare Assets.AddScript
- Per Scripts.GetScriptTags, usare Assets.GetScripts
  
  Si tratta di un cambiamento di rilievo; la Scripts classe non è disponibile nella versione Beta. Gli esempi di codice in questo documento che usano la gestione degli asset sono stati aggiornati con questa modifica.

Uso dei modelli di sito nuovi e aggiornati

Il modello di sito iniziale è stato aggiornato in modo che venga eseguito in Pagine Web 2 per impostazione predefinita. Include anche le nuove funzionalità seguenti:

Rendering di pagine descrittive per dispositivi mobili. Tramite l'uso di stili CSS e del selettore, il @mediasito iniziale offre un rendering migliorato delle pagine su schermi più piccoli, incluse le schermate dei dispositivi mobili.
Opzioni di appartenenza e autenticazione migliorate. È possibile consentire agli utenti di accedere al sito usando i propri account da altri siti di social networking, ad esempio Twitter, Facebook e Windows Live. Per altre informazioni, vedere la sezione Abilitazione degli accessi da Facebook e altri siti usando OAuth e OpenID .
Elementi HTML5.

Il nuovo modello di sito personale consente di creare un sito Web contenente un blog personale, una pagina foto e una pagina Twitter. È possibile personalizzare un sito in base al modello di sito personale eseguendo le operazioni seguenti:

Modificare l'aspetto del sito modificando il file di layout (_SiteLayout.cshtml) e il file di stili (Site.css).
Installare pacchetti NuGet che aggiungono funzionalità al sito. Per informazioni su come installare i pacchetti, tra cui la libreria helper Web ASP.NET, vedere l'esercitazione sull'installazione degli helper.

Per accedere al modello sito personale, scegliere Modelli nella schermata Avvio rapido WebMatrix.

Nella finestra di dialogo Modelli scegliere il modello sito personale .

La pagina di destinazione del modello sito personale consente di seguire i collegamenti per configurare il blog, la pagina Twitter e la pagina foto.

Convalida dell'input utente

In Pagine Web 1, per convalidare l'input utente nei moduli inviati, si usa la System.Web.WebPages.Html.ModelState classe . Questa esercitazione è illustrata in diversi esempi di codice nell'esercitazione Pagine Web 1 denominata Uso dei dati. È comunque possibile usare questo approccio in Pagine Web 2. Tuttavia, Pagine Web 2 offre anche strumenti migliorati per convalidare l'input utente:

Nuove classi di convalida, incluse System.Web.WebPages.ValidationHelper e System.Web.WebPages.Validator, che consentono di eseguire attività di convalida potenti con alcune righe di codice.
Facoltativamente, la convalida lato client, che fornisce commenti e suggerimenti immediati all'utente anziché richiedere un round trip al server per verificare gli errori di convalida. Per motivi di sicurezza, la convalida viene eseguita nel server anche se i controlli sono stati eseguiti in anticipo nel client.

Per usare le nuove funzionalità di convalida, eseguire le operazioni seguenti:

Nel codice della pagina registrare un elemento da convalidare usando i metodi dell'helper Validation : Validation.RequireField, Validation.RequireFields (per registrare più elementi da richiedere) o Validation.Add. Il Add metodo consente di specificare altri tipi di controlli di convalida, ad esempio il controllo dei tipi di dati, il confronto di voci in campi diversi, controlli di lunghezza stringa e modelli (usando espressioni regolari). Di seguito sono riportati alcuni esempi:

Validation.RequireField("text1");
Validation.RequireField("text1", "The text1 field is required");
Validation.RequireFields("text1", "text2", "text3");

Validation.Add("text1", Validation.StringLength(5));
Validation.Add("textDate", Validation.DateTime("Enter a date"));
Validation.Add("textCount", Validation.Integer("Enter a number"));
Validation.Add("textCount",
Validation.Range(1, 10, "Enter a value between 1 and 10"));

Per visualizzare un errore specifico del campo, chiamare Html.ValidationMessage nel markup per ogni elemento da convalidare:

<input type="text" name="course"
value="@Request["course"]" />
@Html.ValidationMessage("course")

Per visualizzare un riepilogo (<ul> elenco) di tutti gli errori nella pagina, Html.ValidationSummary nel markup:

@Html.ValidationSummary()

Questi passaggi sono sufficienti per implementare la convalida lato server. Se si vuole aggiungere la convalida lato client, eseguire le operazioni seguenti.

Aggiungere i riferimenti al file di script seguente all'interno della <head> sezione di una pagina Web. I primi due riferimenti di script puntano ai file remoti in un server di rete per la distribuzione del contenuto (RETE CDN). Il terzo riferimento punta a un file di script locale. Le app di produzione devono implementare un fallback quando la rete CDN non è disponibile. Testare il fallback.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Il modo più semplice per ottenere una copia locale della libreria jquery.validate.unobtrusive.min.js consiste nel creare un nuovo sito Pagine Web in base a uno dei modelli di sito, ad esempio il sito iniziale. Il sito creato dal modello include jquery.validate.unobtrusive.js file nella relativa cartella Script, da cui è possibile copiarlo nel sito.

Se il sito Web usa una pagina _SiteLayout per controllare il layout della pagina, è possibile includere questi riferimenti di script in tale pagina in modo che la convalida sia disponibile per tutte le pagine del contenuto. Se si vuole eseguire la convalida solo in pagine specifiche, è possibile usare gestione asset per registrare gli script solo in queste pagine. A tale scopo, chiamare Assets.AddScript(path) nella pagina che si vuole convalidare e fare riferimento a ognuno dei file di script. Aggiungere quindi una chiamata alla Assets.GetScripts pagina _SiteLayout per eseguire il rendering dei tag registrati <script> . Per altre informazioni, vedere la sezione Registrazione di script con Gestione asset.

Nel markup per un singolo elemento chiamare il Validation.For metodo. Questo metodo genera attributi che jQuery può associare per fornire la convalida lato client. Ad esempio:

<input type="text" name="course"
value="@Request["course"]"
@Validation.For("course")
/>
@Html.ValidationMessage("course")

Nell'esempio seguente viene illustrata una pagina che convalida l'input dell'utente in un modulo. Per eseguire e testare questo codice di convalida, eseguire questa operazione:

Creare un nuovo sito Web usando uno dei modelli di sito WebMatrix 2 che includono una cartella Script, ad esempio il modello di sito iniziale.
Nel nuovo sito creare una nuova pagina cshtml e sostituire il contenuto della pagina con il codice seguente.
Eseguire la pagina in un browser. Immettere valori validi e non validi per visualizzare gli effetti sulla convalida. Ad esempio, lasciare vuoto un campo obbligatorio o immettere una lettera nel campo Crediti .

@{
// Specify what fields users must fill in.
Validation.RequireFields("course", "professorname", "credits");
// Add validation criteria.  Here, require that input to Credits is an integer.
Validation.Add("credits", Validator.Integer());

if (IsPost)  {
// Wrap the postback code with a validation check.
if (Validation.IsValid()) {
    var course = Request["course"];
    var professorName = Request["professorname"];
    var credits = Request["credits"];
    // Display valid input values.
    <text>
        You entered: <br />
        Class: @course <br />
        Professor: @professorName <br />
        Credits: @credits <br />
    </text>
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing Validation in ASP.NET Web Pages version 2</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"></script>
<script  src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script src="@Href("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
</head>
<body>
<form method="post" action="">
<!-- Display a summary message about any validation issues. -->
@Html.ValidationSummary()
<fieldset>
  <legend>Add Class</legend>
<div>
  <label for="Course">Class:</label>
  <!-- Validation.For("course") adds validation attributes to the input element. -->
  <input type="text" name="Course" value="@Request["course"]"  @Validation.For("course") />

  <!-- Display a field-specific message about validation issues. -->
  @Html.ValidationMessage("course")
</div>

<div>
  <label for="ProfessorName">Professor:</label>
  <input type="text" name="ProfessorName" value="@Request["professorname"]"
      @Validation.For("professorname") />
  @Html.ValidationMessage("professorname")
</div>

<div>
  <label for="Credits">Credits:</label>
  <input type="text" name="Credits" value="@Request["credits"]" @Validation.For("credits") />
  @Html.ValidationMessage("credits")
</div>

<div>
  <label>&nbsp;</label>
  <input type="submit" value="Submit" class="submit" />
</div>
  </fieldset>
</form>
</body>
</html>

Ecco la pagina quando un utente invia un input valido:

Ecco la pagina quando un utente lo invia con un campo obbligatorio lasciato vuoto:

Ecco la pagina quando un utente lo invia con un valore diverso da un intero nel campo Crediti :

Per altre informazioni, vedere i post di blog seguenti:

Convalida aggiornata in Pagine Web v2 Nozioni di base sull'aggiunta della convalida tramite l'helper Validation (solo lato server)
Convalida aggiornata in Pagine Web v2, Parte 2 Aggiunta della convalida lato client.
Convalida aggiornata in Pagine Web v2, Parte 3 Formattazione degli errori di convalida.

Registrazione di script tramite Asset Manager

Gestione asset è una nuova funzionalità che è possibile usare nel codice del server per registrare e eseguire il rendering degli script client. Questa funzionalità è utile quando si usa il codice da più file (ad esempio pagine di layout, pagine di contenuto, helper e così via) combinate in una singola pagina in fase di esecuzione. Gestione asset coordina i file di origine per assicurarsi che i file di script vengano a cui si fa riferimento correttamente e in modo efficiente nella pagina di rendering, indipendentemente dai file di codice da cui vengono chiamati o dal numero di chiamate. Gestione asset esegue anche il rendering dei <script> tag nel posto giusto in modo che la pagina possa essere caricata rapidamente (senza scaricare script durante il rendering) e per evitare errori che possono verificarsi se gli script vengono chiamati prima del completamento del rendering.

Si supponga, ad esempio, di creare un helper personalizzato che chiama un file JavaScript e chiamare questo helper in tre posizioni diverse nel codice della pagina contenuto. Se non si usa gestione asset per registrare le chiamate di script nel helper, tre tag diversi <script> che puntano allo stesso file di script verranno visualizzati nella pagina di rendering. Inoltre, a seconda della posizione in cui i <script> tag vengono inseriti nella pagina di rendering, gli errori possono verificarsi se lo script tenta di accedere a determinati elementi di pagina prima del caricamento completo della pagina. Se si usa gestione asset per registrare lo script, evitare questi problemi.

È possibile registrare uno script con gestione asset eseguendo questa operazione:

Nel codice che deve fare riferimento allo script chiamare il Assets.AddScript metodo .
In una pagina _SiteLayout chiamare il metodo per eseguire il Assets.GetScripts rendering dei <script> tag.

Nota

Inserire le chiamate all'ultimo Assets.GetScripts elemento nell'elemento <body> della pagina _SiteLayout . Ciò consente di caricare più velocemente la pagina e di evitare errori di script.

Nell'esempio seguente viene illustrato il funzionamento del gestore asset. Il codice contiene gli elementi seguenti:

Helper personalizzato denominato MakeNote. Questo helper esegue il rendering di una stringa all'interno di una casella eseguendo il wrapping di un elemento intorno a esso con uno stile con un div bordo e aggiungendo "Note:" a esso. Il helper chiama anche un file JavaScript che aggiunge il comportamento di runtime alla nota. Anziché fare riferimento allo script con un <script> tag, l'helper registra lo script chiamando Assets.AddScript .
File JavaScript. Questo è il file chiamato dall'helper e aumenta temporaneamente la dimensione del carattere degli elementi delle note durante un mouseover evento.
Pagina del contenuto, che fa riferimento alla pagina _SiteLayout , esegue il rendering di alcuni contenuti nel corpo e quindi chiama l'helper MakeNote .
Pagina _SiteLayout . Questa pagina fornisce un'intestazione comune e una struttura di layout di pagina. Include anche una chiamata a Assets.GetScripts, ovvero il modo in cui gestione asset esegue il rendering delle chiamate script in una pagina.

Per eseguire l'esempio:

Creare un sito Web Pages 2 vuoto. Per questo è possibile usare il modello di sito vuoto WebMatrix.
Creare una cartella denominata Script nel sito.
Nella cartella Script creare un file denominato Test.js, copiare il contenuto Test.js dall'esempio e salvare il file.
Creare una cartella denominata App_Code nel sito.
Nella cartella App_Code creare un file denominato Helpers.cshtml, copiare il codice di esempio in esso e salvarlo in una cartella denominata App_Code nella cartella radice.
Nella cartella radice del sito creare un file denominato _SiteLayout.cshtml, copiare l'esempio in esso e salvare il file.
Nella radice del sito creare un file denominato ContentPage.cshtml, aggiungere il codice di esempio e salvarlo.
Eseguire ContentPage in un browser. La stringa passata al MakeNote helper viene eseguita come nota boxed.
Passare il puntatore del mouse sulla nota. Lo script aumenta temporaneamente le dimensioni del carattere della nota.
Visualizzare l'origine della pagina di cui è stato eseguito il rendering. A causa della posizione in cui è stata inserita la chiamata a , il tag sottoposto <script> a Assets.GetScriptsrendering che chiama Test.js è l'ultimo elemento nel corpo della pagina.

Test.js

function UpdateNoteStyle(id) {
var theNote = document.getElementById(id);
theNote.style.fontSize = "150%";
}
function ReturnNoteStyle(id) {
var theNote = document.getElementById(id);
theNote.style.fontSize = "inherit";
}

Helpers.cshtml

@helper MakeNote(string content, string noteid) {
Assets.AddScript("~/Scripts/Test.js");

<div id="@noteid" style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;"
 onmouseover="UpdateNoteStyle('@noteid')" onmouseout="ReturnNoteStyle('@noteid')">
  <p>
  <strong>Note</strong>&nbsp;&nbsp; @content
   </p>
</div>
}

_SiteLayout.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
    <div class="content-wrapper">
        <h1>Contoso Ltd.</h1>
    </div>
</header>
<div id="body">
    <section class="content-wrapper main-content clear-fix">
        @RenderBody()
    </section>
</div>
@Assets.GetScripts()
</body>
</html>

ContentPage.cshtml

@{
Layout = "~/_SiteLayout.cshtml";
}
<p>
Nullam scelerisque facilisis placerat. Fusce a augue
erat, malesuada euismod dui.
</p>
@Helpers.MakeNote("Latin is fun to translate.", "note1")

Lo screenshot seguente mostra ContentPage.cshtml in un browser quando si tiene premuto il puntatore del mouse sulla nota:

Abilitazione degli account di accesso da Facebook e altri siti tramite OAuth e OpenID

Pagine Web 2 offre opzioni avanzate per l'appartenenza e l'autenticazione. Il miglioramento principale è che sono presenti nuovi provider OAuth e OpenID . Usando questi provider, è possibile consentire agli utenti di accedere al sito usando le credenziali esistenti da Facebook, Twitter, Windows Live, Google e Yahoo. Ad esempio, per accedere usando un account Facebook, gli utenti possono semplicemente scegliere un'icona di Facebook, che li reindirizza alla pagina di accesso di Facebook in cui immettono le informazioni utente. Possono quindi associare l'account di accesso di Facebook al proprio account nel sito. Un miglioramento correlato alle funzionalità di appartenenza alle pagine Web è che gli utenti possono associare più account di accesso (inclusi gli account di accesso dai siti di social networking) a un singolo account nel sito Web.

Questa immagine mostra la pagina Di accesso dal modello di sito iniziale , in cui un utente può scegliere un'icona Facebook, Twitter o Windows Live per abilitare l'accesso con un account esterno:

È possibile abilitare l'appartenenza OAuth e OpenID usando solo alcune righe di codice. I metodi e le proprietà usati per usare i provider OAuth e OpenID si trovano nella WebMatrix.Security.OAuthWebSecurity classe .

Tuttavia, invece di usare il codice per abilitare gli account di accesso da altri siti, è consigliabile iniziare a usare il nuovo modello di sito di avvio incluso in WebMatrix 2 Beta. Il modello di sito iniziale include un'infrastruttura di appartenenza completa, completa con una pagina di accesso, un database di appartenenza e tutto il codice necessario per consentire agli utenti di accedere al sito usando credenziali locali o quelle da un altro sito.

Come abilitare gli account di accesso usando i provider OAuth e OpenID

Questa sezione fornisce un esempio di come consentire agli utenti di accedere da siti esterni (Facebook, Twitter, Windows Live, Google o Yahoo) a un sito basato sul modello di sito iniziale . Dopo aver creato un sito di avvio, eseguire questa operazione (i dettagli seguono):

Per i siti che usano un provider OAuth (Facebook, Twitter e Windows Live), creare un'applicazione nel sito esterno. In questo modo vengono fornite le chiavi dell'applicazione necessarie per richiamare la funzionalità di accesso per tali siti. Per i siti che usano un provider OpenID (Google, Yahoo), non è necessario creare un'applicazione. Per tutti questi siti, è necessario disporre di un account per accedere e creare applicazioni per sviluppatori.

Nota

Le applicazioni Windows Live accettano solo un URL live per un sito Web funzionante, quindi non è possibile usare un URL del sito Web locale per testare gli account di accesso.
Modificare alcuni file nel sito Web per specificare il provider di autenticazione appropriato e inviare un account di accesso al sito da usare.

Per abilitare gli account di accesso di Google e Yahoo:

Nel sito Web modificare la pagina _AppStart.cshtml e aggiungere le due righe di codice seguenti nel blocco di codice Razor dopo la chiamata al WebSecurity.InitializeDatabaseConnection metodo . Questo codice consente sia i provider Google che Yahoo OpenID.
```
OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Google);
OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Yahoo);
```

Nella pagina ~/Account/Login.cshtml rimuovere i commenti dal blocco di markup seguente <fieldset> alla fine della pagina. Per annullare ilcommentazione del codice, rimuovere i @* caratteri che precedono e seguire il <fieldset> blocco. Il blocco di codice risultante è simile al seguente:

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

Aggiungere un <input> elemento per il provider Google o Yahoo al <fieldset> gruppo nella pagina ~/Account/Login.cshtml . Il gruppo aggiornato <fieldset> con <input> elementi per Google e Yahoo è simile all'esempio seguente:

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
<input type="submit" name="provider" id="yahoo" value="Yahoo" title="Log in using your Yahoo account." />
<input type="submit" name="provider" id="google" value="Google" title="Log in using your Google account." />
</fieldset>

Nella pagina ~/Account/AssociateServiceAccount.cshtml aggiungere <input> elementi per Google o Yahoo al <fieldset> gruppo alla fine del file. È possibile copiare gli stessi <input> elementi appena aggiunti alla <fieldset> sezione nella pagina ~/Account/Login.cshtml .

La pagina ~/Account/AssociateServiceAccount.cshtml nel modello di sito iniziale può essere usata se si vuole creare una pagina in cui gli utenti possono associare più account di accesso da altri siti con un singolo account nel sito Web.

Ora è possibile testare gli account di accesso di Google e Yahoo.

Eseguire la pagina default.cshtml del sito e scegliere il pulsante Accedi .
Nella pagina Account di accesso , nella sezione Usa un altro servizio per accedere scegliere il pulsante Invia Google o Yahoo . In questo esempio viene usato l'account di accesso google.

La pagina Web reindirizza la richiesta alla pagina di accesso di Google.
Immettere le credenziali per un account Google esistente.
Se Google chiede se si vuole consentire a Localhost di usare le informazioni dall'account, fare clic su Consenti.

Il codice usa il token Google per autenticare l'utente e quindi torna a questa pagina nel sito Web. Questa pagina consente agli utenti di associare l'account di accesso Google a un account esistente nel tuo sito Web oppure possono registrare un nuovo account nel tuo sito per associare l'account di accesso esterno a.
Scegliere il pulsante Associa . Il browser torna alla home page dell'applicazione.

Per abilitare gli account di accesso di Facebook:

Passare al sito degli sviluppatori di Facebook (accedere se non si è già connessi).
Scegliere il pulsante Crea nuova app e quindi seguire le istruzioni per assegnare un nome e creare la nuova applicazione.
Nella sezione Selezionare la modalità di integrazione dell'app con Facebook, scegliere la sezione Sito Web .
Compilare il campo URL del sito con l'URL del sito, ad esempio http://www.example.com. Il campo Dominio è facoltativo; è possibile usare questa opzione per fornire l'autenticazione per un intero dominio , ad esempio example.com.

Nota

Se si esegue un sito nel computer locale con un URL come http://localhost:12345 (dove il numero è un numero di porta locale), è possibile aggiungere questo valore al campo URL del sito per il test del sito. Tuttavia, qualsiasi volta che il numero di porta del sito locale cambia, sarà necessario aggiornare il campo URL sito dell'applicazione.
Scegliere il pulsante Salva modifiche .
Scegliere di nuovo la scheda App e quindi visualizzare la pagina iniziale per l'applicazione.
Copiare i valori ID app e Segreto app per l'applicazione e incollarli in un file di testo temporaneo. Questi valori verranno passati al provider Facebook nel codice del sito Web.
Uscire dal sito per sviluppatori di Facebook.

Ora si apportano modifiche a due pagine nel sito Web in modo che gli utenti possano accedere al sito usando i propri account Facebook.

Nel sito Web modificare la pagina _AppStart.cshtml e annullare ilcommentazione del codice per il provider OAuth di Facebook. Il blocco di codice non commentato è simile al seguente:
```
OAuthWebSecurity.RegisterOAuthClient(
BuiltInOAuthClient.Facebook,
consumerKey: "",   // for Facebook, consumerKey is called AppID in the SDK
consumerSecret: "");
```
Copiare il valore ID app dall'applicazione Facebook come valore del parametro (all'interno delle consumerKey virgolette).
Copiare il valore segreto dell'app dall'applicazione Facebook come valore del consumerSecret parametro.
Salvare e chiudere il file.

Modificare la pagina ~/Account/Login.cshtml e rimuovere i commenti dal <fieldset> blocco vicino alla fine della pagina. Per annullare ilcommentazione del codice, rimuovere i @* caratteri che precedono e seguire il <fieldset> blocco. Il blocco di codice con commenti rimosso è simile al seguente:

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

Salvare e chiudere il file.

Ora puoi testare l'account di accesso di Facebook.

Eseguire la pagina default.cshtml del sito e scegliere il pulsante Login .
Nella pagina Account di accesso selezionare l'icona Facebook nella sezione Usa un altro servizio per accedere.

La pagina Web reindirizza la richiesta alla pagina di accesso di Facebook.
Accedere a un account Facebook.

Il codice usa il token Facebook per autenticarti e quindi torna a una pagina in cui puoi associare l'account di accesso di Facebook all'account di accesso del tuo sito. Il nome utente o l'indirizzo di posta elettronica vengono compilati nel campo Email nel modulo.
Scegliere il pulsante Associa .

Il browser torna alla home page e viene eseguito l'accesso.

Per abilitare gli account di accesso di Twitter:

Passare al sito degli sviluppatori di Twitter.
Scegliere il collegamento Crea un'app e quindi accedere al sito.
Nel modulo Crea un'applicazione immettere i campi Nome e Descrizione .
Nel campo WebSite immettere l'URL del sito, ad esempio http://www.example.com.

Nota

Se si sta testando il sito in locale (usando un URL come http://localhost:12345), Twitter potrebbe non accettare l'URL. Tuttavia, potrebbe essere possibile usare l'indirizzo IP di loopback locale ( ad esempio http://127.0.0.1:12345). Ciò semplifica il processo di test dell'applicazione in locale. Tuttavia, ogni volta che il numero di porta del sito locale cambia, sarà necessario aggiornare il campo WebSite dell'applicazione.
Nel campo URL di callback immettere un URL per la pagina nel sito Web a cui si vuole che gli utenti tornino dopo l'accesso a Twitter. Ad esempio, per inviare utenti alla home page del sito iniziale (che riconoscerà lo stato di accesso), immettere lo stesso URL immesso nel campo WebSite .
Accettare i termini e scegliere il pulsante Crea applicazione Twitter .
Nella pagina di destinazione delle applicazioni personali scegliere l'applicazione creata.
Nella scheda Dettagli scorrere verso il basso e scegliere il pulsante Crea token di accesso personale.
Nella scheda Dettagli copiare i valori Consumer Key e ConsumerSecret per l'applicazione e incollarli in un file di testo temporaneo. Questi valori verranno passati al provider Twitter nel codice del sito Web.
Uscire dal sito Twitter.

Ora si apportano modifiche a due pagine nel sito Web in modo che gli utenti possano accedere al sito usando i propri account Twitter.

Nel sito Web modificare la pagina _AppStart.cshtml e annullare ilcommentazione del codice per il provider OAuth di Twitter. Il blocco di codice non commentato è simile al seguente:
```
OAuthWebSecurity.RegisterOAuthClient(
BuiltInOAuthClient.Twitter,
consumerKey: "",
consumerSecret: "");
```
Copiare il valore di Consumer Key dall'applicazione Twitter come valore del parametro (all'interno delle consumerKey virgolette).
Copiare il valore Consumer Secret dall'applicazione Twitter come valore del consumerSecret parametro.
Salvare e chiudere il file.

<fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

Salvare e chiudere il file.

È ora possibile testare l'account di accesso twitter.

Eseguire la pagina default.cshtml del sito e scegliere il pulsante Login .
Nella pagina Account di accesso selezionare l'icona Twitter nella sezione Usa un altro servizio per accedere.

La pagina Web reindirizza la richiesta a una pagina di accesso Twitter per l'applicazione creata.
Accedere a un account Twitter.
Il codice usa il token Twitter per autenticare l'utente e quindi restituisce una pagina in cui è possibile associare l'account di accesso all'account del sito Web. Il nome o l'indirizzo di posta elettronica vengono compilati nel campo Email nel modulo.
Scegliere il pulsante Associa .

Il browser torna alla home page e viene eseguito l'accesso.

Aggiunta di mappe tramite l'helper mappe

Le pagine Web 2 includono aggiunte alla libreria degli helper Web ASP.NET, ovvero un pacchetto di componenti aggiuntivi per un sito Pagine Web. Uno di questi è un componente di Microsoft.Web.Helpers.Maps mapping fornito dalla classe. È possibile usare la Maps classe per generare mappe in base a un indirizzo o a un set di coordinate di longitudine e latitudine. La Maps classe consente di chiamare direttamente nei motori di mappa popolari, tra cui Bing, Google, MapQuest e Yahoo.

Per usare la nuova Maps classe nel sito Web, è prima necessario installare la versione 2 della libreria helpers Web. A tale scopo, passare alle istruzioni per installare la versione attualmente rilasciata della libreria ASP.NET Web Helpers e installare la versione 2.

I passaggi per l'aggiunta del mapping a una pagina sono uguali indipendentemente dal motore di mappa che si chiama. È sufficiente aggiungere un riferimento al file JavaScript alla pagina di mapping e quindi aggiungere una chiamata che esegue il rendering dei <script> tag nella pagina. Quindi nella pagina di mapping chiamare il motore di mappa che si vuole usare.

Nell'esempio seguente viene illustrato come creare una pagina che esegue il rendering di una mappa in base a un indirizzo e a un'altra pagina che esegue il rendering di una mappa in base alle coordinate di longitudine e latitudine. L'esempio di mapping degli indirizzi usa Google Maps e l'esempio di mapping delle coordinate usa Bing Maps. Si notino gli elementi seguenti nel codice:

Chiamata a Assets.AddScript nella parte superiore delle due pagine di mapping. Questo metodo aggiunge un riferimento al file jquery-1.6.2.min.js incluso nel modello del sito starter e richiesto dalla Maps classe .
Chiamata al Assets.GetScripts metodo nel file di layout. Questo metodo esegue il rendering del <script> tag nelle due pagine di mapping.
Chiamata ai @Maps.GetGoogleHtml metodi e @Maps.GetBingHtml nelle pagine di mapping. Per eseguire il mapping di un indirizzo, è necessario passare una stringa di indirizzo. Per eseguire il mapping delle coordinate, è necessario passare le coordinate di longitudine e latitudine. Per il motore di Bing Maps, è anche necessario passare una chiave (che si ottiene gratuitamente eseguendo l'iscrizione al sito Bing Maps Developers). I metodi per gli altri motori di mappa funzionano in modo simile (@Maps.GetYahooHtml, @Maps.GetMapQuestHtml).

Per creare pagine di mapping:

Creare un sito Web basato sul modello di sito iniziale .
Creare un file denominato MapAddress.cshtml nella radice del sito. Questa pagina genererà una mappa in base a un indirizzo passato.

Copiare il codice seguente nel file sovrascrivendo il contenuto esistente.

@{
Layout = "~/_MapLayout.cshtml";
Assets.AddScript("~/Scripts/jquery-1.6.2.min.js");
}

<div id="navigation">
<h3>Map an Address:</h3>
<form method="post" action="" id="coordinates" style="width: 320px">
<fieldset>
  <div>
    <label for="address">Address:</label>
    <input style="width: 300px" type="text"  name="address"  value="@Request["address"]"/>
    <input type="submit" value="Map It!" />
   </div>
</fieldset>
</form>
</div>
<div id="content">
@if(IsPost) {
var theAddress = Request["address"];
@Maps.GetGoogleHtml(theAddress,
    width: "800",
    height: "800")
}
</div>

Creare un file denominato _MapLayout.cshtml nella radice del sito. Questa pagina sarà la pagina di layout per le due pagine di mapping.

Copiare il codice seguente nel file sovrascrivendo il contenuto esistente.

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />

<title></title>
<style type="text/css">
    #navigation {
        position: absolute;
        top: 1em;
        left: 3em;
        width: 18em;
    }
    #content {
        margin-top: 10em;
        margin-left: 3em;
    }
</style>
</head>
<body>
  @RenderBody()

  @*
Call the Assets helper to render tags for the Maps helper. For
releases after Web Pages 2 Beta, call Assets.GetScripts().
  *@
  @Assets.GetScripts()
</body>
</html>

Creare un file denominato MapCoordinates.cshtml nella radice del sito. Questa pagina genererà una mappa in base a un set di coordinate passate.

Copiare il codice seguente nel file sovrascrivendo il contenuto esistente.

@{
Layout = "~/_MapLayout.cshtml";
Assets.AddScript("~/Scripts/jquery-1.6.2.min.js");
}

<div id="navigation">
<h3>Map a set of coordinates:</h3>
<form method="post" action="" id="coordinates">
<fieldset>
<div>
    <label for="latitude">Latitude:&nbsp;&nbsp;&nbsp;</label>
    <input type="text"  name="latitude" value="@Request["latitude"]"/>
</div>
<div>
    <label for="longitude">Longitude:</label>
    <input type="text" name="longitude" value="@Request["longitude"]"/>
</div>
<div>
    <input type="submit" value="Map It!" />
</div>
</fieldset>
</form>
</div>
<div id="content">
@if(IsPost) {
var theLatitude = Request["latitude"];
var theLongitude = Request["longitude"];
@Maps.GetBingHtml("Ag6C5Ci9VUGz9AIhQyJ7YNwGraanqwy5-V3LK1qGDpdEVPV-MUPBryG18ELoC6g6",
    "",
    theLatitude,
    theLongitude,
    width: "800",
    height: "800")
}
</div>

Per testare le pagine di mapping:

Eseguire il file MapAddress.cshtml della pagina.
Immettere una stringa di indirizzo completa, tra cui un indirizzo di strada, uno stato o una provincia e un codice postale, quindi scegliere il pulsante Mappa it . La pagina esegue il rendering di una mappa da Google Maps:
Trovare un set di coordinate di latitudine e longitudine per una posizione specifica.
Eseguire la pagina MapCoordinates.cshtml. Immettere le coordinate e quindi scegliere il pulsante Mappa. La pagina esegue il rendering di una mappa da Bing Maps:

Esecuzione di applicazioni pagine Web affiancate

Pagine Web 2 aggiunge la possibilità di eseguire applicazioni affiancate. In questo modo è possibile continuare a eseguire le applicazioni Pagine Web 1, creare nuove applicazioni Pagine Web 2 ed eseguirle tutti nello stesso computer.

Ecco alcune cose da ricordare quando si installa web Pages 2 Beta con WebMatrix:

Per impostazione predefinita, le applicazioni Pagine Web esistenti verranno eseguite come applicazioni versione 2 nel computer. Gli assembly per la versione 2 vengono installati nella gaC e verranno usati automaticamente.
Se si vuole eseguire un sito usando Pagine Web versione 1 (anziché il valore predefinito, come nel punto precedente), è possibile configurare il sito per eseguire questa operazione. Se il sito non ha già un file web.config nella radice del sito, crearne uno nuovo e copiare il codice XML seguente in esso sovrascrivendo il contenuto esistente. Se il sito contiene già un file web.config , aggiungere un <appSettings> elemento come quello seguente alla <configuration> sezione.
```
<?xml version="1.0"?>
<configuration>
<appSettings>
<add key="webPages:Version" value="1.0"/>
</appSettings>
</configuration>
```
'- Se non si specifica una versione nel file diweb.config , un sito viene distribuito come sito versione 2. Gli assembly della versione 2 vengono copiati nella cartella bin nel sito distribuito.
Le nuove applicazioni create usando i modelli di sito in Web Matrix versione 2 Beta includono gli assembly pagine Web versione 2 nella cartella bin del sito.

In generale, è sempre possibile controllare quale versione di Pagine Web usare con il sito usando NuGet per installare gli assembly appropriati nella cartella bin del sito. Per trovare pacchetti, visitare NuGet.org.

Pagine di rendering per dispositivi mobili

Le pagine Web 2 consentono di creare visualizzazioni personalizzate per il rendering del contenuto in dispositivi mobili o altri dispositivi.

Lo System.Web.WebPages spazio dei nomi contiene le classi seguenti che consentono di usare le modalità di visualizzazione: DefaultDisplayMode, DisplayInfoe DisplayModes. È possibile usare queste classi direttamente e scrivere codice che esegue il rendering dell'output corretto per dispositivi specifici.

In alternativa, è possibile creare pagine specifiche del dispositivo usando un modello di denominazione file simile al seguente: FileName.Mobile.cshtml. Ad esempio, è possibile creare due versioni di una pagina, una denominata MyFile.cshtml e una denominata MyFile.Mobile.cshtml. In fase di esecuzione, quando un dispositivo mobile richiede MyFile.cshtml, Pagine Web 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.

Per compilare ed eseguire l'esempio di codice:

In un sito Pagine Web creare un file denominato Page1.cshtml e copiare il contenuto Page1.cshtml nell'esempio.
Creare un file denominato Page1.Mobile.cshtml e copiare il contenuto Page1.Mobile.cshtml nell'esempio. Si noti che la versione mobile della pagina omette la sezione di spostamento per migliorare il rendering in uno schermo più piccolo.
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 questa volta le pagine Web eseguono il rendering della versione mobile della pagina.

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.

Page1.cshtml

<!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>

Page1.Mobile.cshtml

<!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>

Page1.cshtml eseguito il rendering in un browser desktop:

Page1.Mobile.cshtml visualizzato in una visualizzazione simulatore apple iPhone nel browser Firefox. Anche se la richiesta è page1.cshtml, l'applicazione esegue il rendering di Page1.Mobile.cshtml.

Risorse aggiuntive

risorse Pagine Web ASP.NET 1

Nota

La maggior parte delle pagine Web 1 programmazione e risorse API si applica ancora alle pagine Web 2.

Introduzione alla programmazione Pagine Web ASP.NET

risorse WebMatrix

Sito microsoft WebMatrix
Avvio dello sviluppo Web con Microsoft WebMatrix(include un'applicazione Pagine Web di esempio full-length)

Condividi tramite

Le principali funzionalità in Pagine Web ASP.NET 2

Installazione di WebMatrix

Funzionalità nuove e avanzate

Modifiche per la versione RC (giugno 2012)

Modifiche per la versione beta (febbraio 2012)

Uso dei modelli di sito nuovi e aggiornati

Convalida dell'input utente

Registrazione di script tramite Asset Manager

Abilitazione degli account di accesso da Facebook e altri siti tramite OAuth e OpenID

Come abilitare gli account di accesso usando i provider OAuth e OpenID

Aggiunta di mappe tramite l'helper mappe

Esecuzione di applicazioni pagine Web affiancate

Pagine di rendering per dispositivi mobili

Risorse aggiuntive

risorse Pagine Web ASP.NET 1

risorse WebMatrix

Commenti e suggerimenti

Risorse aggiuntive