#kurs ASP.NET MVC #9.5.3 Tworzymy pola formularza FormContact.

W pierwszej kolejności należy zmienić tytuł naszego formularza. Aby to zrobić w oknie głównym Visual Studio musimy mieć aktywny plik naszego widoku, czyli FormContact.cshtml. Jeśli nie widzimy tego kodu w powyższym oknie należy kliknąć na plik FormContact.cshtml w oknie Solution Explorer. Kod wygenerowany przy tworzeniu naszego widoku prezentuje poniższy listing 9.5.3.1.

Listing 9.5.3.1 Pierwotny kod wygenerowanego widoku FormContact.

@model PierwszaAplikacja.Models.MFormContact
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>FormContact</title>
</head>
<body>
    <div> 
    </div>
</body>
</html>

W pierwszej kolejności zmienimy tytuł naszego formularza, który mieści się między tagami <title> i </title>.

<title>Formularz kontaktowy </title>

Kolejnym krokiem jest utworzenie czterech pól formularza i przycisku którym będziemy zatwierdzali wprowadzone przez nas dane. Z rozdziału gdzie tworzyliśmy nasz model danych pamiętamy, że chcieliśmy aby nasz formularz zawierał następujące pola: kategoria, tytuł, autor i opis (takie właściwości metody MFormContact utworzyliśmy). O ile pola tytuł, autor i opis będą zwykłymi polami tekstowymi to pole kategoria będzie listą wyboru.

Na początek utworzymy nasze pola tekstowe. Do ich utworzenia wykorzystamy odpowiednią metodę pomocniczą Html, która wygeneruje nam odpowiednią kontrolkę <input>. W przypadku pól tekstowych będzie to metoda Html.TextBoxFor<>. Generalnie metody pomocnicze służą do generowania odpowiednich znaczników HTML.

<p>Tytuł: @Html.TextBoxFor( a => a.title )<p>

Jak widzimy w nawiasie po metodzie Html.TextBoxFor występuje nowa składnia a => a.title. Jest to wyrażenie lambda, które szerzej omówię w dalszej części kursu. Na chwilę obecną wystarczy wiedzieć, że wyrażenie lambda to funkcja anonimowa która służy do tworzenia typów delegatów lub typów drzewa wyrażeń. Składnia wyrażenia lambda to:

[parametry wejściowe] => (operator lambda) [wyrażenie lub instrukcja blokowa]

W naszym przypadku wyrażenie to będzie zwracało wartości z odpowiednich pól.

Zwróćmy uwagę, że nasz widok FormContact.cshtml oparliśmy na modelu MFormContact o czym mówi zapis na początku widoku @model PierwszaAplikacja.Models.MFormContact.

Tworząc wyrażenie lambda za metodą Html.TextBoxFor Visual Studio od razu wie, że odwołujemy się do naszego modelu MFormContact, co pokazje rysunek 9.5.3.1.

9.5.3.1 Tworzymy wyrażenie lambda.
9.5.3.1 Tworzymy wyrażenie lambda.

A dodając kropkę za naszym parametrem a = a. od razu odwołujemy się do właściwości naszego modelu, do pokazuje rysunek 9.5.3.2.

9.5.3.2 Tworzymy wyrażenie lambda.
9.5.3.2 Tworzymy wyrażenie lambda.

W ten sposób tworzymy nasze pola: tytuł, autor i opis.

Listing 9.5.3.2 Kod prezentujący pola tytuł, autor i opis.

<p>Tytuł: @Html.TextBoxFor(a => a.Title)</p>
<p>Autor: @Html.TextBoxFor(a => a.Author)</p>
<p>Opis:  @Html.TextBoxFor(a => a.Description)</p>

