ASP.NET MVC – přehled zobrazení (C#)
Co je zobrazení ASP.NET MVC a jak se liší od stránky HTML? V tomto kurzu vás Stephen Walther seznámí se zobrazeními a ukáže vám, jak můžete v zobrazení využít výhod funkce Zobrazit data a pomocné rutiny HTML.
Účelem tohoto kurzu je poskytnout vám stručný úvod do ASP.NET zobrazení MVC, zobrazení dat a pomocných rutin HTML. Na konci tohoto kurzu byste měli vědět, jak vytvářet nová zobrazení, předávat data z kontroleru do zobrazení a používat pomocné rutiny HTML ke generování obsahu v zobrazení.
Principy zobrazení
Pro ASP.NET nebo active serverové stránky ASP.NET MVC neobsahuje nic, co přímo odpovídá stránce. V aplikaci ASP.NET MVC není na disku stránka, která odpovídá cestě v adrese URL, kterou zadáte do adresního řádku prohlížeče. Co nejblíže ke stránce v aplikaci ASP.NET MVC je něco, co se nazývá zobrazení.
V aplikaci ASP.NET MVC se příchozí požadavky prohlížeče mapují na akce kontroleru. Akce kontroleru může vrátit zobrazení. Akce kontroleru ale může provést nějaký jiný typ akce, například vás přesměruje na jinou akci kontroleru.
Výpis 1 obsahuje jednoduchý kontroler s názvem HomeController. HomeController zveřejňuje dvě akce kontroleru s názvy Index() a Details().
Výpis 1 – HomeController.cs
using System.Web.Mvc;
namespace MvcApplication1.Controllers
{
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Details()
{
return RedirectToAction("Index");
}
}
}
První akci Index() můžete vyvolat zadáním následující adresy URL do adresního řádku prohlížeče:
/Home/Index
Druhou akci Details() můžete vyvolat zadáním této adresy do prohlížeče:
/Home/Podrobnosti
Akce Index() vrátí zobrazení. Většina akcí, které vytvoříte, vrátí zobrazení. Akce však může vrátit jiné typy výsledků akce. Například akce Details() vrátí hodnotu RedirectToActionResult, která přesměruje příchozí požadavek na akci Index().
Akce Index() obsahuje následující jeden řádek kódu:
View();
Tento řádek kódu vrátí zobrazení, které se musí na webovém serveru nacházet v následující cestě:
\Views\Home\Index.aspx
Cesta k zobrazení je odvozena z názvu kontroleru a názvu akce kontroleru.
Pokud chcete, můžete o zobrazení mluvit explicitně. Následující řádek kódu vrátí zobrazení s názvem Fred :
View( Fred );
Při spuštění tohoto řádku kódu se vrátí zobrazení z následující cesty:
\Views\Home\Fred.aspx
Poznámka
Pokud plánujete vytvořit testy jednotek pro aplikaci ASP.NET MVC, je vhodné explicitně použít názvy zobrazení. Tímto způsobem můžete vytvořit test jednotek, který ověří, že akce kontroleru vrátila očekávané zobrazení.
Přidání obsahu do zobrazení
Zobrazení je standardní (X)dokument HTML, který může obsahovat skripty. Pomocí skriptů přidáte dynamický obsah do zobrazení.
Například zobrazení v seznamu 2 zobrazuje aktuální datum a čas.
Výpis 2 – \Views\Home\Index.aspx
<%@ Page Language="C#" 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>
Všimněte si, že text stránky HTML ve výpisu 2 obsahuje následující skript:
<% Response.Write(DateTime.Now);%>
Oddělovače <skriptů % a %> slouží k označení začátku a konce skriptu. Tento skript je napsaný v jazyce C#. Zobrazuje aktuální datum a čas voláním metody Response.Write() pro vykreslení obsahu do prohlížeče. Oddělovače skriptů <% a %> lze použít ke spuštění jednoho nebo více příkazů.
Vzhledem k tomu, že často voláte Metodu Response.Write(), Microsoft vám poskytne zástupce pro volání metody Response.Write(). Zobrazení ve výpisu 3 používá oddělovače <%= a %> jako zástupce pro volání Response.Write().
Výpis 3 – Views\Home\Index2.aspx
<%@ Page Language="C#" 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>
Ke generování dynamického obsahu v zobrazení můžete použít libovolný jazyk .NET. K zápisu kontrolerů a zobrazení obvykle použijete Visual Basic .NET nebo C#.
Použití pomocných rutin HTML ke generování obsahu zobrazení
Pokud si chcete usnadnit přidávání obsahu do zobrazení, můžete využít něco, co se nazývá pomocník HTML. Pomocník HTML je obvykle metoda, která generuje řetězec. Pomocné rutiny HTML můžete použít ke generování standardních elementů HTML, jako jsou textová pole, odkazy, rozevírací seznamy a seznamy.
Například zobrazení ve výpisu 4 využívá tři pomocné rutiny HTML – BeginForm(), Pomocné rutiny TextBox() a Password() – k vygenerování přihlašovacího formuláře (viz Obrázek 1).
Výpis 4 – \Views\Home\Login.aspx
<%@ Page Language="C#" 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" />
<% } %>
</div>
</body>
</html>
Obrázek 01: Standardní přihlašovací formulář (kliknutím zobrazíte obrázek v plné velikosti)
Všechny pomocné metody HTML jsou volána ve vlastnosti HTML zobrazení. Můžete například vykreslit TextBox voláním Html.TextBox() metoda.
Všimněte si, že při volání pomocných rutin Html.TextBox() a Html.Password() používáte oddělovače skriptů <%= a %> . Tyto pomocné rutiny jednoduše vrátí řetězec. Abyste mohli řetězec vykreslit do prohlížeče, musíte volat metodu Response.Write().
Použití pomocných metod HTML je volitelné. Usnadňují vám život tím, že snižují množství KÓDU HTML a skriptů, které potřebujete napsat. Zobrazení ve výpisu 5 vykreslí úplně stejný formulář jako zobrazení v výpisu 4 bez použití pomocných rutin HTML.
Výpis 5 – \Views\Home\Login.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index4.aspx.cs" Inherits="MvcApp.Views.Home.Index4" %>
<!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 without Help</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>
Máte také možnost vytvořit si vlastní pomocné rutiny HTML. Můžete například vytvořit pomocnou metodu GridView(), která automaticky zobrazí sadu databázových záznamů v tabulce HTML. Toto téma prozkoumáme v kurzu Vytváření vlastních pomocných rutin HTML.
Použití zobrazení dat k předávání dat do zobrazení
Data zobrazení se používají k předávání dat z kontroleru do zobrazení. Zobrazení dat si můžete představit jako balíček, který odešlete e-mailem. Všechna data předávaná z kontroleru do zobrazení musí být odeslána pomocí tohoto balíčku. Například kontroler ve výpisu 6 přidá zprávu pro zobrazení dat.
Výpis 6 – ProductController.cs
using System.Web.Mvc;
namespace MvcApplication1.Controllers
{
public class ProductController : Controller
{
public ActionResult Index()
{
ViewData["message"] = "Hello World!";
return View();
}
}
}
Vlastnost kontroleru ViewData představuje kolekci dvojic název a hodnota. Ve výpisu 6 metoda Index() přidá položku do kolekce dat zobrazení s názvem message s hodnotou Hello World!. Když je zobrazení vráceno metodou Index(), data zobrazení se do zobrazení předají automaticky.
Zobrazení ve výpisu 7 načte zprávu z dat zobrazení a vykreslí ji do prohlížeče.
Výpis 7 - \Views\Product\Index.aspx
<%@ Page Language="C#" 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>
Všimněte si, že zobrazení při vykreslování zprávy využívá pomocnou metodu HTML Html.Encode(). Html.Encode() Html Helper kóduje speciální znaky, například < a > do znaků, které lze bezpečně zobrazit na webové stránce. Kdykoli vykreslíte obsah, který uživatel odešle na web, měli byste obsah zakódovat, abyste zabránili útokům prostřednictvím injektáže JavaScriptu.
(Protože jsme zprávu vytvořili sami v kontroleru ProductController, nemusíme zprávu kódovat. Při zobrazení obsahu načteného z dat zobrazení v zobrazení je však vhodné vždy volat metodu Html.Encode().)
Ve výpisu 7 jsme využili výhod zobrazení dat k předání jednoduché řetězcové zprávy z kontroleru do zobrazení. Data zobrazení můžete také použít k předávání jiných typů dat, například kolekce databázových záznamů, z kontroleru do zobrazení. Pokud například chcete zobrazit obsah databázové tabulky Produkty v zobrazení, pak byste kolekci databázových záznamů předali v zobrazení dat.
Máte také možnost předat data zobrazení silného typu z kontroleru do zobrazení. Toto téma prozkoumáme v kurzu Principy dat a zobrazení zobrazení silného typu.
Souhrn
Tento kurz poskytuje stručný úvod do ASP.NET zobrazení MVC, zobrazení dat a pomocných rutin HTML. V první části jste zjistili, jak do projektu přidat nová zobrazení. Dozvěděli jste se, že abyste ho mohli volat z konkrétního kontroleru, musíte do správné složky přidat zobrazení. Dále jsme probrali téma pomocných rutin HTML. Dozvěděli jste se, jak pomocné rutiny HTML umožňují snadno generovat standardní obsah HTML. Nakonec jste zjistili, jak využít možnosti zobrazení dat k předávání dat z kontroleru do zobrazení.