MVC Framework - pierwsza aplikacja
Wskoczmy do środka i stwórzmy naszą pierwszą aplikację MVC przy użyciu widoków i kontrolerów. Gdy już zdobędziemy małe praktyczne doświadczenie w zakresie działania podstawowej aplikacji MVC, w kolejnych rozdziałach poznamy wszystkie poszczególne komponenty i koncepcje.
Utwórz pierwszą aplikację MVC
Step 1- Uruchom program Visual Studio i wybierz opcję Plik → Nowy → Projekt. Wybierz opcję Sieć Web → Aplikacja internetowa ASP.NET MVC i nadaj temu projektowi nazwęFirstMVCApplicatio. Wybierz lokalizację jakoC:\MVC. Kliknij OK.
Step 2- Otworzy się opcja Szablon projektu. Wybierz pusty szablon i Wyświetl aparat jako Razor. Kliknij OK.
Teraz program Visual Studio utworzy nasz pierwszy projekt MVC, jak pokazano na poniższym zrzucie ekranu.
Step 3- Teraz stworzymy pierwszy kontroler w naszej aplikacji. Kontrolery to po prostu proste klasy C #, które zawierają wiele metod publicznych, znanych jako metody akcji. Aby dodać nowy kontroler, kliknij prawym przyciskiem myszy folder Kontrolery w naszym projekcie i wybierz Dodaj → Kontroler. Nazwij kontroler jako HomeController i kliknij przycisk Dodaj.
Spowoduje to utworzenie pliku klasy HomeController.cs w folderze Controllers z następującym kodem domyślnym.
using System;
using System.Web.Mvc;
namespace FirstMVCApplication.Controllers {
public class HomeController : Controller {
public ViewResult Index() {
return View();
}
}
}
Powyższy kod zasadniczo definiuje publiczną metodę Index wewnątrz naszego HomeController i zwraca obiekt ViewResult. W następnych krokach nauczymy się, jak zwrócić View przy użyciu obiektu ViewResult.
Step 4- Teraz dodamy nowy widok do naszego kontrolera domowego. Aby dodać nowy widok, kliknij prawym przyciskiem folder widoku i kliknij Dodaj → Widok.
Step 5- Nazwij nowy widok jako indeks, a silnik widoku jako Razor (SCHTML). Kliknij Dodaj.
Spowoduje to dodanie nowego pliku cshtml plik w folderze Views / Home z następującym kodem -
@{
Layout = null;
}
<html>
<head>
<meta name = "viewport" content = "width = device-width" />
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>
Step 6 - Zmodyfikuj zawartość treści powyższego widoku za pomocą następującego kodu -
<body>
<div>
Welcome to My First MVC Application (<b>From Index View</b>)
</div>
</body>
Step 7- Teraz uruchom aplikację. To da ci następujące dane wyjściowe w przeglądarce. Te dane wyjściowe są renderowane na podstawie zawartości w naszym pliku widoku. Aplikacja najpierw wywołuje kontroler, który z kolei wywołuje ten widok i generuje dane wyjściowe.
W kroku 7 otrzymane dane wyjściowe były oparte na zawartości naszego pliku widoku i nie miały interakcji z kontrolerem. Przechodząc o krok do przodu, utworzymy teraz mały przykład, aby wyświetlić wiadomość powitalną z aktualnym czasem przy użyciu interakcji widoku i kontrolera.
Step 8- MVC używa obiektu ViewBag do przekazywania danych między kontrolerem a widokiem. Otwórz HomeController.cs i edytuj funkcję Index na następujący kod.
public ViewResult Index() {
int hour = DateTime.Now.Hour;
ViewBag.Greeting =
hour < 12
? "Good Morning. Time is" + DateTime.Now.ToShortTimeString()
: "Good Afternoon. Time is " + DateTime.Now.ToShortTimeString();
return View();
}
W powyższym kodzie ustawiamy wartość atrybutu Greeting obiektu ViewBag. Kod sprawdza aktualną godzinę i odpowiednio zwraca komunikat Good Morning / Afternoon za pomocą instrukcji return View (). Zauważ, że tutaj Greeting to tylko przykładowy atrybut, którego użyliśmy z obiektem ViewBag. Zamiast Greeting możesz użyć dowolnej innej nazwy atrybutu.
Step 9 - Otwórz plik Index.cshtml i skopiuj następujący kod w sekcji treści.
<body>
<div>
@ViewBag.Greeting (<b>From Index View</b>)
</div>
</body>
W powyższym kodzie uzyskujemy dostęp do wartości atrybutu Greeting obiektu ViewBag za pomocą @ (który zostałby ustawiony z kontrolera).
Step 10- Teraz ponownie uruchom aplikację. Tym razem nasz kod najpierw uruchomi kontroler, ustaw ViewBag, a następnie wyrenderuje go przy użyciu kodu widoku. Poniżej będzie wynik.