Kolejne potrzebne pole to pole kategoria które będzie listą rozwijalną z możliwością wyboru wybranej kategorii zgłoszenia. W tym celu wykorzystamy kolejną metodę pomocniczą Html.DropDownListFor. Na początku odwołamy się do właściwości category w naszym modelu MFormContact a później utworzymy tablicę gdzie będziemy przechowywali kolejne wartości naszej listy, co pokazuje listing 9.5.3.2.

Listing 9.5.3.3 Kod prezentujący pole kategoria.

<p>
Wybierz kategorię:
@Html.DropDownListFor(a => a.Category, new[]
{
new SelectListItem() {Text = "Pytanie o produkty/usługi."},
new SelectListItem() {Text = "Sprawy techniczne." },
new SelectListItem() {Text = "Biuro obslugi klienta." }
}   
)
</p>

Na koniec pozostało nam zdefiniowanie przycisku „wyślij”. W tym celu wygenerujemy kontrolkę input o typie submit, co pokazuje kolejny listing.

Listing 9.5.3.4 Definicja kontrolki input dla przycisku „wyślij”.

<input type=”submit” value=”wyślij”>

Definicję wszystkich pól „opakujemy” jeszcze w znacznik <form … > Treść formularza </form>. W tym celu skorzystamy z następnej metody pomocniczej a mianowicie Html.BeginForm, co pokazuje poniższy kod.

Listing 9.5.3.5 Wykorzystanie metody Html.BeginForm.

@using(Html.BeginForm())
{ 
…
Definicja pól i przycisków formularza
…      
}

Definicję całości formularza prezentuje poniższy listing.

Listing 9.5.3.6 Definicja całości formularza FormContact.cshtml.

@using(Html.BeginForm()){ 
<p>
Wybierz kategorię:
@Html.DropDownListFor(a => a.Category, new[]
{
new SelectListItem() {Text = "Pytanie o produkty/usługi."},
 ew SelectListItem() {Text = "Sprawy techniczne." },
new SelectListItem() {Text = "Biuro obslugi klienta." }
}   
)
</p>
<p>Tytuł: @Html.TextBoxFor(a=>a.Title)</p>
<p>Autor: @Html.TextBoxFor(a => a.Author)</p>
<p>Opis: @Html.TextBoxFor(a => a.Description)</p>
<input type=”submit” value=”wyślij”>
}

Po uruchomieniu projektu w przeglądarce internetowej powinniśmy zobaczyć poniższy ekran.

9.5.3.3 Widok formularza FormContact w przeglądarce.
9.5.3.3 Widok formularza FormContact w przeglądarce.

Jeżeli podejrzymy źródło strony zobaczymy, że wszystkie metody pomocnicze HTML zostały zamienione na odpowiednie znaczniki HTML, co prezentuję poniżej.

Listing 9.5.3.7 Kod prezentujący źródło strony formularza FormContact.

<form action="/Home/FormContact" method="post">        <p>
            Wybierz kategorię:
            <select id="Category" name="Category"><option>Pytanie o produkty/usługi.</option>
<option>Sprawy techniczne.</option>
<option>Biuro obslugi klienta.</option>
</select>
        </p>
        <p>Tytuł: <input id="Title" name="Title" type="text" value="" /></p>
        <p>Autor: <input id="Author" name="Author" type="text" value="" /></p>
        <p>Opis: <input id="Description" name="Description" type="text" value="" /></p>
</form>

Na tym zakończymy tworzenie naszego formularza kontaktowego.

#kurs ASP.NET MVC #9.5.1 Tworzymy model danych dla formularza kontaktowego.

Na początku zajmiemy się modelem danych, którego później użyjemy do kilku rzeczy m.in. pomocniczo do tworzenia nowego widoku formularza kontaktowego utworzonego na podstawie naszego modelu danych. Ale po kolei.

