Blazor tečajna lista

Blazor omogućuje izradu interaktivnih web sučelja koristeći C# umjesto JavaScripta. Blazor aplikacije se sastoje od višekratnih komponenti web korisničkog sučelja implementiranih pomoću C#, HTML-a i CSS-a. I klijentski i poslužiteljski kod napisan je u C#, što vam omogućuje dijeljenje koda .

Blazor je značajka ASP.NET-a, popularnog okvira za razvoj weba koji proširuje .NET razvojnu platformu  za izradu web aplikacija. 

Primjer Blazor server aplikacije koja dohvaća json Tečajnu listu HNB-a i konvertira valute prilikom upisa vrijednosti u text box

@page "/"
@using System.Text.Json
@using System.Text.Json.Serialization;
@inject IHttpClientFactory ClientFactory



<h1>Tečajna lista</h1>




<form>


    <div class="form-group row">
        <label for="Hrk" class="col-sm-2 col-form-label">Unesite vrijednost u HRK</label>
        <div class="col-sm-3">
            <input id="Hrk" class="form-control" @bind="@inputValue" @oninput="OnInputEvent" />
        </div>
    </div>
</form>

<table class="table">
    <thead>
        <tr>
            <th scope="col">Država</th>
            <th scope="col">Valuta</th>
            <th scope="col">Srednji za devize</th>
            <th scope="col">Jedinica</th>
            <th scope="col">Konvertirano</th>
        </tr>
    </thead>
    <tbody>


        @if (getBranchesError)
        {

            <tr>
                <td>Unable to get API. </td>

            </tr>
        }
        else
        {

            @foreach (var valuta in valute)
            {

                if (valuta.Valuta == "EUR")
                {
                    Eur = Convert.ToDecimal(valuta.Srednji);

                }
                if (valuta.Valuta == "USD")
                {
                    Usd = Convert.ToDecimal(valuta.Srednji);

                }
                <tr>
                    <td>@valuta.Drzava </td>
                    <td>@valuta.Valuta </td>
                    <td>@valuta.Srednji</td>
                    <td>@valuta.Jedinica</td>
                    <td>@(Math.Round((inputValue / Convert.ToDecimal(valuta.Srednji) / valuta.Jedinica),6) ) @valuta.Valuta</td>
                </tr>
            }

        }
    </tbody>
</table>


@code {
    private IEnumerable<TecajnaLista> valute = Array.Empty<TecajnaLista>();
    private bool getBranchesError;
    private bool shouldRender;
    private decimal Eur;
    private decimal Ekn;
    private decimal Usd;
    private int broj;
    private decimal inputValue = 10.15M;


    private void OnInputEvent(ChangeEventArgs changeEvent)
    {
        try
        {
            inputValue = decimal.Parse(changeEvent.Value.ToString());
            Ekn = inputValue / Eur;
        }
        catch
        {
            inputValue = 0;
            Ekn = 0;
        }

    }

    protected override bool ShouldRender() => shouldRender;

    protected override async Task OnInitializedAsync()
    {
        var request = new HttpRequestMessage(HttpMethod.Get,
            "https://api.hnb.hr/tecajn/v1");
        request.Headers.Add("Accept", "application/vnd.github.v3+json");
        request.Headers.Add("User-Agent", "HttpClientFactory-Sample");

        var client = ClientFactory.CreateClient();

        var response = await client.SendAsync(request);

        if (response.IsSuccessStatusCode)
        {
            using var responseStream = await response.Content.ReadAsStreamAsync();
            valute = await JsonSerializer.DeserializeAsync
            <IEnumerable<TecajnaLista>>(responseStream);
        }
        else
        {
            getBranchesError = true;
        }

        
        shouldRender = true;
    }

    public class TecajnaLista
    {
        [JsonPropertyName("Valuta")]
        public string Valuta { get; set; }
        [JsonPropertyName("Srednji za devize")]
        public string Srednji { get; set; }
        [JsonPropertyName("Država")]
        public string Drzava { get; set; }
        [JsonPropertyName("Jedinica")]
        public int Jedinica { get; set; }
    }
}