Come sappiamo, uno dei grandi vantaggi di Blazor è la possibilità di condividere class library con le API server side. Se per esempio consideriamo il template di default in Visual Studio, la pagina FetchData e il controller WeatherForecastController dialogano scambiandosi istanze di oggetti di tipo WeatherForecast:
public class WeatherForecast { public DateTime Date { get; set; } public int TemperatureC { get; set; } public string? Summary { get; set; } public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); }
Si tratta di un sistema ovviamente molto vantaggioso, perché questa classe rappresenta in pratica il contratto tra client e server, e ci consente di scrivere codice fortemente tipizzato in entrambi i layer applicativi.
Alle volte, tuttavia, potremmo avere la necessità di consumare un endpoint in cui il tipo risultante non sia noto a priori, immaginiamo per esempio un servizio che ci restituisca dati tabellari, i cui nomi dei field possono cambiare di volta in volta. In questo caso possiamo semplicemente effettuare il cast della risposta su un array di Dictionary:
private IDictionary<string, object>[]? results; protected override async Task OnInitializedAsync() { results = await Http.GetFromJsonAsync<IDictionary<string, object>[]>("GetMyData"); }
A questo punto, possiamo rappresentare questi dati in una tabella che costruiamo dinamicamente in base alle chiavi del dictionary:
@if (results == null) { <p><em>Loading...</em></p> } else if (results.Length == 0) { <p><em>No data</em></p> } else { <table class="table"> <thead> <tr> @foreach (var header in results.First().Keys) { <th>@header</th> } </tr> </thead> <tbody> @foreach (var result in results) { <tr> @foreach (var fieldName in results.Keys) { <td>@result[fieldName]</td> } </tr> } </tbody> </table> }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Evitare il flickering dei componenti nel prerender di Blazor 8
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Ottimizzazione dei block template in Angular 17
Short-circuiting della Pipeline in ASP.NET Core
Creare moduli CSS in React
Creare form tipizzati con Angular
Usare le collection expression per inizializzare una lista di oggetti in C#
Eseguire attività pianificate con Azure Container Jobs
Come migrare da una form non tipizzata a una form tipizzata in Angular
Utilizzare Tailwind CSS all'interno di React: primi componenti
Cambiare la chiave di partizionamento di Azure Cosmos DB
Reactive form tipizzati con FormBuilder in Angular