Utworzymy w naszym projekcie nowy model. W tym celu w oknie Solution Explorer na katalogu Models klikamy na PPM i z menu wybieramy opcję Add i później Class. Możemy także w tym samym oknie kliknąć raz LPM (lewy przycisk myszy) na katalogu Models (tak aby go podświetlić) i wybrać skrót klawiszowy Shift + Alt + C. Efekt będzie ten sam i na ekranie pojawi się okienko Add New Item (rysunek 9.5.1.1).

9.5.1.1 Okno Add New Item - tworzenie nowej klasy.modelu MFormContact.
9.5.1.1 Okno Add New Item – tworzenie nowej klasy.modelu MFormContact.

Nasz model będzie klasą C# więc wybieramy pierwszą opcję, następnie w poku Name wpisujemy nazwę naszego modelu, czyli MFormContact.cs i potwierdzamy wszystko klikając w przycisk OK.

Nasz nowo utworzony model możemy zobaczyć w oknie Solution Explorer (rysunek 9.5.3).

9.5.1.2 Nowy model MFormContact w oknie Solution Explorer.
9.5.1.2 Nowy model MFormContact w oknie Solution Explorer.

Zobaczmy teraz jego treść (rysunek 9.5.4). W tym celu klikamy właśnie na tym pliku MFormContact.cs LPM w oknie Solution Explorer.

Listing 9.5.1.1 Kod modelu danych FormContact

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace PierwszaAplikacja.Models
{
    public class MFormContact
    {
    }
}

Teraz należy go zmodyfikować zgodnie z naszymi potrzebami. Wcześniej mówiłem już, że model danych opisuje kawałek rzeczywistości, który można oprogramować. Na początku musimy określić, jakie dane będzie zawierał nasz formularz kontaktowy i wtedy odpowiednio przenieść to na grunt informatyki.

Moim zdaniem każdy formularz kontaktowy powinien bezwzględnie zawierać takie pola jak:

  • kategorię zgłoszenia,
  • tytuł zgłoszenia,
  • autor zgłoszenia,
  • treść zgłoszenia.

i to właśnie będziemy chcieli teraz oprogramować. Znając już założenia (co ma zawierać nasz formularz kontaktowy) możemy przystąpić do modyfikacji kodu modelu (listing 9.5.1.2). Zmodyfikowany kod jest pogrubiony.

Listing 9.5.1.2 Właściwości modelu MFormContact

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace PierwszaAplikacja.Models
{
    public class MFormContact
    {
        public string Category { get; set; }
        public string Title { get; set; }
        public string Author { get; set; }
        public string Description { get; set;  }
    }
}

Model mamy już przygotowany. Będziemy go później wykorzystywać np. do tworzenia widoków.

#kurs ASP.NET MVC #9.5 Tworzenie formularza kontaktowego i wszystkich komponentów potrzebnych do jego obsługi.

Mamy już stworzoną stronę główną (widok Index). Teraz przyszedł czas na stworzenie formularza kontaktowego, do którego będziemy przechodzić poprzez link ze strony głównej. W tym celu musimy wykonać następujące czynności:

  • stworzyć model danych dla naszego formularza,
  • zmodyfikować stronę główną (widok Index) poprzez umieszczenia na niej odpowiedniej treści oraz linku do widoku formularza,
  • utworzyć nową metodę akcji, która będzie zarządzała nowym widokiem formularza (kontroler Home),
  • stworzyć nowy widok formularza, który będzie oparty na stworzonym wcześniej modelu danych.

W tym rozdziale będę korzystał czasami z gotowego kodu bez szczegółowego wyjaśnienia, ponieważ pewne zagadnienia będę opisywał szczegółowo w dalszej części kursu.

#kurs ASP.NET MVC #9.4 Dodajemy dynamiczną treść do widoku.

Dodawania do naszego widoku statycznej i dynamicznej treści.

Teraz chcielibyśmy dodać do naszego widoku jakąś treść. I o ile ze statyczną treścią nie ma większego problemu to dynamiczną musimy jakoś wygenerować i przesłać do widoku. Generowanie dynamicznej treści wykonuje się w kontrolerze, ale jeszcze później musimy w jakiś sposób przekazać ją do widoku?

