Část 2: Kontrolery
MVC Music Store je výuková aplikace, která představuje a vysvětluje podrobný postup použití ASP.NET MVC a sady Visual Studio pro vývoj pro web.
MVC Music Store je odlehčená ukázková implementace, která prodává hudební alba online a implementuje základní správu webu, přihlašování uživatelů a funkce nákupního košíku.
Tato série kurzů podrobně popisuje všechny kroky k vytvoření ukázkové aplikace ASP.NET MVC Music Store. Část 2 se zabývá kontrolery.
U tradičních webových architektur se příchozí adresy URL obvykle mapují na soubory na disku. Příklad: Žádost o adresu URL, jako je /Products.aspx nebo /Products.php, může být zpracována souborem "Products.aspx" nebo "Products.php".
Webové architektury MVC mapují adresy URL na serverový kód trochu jiným způsobem. Místo mapování příchozích adres URL na soubory mapují adresy URL na metody ve třídách. Tyto třídy se nazývají "Kontrolery" a zodpovídají za zpracování příchozích požadavků HTTP, zpracování vstupu uživatele, načítání a ukládání dat a určení odpovědi pro odeslání zpět klientovi (zobrazení HTML, stažení souboru, přesměrování na jinou adresu URL atd.).
Přidání homecontrolleru
Aplikaci MVC Music Store zahájíme přidáním třídy Controller, která bude zpracovávat adresy URL na domovskou stránku našeho webu. Budeme postupovat podle výchozích zásad vytváření názvů ASP.NET MVC a nazveme ho HomeController.
Klikněte pravým tlačítkem na složku Kontrolery v Průzkumník řešení a vyberte Přidat a pak vyberte Kontroler. Příkaz:
Tím se zobrazí dialogové okno Přidat kontroler. Pojmenujte ovladač HomeController a stiskněte tlačítko Přidat.
Tím vytvoříte nový soubor HomeController.cs s následujícím kódem:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcMusicStore.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
}
Abychom mohli začít co nejsnáz, nahradíme metodu Index jednoduchou metodou, která vrací jenom řetězec. Provedeme dvě změny:
- Změňte metodu tak, aby vracela řetězec místo hodnoty ActionResult.
- Změňte příkaz return tak, aby vracel "Hello z domova".
Metoda by teď měla vypadat takto:
public string Index()
{
return "Hello from Home";
}
Spuštění aplikace
Teď spustíme web. Webový server můžeme spustit a vyzkoušet ho pomocí některé z následujících možností:
- Zvolte položku nabídky Ladit ⇨ Spustit ladění.
- Klikněte na tlačítko Se zelenou šipkou na panelu nástrojů
- Použijte klávesovou zkratku F5.
Pomocí některého z výše uvedených kroků se zkompiluje projekt a pak se spustí ASP.NET Development Server, který je integrovaný do visual web developeru. V dolním rohu obrazovky se zobrazí oznámení o tom, že se spustil ASP.NET Vývojový server, a zobrazí číslo portu, pod kterým běží.
Visual Web Developer pak automaticky otevře okno prohlížeče, jehož adresa URL odkazuje na náš webový server. To nám umožní rychle vyzkoušet naši webovou aplikaci:
Dobře, to bylo docela rychlé – vytvořili jsme nový web, přidali třířádkovou funkci a v prohlížeči máme text. Ne raketová věda, ale je to začátek.
Poznámka: Visual Web Developer zahrnuje ASP.NET Development Server, který spustí váš web na náhodném čísle volného portu. Na snímku obrazovky výše je web spuštěný na http://localhost:26641/adrese , takže používá port 26641. Číslo vašeho portu se bude lišit. Když v tomto kurzu mluvíme o adresách URL, jako je /Store/Browse, bude to za číslem portu. Za předpokladu, že je číslo portu 26641, bude přechod na adresu /Store/Browse znamenat přechod na http://localhost:26641/Store/Browseadresu .
Přidání StoreControlleru
Přidali jsme jednoduchý HomeController, který implementuje domovskou stránku našeho webu. Teď přidáme další ovladač, který použijeme k implementaci funkce procházení v našem obchodě s hudbou. Náš kontroler obchodů bude podporovat tři scénáře:
- Stránka se seznamem hudebních žánrů v našem obchodě s hudbou
- Stránka procházení se seznamem všech hudebních alb v určitém žánru
- Stránka s podrobnostmi, která zobrazuje informace o konkrétním hudebním albu
Začneme přidáním nové třídy StoreController. Pokud jste to ještě neudělali, ukončete spuštění aplikace zavřením prohlížeče nebo výběrem položky nabídky Ladit ⇨ Zastavit ladění.
Teď přidejte nový StoreController. Stejně jako u homecontrolleru to uděláme tak, že v Průzkumník řešení klikneme pravým tlačítkem na složku Controllers a zvolíme položku nabídky Add-Controller>.
Náš nový StoreController už má metodu Index. Tuto metodu Index použijeme k implementaci stránky s výpisem, která obsahuje seznam všech žánrů v našem obchodě s hudbou. Přidáme také dvě další metody pro implementaci dvou dalších scénářů, které chceme, aby storeController zpracovával: Browse (Procházet) a Details (Podrobnosti).
Tyto metody (Index, Browse a Details) v rámci kontroleru se nazývají "Akce kontroleru", a jak jste už viděli u metody akce HomeController.Index(), jejich úkolem je reagovat na požadavky adresy URL a (obecně řečeno) určit, jaký obsah se má odeslat zpět prohlížeči nebo uživateli, který adresu URL vyvolal.
Zahájíme implementaci StoreController tak, že změníme metodu Index() tak, aby vracela řetězec "Hello z Store.Index() " a přidáme podobné metody pro Browse() a Details():
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcMusicStore.Controllers
{
public class StoreController : Controller
{
//
// GET: /Store/
public string Index()
{
return "Hello from Store.Index()";
}
//
// GET: /Store/Browse
public string Browse()
{
return "Hello from Store.Browse()";
}
//
// GET: /Store/Details
public string Details()
{
return "Hello from Store.Details()";
}
}
}
Spusťte projekt znovu a procházejte následující adresy URL:
- /Úložiště
- /Store/Browse
- /Store/Podrobnosti
Přístup k těmto adresám URL vyvolá metody akcí v rámci kontroleru a vrátí řetězcové odpovědi:
To je skvělé, ale jsou to jen konstantní řetězce. Pojďme je nastavit jako dynamické, aby převzaly informace z adresy URL a zobrazily je ve výstupu stránky.
Nejprve změníme metodu akce Procházet tak, aby načetla hodnotu řetězce dotazu z adresy URL. Můžeme to udělat tak, že do metody akce přidáme parametr "žánr". Když to uděláme ASP.NET MVC při vyvolání automaticky předá všechny parametry dotazu řetězce dotazu nebo odeslání formuláře s názvem "žánr".
//
// GET: /Store/Browse?genre=Disco
public string Browse(string genre)
{
string message = HttpUtility.HtmlEncode("Store.Browse, Genre = "
+ genre);
return message;
}
Poznámka: K sanitizaci uživatelského vstupu používáme metodu nástroje HttpUtility.HtmlEncode. Zabráníte tak uživatelům v vložení JavaScriptu do našeho zobrazení pomocí odkazu jako /Store/Browse? Genre=<script>window.location='http://hackersite.com'</script>.
Teď přejděme na /Store/Browse? Žánr = Disco
Teď změníme akci Podrobnosti tak, aby načetla a zobrazila vstupní parametr s názvem ID. Na rozdíl od předchozí metody nebudeme vkládat hodnotu ID jako parametr řetězce dotazu. Místo toho ho vložíme přímo do adresy URL. Příklad: /Store/Details/5.
ASP.NET MVC nám to umožňuje snadno provést bez nutnosti cokoli konfigurovat. ASP.NET výchozí konvencí směrování MVC je zacházet se segmentem adresy URL za názvem metody akce jako s parametrem s názvem "ID". Pokud má vaše metoda akce parametr s názvem ID, pak ASP.NET MVC automaticky předá segment adresy URL jako parametr.
//
// GET: /Store/Details/5
public string Details(int id)
{
string message = "Store.Details, ID = " + id;
return message;
}
Spusťte aplikaci a přejděte na /Store/Details/5:
Zrekapitulujme si, co jsme zatím udělali:
- Ve Visual Web Developeru jsme vytvořili nový projekt ASP.NET MVC.
- Probrali jsme základní strukturu složek aplikace ASP.NET MVC.
- Naučili jsme se, jak spustit náš web pomocí ASP.NET Development Serveru.
- Vytvořili jsme dvě třídy kontroleru: HomeController a StoreController.
- Do kontrolerů jsme přidali metody akcí, které reagují na požadavky adresy URL a vracejí text do prohlížeče.