Omówienie widoków ASP.NET MVC (VB)
Co to jest widok MVC ASP.NET i czym różni się od strony HTML? W tym samouczku Stephen Walther przedstawia widoki i pokazuje, jak można korzystać z funkcji Wyświetl dane i pomocników HTML w widoku.
Celem tego samouczka jest przedstawienie krótkiego wprowadzenia do widoków MVC ASP.NET, wyświetlania danych i pomocników HTML. Na koniec tego samouczka należy zrozumieć, jak tworzyć nowe widoki, przekazywać dane z kontrolera do widoku i używać pomocników HTML do generowania zawartości w widoku.
Omówienie widoków
W przeciwieństwie do ASP.NET lub stron active server, ASP.NET MVC nie zawiera żadnych elementów, które bezpośrednio odpowiadają stronie. W aplikacji MVC ASP.NET na dysku nie ma strony odpowiadającej ścieżce w adresie URL wpisanym na pasku adresu przeglądarki. Najbliżej strony w ASP.NET aplikacji MVC jest coś nazywanego widokiem.
W aplikacji MVC ASP.NET przychodzące żądania przeglądarki są mapowane na akcje kontrolera. Akcja kontrolera może zwrócić widok. Jednak akcja kontrolera może wykonać inny typ akcji, na przykład przekierowanie do innej akcji kontrolera.
Lista 1 zawiera prosty kontroler o nazwie HomeController. Funkcja HomeController uwidacznia dwie akcje kontrolera o nazwach Index() i Details().
Lista 1 — HomeController.vb
<HandleError()> _
Public Class HomeController
Inherits System.Web.Mvc.Controller
Function Index()
Return View()
End Function
Function Details()
Return RedirectToAction("Index")
End Function
End Class
Możesz wywołać pierwszą akcję Index(), wpisując następujący adres URL na pasku adresu przeglądarki:
/Strona główna/Indeks
Drugą akcję Szczegóły() można wywołać, wpisując ten adres w przeglądarce:
/Strona główna/Szczegóły
Akcja Index() zwraca widok. Większość utworzonych akcji zwróci widoki. Jednak akcja może zwracać inne typy wyników akcji. Na przykład akcja Details() zwraca wartość RedirectToActionResult, która przekierowuje przychodzące żądanie do akcji Index().
Akcja Index() zawiera następujący pojedynczy wiersz kodu:
View()
Ten wiersz kodu zwraca widok, który musi znajdować się w następującej ścieżce na serwerze internetowym:
\Views\Home\Index.aspx
Ścieżka do widoku jest wywnioskowana z nazwy kontrolera i nazwy akcji kontrolera.
Jeśli wolisz, możesz jawnie określić widok. Poniższy wiersz kodu zwraca widok o nazwie Fred :
View( Fred )
Po wykonaniu tego wiersza kodu widok jest zwracany z następującej ścieżki:
\Views\Home\Fred.aspx
Uwaga
Jeśli planujesz utworzyć testy jednostkowe dla ASP.NET aplikacji MVC, dobrym pomysłem jest jawne zapoznanie się z nazwami widoków. Dzięki temu można utworzyć test jednostkowy, aby sprawdzić, czy oczekiwany widok został zwrócony przez akcję kontrolera.
Dodawanie zawartości do widoku
Widok to standardowy dokument HTML, który może zawierać skrypty. Skrypty służą do dodawania zawartości dynamicznej do widoku.
Na przykład widok na liście 2 wyświetla bieżącą datę i godzinę.
Lista 2 — \Views\Home\Index.aspx
<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Index</title>
</head>
<body>
<div>
The current date and time is
<% Response.Write(DateTime.Now)%>
</div>
</body>
</html>
Zwróć uwagę, że treść strony HTML na liście 2 zawiera następujący skrypt:
<% Response.Write(DateTime.Now)%>
Ograniczniki <skryptów % i %> służą do oznaczania początku i końca skryptu. Ten skrypt jest napisany w visual basic. Wyświetla bieżącą datę i godzinę przez wywołanie metody Response.Write() w celu renderowania zawartości w przeglądarce. Ograniczniki skryptów <% i %> mogą służyć do wykonywania co najmniej jednej instrukcji.
Ponieważ tak często wywołujesz metodę Response.Write(), firma Microsoft udostępnia skrót do wywoływania metody Response.Write(). Widok w liście 3 używa ograniczników <%= i %> jako skrótu do wywoływania metody Response.Write().
Lista 3 — Views\Home\Index2.aspx
<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Index</title>
</head>
<body>
<div>
The current date and time is
<%= DateTime.Now %>
</div>
</body>
</html>
Do generowania zawartości dynamicznej w widoku można użyć dowolnego języka platformy .NET. Zwykle do zapisywania kontrolerów i widoków należy użyć programu Visual Basic .NET lub C#.
Generowanie zawartości widoku przy użyciu pomocników HTML
Aby ułatwić dodawanie zawartości do widoku, możesz skorzystać z czegoś o nazwie Pomocnik HTML. Pomocnik HTML jest zazwyczaj metodą, która generuje ciąg. Pomocnicy HTML mogą generować standardowe elementy HTML, takie jak pola tekstowe, linki, listy rozwijane i pola listy.
Na przykład widok na liście 4 korzysta z trzech pomocników HTML — BeginForm(), Pomocników TextBox() i Password() — w celu wygenerowania formularza logowania (zobacz Rysunek 1).
Lista 4 - \Views\Home\Login.aspx
<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Login Form</title>
</head>
<body>
<div>
<% Using Html.BeginForm()%>
<label for="UserName">User Name:</label>
<br />
<%= Html.TextBox("UserName") %>
<br /><br />
<label for="Password">Password:</label>
<br />
<%= Html.Password("Password") %>
<br /><br />
<input type="submit" value="Log in" />
<% End Using%>
</div>
</body>
</html>
Rysunek 01. Standardowy formularz logowania (kliknij, aby wyświetlić obraz w pełnym rozmiarze)
Wszystkie metody pomocników HTML są wywoływane we właściwości Html widoku. Na przykład renderujesz element TextBox, wywołując metodę Html.TextBox().
Zwróć uwagę, że podczas wywoływania pomocników Html.TextBox() i Html.Password() użyto ograniczników skryptów <%= i %> . Ci pomocnicy po prostu zwracają ciąg. Aby renderować ciąg w przeglądarce, należy wywołać metodę Response.Write().
Używanie metod pomocnika HTML jest opcjonalne. Ułatwiają one życie dzięki zmniejszeniu ilości kodu HTML i skryptu potrzebnego do napisania. Widok na liście 5 renderuje dokładnie ten sam formularz co widok w liście 4 bez używania pomocników HTML.
Lista 5 -- \Views\Home\Login.aspx
<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Login Form</title>
</head>
<body>
<div>
<form method="post" action="/Home/Login">
<label for="userName">User Name:</label>
<br />
<input name="userName" />
<br /><br />
<label for="password">Password:</label>
<br />
<input name="password" type="password" />
<br /><br />
<input type="submit" value="Log In" />
</form>
</div>
</body>
</html>
Istnieje również możliwość utworzenia własnych pomocników HTML. Można na przykład utworzyć metodę pomocnika GridView(), która automatycznie wyświetla zestaw rekordów bazy danych w tabeli HTML. Zapoznajemy się z tym tematem w samouczku Tworzenie niestandardowych pomocników HTML.
Przekazywanie danych do widoku przy użyciu danych
Dane widoku służą do przekazywania danych z kontrolera do widoku. Wyświetl dane, takie jak pakiet, który wysyłasz pocztą. Wszystkie dane przekazane z kontrolera do widoku muszą być wysyłane przy użyciu tego pakietu. Na przykład kontroler na liście 6 dodaje komunikat do wyświetlania danych.
Lista 6 — ProductController.vb
Public Class ProductController
Inherits System.Web.Mvc.Controller
Function Index()
ViewData("message") = "Hello World!"
Return View()
End Function
End Class
Właściwość ViewData kontrolera reprezentuje kolekcję par nazw i wartości. Na liście 6 metoda Index() dodaje element do kolekcji danych widoku o nazwie message z wartością Hello world!. Gdy widok jest zwracany przez metodę Index(), dane widoku są przekazywane automatycznie do widoku.
Widok na liście 7 pobiera komunikat z danych widoku i renderuje komunikat w przeglądarce.
Lista 7 - \Views\Product\Index.aspx
<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Product Index</title>
</head>
<body>
<div>
<%=Html.Encode(ViewData("message"))%>
</div>
</body>
</html>
Zwróć uwagę, że widok korzysta z metody Pomocnika HTML.Encode() podczas renderowania komunikatu. Pomocnik HTML.Encode() koduje znaki specjalne, takie jak < i > , do znaków, które można bezpiecznie wyświetlić na stronie internetowej. Za każdym razem, gdy renderujesz zawartość przesyłaną przez użytkownika do witryny internetowej, należy zakodować zawartość, aby zapobiec atakom polegającym na wstrzyknięciu kodu JavaScript.
(Ponieważ sami utworzyliśmy komunikat w kontrolerze ProductController, tak naprawdę nie musimy kodować komunikatu. Jednak dobrym nawykiem jest zawsze wywoływanie metody Html.Encode() podczas wyświetlania zawartości pobranej z danych widoku w widoku).
Na liście 7 skorzystaliśmy z danych widoku w celu przekazania prostego komunikatu ciągu z kontrolera do widoku. Można również użyć widoku danych do przekazywania innych typów danych, takich jak kolekcja rekordów bazy danych, z kontrolera do widoku. Jeśli na przykład chcesz wyświetlić zawartość tabeli bazy danych Products w widoku, należy przekazać kolekcję rekordów bazy danych w widoku danych.
Istnieje również możliwość przekazywania silnie typiowanych danych widoku z kontrolera do widoku. Zapoznajemy się z tym tematem w samouczku Opis silnie typizowanego widoku danych i widoków.
Podsumowanie
Ten samouczek zawiera krótkie wprowadzenie do ASP.NET widoków MVC, wyświetlania danych i pomocników HTML. W pierwszej sekcji przedstawiono sposób dodawania nowych widoków do projektu. Wiesz już, że musisz dodać widok do odpowiedniego folderu, aby wywołać go z określonego kontrolera. Następnie omówiliśmy temat pomocników HTML. Wiesz już, jak pomocnicy HTML umożliwiają łatwe generowanie standardowej zawartości HTML. Na koniec przedstawiono sposób korzystania z wyświetlania danych w celu przekazania danych z kontrolera do widoku.
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