Żeby zobaczyć jakikolwiek efekt zmodyfikujemy troszeczkę nasz nowo utworzony widok, ale także nasz kontroler Home. Wstawimy na naszą stronę główną (widok: Index) jakąś treść. Dodamy treść „Witaj! Znajdujesz się na stronie głównej.” i w następnym wierszu dodamy aktualną datę i godzinę.

Tekst statyczny, który będzie się pokazywał na stronie Index możemy wpisać bezpośrednio w pliku widoku Index. Natomiast dynamiczną część, czyli aktualna datę i godzinę, musimy wygenerować w kontrolerze i później przekazać ją do widoku. I tym się zajmiemy w pierwszej kolejności. Nasz kontroler Home należy zmodyfikować zgodnie z listingiem 9.4.1, pogrubioną czcionką zaznaczona zmodyfikowana treść kontrolera.

Listing 9.4.1 Modyfikacja kontrolera Home.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace PierwszaAplikacja.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ViewResult Index()
        {
            ViewBag.DataGodzina = DateTime.Now;
            return View();
        }
    }
}

Do przechowania i przekazania daty i godziny z kontrolera do widoku użyjemy dynamicznego obiektu ViewBag, do którego możemy stworzyć właściwość DataGodzina (nazwa naszej właściwości jest dowolna) i do tej właściwości przypiszemy wartość aktualnej daty i godziny dzięki poleceniu DateTime.Now. Stworzenie właściwości DataGodzina dla obiektu ViewBag i przypisanie do niej wartości aktualnej daty i godziny wygląda następująco.

 

	ViewBag.DataGodzina = DateTime.Now;

Za pomocą obiektu ViewBag aktualną datę i godzinę możemy przekazać do naszego widoku Index. W tym celu modyfikujemy nasz widok Index. Pogrubioną czcionką zaznaczona jest zmodyfikowana część kodu.

