ASP.NET MVC Przesyłanie (przekazywanie) danych z kontrolera do widoku z użyciem funkcji ViewBag
W niniejszym wpisie pokaże jak, za pomocą funkcji ViewBag, można przesłać (przekazać) dane z kontrolera do widoku. Stworzymy listę kilku pracowników firmy i prześlemy ją do widoku w celu wyświetlenia.
W tym celu tworzymy nowy projekt ASP.NET Web Application (jak to zrobić przeczytasz <<<tutaj>>>)
Kolejny krok to stworzenie modelu danych. Czyli musimy określić jakie dane i jakiego typu będziemy przechowywać. W tym celu klikamy prawym przyciskiem myszy (dalej PPM) na katalogu Models w oknie Solution Explorer i wybieramy opcję Add ® Class
Następnie w oknie Add New Item wybieramy opcję Class, w polu Name wprowadzamy nazwę pracownik i potwierdzamy przyciskiem Add.
Teraz określimy jakie dane o pracowniku będziemy przechowywać. W oknie solution explorer rozwijamy gałąź Models gdzie powinien znajdować się plik pracownik.cs, klikamy na ten plik. W ognie głównym Visual Studio otworzy się nam nowa zakładka pracownik.cs w którym zobaczymy następujący kod.
|
|
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace ViewBag.Models { public class pracownik { } } |
Uzupełniamy klasę pracownik zgodnie z poniższym listingiem
|
|
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace ViewBag.Models { public class pracownik { public string Imie { get; set; } public string Nazwisko { get; set; } public string Stanowisko { get; set; } public string Dzial { get; set; } public string Miejscowosc { get; set; } public int Pensja { get; set; } } } |
Widzimy tutaj, że będziemy przechowywać takie informacje jak imię, nazwisko, stanowisko, dzial, miejscowość i pensja. Oczywiście wszystkie pola „nie liczbowe” są typu string a pole pensja ma przechowywać liczby.
OK w tym momencie mamy gotowy model danych.
Teraz musimy oprogramować metodę w kontrolerze która będzie przekazywała dane do widoku.
W oknie Solution Explorer przechodzimy do katalogu Controllers, rozwijamy całą gałąź i klikamy na HomeController.cs. W oknie głównym Visual Studio pojawi się nowa zakładka HomeControllers.cs. Odnajdujemy akcję ActionResult i w niej będziemy tworzyć naszą listę pracowników. Oczywiście dane do listy powinniśmy „zaciągać” z bazy danych ale nie to jest tematem tego wpisu i żeby nie zaciemniać głównego wątku krótką listę utworzymy ręcznie. Utworzymy listę 4 pracowników z przykładowymi danymi co przedstawia kod poniżej.
|
|
var pracownicy = new List<pracownik> { new pracownik { Imie = "Piotr", Nazwisko = "Nowak", Stanowisko = "Pracownik Biurowy", Dzial = "Finanse", Miejscowosc = "Warszawa", Pensja = 2500 } , new pracownik { Imie = "Leon", Nazwisko = "Zawodowiec", Stanowisko = "Pracownik Biurowy", Dzial = "Egzekucja", Miejscowosc = "Warszawa", Pensja = 3500 } , new pracownik { Imie = "Leonid", Nazwisko = "Pogoda", Stanowisko = "Pracownik Biurowy", Dzial = "Księgowość", Miejscowosc = "Warszawa", Pensja = 3000 } , new pracownik { Imie = "Anna", Nazwisko = "Maria", Stanowisko = "Pracownik Biurowy", Dzial = "Kadry", Miejscowosc = "Warszawa", Pensja = 2500 } }; </pracownik> |
W tym momencie mamy już model danych, zgodnie z którym utworzyliśmy listę pracowników. Teraz wystarczy tylko przekazać te dane do widoku i wyświetlić ale wcześniej należy przypisać naszą listę jako obiekt do funkcji ViewBag.
|
|
ViewBag.pracownicy = pracownicy; |
Teraz obiekt ViewBag.pracownicy zawiera naszą listę pracowników.
Żeby wyświetlić tą listę zajmiemy się widokiem Index więc zaraz po uruchomieniu aplikacji powinniśmy otrzymać listę pracowników na głównym widoku aplikacji. W oknie Solution Explorer klikamy w katalog Views następnie w katalog Home (bo w tym kontrolerze tworzyliśmy naszą listę) i wybieramy widok Index.cshtml. Nasz kod umieścimy na początku strony. Żeby wyświetlić listę najlepiej jest zrobić to w pętli a najlepiej do naszego zadania nadaje się pętla foreach (o której możesz przeczytać <<<TUTAJ>>>). Przydatną cechą tej pętli jest to, że nie trzeba myśleć o warunku wyjścia z pętli. Foreach przeskoczy po wszystkich elementach naszej listy i zakończy działanie. Na początek stworzymy więc kod.
@{ foreach (var Item in Collection) { } }
Utworzymy więc element <div> w którym zdefiniujemy pętlę. Pamiętajmy o tym że żeby Visual Studio wiedziało, że teraz chemy korzystać z C# to musimy mu o tym powiedzieć i do tego służy kod.
Teraz zajmijmy się samą pętlą. Aby przyspieszyć tworzenie pętli wpisujemy słówko foreach i przyciskamy dwa razy przycisk tab. W tym momencie powinna nam się utworzyć automatycznie struktura pętli foreach (jak poniżej).
|
|
@{ foreach (var Item in Collection) { } } |
Naszą kolekcją jest lista pracownicy, a ta lista została przekazana do ViewBag.pracownicy więc słówko Collection w naszym wzorze musimy zastąpić ViewBag.pracownicy. Natomiast żeby „dobrać” się do poszczególnych elementów listy musimy posłużyć się modelem pracownik, zmieniamy więc słówko Item we wzorze na pracownik. Teraz wewnątrz pętli wyświetlimy poszczególnych pracowników w tagach paragraf. Jeżeli chcemy wyświetlić jakieś pole np. imię pracownika posługujemy się taką składnią @pracownik.Imie, czyli odwołujemy się, za każdym przebiegiem pętli, do pola Imię w obiekcie pracownik. Oczywiście nie musimy wyświetlać wszystkich informacji o pracowniku które są w naszej liście. Dla celów tego przykładu wyświetlimy tylko imię i nazwisko pracowników z listy, kod poniżej.
|
|
@{ foreach (var Item in Collection) { |
@pracownik.Imie, @pracownik.Nazwisko
} }
Nasz projekt uruchamiamy wciskając przycisk F5. Jeżeli nie zrobiliśmy żadnego błędu zostanie uruchomiona nasza domyśla przeglądarka internetowa i naszym oczom ukaże się strona, jak na załączonym obrazku, z listą naszych pracowników.
Dziękujemy za czytanie naszych wpisów, mamy nadzieję, że przyczyniamy się choć troszeczkę do pogłębiania przez Was wiedzy. Pozdrawiamy i zachęcamy do czytania innych naszych wpisów.
