Dodawanie widoku — jak używać pliku szablonu Widoku do czystego hermetyzacji generowania odpowiedzi HTML z powrotem do klienta
Autor : Scott Hanselman
Jest to samouczek dla początkujących, który wprowadza podstawy ASP.NET MVC. Utworzysz prostą aplikację internetową, która odczytuje i zapisuje dane z bazy danych. Odwiedź centrum szkoleniowe ASP.NET MVC , aby znaleźć inne ASP.NET samouczki i przykłady mvc.
W tej sekcji przyjrzymy się, w jaki sposób możemy użyć klasy HelloWorldController przy użyciu pliku szablonu View, aby czysto hermetyzować generowanie odpowiedzi HTML z powrotem do klienta.
Zacznijmy od użycia szablonu Widok z naszą metodą Index. Nasza metoda jest nazywana Index i znajduje się w kontrolerze HelloWorldController. Obecnie nasza metoda Index() zwraca ciąg z komunikatem zakodowanym na stałe w klasie Controller.
public string Index()
{
return "<html><body>This is my default action...</body></html>";
}
Teraz zmieńmy metodę Index, aby zamiast tego wyglądała następująco:
public ActionResult Index()
{
return View();
}
Teraz dodajmy szablon Widok do naszego projektu, którego możemy użyć dla naszej metody Index(). Aby to zrobić, kliknij prawym przyciskiem myszy w środku metody Index, a następnie kliknij polecenie Dodaj widok...
Spowoduje to wyświetlenie okna dialogowego "Dodaj widok", które udostępnia nam kilka opcji tworzenia szablonu widoku, który może być używany przez naszą metodę Index. Na razie nie zmieniaj niczego i po prostu kliknij przycisk Dodaj.
Po kliknięciu przycisku Dodaj nowy folder i nowy plik pojawi się w folderze rozwiązania, jak pokazano tutaj. Teraz mam folder HelloWorld w obszarze Views i plik Index.aspx w tym folderze.
Nowy plik indeksu jest również już otwarty i gotowy do edycji. Dodaj jakiś tekst pod pierwszym <indeksem h2></h2>, na przykład "Hello world".
<h2>Index</h2>
Hello world!
Uruchom aplikację i odwiedź http://localhost:xx/HelloWorld ponownie w przeglądarce. Metoda Index w naszym kontrolerze w tym przykładzie nie wykonała żadnej pracy, ale wywołała metodę "return View()", co wskazywało, że chcemy użyć pliku szablonu widoku do renderowania odpowiedzi z powrotem do klienta. Ponieważ nie określiliśmy jawnie nazwy pliku szablonu widoku do użycia, ASP.NET MVC domyślnie używa pliku widoku Index.aspx w folderze \Views\HelloWorld. Teraz widzimy ciąg, który został zakodowany w naszym widoku.
Wygląda całkiem dobrze. Zwróć jednak uwagę, że tytuł przeglądarki to "Index" (Indeks) i duży tytuł na stronie to "My MVC Application" (Moja aplikacja MVC). Zmieńmy je.
Zmienianie widoków i stron wzorcowych
Najpierw zmieńmy tekst "Moja aplikacja MVC". Ten tekst jest udostępniany i wyświetlany na każdej stronie. Faktycznie pojawia się on tylko w jednym miejscu w naszym kodzie, mimo że znajduje się na każdej stronie w naszej aplikacji. Przejdź do folderu /Views/Shared w Eksplorator rozwiązań i otwórz plik Site.Master. Ten plik jest nazywany stroną wzorcową i jest to udostępniona "powłoka", która jest używana przez wszystkie inne strony.
Zwróć uwagę na tekst z tekstem ContentPlaceholder "MainContent" w tym pliku.
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
Ten symbol zastępczy to miejsce, w którym zostaną wyświetlone wszystkie utworzone strony, "opakowane" na stronie wzorcowej. Spróbuj zmienić tytuł, a następnie uruchomić aplikację i odwiedzić wiele stron. Zauważysz, że jedna zmiana jest wyświetlana na wielu stronach.
<div id="title">
<h1>My MVC Movie Application</h1>
</div>
Teraz każda strona będzie miała nagłówek podstawowy — to H1 — "Moja aplikacja filmowa MVC". Obsługuje biały tekst u góry, który jest udostępniany na wszystkich stronach.
Oto plik Site.Master w całości z zmienionym tytułem:
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Movie Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
<li><%: Html.ActionLink("About", "About", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
</body>
</html>
Teraz zmieńmy tytuł strony Indeks.
Otwórz plik /HelloWorld/Index.aspx. Istnieją dwa miejsca do zmiany. Najpierw tytuł wyświetlany w tytule przeglądarki, a następnie nagłówek pomocniczy — również H2. Zrobię je nieco inaczej, aby zobaczyć, który fragment kodu zmienia się w jakiej części aplikacji.
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Movie List
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>My Movie List</h2>
Hello World!
</asp:Content>
Uruchom aplikację i odwiedź stronę /Movies. Zwróć uwagę, że tytuł przeglądarki, nagłówek podstawowy i nagłówki pomocnicze uległy zmianie. W aplikacji można łatwo wprowadzać duże zmiany z niewielkimi zmianami w widoku.
Nasz mały fragment "danych" (w tym przypadku komunikat "Hello world!" został zakodowany w kodzie. Mamy maszynę wirtualną (widoki) i mamy C (kontrolery), ale jeszcze nie ma języka M (model). Wkrótce omówimy sposób tworzenia bazy danych i pobierania z niej danych modelu.
Przekazywanie modelu ViewModel
Zanim przejdziemy do bazy danych i omówimy modele, najpierw porozmawiajmy o modelu "ViewModels". Są to obiekty reprezentujące to, czego wymaga szablon Widok, aby wyrenderować odpowiedź HTML z powrotem do klienta. Zazwyczaj są one tworzone i przekazywane przez klasę Controller do szablonu Widok i powinny zawierać tylko dane wymagane przez szablon Widok — i nie więcej.
Wcześniej w naszym przykładzie HelloWorld nasza metoda akcji Welcome() przyjęła nazwę i parametr numTimes i wyprowadziła ją do przeglądarki. Zamiast tego kontroler nadal renderuje tę odpowiedź bezpośrednio, zamiast tego utwórzmy małą klasę do przechowywania tych danych, a następnie przekażmy ją do szablonu Widok, aby renderować odpowiedź HTML przy użyciu tej odpowiedzi. Dzięki temu kontroler zajmuje się jedną rzeczą, a szablonem Wyświetl inny — dzięki czemu możemy zachować czyste "rozdzielenie problemów" w naszej aplikacji.
Wróć do pliku HelloWorldController.cs i dodaj nową klasę "WelcomeViewModel" i zmień metodę Welcome wewnątrz kontrolera. Oto kompletny plik HelloWorldController.cs z nową klasą w tym samym pliku.
using System.Web.Mvc;
namespace Movies.Controllers
{
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Welcome(string name, int numTimes = 1)
{
var viewModel = new WelcomeViewModel
{
Message = "Hello " + name,
NumTimes = numTimes
};
return View(viewModel);
}
public class WelcomeViewModel
{
public string Message { get; set; }
public int NumTimes { get; set; }
}
}
}
Mimo że znajduje się on w wielu wierszach, nasza metoda Welcome jest naprawdę tylko dwiema instrukcjami kodu. Pierwsza instrukcja pakuje nasze dwa parametry do obiektu ViewModel, a drugi przekazuje wynikowy obiekt do widoku.
Teraz potrzebujemy szablonu Widok powitalny! Kliknij prawym przyciskiem myszy metodę Powitalną i wybierz polecenie Dodaj widok. Tym razem sprawdzimy pozycję "Utwórz silnie typizowany widok" i wybierzemy z listy rozwijanej klasę WelcomeViewModel. Ten nowy widok będzie wiedział tylko o obiektach WelcomeViewModel i nie ma innych typów obiektów.
UWAGA: Musisz skompilować raz po dodaniu elementu WelcomeViewModel, aby wyświetlić się na liście rozwijanej.
Oto, jak powinno wyglądać okno dialogowe Dodawanie widoku. Kliknij przycisk Dodaj. 
Dodaj ten kod w obszarze <h2> w nowym pliku Welcome.aspx. Utworzymy pętlę i powiemy witaj tyle razy, ile użytkownik mówi, że powinniśmy!
<% for(int i=0;i<Model.NumTimes;i++) { %>
<%h3><%: Model.Message %></h3>
<% } %>
Zwróć również uwagę, że podczas pisania tego tekstu, ponieważ powiedziano nam ten widok o Modelu WelcomeViewModel (są małżeństwem, pamiętaj?), że otrzymujemy pomocną funkcję IntelliSense za każdym razem, gdy odwołujemy się do naszego obiektu modelu, jak pokazano na poniższym zrzucie ekranu:
Uruchom aplikację i odwiedź http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4 ponownie. Teraz bierzemy dane z adresu URL, są automatycznie przekazywane do kontrolera, nasz kontroler pakuje dane do modelu ViewModel i przekazuje ten obiekt do naszego widoku. Widok niż wyświetla dane jako HTML dla użytkownika.
Cóż, to był rodzaj "M" dla modelu, ale nie rodzaj bazy danych. Weźmy zdobytą wiedzę i utwórzmy bazę danych filmów.
Opinia
Dostępne już wkrótce: W 2024 r. będziemy stopniowo wycofywać zgłoszenia z serwisu GitHub jako mechanizm przesyłania opinii na temat zawartości i zastępować go nowym systemem opinii. Aby uzyskać więcej informacji, sprawdź: https://aka.ms/ContentUserFeedback.
Prześlij i wyświetl opinię dla