Listing 9.4.2 Modyfikacja widoku Index.

 @{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
    <title>Strona główna</title>
</head>
<body>
    <div> 
            Witam ! <br>
            Aktualna data i godzina: @ViewBag.DataGodzina
    </div>
</body>
</html>

Jak widać kawałek kodu @ViewBag.DataGodzina służy do wywołania właściwości DataGodzina obiektu ViewBag. W tym właśnie miejscu w przeglądarce internetowej pojawi się aktualna data i godzina. Żeby zobaczyć efekt naszych działań uruchamiamy nasz projekt (F5), co prezentuje rysunek 9.4.1.

9.4.1 Widok projektu w przeglądarce internetowej po modyfikacjach kontrolera i widoku._
9.4.1 Widok projektu w przeglądarce internetowej po modyfikacjach kontrolera i widoku._

#kurs ASP.NET MVC #9.3 Tworzymy nowy widok o nazwie Index

Tworzymy nowy widok o nazwie Index

W poprzednim podrozdziale (9.2 Tworzymy nowy kontroler „HomeController”) utworzyliśmy pierwszy kontroler w naszym projekcie a mino to projekt w dalszym ciągu „wyrzuca” błąd. Tak jak już pisałem błąd ten jest spowodowany tym, że nie mamy utworzonego w naszym projekcie żadnego widoku (w naszym przypadku brak widoku o nazwie Index bo takiego właśnie widoku szuka kompilator). Przyszedł więc czas na stworzenie nowego pierwszego widoku.

Utworzyć widok możemy na dwa sposoby:

Sposób 1

Klikamy prawym przyciskiem myszy (PPM) na nazwie metody akcji Index, w kontrolerze Home, i z rozwiniętego menu wybieramy opcję Add View.

Rysunek 9.3.1. Tworzymy nowy widok o nazwie Index.
Rysunek 9.3.1. Tworzymy nowy widok o nazwie Index.

W oknie Add View konfigurujemy widok i potwierdzamy ustawienia.

Rysunek 9.3.2 Okno Add View, konfiguracja nowego widoku.
Rysunek 9.3.2 Okno Add View, konfiguracja nowego widoku.

Z uwagi na fakt, że tworzyliśmy widok klikając na metodzie Index Visual Studio automatycznie nazwał ten widok tak jak metoda dla której tworzymy ten widok, czyli Index. W polu szablon (template) wybieramy Empty (without model) i potwierdzamy przyciskiem Add. Opcję Empty (without model) wybieramy dlatego, widok Index będzie naszą stroną startową. Nie będzie ona prezentowała żadnych danych z modelu, dlatego korzystamy z ww. opcji.

Teraz przejdźmy do okna Solution Explorer i zobaczymy tam, że w folderze Views > Home utworzony został widok o nazwie Index.

Rysunek 9.3.3 Utworzony nowy widok w oknie Solution Explorer.
Rysunek 9.3.3 Utworzony nowy widok w oknie Solution Explorer.

Treść nowo utworzonego widoku możemy zobaczyć klikając na plik Index.cshtml.

Listing 9.3.1 Kod nowo utworzonego widoku o nazwie Index.

 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
    </div>
</body>
</html>


Kiedy uruchomimy nasz projekt w przeglądarce internetowej zobaczymy pustą stronę. Pustą dlatego, że nie umieściliśmy w niej żadnej treści. O tym, że uruchomiony jest widok Index świadczy tytuł strony i adres wyświetlany przez przeglądarkę (Rysunek 9.3.3).

Rysunek 9.3.4 Uruchomiony widok Index w przeglądarce internetowej.
Rysunek 9.3.4 Uruchomiony widok Index w przeglądarce internetowej.

#kurs ASP.NET MVC #9.2 Tworzymy nowy kontroler – HomeController

Tworzymy nowy kontroler o nazwie Home (HomeController).

Wiemy już jak stworzyć nowy pusty projekt. Zerknijmy teraz do modułu Solution Explorer i zerknijmy do katalogów Controllers i Views. Widzimy tam, że narazie nie mamy stworzonych żadnych kontrolerów i widoków.

PierwszaAplikacja - Solution Explorer.
Rysunek 9.2.1. PierwszaAplikacja – Solution Explorer.

Po uruchomieniu projektu w takim momencie otrzymamy błąd w przeglądarce (Rysunek 9.2.2).

Visual Studio - pierwsze uruchomienie pustego projektu "PierwszyProjekt".
Rysunek 9.2.2 Visual Studio – pierwsze uruchomienie pustego projektu „PierwszaAplikacja”.

Dlaczego otrzymamy taki błąd? Bo wybraliśmy szablon Empty i jeszcze nic nie dodaliśmy do naszego projektu.

W pierwszej kolejności dodamy kontroler o nazwie Home. W oknie Solution Explorer klikamy PPM na folderze Controllers i z rozwijalnego menu wybieramy opcję Add a później Controller.

Tworzymy nowy kontroler Home.
Rysunek 9.2.3. Tworzymy nowy kontroler Home.

Pojawia się okno z możliwością wyboru typu kontrolera. W naszym przykładzie wybieramy Empty i klikamy na OK.

Wybieramy typ kontrollera Home.
Rysunek 9.2.4. Wybieramy typ kontrolera Home.

Zgodnie z konwencją MVC nazwy kontrolerom nadajemy dodając do nazwy słówko Controller (jak poniżej).

9.2.5. Kontroler Home - nadawanie nazwy.
Rysunek 9.2.5. Kontroler Home – nadawanie nazwy.

W takie prosty sposób stworzyliśmy nasz pierwszy kontroler o nazwie Home i możemy go zobaczyć w oknie Solution Explorer’a w folderze Controllers.

9.2.6. HomeController.
Rysunek 9.2.6. HomeController.

Jeżeli klikniemy na niego w oknie głównym zobaczymy zawartość naszego kontrolera.

9.2.7. Zawartość kontrolera Home.
Rysunek 9.2.7. Zawartość kontrolera Home.

No dobrze, mamy nasz kontroler i co się teraz stanie jak uruchomimy nasz projekt (wciskamy F5)?

9.2.8. Błąd widoku kontrolera.
Rysunek 9.2.8. Błąd widoku kontrolera.

No nie! Znowu błąd?

Błąd występuje dlatego, że nie mamy jeszcze utworzonego widoku, który chcemy wyświetlić. W chwili uruchomienia projektu, uruchamiamy metodę Index z kontrolera Home. Dlaczego? Bo w domyślnej ścieżce rutingu (pamiętamy: plik RouteConfig.cs w folderze App_Start) jest zapis.

 routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );

