Přidání zobrazení (C#)
Poznámka:
Aktualizovaná verze tohoto kurzu je k dispozici zde , která používá ASP.NET MVC 5 a Visual Studio 2013. Je bezpečnější, mnohem jednodušší sledovat a demonstrovat další funkce.
V tomto kurzu se naučíte základy vytváření webové aplikace ASP.NET MVC pomocí sady Microsoft Visual Web Developer 2010 Express Service Pack 1, což je bezplatná verze sady Microsoft Visual Studio. Než začnete, ujistěte se, že jste nainstalovali níže uvedené požadavky. Všechny z nich můžete nainstalovat kliknutím na následující odkaz: Instalační program webové platformy. Případně můžete jednotlivé požadavky nainstalovat pomocí následujících odkazů:
- Požadavky pro Visual Studio Web Developer Express SP1
- aktualizace nástrojů ASP.NET MVC 3
- SQL Server Compact 4.0 (podpora modulu runtime a nástrojů)
Pokud používáte Sadu Visual Studio 2010 místo visual web developeru 2010, nainstalujte požadované součásti kliknutím na následující odkaz: Požadavky sady Visual Studio 2010.
K tomuto tématu je k dispozici projekt Visual Web Developer se zdrojovým kódem jazyka C#. Stáhněte si verzi jazyka C#. Pokud dáváte přednost jazyku Visual Basic, přepněte do verze jazyka Visual Basic tohoto kurzu.
V této části upravíte HelloWorldController třídu tak, aby používala soubory šablon zobrazení k čistému zapouzdření procesu generování odpovědí HTML klientovi.
Soubor šablony zobrazení vytvoříte pomocí nového modulu zobrazení Razor představeného s ASP.NET MVC 3. Šablony zobrazení založené na Razor mají příponu souboru .cshtml a poskytují elegantní způsob, jak vytvořit výstup HTML pomocí jazyka C#. Razor minimalizuje počet znaků a stisknutí kláves potřebných při psaní šablony zobrazení a umožňuje rychlý pracovní postup kódování tekutin.
Začněte pomocí šablony zobrazení s metodou Index HelloWorldController ve třídě. Index V současné době metoda vrací řetězec se zprávou, která je pevně zakódovaná ve třídě kontroleru. Změňte metodu Index View tak, aby vrátila objekt, jak je znázorněno v následujícím příkladu:
public ActionResult Index()
{
return View();
}
Tento kód používá šablonu zobrazení k vygenerování odpovědi HTML v prohlížeči. V projektu přidejte šablonu zobrazení, kterou můžete použít s metodou Index . Uděláte to tak, že kliknete pravým tlačítkem myši do Index metody a kliknete na Přidat zobrazení.
Zobrazí se dialogové okno Přidat zobrazení . Ponechte výchozí nastavení tak, jak jsou, a klikněte na tlačítko Přidat :
Vytvoří se složka MvcMovie\Views\HelloWorld a soubor MvcMovie\Views\HelloWorld\Index.cshtml . Můžete je zobrazit v Průzkumník řešení:
Následující příklad ukazuje soubor Index.cshtml , který byl vytvořen:
Přidejte pod značku nějaký kód HTML <h2> . Upravený soubor MvcMovie\Views\HelloWorld\Index.cshtml je zobrazen níže.
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>Hello from our View Template!</p>
Spusťte aplikaci a přejděte na HelloWorld kontroler (http://localhost:xxxx/HelloWorld). Metoda Index v kontroleru nefungovala moc. Jednoduše spustil return View()příkaz, který určil, že metoda by měla k vykreslení odpovědi v prohlížeči použít soubor šablony zobrazení. Protože jste 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.cshtml ve složce \Views\HelloWorld . Na následujícím obrázku je řetězec pevně zakódovaný v zobrazení.
Vypadá docela dobře. Všimněte si však, že záhlaví prohlížeče říká "Index" a velký název na stránce říká "Moje aplikace MVC". Pojďme to změnit.
Změna zobrazení a stránek rozložení
Nejprve chcete změnit název "Moje aplikace MVC" v horní části stránky. Tento text je společný pro každou stránku. Ve skutečnosti se implementuje pouze na jednom místě v projektu, i když se zobrazuje na každé stránce aplikace. Přejděte do složky /Views/Shared v Průzkumník řešení a otevřete soubor _Layout.cshtml. Tento soubor se nazývá stránka rozložení a jedná se o sdílené prostředí, které používají všechny ostatní stránky.
Šablony rozložení umožňují určit rozložení kontejneru HTML webu na jednom místě a pak ho použít na více stránkách webu. Všimněte si @RenderBody() řádku v dolní části souboru. RenderBody je zástupný symbol, kde se všechny stránky specifické pro zobrazení, které vytvoříte, zobrazují na stránce rozložení "zabalené". Změňte nadpis v šabloně rozložení z "Moje aplikace MVC" na "MVC Movie App".
<div id="title">
<h1>MVC Movie App</h1>
</div>
Spusťte aplikaci a všimněte si, že teď říká "MVC Movie App". Klikněte na odkaz O produktu a uvidíte, jak se na této stránce zobrazuje i filmová aplikace MVC. Změnu jsme mohli provést jednou v šabloně rozložení a všechny stránky na webu odrážejí nový název.
Úplný soubor _Layout.cshtml je uvedený níže:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>MVC Movie App</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
Teď změníme název indexové stránky (zobrazení).
Otevřete soubor MvcMovie\Views\HelloWorld\Index.cshtml. Změna se dá provést na dvou místech: nejprve text, který se zobrazí v názvu prohlížeče, a potom v sekundární hlavičce (elementu <h2> ). Změníte je trochu jinak, abyste viděli, který část aplikace změní kód.
@{
ViewBag.Title = "Movie List";
}
<h2>My Movie List</h2>
<p>Hello from our View Template!</p>
Chcete-li označit název HTML, který se má zobrazit, nastaví výše uvedený Title kód vlastnost objektu ViewBag (který je v šabloně zobrazení Index.cshtml ). Pokud se podíváte zpět na zdrojový kód šablony rozložení, všimnete si, že šablona používá tuto hodnotu v <title> elementu jako součást <head> oddílu HTML. Pomocí tohoto přístupu můžete snadno předat další parametry mezi šablonou zobrazení a souborem rozložení.
Spusťte aplikaci a přejděte na http://localhost:xx/HelloWorld. Všimněte si, že se změnil název prohlížeče, primární nadpis a sekundární nadpisy. (Pokud v prohlížeči nevidíte změny, může se zobrazit obsah uložený v mezipaměti. Stisknutím kombinace kláves Ctrl+F5 v prohlížeči vynutíte načtení odpovědi ze serveru.)
Všimněte si také, jak byl obsah v šabloně zobrazení Index.cshtml sloučen s šablonou zobrazení _Layout.cshtml a do prohlížeče byla odeslána jedna odpověď HTML. Šablony rozložení usnadňují provádění změn, které se týkají všech stránek ve vaší aplikaci.
Naše malá část "dat" (v tomto případě zpráva "Hello z naší šablony zobrazení!") je ale pevně zakódovaná. Aplikace MVC má "V" (zobrazení) a vy máte "C" (kontroler), ale zatím nemáte "M" (model). Za chvíli si ukážeme, jak vytvořit databázi a načíst z ní data modelu.
Předávání dat ze kontroleru do zobrazení
Než přejdeme do databáze a promluvíme si o modelech, pojďme si nejprve promluvit o předávání informací z kontroleru do zobrazení. Třídy kontroleru se vyvolávají v reakci na příchozí požadavek adresy URL. Třída kontroleru je místo, kde napíšete kód, který zpracovává příchozí parametry, načte data z databáze a nakonec rozhodne, jaký typ odpovědi se má odeslat zpět do prohlížeče. Šablony zobrazení je pak možné použít z kontroleru k vygenerování a naformátování odpovědi HTML na prohlížeč.
Kontrolery zodpovídají za poskytování jakýchkoli dat nebo objektů, aby šablona zobrazení vykreslila odpověď do prohlížeče. Šablona zobrazení by nikdy neměla provádět obchodní logiku ani pracovat s databází přímo. Místo toho by měl fungovat jenom s daty, která mu správce poskytuje. Udržování tohoto "oddělení obav" pomáhá udržovat kód čistý a lépe udržovatelný.
Welcome V současné době metoda akce ve HelloWorldController třídě přebírá name a numTimes parametr a pak vypíše hodnoty přímo do prohlížeče. Místo toho, aby kontroler vykreslovat tuto odpověď jako řetězec, změníme kontroler tak, aby místo toho používal šablonu zobrazení. Šablona zobrazení vygeneruje dynamickou odpověď, což znamená, že k vygenerování odpovědi potřebujete předat odpovídající bity dat ze kontroleru do zobrazení. Můžete to udělat tak, že kontroler umístí dynamická data, která šablona zobrazení potřebuje, do ViewBag objektu, ke kterému má šablona zobrazení přístup.
Vraťte se do souboru HelloWorldController.cs a změňte metodu Welcome pro přidání Message a NumTimes hodnotu do objektu ViewBag . ViewBag je dynamický objekt, což znamená, že do něj můžete vložit cokoli chcete; objekt ViewBag nemá žádné definované vlastnosti, dokud do něj něco nevložíte. Úplný soubor HelloWorldController.cs vypadá takto:
using System.Web;
using System.Web.Mvc;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Welcome(string name, int numTimes = 1)
{
ViewBag.Message = "Hello " + name;
ViewBag.NumTimes = numTimes;
return View();
}
}
}
ViewBag Teď objekt obsahuje data, která se automaticky předají do zobrazení.
Dále potřebujete šablonu úvodního zobrazení. V nabídce Ladění vyberte Sestavit MvcMovie a ujistěte se, že je projekt zkompilován.
Potom klikněte pravým tlačítkem myši do Welcome metody a klikněte na Přidat zobrazení. Takto vypadá dialogové okno Přidat zobrazení:
Klepněte na tlačítko Přidat a potom přidejte následující kód pod <h2> element v novém souboru Welcome.cshtml . Vytvoříte smyčku s textem "Hello" tolikrát, kolikrát uživatel říká, že by měl. Níže je uveden úplný soubor Welcome.cshtml .
@{
ViewBag.Title = "Welcome";
}
<h2>Welcome</h2>
<ul>
@for (int i=0; i < ViewBag.NumTimes; i++) {
<li>@ViewBag.Message</li>
}
</ul>
Spusťte aplikaci a přejděte na následující adresu URL:
http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4
Teď se data přenesou z adresy URL a automaticky se předají kontroleru. Kontroler zabalí data do objektu ViewBag a předá ho do zobrazení. Zobrazení pak uživateli zobrazí data jako HTML.
No, to byl druh "M" pro model, ale ne typ databáze. Pojďme se podívat, co jsme se naučili, a vytvořit databázi filmů.