@page "/fetchdata"
|
@inject HttpClient Http
|
@using MudBlazorTemplates1.Shared
|
|
<PageTitle>Weather forecast</PageTitle>
|
|
<MudText Typo="Typo.h3" GutterBottom="true">Weather forecast</MudText>
|
<MudText Class="mb-8">This component demonstrates fetching data from the server.</MudText>
|
@if (forecasts == null)
|
{
|
<MudProgressCircular Color="Color.Default" Indeterminate="true" />
|
}
|
else
|
{
|
<MudTable Items="forecasts" Hover="true" SortLabel="Sort By" Elevation="0">
|
<HeaderContent>
|
<MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<WeatherForecast, object>(x=>x.Date)">Date</MudTableSortLabel></MudTh>
|
<MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureC)">Temp. (C)</MudTableSortLabel></MudTh>
|
<MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureF)">Temp. (F)</MudTableSortLabel></MudTh>
|
<MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.Summary!)">Summary</MudTableSortLabel></MudTh>
|
</HeaderContent>
|
<RowTemplate>
|
<MudTd DataLabel="Date">@context.Date</MudTd>
|
<MudTd DataLabel="Temp. (C)">@context.TemperatureC</MudTd>
|
<MudTd DataLabel="Temp. (F)">@context.TemperatureF</MudTd>
|
<MudTd DataLabel="Summary">@context.Summary</MudTd>
|
</RowTemplate>
|
<PagerContent>
|
<MudTablePager PageSizeOptions="new int[]{50, 100}" />
|
</PagerContent>
|
</MudTable>
|
}
|
|
|
@code {
|
private WeatherForecast[]? forecasts;
|
|
protected override async Task OnInitializedAsync()
|
{
|
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
|
}
|
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);
|
}
|
}
|