Czyli na początku próbujemy uruchomić metodę Index z kontrolera Home. A ta metoda zawiera metodę View() która zwraca nam odpowiedni widok. Zgodnie z konwencją MVC kompilator szuka widoku o takiej samej nazwie jak nasza metoda akcji, czyli szuka widoku o nazwie Index, a takiego widoku na razie nie ma. Stąd ten błąd. Ale spokojnie w kolejnych częściach kursu utworzymy odpowiedni widok.

Ostatnim działaniem w tym podrozdziale będzie lekka modyfikacja metody Index według poniższego listingu.
Listing 9.3.1 Modyfikacja metody Index w kontrolerze HomeController (zmodyfikowana część jest pogrubiona).

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace PierwszaAplikacja.Controllers
{
   public class HomeController : Controller
   {
       // GET: Home
       public ViewResult Index()
       {
           return View();
       }
   }
}

Różnica między użyciem ActionResult na ViewResult zostanie wyjaśnione w dalszej części kursu. Na tą chwilę wyjaśnię tylko tyle, że metoda ViewResult() dziedziczy po metodzie ActionResult().

 

#kurs ASP.NET MVC #9 Pierwsza aplikacja w ASP.NET MVC

Pierwsza aplikacja w ASP.NET MVC

Myślę, że doszliśmy już do takiego momentu kiedy będziemy w stanie napisać naszą pierwszą mini aplikację w ASP.NET MVC. Każda szanująca się firma powinna mieć na swojej stronie formularz zgłoszeniowy. I właśnie coś takiego zrobimy w ramach naszej pierwszej aplikacji. Bez zbędnych wstępów, zaczynamy.

Krótko opiszę co będziemy robić po kolei:

  • stworzymy nowy kontroler, który będzie „zarządzał” naszą aplikacją. W trakcie rozwoju naszego projektu będziemy dodawali do niego odpowiednie metody akcji,
  • stworzymy także kilka widoków do „komunikacji” z użytkownikiem,
  • napiszę także parę słów o kontroli poprawności danych w formularzu, jak dodawać dodatkowe komponenty do naszego projektu a także jak korzystać z zewnętrznych komponentów typu biblioteka Bootstrap.

#kurs ASP.NET MVC #8 Widok – tutorial kurs

Widok (ang. View)

Widok to jedna z trzech warstwa modelu MVC. W widoku definiujemy co i w jaki sposób będziemy prezentować użytkownikowi. To w widoku definiujemy dynamiczne zmienne które po wywołaniu widoku „uzupełniają się” danymi np. z bazy danych. Przykład prostego widoku, który wyświetla aktualną datę i godzinę. Cała treść, oprócz części pogrubionych, jest wygenerowana automatycznie przy pomocy Visual Studio.

Listing 8.1. Prosty widok (o nazwie Index) do wyświetlenia aktualnej daty
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Aktualna Data</title>
</head>
<body>
    <div> 
        @ViewBag.PokazAktualnaDate
    </div>
</body>
</html>

