ActionResult – ASP.NET Core Web API

W Web Api przy użyciu dotnet core dane mogą być zwrócone na kilka sposobów.

Zwracany typ

Pierwszy, najprostszy sposób, metoda w kontrolerze zwraca dane typu np. IEnumerable<string>. Najszybsze i najprostsze rozwiązania, niestety, jeśli chcemy zwrócić jakąś inną odpowiedź http niż OK to za bardzo nie mamy takiej możliwości. Korzystając na przykład z return BadRequest() dostaniemy błąd kompilacji że zwracany typ się nie zgadza.

IActionResult

IActionResult zezwala na zwracanie różnych odpowiedzi http w zależności od potrzeb. W tym wypadku, nie jesteśmy w stanie zwrócić już bezpośrednio kolekcji, musimy ją opakować w odpowiedź OK().

IActionResult<T>

Typ wprowadzony w ASP.NET Core 2.1, łączy dwa powyższe rozwiązania. Korzystając z tego typu, mamy gwarancję że nasza metoda zwróci na pewno żądany typ, na przykład IEnumerable<string>. Dodatkowo w zależności od zapotrzebowania możemy zwrócić inne odpowiedzi http.

Kod z posta dostępny na github – link

Vue.js – Podstawy cz.2 – v-if, computed oraz watched properties.

Dzisiaj będzie o vue.js, jakiś czas temu napisałem post o podstawach vue, chciałbym dołożyć jeszcze parę brakujących rzeczy, zanim przejdziemy do single file componentslink do pierwszego posta.

Warunki

Warunki w programowaniu pojawiają się od samego początku, jeśli warunek to wykonaj akcję. W vue podobny mechanizm również istnieje. Możemy wyświetlić jakiś fragment, lub ukryć w zależności od danego warunku. Utwórzmy zatem aplikację w której będziemy mieli jedną właściwość show. Jeśli wartość show będzie true wyświetlimy div z zawartością Show, w przeciwnym wypadku z zawartością Hide.

Należy zwrócić uwagę na to co się dzieję w przycisku. Dyrektywa v-on:click oznacza że przypisujemy co ma się dziać po wywołaniu click, w naszym wypadku jest to zmiana wartości show, można tutaj przypisywać fragmenty kodu lub metody. Nie będę pisał więcej o zdarzeniach bo na to będzie poświęcony osobny post.

Computed Properties

Kolejną ciekawą funkcjonalnością w vue są computed properties. Czasami same wartości w data mogą być niewystarczające. Może się zdarzyć tak, że musimy jeszcze w jakiś sposób obrobić dane, zanim będziemy chcieli z nich skorzystać. Z pomocą przychodzą nam właśnie computed properties. Załóżmy że chcemy wyświetlić liczbę, wprowadzoną przez użytkownika, podniesioną do kwadratu. Utwórzmy w data pole value oraz computed property square, jest to po prostu funkcja. W html tworzymy input, do którego przypiszemy value oraz wyświetlimy wartość square. Aby przypisać wartość do input z vue musimy skorzystać z v-model.

Watched Properties

Ostatnią rzeczą dzisiaj będą watched properties. Te właściwości (funkcje) służą do śledzenia wartości jakiegoś pola. Chcemy rozwinąć poprzedni przykład, jeśli wprowadzona liczba jest parzysta, to wypiszmy w konsoli tekst parzysta, w przeciwnym wypadku wypiszmy nieparzysta. Tworzymy kolejne pole w naszej aplikacji, obok data oraz computed – watch. Następnie podajemy jaką właściwość śledzimy i jaka funkcja ma się wywołać przy zmianie wartości.

Wystarczy tylko ustawić śledzenie, nic więcej nie musimy zmieniać w kodzie.

Kod dostępny na github – link

Vue.js – Podstawy + pierwszy komponent

Wstęp

Witam wszystkich serdecznie! Jest to mój pierwszy post na blogu. Nie będę się rozpisywał na temat mojej osoby bo to nie miejsce na takie rzeczy, jeśli chodzi o informacje o mnie to znajdziecie je w tym miejscu. W ramach projektu nad który pracuję miałem za zadanie napisać panel webowy do zarządzania klientami oraz zamówieniami. Z racji że głównie zajmuję się back-endem i nie śledziłem najnowszych trendów w jakim kierunku zmierza front-end, to mój wybór na początku padł na ASP.NET Core MVC. W trakcie jak aplikacja powstawała zacząłem się zastanawiać czy ja to wszystko potrzebuję? Może dałoby się skorzystać z czegoś innego? No i tak, o angularze to pewnie każdy słyszał, część moich znajomych opowiadało mi o react.js, gdzieś też przewijało się to vue.js, stwierdziłem że dam szansę i spróbuję. Ani trochę tego nie żałuję.

Wyświetlanie właściwości

Vue js służy do budowania stron. Główny nacisk jest kładziony na tworzenie komponentów z których składa się później całą stronę. Doskonale się nadaje do tworzenia SPA – Single-Page Applications. Zasada jest prosta, tworzymy obiekt „aplikacji” i mówimy w obrębie jakiego elementu ta aplikacja ma działać. #app odpowiada elementowi div z id=”app”, w data przechowujemy właściwości z których aplikacja będzie korzystać.

Powyższy kod wyświetli nam na ekranie wartość właściwości message – Hello Vue!

Komponenty

Przejdźmy do troszkę ciekawszego przykładu, tworzenie własnego komponentu. Cała idea Vue.js opiera się na komponentach. Dla przykładu utworzymy sobie komponent z jedną właściwością, który będzie przyjmował imię i wyświetlał wiadomość Hello imię. Rejestrujemy komponent greetings-component z którego później będziemy korzystać, właściwość props oznacza pola które można przekazać i z których można korzystać w obrębie komponentu, w tym wypadku interesuje nas tylko imię. Template jest to szablon html z jakiego ma składać się nasz komponent. Po utworzeniu komponentu możemy zacząć z niego korzystać, w html tworzymy znaczniki z taką samą nazwą jak nasz komponent i przypisujemy właściwości. Poniżej w kodzie zrobiłem przypisanie na dwa sposoby, można zrobić v-bind:nazwaWłaściwości lub skorzystać ze skróconej wersji :nazwaWłaściwości.

Powyższy kod wyświetli nam na ekranie Hello Jakub oraz Hello Dawid.

Pętla

Jako dodatek na koniec, przedstawię jeszcze działanie pętli w Vue. Komponent zostaje bez zmian, jedynie zmiany będą w naszym app oraz w html. Z racji że korzystamy z pętli to potrzebujemy jakąś kolekcję, utworzyłem kolekcję imion w app.

Link do całego przykładu:

https://github.com/brzooz/Blog/tree/master/Vue/FirstComponent