ASP.NET MVC Przesyłanie (przekazywanie) danych z kontrolera do widoku z użyciem funkcji ViewBag

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

asp.net mvc kontroler widok viewbag

Następnie w oknie Add New Item wybieramy opcję Class, w polu Name wprowadzamy nazwę pracownik i potwierdzamy przyciskiem Add.

asp.net mvc kontroler widok viewbag

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.

Uzupełniamy klasę pracownik zgodnie z poniższym listingiem

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.

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.

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).

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.

@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.

asp.net mvc kontroler widok viewbag

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.