Poniżej rysunek prezentujący efekt wywołania powyższego widoku w przeglądarce internetowej.

Widok wyświetlający aktualną datę.
Rysunek 8.1. Widok wyświetlający aktualną datę.

Żeby nasz widok mógł wyświetlić aktualną datę i godzinę musieliśmy w kontrolerze w odpowiedniej metodzie ,o takiej samej nazwie jak nasz widok (w tym przypadku jest to widok i metoda o nazwie Index), zdefiniować właściwość ViewBag.PokazAktualnaDate w zaprezentowany poniżej sposób.

ViewBag.PokazAktualnaDate = DateTime.Now;

Poniżej treść kontrolera Home i metody Index

Listing 8.2. Kod kontrolera Home i metody Index
public class HomeController : Controller 
{
    public ViewResult Index() 
        {
            ViewBag.PokazAktualnaDate = DateTime.Now;
            return View();
        }
}

Teraz „zdanie” wyjaśnienia jak to się dzieje, że w przeglądarce internetowej wyświetla się aktualna data i godzina.

Po uruchomieniu naszej aplikacji poprzez mechanizm rutingu przechodzimy do kontrolera Home i metody Index. Dlaczego właśnie do tego kontrolera i do tej metody? Ano dlatego, że domyślnie to właśnie kontroler Home i metoda Index są domyślnymi wartościami dla domyślnej ścieżki rutingu (patrz listing 1 z części #5 Ruting). Teraz popatrzmy co znajduje się w metodzie Index w naszym kontrolerze Home? Zadeklarowaliśmy tam właściwość ViewBag.PokazAktualnaDate która będzie przechowywała aktualną datę i godzinę w momencie wywołania oraz metodę View() która wywoła widok o nazwie Index, bo tak nazywa się nasza metoda w której wywołujemy metodę o nazwie View. Zgodnie z powyższym w naszej przeglądarce w momencie wywołania widoku Index pojawi się aktualna data i godzina.

#kurs ASP.NET MVC #6 Kontroler – tutorial kurs

Kontroler

Kontrolery to nic innego jak klasy C# których zadaniem jest obsługa żądań użytkowników (zwykle dziedziczy po klasie System.Web.Mvc.Controller). Kontroler w pierwszej kolejności odbiera dane wejściowe od użytkownika następnie je przetwarza i analizuje.

Skoro kontroler to klasa, to w „środku” musi mieć jakieś metody. Wewnątrz kontrolera wszystkie metody publiczne nazywamy metodami akcji i to za ich pomoc możemy „sterować” aplikacją. Zgodnie z konwencją MVC, aby ułatwiać sobie życie, wszystkie kontrolery należy umieszczać w katalogu Controllers w naszym projekcie (w oknie Solution Explorer), który jest automatycznie tworzony wraz z naszym nowym projektem. Tak jak w życiu jeśli masz wypracowaną jakąś własną konwencję to możesz ją stosować ale zaleca się stosowanie tej ogólnie przyjętej. Jeśli chodzi o nazywanie kontrolerów to przyjęło się że do nazwy kontrolera dodajemy słówko Controller np. HomeController. Z resztą Visual Studio sam proponuje nam przy tworzeniu kontrolerów używanie właściwej konwencji, co obrazuje poniższy zrzut.

ASP.NET MVC Kontrolery
Obrazek 6.1. ASP.NET MVC Kontrolery (nazewnictwo kontrolerów).

 

Na co wpływa kontroler?
Kontroler wpływa zarówno na model i widok. Po analizie danych wejściowych może on np. zaktualizować model oraz odświeżyć widok. Można powiedzieć, że za pomocą kontrolera możemy kontrolować co się w aplikacji dzieje (za pomocą metod akcji które zawiera kontroler).

Jak tworzymy/dodajemy kontrolery do projektu?
W oknie Solution Explorer klikamy na folderze Controllers prawym przyciskiem myszy (zwanym dalej PPM) i z menu kontekstowego wybieramy opcję Add a następnie z kolejnego menu Controller.

Poniżej przykład kontrolera o nazwie HomeController, który zwraca widok metody Index

    public class HomeController : Controller
    {
        public ViewResult Index()
        {
            return View(); // zwraca widok dla metody Index
        }
    }

 

#kurs ASP.NET MVC #3 Visual Studio Community 2015 instalacja narzędzia – tutorial kurs

Visual Studio Community 2015 – instalacja

Aby móc „bawić” się technologią ASP.NET musimy na początku zainstalować narzędzie Visual Studio. Ponieważ w tym kursie będziemy korzystali z wersji Visual Studio Community 2015 przeprowadzę Was krok po kroku przez proces instalacji właśnie tej wersji VS.

W poprzedniej części pisałem, że plik ISO (który ściągnęliśmy z Internetu) możemy nagrać na płytę DVD lub wykorzystać emulator DVD-ROMu i „zamontować” w nim nasz plik ISO. W systemie Windows będzie on wtedy widoczny tak jakbyśmy włożyli nasze DVD z Visual Studio do napędu DVD-ROM (obrazek 1).

Visual Studio instalacja - uruchomienie instalatora narzędzia.
Obrazek 1. Visual Studio instalacja – uruchomienie instalatora narzędzia.

W celu uruchomienia instalacji wybieramy stację DVD-ROM z Visual Studio i klikamy x2 na plik vs_community.exe.

Po uruchomieniu instalacji powita nas ekran powitalny (obrazek 2).

Visual studio instalacja - ekran powitalny.
Obrazek 2. Visual studio instalacja – ekran powitalny.

 

Po zniknięciu ekranu pojawi się nowe okno gdzie będziemy mogli wybrać miejsce instalacji Visual Studio, część Choose your installation location oraz typ instalacji, część Choose your type of installation. Jeżeli chodzi o lokalizację to proszę nie sugerujcie się lokalizacją z obrazka z uwagi na to, że jest to moja wybrana lokalizacja. Wy możecie zostawić lokalizację domyślną na dysk C. Natomiast jeżeli chodzi o typ instalacji wybieramy opcję Default i klikamy na przycisk Install, zgodnie z obrazkiem 3 (pamiętaj oczywiście musisz mieć uprawnienia administratora na danej maszynie aby móc zainstalować Visual Studio).

Visual Studio 2015 instalacja - wybór lokalizacji i typu instalacji.
Obrazek 3. Visual Studio 2015 instalacja – wybór lokalizacji i typu instalacji.

 

W tym momencie następuje tak naprawdę instalacja oprogramowania Visual Studio 2015 na Twojej maszynie. Wraz z trwaniem procesu instalacji instalator informuje nas co w danym momencie robi, jaki moduł aktualnie jest instalowany (obrazek 4). Na zrzucie widzimy, że instalator w momencie zrzutu ekranu tworzył punkt przywracania systemu (Creating a system restore point…).

Visual Studio 2015 instalacja.
Obrazek 4. Visual Studio 2015 instalacja.

 

Kolejny zrzut ekranu z instalacji (obrazek 5).

Visual Studio 2015 proces instalacji.
Obrazek 5. Visual Studio 2015 proces instalacji.

 

Po instalacji pojawia się ekran z informacją o prawidłowym przebiegu procesu instalacji (obrazek 6). Aby uruchomić Visual Studio 2015 klikamy w przycisk lauch.

Visual Studio 2015 zakończenie instalacja.
Obrazek 6. Visual Studio 2015 zakończenie instalacja.

 

Na kolejnym obrazku widać uruchomione Visual Studio Community 2015.

W kolejnej części będę omawiał podstawowe moduły Visual Studio 2015.
#kurs ASP.NET MVC #4 Visual Studio Community 2015 podstawowe modułu – tutorial kurs