W poprzednich częściach pokazałem podstawy wyświetlania danych w nowym projekcie .net core – różnic nie było. Dzisiaj przeczytacie jak wysłać dane od użytkownika na serwer.

Aby dodać nowy wpis na liście zadań musimy przejść do nowego widoku, w html służą do tego elementy <a>, które można wygenerować w taki oto sposób:

Ponieważ kod się powtarza skupiam się na tym co ważne. Razor trochę się zmienił, póki co zmiany są na lepsze i staje się bardziej czytelne.
Stworzenie nowego linku <a>  (@6) przypomina czysty html plus dodatkowe atrybuty. Dopisane tylko asp-action wygeneruje url do tego samego kontrolera w którym jesteśmy (Home). Znowu, na potrzeby demo, wszystko jest w jednym kontrolerze (wiem wiem – ja też nie lubię takich tłumaczeń, ale nie chce nie potrzebnie rozdmuchiwać prostego przykładu).

No to esencja. Na początku widać stworzenie statycznej listy zadań (@3) – dzięki temu pomiędzy poszczególnymi wywołaniami kontrolera możemy zachować stan aplikacji (uwaga, takie dane będą współdzielone pomiędzy wszystkich użytkowników naszej aplikacji) (uwaga2 tak się robi tylko na blogach)

Następnie metoda klasy/akcja kontrolera Index (@6) – oznaczona atrybutem HttpGet – oznacza, że zareaguje tylko gdy ktoś wejdzie na adres Home/Index oraz dodatkowo Http Verb musi być typu GET. Inne akcje zostaną zignorowane i zostanie wygenerowany wyjątek o nie znalezieniu akcji.
W tej akcji przekazujemy listę zadań na widok celem ich wyświetlenia.

Http Verb są w polskiej Wikipedii tłumaczone na metody http:
https://pl.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Metody_HTTP

Akcja AddTask (@12), ponownie oznaczona HttpGet – jej zadaniem jest tylko i wyłącznie wyświetlenie widoku z formularzem dodawania zadań.

Ponownie Akcja AddTask (@18) tym razem oznaczona HttpPost – czyli tylko adres ten sam /home/addtask ale dodatkowo wymagane jest aby http verb miał wartość POST.
Pojawia się także parametr TodoItem – jest to reprezentacja danych użytkownika wpisanych na formularzu. Logika akcje jest taka, jeśli przesłany model jest poprawny (@20) (poniżej opis klasy TodoItem) to dodaj go listy zadań i przekieruj na Index. Jeśli nie to zwróć użytkownikowi ponownie widok do dodawania zadań.

TodoItem przedstawia się tak

W naszym przypadku jest to opakowanie jednego pola tekstowego w klasę, oraz nadanie mu atrybutu Required. Co oznacza, że pole to jest wymagane i jeśli użytkownik pozostawi je puste, to pole IsValid w ModelState w kontrolerze zwracać będzie false. Linijka 20 w HomeController.

Teraz wreszcie sam widok AddTask:

Na początku (@1, @2) używane namespace oraz deklaracja modelu, z którego zamierzam korzystać. Brak referencji do wspólnego szablonu (layout) strony (@5). Deklaracja formy (@8) razem z akcją, kontrolerem oraz sposobem przesłania formularza na serwer (http verb). Wpis asp-controller jest nadmiarowy.
Ponownie zapis tworzenia uległ poprawie, z trzech linijek kodu do jednej (brawo ty microsoft!).
Niżej mamy element który odpowiedzialny będzie za wyświetlenie błędów walidacji. Przypominam: atrybut Required nad polem tekst, oraz sprawdzenie Model.IsValid.
Poniżej normalnie wyglądające elementy formularza label oraz input, zostały udekorowane atrybutami asp-for=”…” (@11, @12) których wartość na podstawie zadeklarowanego modelu (@2) zostały podpowiedziane na “Name” – czyli tak samo jak pole w klasie TodoItem (przypadek?).

Teraz po naciśnięci submit, na serwer zostanie przekazana wartość kontrolki name, w automagiczny sposób zamieniona na klasę TodoItem, a następnie wywołana zostanie metoda AddTask – resztę już znacie.

Jeśli chodzi o zmiany wprowadzone w Razorze póki co mi się podobają, nie widziałem jeszcze jak to wygląda przy większych projektach i większych widokach, ale po pierwszych przymiarkach ja jestem pozytywnie nastawiony.

Kod jest dostępny pod adresem: https://github.com/jstadnicki/mvc-core

Jeśli coś wydaje się nie jasne, niezrozumiałe lub coś ważnego zostało pominięte proszę o taką informacje. Kolejne części będą się pojawiać z kolejno przeczytanymi rozdziałami książki.

Czytaj poprzednie:
FileNewProject .NET Core asp mvc
Przesyłanie danych z formularza na serwer – nowy razor