ASP.NET Core: View Components – kontrolki z logiką w tle

Czas czytania ~ 110 sekund

Kolejną z nowości wprowadzonych w ASP.NET Core są View Components, kontrolki, które możemy osadzać w naszych widokach i dodatkowo zasilać logiką pisaną w C#.

Nie ma się co oszukiwać, kontrolki server-side nie są jakimś najnowszym trendem, ale czasami coś takiego może nam się przydać. Przykładem takiej kontrolki może być fragment górnego menu strony, na którym chcemy wyświetlać informacje o pogodzie.

View Component składa się z klasy w C# i pliku widoku pisanego przy użyciu Razora. Ich położenie w projekcie powinno być następujące:

awd

Rozpocznijmy od C#. Informacje o pogodzie można pobierać przez API REST-owe np. z openweathermap.org. Zakładamy konto, dostajemy klucz do API i możemy  odpytywać o pogodę.

Logika

Klasa komponentu dziedziczy po ViewComponent i wystawia publiczną asynchroniczną metodę InvokeAsync.

public class WeatherInfoViewComponent : ViewComponent
{
    private ILogger<WeatherInfoViewComponent> _logger;
    const string ApiKey = "...";
    const string Url = "http://api.openweathermap.org/data/2.5/weather";

    public WeatherInfoViewComponent(ILogger<WeatherInfoViewComponent> logger)
    {
        _logger = logger;
    }

    public async Task InvokeAsync(string cityName)
    {
        var cityEncoded = WebUtility.UrlEncode(cityName);
        var client = new HttpClient();
        var json = await client.GetStringAsync($"{Url}?q={cityEncoded}&appid={ApiKey}");
        var weatherInfo = JsonConvert.DeserializeObject<WeatherInfo>(json);
        var fstInfo = weatherInfo.weather.First();

        var iconBytes = await client.GetByteArrayAsync(
            $"http://openweathermap.org/img/w/{fstInfo.icon}.png");

        var vm = new WeatherViewModel()
        {
            CityName = cityName,
            WeatherConditions = fstInfo.description,
            Icon = Convert.ToBase64String(iconBytes),
            Temperature = weatherInfo.main.temp - 273.15f
        };

        _logger.LogInformation($"It's {vm.Temperature} in {vm.CityName}");

        return View(vm);
    }
}

Konstruktor zostanie zasilony z kontenera IoC. InvokeAsync może przyjmować parametry, które później przekażemy z widoku. Pobieramy asynchronicznie najpierw dane o pogodzie a później ikonę odpowiednią dla aktualnej pogody. Na koniec wołamy metodę View przekazując jej dane – model dla widoku. A więc kolejny raz asynchroniczność i DI na pierwszym miejscu w nowym ASP.NET.

Widok

Widok jest niczym innym jak plikiem Razora o nazwie Default.cshtml, podczas wywołania kontrolki, ASP.NET Core poszuka go sobie w folderze Views/Shared/Components. Cała reszta to zwykły Razor.

@Model ViewComponents.WeatherViewModel

< div style="color:white;">
    It's @Model.WeatherConditions, @Model.Temperature < sup>o</ sup>C here in @Model.CityName
    < img src="data:image;base64,@Model.Icon" />
</ div>

Użycie

Wyrenderowanie w sposób asynchroniczny ViewComponentu polega na wywołaniu statycznej metody InvokeAsync z klasy Component.

< div class="container">
    @await Component.InvokeAsync("WeatherInfo", new { cityName = "Kraków" })
</ div>

Efekt:

ddw

View Components to fajny sposób na oddzielenie kodu w C# od widoku i zamknięcie takich logicznych części w jedną całość. Mogą mieć zastosowanie we wszelkich komponentach wyświetlanych w Layoucie strony, takich jak:

  • informacje o użytkowniku
  • stan konta / liczba produktów w koszyku
  • notowanie giełdowe naszej spółki
  • menu strony

i tym podobne.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s