Settembre 2018
Volume 33 numero 9
Il presente articolo è stato tradotto automaticamente.
Sviluppo Web - c# nel Browser con Blazor
Dal Jonathan Miller
Blazor è il nuovo framework di sperimentale di Microsoft che porta c# in qualsiasi browser senza un plug-in. Contiene il potenziale delle applicazioni a pagina singola moderne, combinati con la possibilità di usare c# e relativa libreria di classi base vast. Blazor accetta lo sviluppo in c# un nuovo livello. Si tratta della parte finale necessaria per rendere il linguaggio di uno strumento di sviluppo dello stack completo. Avrà tutta la potenza dei framework JavaScript più diffusi, ma in base ai linguaggi familiari, API e strumenti di Microsoft .NET Framework.
Se si provenire da uno sfondo tradizionale di Microsoft e si ha familiarità con ASP.NET Web Form o Model-View-Controller (MVC), ottenere rapidamente su Blazor è sorprendentemente facile, in particolare se confrontato con la mountain uno sviluppatore Microsoft deve salire per ottenere il equivalenti della Knowledge base in un framework JavaScript come Angular o React.
È importante comprendere che Blazor viene eseguito interamente all'interno del browser. Una volta un'app Blazor viene compilata, è essenzialmente un set di file al quale viene caricato nel browser e viene eseguito. A differenza delle tradizionali applicazioni ASP.NET, non è necessario per alcuna operazione speciale nel back-end per renderli disponibili. Un sito Blazor può essere gestito da qualsiasi server Web su qualsiasi piattaforma. Come per i client, qualsiasi browser che supporta lo standard WebAssembly supporta Blazor. Che include tutti i browser principali shipping oggi stesso.
Quando si esegue il browser, un'applicazione non è davvero tutto questo utile senza accesso a dati esterni e servizi. Proprio come le applicazioni a pagina singola JavaScript standard, App Blazor accedere a servizi Web utilizzando le API REST HTTP. È possibile creare tali API utilizzando gli strumenti Microsoft, ad esempio API Web o qualsiasi tecnologia che può presentare un endpoint HTTP REST. In questo articolo intende illustrano le possibilità di un'app Blazor chiamare servizi Web liberamente disponibili sul Web.
La configurazione dei
Il primo passaggio è ottenere la build corrente di Blazor installato. Al momento della stesura di questo articolo, Blazor è ancora un framework sperimentale non supportato. Pertanto, che è consigliabile non usarlo nell'ambiente di produzione. L'installazione Blazor è molto basso impatto, ma non è possibile installarlo nel computer di lavoro quotidiano. È consigliabile installarlo in un altro computer o un ambiente virtuale. I requisiti principali sono Visual Studio 2017 con carico di lavoro di sviluppo installato ASP.NET e Web, .NET Core SDK e l'estensione del linguaggio Blazor. Esaminare i passaggi su blazor.net "Get Started". Il team Blazor sta portando avanti molto rapidamente e in alcuni casi sono necessarie versioni specifiche di Visual Studio o .NET Core per usare la versione sperimentale corrente.
Crea una nuova App Blazor
Intende iniziare creando l'applicazione di esempio Blazor e quindi modificarlo per chiamare alcuni servizi Web. In primo luogo, è possibile creare una nuova applicazione Web ASP.NET Core in Visual Studio.
Successivamente, scegliere un'applicazione Blazor e fare clic su OK. Se non viene visualizzata Blazor nell'elenco di scelte, è possibile che manchino le estensioni di servizi di linguaggio Blazor.
L'applicazione Blazor predefinita che viene creato è tutt'altro che un'area di disegno vuota. Include un sito Web di base che utilizza il Bootstrap. Esistono alcune pagine di esempio che rendono semplice iniziare subito e in esecuzione e iniziano la sperimentazione con Blazor sin da subito. Nella scheda dati di recupero consente di visualizzare alcuni dati meteo fittizio da un file JSON incorporato nell'applicazione predefinita.
Come è anche possibile?
Il concetto di c# in esecuzione in un browser è stato un sogno dal concepimento di Silverlight di .NET. Funzionava bene per le applicazioni line-of-business, ma il fatto che è necessario un plug-in e il modello iOS emergenti non plug-in per browser limitato notevolmente il futuro di Silverlight.
Le funzionalità avanzate che rendono possibile questa tutti i sono un nuovo standard denominato WebAssembly (WASM). WASM è un formato binario che è possibile caricare ed eseguire direttamente nel browser e che è attualmente supportato da tutti i browser principali. Il team di Mono sta lavorando sodo su una versione del runtime .NET che viene eseguito in WASM. Blazor stesso è un framework che si basa su questa runtime di Mono per WASM. Quando viene compilato il progetto, viene compilato in un assembly .NET che ottiene caricato ed eseguito da Common Language Runtime (CLR) in esecuzione all'interno del browser. È importante comprendere che il codice .NET in esecuzione nel browser sia in esecuzione nella sandbox di sicurezza JavaScript stesso. Vedere il Cutting Edge Dino Esposito in questo numero per altre informazioni su questo argomento.
Recupero di una previsione meteo reali
La previsione è dati falsi caricati da un file incorporato nel progetto. Devo sostituire l'intera pagina di recupero dati con dati reali dai servizi Web reali. Innanzitutto, devo sostituire il codice HTML con qualcosa di semplice che richiede l'immissione di un codice postale. All'interno di FetchData.cshtml, sostituire il codice HTML con il codice seguente:
<h1>Weather Forecast</h1>
<div class="input-group col-md-3">
<input type="text" class="form-control" placeholder="Zip code"
bind="@zip" maxlength="5" />
<div class="input-group-append">
<button class="btn btn-secondary" type="button"
onclick="@GetWeather">Get Weather</button>
</div>
</div>
<br /><span style="color:red">@errorMessage</span>
Si noti che la sintassi Razor è incorporata nello script. Il @ codice segnali di accesso e delle variabili. Il tag di input consente di acquisire il codice postale e lo associa a una variabile denominata zip. Il tag di pulsante è il relativo metodo onclick associato @GetWeather, che chiama il metodo GetWeather nel linguaggio c# (non JavaScript). È inoltre disponibile un piccolo @errorMessage che può essere utilizzato se l'utente immette una ZIP non valido. Questi metodi e le variabili vengono definiti nel FetchData.cshtml stesso all'interno del blocco @functions:
@functions {
String zip = String.Empty;
String errorMessage = String.Empty;
private async Task GetWeather()
{
}
}
Esecuzione dell'applicazione ora offre all'utente la possibilità di immettere il codice postale e fare clic sul pulsante Get Weather. Il metodo GetWeather è vuoto, in modo che non accade nulla. Nella sezione successiva, aggiungerò il codice che chiama i servizi Web e recuperare le condizioni meteo correnti.
L'archiviazione dei dati restituiti dal servizio Web
Successivamente, devo alcune variabili locali nella mia pagina per archiviare i dati restituiti dalle chiamate al servizio Web. Le pagine Razor verranno associato a queste variabili in modo che i dati possono essere visualizzati. Queste variabili di richiedere di essere aggiunti al blocco @functions nella pagina, come illustrato di seguito:
Models.CurrentConditions currentcondition;
Models.Alert alerts;
Models.ZipLookup ziplookup;
String imgurl = "";
Aggiunta di un servizio Web CAP
Una volta che l'utente fa clic sul pulsante Get Weather, è necessario convalidare il codice postale nella casella di input. Il primo servizio Web pubblico è da zippopotam.us. Quando il http://api.zippopotam.us/US/\<zip> viene chiamato URL dell'API, e restituisce informazioni sul codice postale specificato. Le informazioni necessarie da questo servizio Web sono il nome di città e stato. Verranno visualizzati all'utente in previsione di questi dati e l'abbreviazione dello stato verrà utilizzato nelle successive chiamate al servizio Web. Il codice del servizio Web dovrebbe essere familiare, perché usa la classe HttpClient familiare.
Chiamare il servizio Web di ricerca codice postale lo script nel figura 1 Scarica le informazioni sul codice postale da API e la inserisce in una variabile locale denominata ziplookup. È possibile usare questa variabile nel codice Razor per visualizzare il nome della città. L'API restituirà un'eccezione se il file ZIP non è valido. In tal caso, viene visualizzato un messaggio di errore.
Figura 1 recupero delle informazioni di codice postale
try
{
errorMessage = "";
var zipresultStr = await Http.GetStringAsync($"http://api.zippopotam.us/US/{zip}");
zipresultStr = zipresultStr.Replace("place name", "city").Replace(
"state abbreviation", "stateabbr");
ziplookup = JsonUtil.Deserialize<Models.ZipLookup>(zipresultStr);
}
catch
{
errorMessage = "Invalid zip code";
return;
}
Deserializza i dati di ricerca codice postale nel frammento di codice precedente, sono il recupero dei dati dal servizio Web e deserializzarlo in una classe Models.ZipLookup. Si tratta di una classe che ho creato per adattarle allo schema dei dati JSON restituiti:
public class ZipLookup
{
public Place[] places { get; set; }
}
public class Place
{
public String city { get; set; }
public String stateabbr { get; set; }
}
Viene restituiti molti più dati, ma ho creato solo le proprietà e classi per i dati da usare. L'implementazione corrente presenta problemi di gestione di spazi nei nomi di campo JSON. Come soluzione alternativa temporanea, sto utilizzando Replace per rimuovere gli spazi.
Visualizzazione di città e stato ora che i dati sono stati scaricati e deserializzati, è possibile visualizzarlo nella pagina Web. Blocco di codice seguente visualizza l'abbreviazione di città e stato nella pagina:
<h1>
@ziplookup.places[0].city, @ziplookup.places[0].stateabbr<br />
</h1>
Aggiunta del servizio Web di condizioni meteo
Il servizio Web successivo recupererà le condizioni correnti per il codice postale dal openweathermap.org servizio Web. È necessario creare un account per ricevere un tasto speciale che viene usato quando si chiama il servizio Web.
Chiamare il servizio Web condizioni correnti la chiamata per ottenere le condizioni correnti funziona in modo analogo la chiamata al servizio Web precedente. L'eccezione è il parametro apikey nella chiamata. Il servizio openweathermap.org richiede una chiave per autenticare il chiamante:
currentcondition = await Http.GetJsonAsync<Models.CurrentConditions>(
$"http://api.openweathermap.org/data/2.5/
weather?zip={zip},us&appid=<apikey>");
imgurl = $"http://openweathermap.org/img/w/{currentcondition.weather[0].icon}.png";
Il risultato della chiamata condizioni corrente viene archiviato in una variabile locale denominata currentcondition. Tale risultato passa inoltre il nome di un'icona da visualizzare che corrisponde alle condizioni correnti. Il nome dell'immagine viene codificato nella variabile imgurl in modo che può essere visualizzato nella pagina Web.
La deserializzazione dei dati di condizioni correnti ancora una volta, i dati JSON non elaborati devono essere deserializzato in una classe in modo che può essere utilizzato, come illustrato nella Figura2. La definizione della classe sembra un po' strana, ma è progettato per corrispondere allo schema dei dati JSON restituiti dal servizio Web. È molto più i dati restituiti da quelli mostrati di seguito. Solo le proprietà che sono necessari devono essere implementati.
Figura 2 deserializzando i dati JSON non elaborato
public class CurrentConditions
{
public CurrentConditions() { }
public List<Weather> weather { get; set; }
public Main main { get; set; }
public String name { get; set; }
}
public class Weather
{
public String main { get; set; }
public String description { get; set; }
public String icon { get; set; }
}
public class Main
{
public decimal temp { get; set; }
public decimal temp_min { get; set; }
public decimal temp_max { get; set; }
}
Convertire le temperature le temperature restituite dal servizio Web sono in gradi Kelvin, pertanto i valori devono essere convertiti in gradi Fahrenheit e arrotondato. La temperatura corrente verrà arrotondata al più vicino decimo di un livello. Verranno arrotondate le temperature minima e massima per il livello di intero più vicino.
private decimal ConvertKtoF(decimal kelvin, int decimals)
{
return Math.Round(kelvin * 9 / 5 - 459.67M, decimals);
}
Visualizzare le condizioni correnti script di Razor in figura 3 verranno ora aggiornate per includere la temperatura attuale, il valore alto e basso, una descrizione delle condizioni correnti e un'icona che corrisponde alla condizioni correnti. Si noti come le temperature vengono passate alla funzione ConvertKtoF creata in precedenza.
Figura 3, aggiornamento dello Script di Razor
<h1>
@ziplookup.places[0].city, @ziplookup.places[0].stateabbr<br />
@ConvertKtoF(currentcondition.main.temp, 1) °F
</h1>
<h2>
@currentcondition.weather[0].main <img src="@imgurl" style="display:inline" />
</h2>
<h3>
<span style="display:inline;color:red">HI
@ConvertKtoF(currentcondition.main.temp_max, 0) °F</span> /
<span style="color:blue">LO @ConvertKtoF(
currentcondition.main.temp_min, 0) °F
</span><br />
</h3>
Aggiunta di avvisi del servizio meteo nazionali
Il servizio Web finale permette di recuperare gli avvisi dalla National meteo Service (NWS) per lo stato in che è il codice postale.
Chiamare il servizio Web NWS il blocco di codice seguente recupera tutti gli avvisi correnti di bollettini meteo negativi dal NWS:
alerts = await Http.GetJsonAsync<Models.Alert>(
$"https://api.weather.gov/alerts/active/area/{ziplookup.places[0].stateabbr}");
L'abbreviazione dello stato recuperato dal ziplookup servizio Web viene utilizzato per filtrare gli avvisi allo stesso stato.
La deserializzazione dei dati degli avvisi NWS dati JSON devono essere deserializzato in un set di classi che si allinea con lo schema JSON NWS. Il frammento di codice nel figura 4 contiene gli avvisi restituiti dal servizio Web NWS.
Figura 4 deserializzando i dati JSON
public class Alert
{
public String type { get; set; }
public String title { get; set; }
public Feature[] features { get; set; }
}
public class Feature
{
public String type { get; set; }
public PropertyInfo properties { get; set; }
}
public class PropertyInfo
{
public String headline { get; set; }
public String description { get; set; }
public DateTime effective { get; set; }
public DateTime expires { get; set; }
}
Visualizzazione avvisi gravi meteo ora che gli avvisi sono stati recuperati, il codice nel figura5 viene aggiunta alla visualizzazione Razor per visualizzarli. Crea una tabella per visualizzare gli avvisi e Usa @foreach per scorrere in ciclo e visualizzare ogni avviso. La data di validità, titolo e descrizione vengono visualizzati per ogni avviso. Se non sono presenti avvisi per lo stato, la tabella sarà vuota.
Figura 5 visualizzazione meteo degli avvisi
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Alert</th>
</tr>
</thead>
<tbody>
@foreach (var alert in alerts.features)
{
<tr>
<td>@alert.properties.effective.ToString("MM/dd/yyyy hh:mmt")</td>
<td>
<span style="font-weight:600">@alert.properties.headline</span><br />
<span>@alert.properties.description</span>
</td>
</tr>
}
</tbody>
</table>
Riassumendo
L'applicazione è stata completata, come illustrato nella figura 6. Viene eseguito interamente nel browser e chiama tre servizi Web esterni per visualizzare le condizioni meteo correnti e gli avvisi.
.png "L'applicazione finita")
Figura 6, l'applicazione finita
Pubblicazione dell'applicazione Blazor
Pubblicazione di un'applicazione Blazor è semplice quanto la pubblicazione di qualsiasi altra applicazione di ASP.NET. Questa operazione da Visual Studio verrà compilato il codice dell'applicazione e generare un'applicazione Web completa con tutte le finale HTML, CSS, script e file binari di Blazor necessiti. Un buon punto di partenza consiste nell'usare la pubblicazione per l'opzione relativa alla cartella. Tutti i file dell'applicazione di ottenere inseriti. Se si osserva all'interno della cartella Dist, troverai una pagina index. htm standard e una cartella di Framework. Nella cartella Framework contiene tutti gli assembly compilati, nonché i componenti di runtime Blazor e Mono.
Passaggi successivi
Blazor è ancora un framework sperimentale, anche se il team viene spostata in avanti con una frequenza molto rapida di rilascio. La Guida di orientamento Blazor illustra in dettaglio un framework completo con il routing, componenti, layout e altro ancora. È in fase di sviluppo il progetto Blazor Apri in GitHub. Visita la pagina blazor.net per mantenere aggiornati e iniziare a lavorare con i bit correnti.
Jonthan Millerè un architetto senior. Egli è stato lo sviluppo di prodotti nello stack Microsoft per un decennio e programmazione in .NET fin dall'inizio. Waldman è uno sviluppatore di prodotto dello stack completo con competenze nelle tecnologie front-end (Windows Form, Windows Presentation Foundation, Silverlight, ASP.NET, AngularJS/Bootstrap), middleware (servizi di Windows, Web API) e back-end (server SQL Azure).
Si ringraziano i seguenti esperti tecnici che ha esaminato in questo articolo: Dino Esposito (BaxEnergy), Daniel Roth (Microsoft)