TOC

This article has been localized into Polish by the community.

Wprowadzenie:

Tworzenie Widoku

Jeśli przeczytałeś poprzednie artykuły, powinieneś mieć bardzo prosty projekt ASP.NET MVC, który wyświetla prostą wiadomość „Hello, MVC World!”. Napis jest generowany bezpośrednio w kontrolerze i zwracany jako zwykły tekst do przeglądarki, oczywiście takie rozwiązanie nie będzie praktyczne w przypadku bardziej zaawansowanych zadań. Chcemy, aby strony były dynamiczne, tworzone za pomocą HTML i innych technologii internetowych. W tym celu potrzebujemy widoków, które są wizualną reprezentacją modelu zwróconego przez kontroler.

Ponieważ stworzyliśmy już kontroler (nazywany HomeController), jesteśmy teraz w punkcie, w którym powinniśmy utworzyć dla niego View (widok), a nie tylko zwracać fragment tekstu. Jak widzieliśmy w poprzednim artykule, kontrolery zazwyczaj znajdują się w folderze o nazwie "Controllers", więc powinniśmy mieć również folder o nazwie "Views". Kliknij prawym przyciskiem myszy w Solution Explorer i wybierz Add -> New Folder, tak jak w poprzednim artykule. Zazwyczaj też karzdy kontroler posiada własy folder, więc w nowym folderze Views utwórzmy folder o nazwie Home, aby zawierał widoki dla naszego kontrolera HomeController. Dzięki temu jesteśmy teraz gotowi do utworzenia widoku w naszym nowym folderze:

Zobaczysz okno dialogowe z dużą ilością opcji. Wszystkie są bardzo istotne i omówimy je później w tym poradniku, ale na razie dodajmy prosty widok do naszego projektu. Możesz to zrobić, używając ustawień, których użyłem na tym zrzucie ekranu:

Kliknij przycisk Add, aby w końcu uzyskać nasz nowy widok. Kod w nim będzie wyglądał mniej więcej tak:

@{
    Layout = null;
}

<!DOCTYPE html>

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

</body>
</html>

Jest to po prostu jakiś standardowy HTML dla pustego dokumentu, z tylko niewielkim kodem związanym z MVC na górze, opartym na składni Razor, którą omówimy w jednym z nadchodzących rozdziałów. Na razie zignoruj to i pracuj z HTML, który, miejmy nadzieję, już znasz i rozumiesz.

Dokonajmy niewielkiej modyfikacji HTML, aby wyświetlić pozdrowienia - powinno to oczywiście nastąpić między tagami tak jak w przykładzie:

<body>

    <span style="font-size: 18pt;">Hello, <b>MVC</b> world!</span>

</body>

Musimy tylko zrobić jeszcze jedną rzecz: w poprzednim artykule zmieniliśmy metodę Index(), aby zwrócić prosty fragment tekstu zamiast widoku. Teraz gdy chcemy użyć widoku, musimy go zmienić, więc otwórz HomeController i zmodyfikuj metodę Index() w następujący sposób:

public IActionResult Index()
{
    return View();
}

Teraz wszystko powinno być na swoim miejscu, więc po prostu naciśnij F5, aby uruchomić projekt, miejmy nadzieję, że zobaczysz nasz nowy piękny widok w przeglądarce zamiast nudnego kawałka zwykłego tekstu, który widzieliśmy w ostatnim artykule.

Jak to działa?

Dzięki domyślnym mechanizmom routingu, które można znaleźć w środowisku ASP.NET MVC, główny adres URL jest automatycznie kierowany do metody Index() w HomeController (nie martw się jeszcze o routingu, omówimy to zagadnienie wkrótce). Wywołanie metody View() powoduje przeszukanie wielu lokalizacji w celu znalezienia widoku o pasującej nazwie, w tym przypadku ścieżka wygląda następująco \[główny projekt]\Views\[nazwa kontrolera]\Index.cshtml. Ten widok jest następnie interpretowany (ponieważ może zawierać kod Razor), a następnie wrócił jako wyjście do przeglądarki.

Podsumowanie

Z powodzeniem połączyliśmy Controller i View, aby wygenerować rzeczywistą stronę internetową. To może wydawać się wciąż jak voodoo lub czarna magia, ale po prostu przejdź dalej i poczuj jak dużo oferuje ten freamework, zanim spróbujesz w pełni zrozumieć wszystkie koncepcje.

Jest jednak dużo więcej informacji na temat Views, aby w pełni wykorzystać możliwości ASP.NET MVC - to było tylko wprowadzenie, abyś mógł zacząć działać. W nadchodzącym rozdziale zajmiemy się głębiej tematem widoków.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!