Přidání zobrazení – Použití souboru šablony zobrazení k čistému zapouzdření generování odpovědí HTML zpět klientovi
Toto je kurz pro začátečníky, který představuje základy ASP.NET MVC. Vytvoříte jednoduchou webovou aplikaci, která čte a zapisuje z databáze. Další kurzy a ukázky ASP.NET MVC najdete ve výukovém centru ASP.NET MVC .
V této části se podíváme na to, jak můžeme naši třídu HelloWorldController použít soubor šablony View k čistému zapouzdření generování odpovědí HTML zpět do klienta.
Začněme pomocí šablony Zobrazení s naší metodou indexu. Naše metoda se nazývá Index a je v HelloWorldController. V současné době metoda Index() vrací řetězec se zprávou, která je pevně zakódovaná v rámci třídy Controller.
public string Index()
{
return "<html><body>This is my default action...</body></html>";
}
Teď změníme metodu Index tak, aby místo toho vypadala takto:
public ActionResult Index()
{
return View();
}
Teď do projektu přidáme šablonu Zobrazení, kterou můžeme použít pro metodu Index(). Uděláte to tak, že kliknete pravým tlačítkem myši někde uprostřed indexové metody a kliknete na Přidat zobrazení...
Tím se zobrazí dialogové okno Přidat zobrazení, které poskytuje několik možností, jak chceme vytvořit šablonu zobrazení, kterou může použít naše metoda indexu. Prozatím nic neměňte a stačí kliknout na tlačítko Přidat.
Po kliknutí na Přidat se ve složce řešení zobrazí nová složka a nový soubor, jak vidíte tady. Teď mám složku HelloWorld v části Zobrazení a soubor Index.aspx uvnitř této složky.
Nový indexový soubor je také již otevřen a připraven k úpravám. Pod první <index h2>/h2> přidejte nějaký text, třeba< "Hello World".
<h2>Index</h2>
Hello world!
Spusťte aplikaci a znovu přejděte http://localhost:xx/HelloWorld do prohlížeče. Metoda Index v kontroleru v tomto příkladu nedělala žádnou práci, ale volala metodu return View(), která značila, že chceme k vykreslení odpovědi zpět klientovi použít soubor šablony zobrazení. Vzhledem k tomu, že jsme explicitně nezadali název souboru šablony zobrazení, který se má použít, ASP.NET MVC ve výchozím nastavení použil soubor zobrazení Index.aspx ve složce \Views\HelloWorld. Teď vidíme řetězec, který jsme pevně zakódovali v zobrazení.
Vypadá to docela dobře. Všimněte si však, že název prohlížeče je "Index" a velký název na stránce je "My MVC Application" (Moje aplikace MVC). Pojďme je změnit.
Změna zobrazení a stránek předlohy
Nejprve změníme text "Moje aplikace MVC". Tento text se sdílí a zobrazuje se na každé stránce. Ve skutečnosti se zobrazuje jenom na jednom místě v našem kódu, i když je na každé stránce v naší aplikaci. V Průzkumník řešení přejděte do složky /Views/Shared a otevřete soubor Site.Master. Tento soubor se nazývá stránka předlohy a je to sdílené prostředí, které používají všechny naše ostatní stránky.
Všimněte si v tomto souboru textu ContentPlaceholder MainContent.
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
Tento zástupný symbol je místo, kde se zobrazí všechny stránky, které vytvoříte, "zabalené" na stránce předlohy. Zkuste změnit název a pak aplikaci spusťte a navštivte několik stránek. Všimněte si, že se vaše jedna změna zobrazí na více stránkách.
<div id="title">
<h1>My MVC Movie Application</h1>
</div>
Teď bude mít každá stránka primární nadpis – to je H1 – "Moje aplikace pro film MVC". Tím se zpracuje bílý text v horní části, který se sdílí na všech stránkách.
Zde je Site.Master v celém rozsahu s naším změněným názvem:
<%@ 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>
Teď změníme název stránky Index.
Otevřete soubor /HelloWorld/Index.aspx. Je potřeba změnit dvě místa. Nejprve název, který se zobrazí v názvu prohlížeče, a pak sekundární hlavička – to je také H2. Nastavím je každý trochu jinak, abyste viděli, která část kódu se v které části aplikace mění.
<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>
Spusťte aplikaci a přejděte na /Movies. Všimněte si, že se změnil název prohlížeče, primární nadpis a sekundární nadpisy. V aplikaci můžete snadno provádět velké změny s malými změnami zobrazení.
Náš malý kousek "dat" (v tomto případě zpráva "Hello World!" byl ale pevně zakódován. Máme V (zobrazení) a C (kontrolery), ale zatím žádný M (model). Za chvíli si ukážeme, jak vytvořit databázi a načíst z ní data modelu.
Předání modelu ViewModel
Než ale přejdeme k databázi a promluvíme si o modelech, pojďme si nejdřív promluvit o modelech ViewModels. Jedná se o objekty, které představují, co šablona zobrazení vyžaduje k vykreslení odpovědi HTML zpět klientovi. Obvykle jsou vytvořeny a předány kontrolerem do šablony Zobrazení a měly by obsahovat pouze data, která šablona Zobrazení vyžaduje – a ne více.
Dříve s naší ukázkou HelloWorld naše metoda akce Welcome() vzala název a parametr numTimes a vysílala ho do prohlížeče. Místo toho, aby kontroler pokračoval v vykreslování této odpovědi přímo, vytvoříme malou třídu, která bude uchovávat tato data, a pak ji předáme do šablony Zobrazení, která pomocí ní vykreslí odpověď HTML. Kontroler se tak zabývá jednou věcí a šablonou zobrazení jinou – což nám umožňuje udržovat čisté "oddělení zájmů" v rámci naší aplikace.
Vraťte se do souboru HelloWorldController.cs, přidejte novou třídu "WelcomeViewModel" a změňte metodu Welcome uvnitř kontroleru. Tady je kompletní soubor HelloWorldController.cs s novou třídou ve stejném souboru.
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; }
}
}
}
I když je metoda Welcome na více řádcích, jsou ve skutečnosti pouze dva příkazy kódu. První příkaz zabalí naše dva parametry do objektu ViewModel a druhý předá výsledný objekt do View.
Teď potřebujeme šablonu uvítacího zobrazení. Klikněte pravým tlačítkem na metodu Welcome a vyberte Přidat zobrazení. Tentokrát zaškrtneme "Vytvořit zobrazení se silnými typy" a v rozevíracím seznamu vybereme naši třídu WelcomeViewModel. Toto nové zobrazení bude vědět pouze o WelcomeViewModels a žádné jiné typy objektů.
POZNÁMKA: Po přidání modelu WelcomeViewModel pro budete muset být zkompilován jednou, aby se zobrazil v rozevíracím seznamu.
Dialogové okno Přidat zobrazení by mělo vypadat takto. Klikněte na tlačítko Přidat. 
Přidejte tento kód pod <h2> v novém souboru Welcome.aspx. Vytvoříme smyčku a řekneme Hello tolikrát, kolikrát uživatel řekne, že bychom měli.
<% for(int i=0;i<Model.NumTimes;i++) { %>
<%h3><%: Model.Message %></h3>
<% } %>
Všimněte si také, že zatímco píšete, že vzhledem k tomu, že jsme toto zobrazení řekli o modelu WelcomeViewModel (jsou manželé, pamatujete si?), dostaneme užitečné IntelliSense pokaždé, když odkazujeme na objekt Model, jak je vidět na následujícím snímku obrazovky:
Spusťte aplikaci a znovu ji navštivte http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4 . Teď přebíráme data z adresy URL, která se automaticky předá kontroleru, kontroler data zabalí do modelu ViewModel a předá tento objekt do našeho zobrazení. Zobrazení než zobrazí uživateli data ve formátu HTML.
No, to bylo něco jako "M" pro model, ale ne typ databáze. Pojďme si vzít, co jsme se naučili, a vytvořit databázi filmů.