Lekce 2 - Single Page Application v ASP.NET - Podstránky a Web API
V minulé lekci, Úvod do Single Page Application v ASP.NET, jsme si udělali úvod a vytvořili nový projekt.
Ten budeme v dnešním C# .NET tutoriálu rozšiřovat.
Přidání podstránky
Jako první si do aplikace přidáme novou záložku pro Osoby.
ViewModel
Jistě jste již seznámeni s architektonickou komponentou ViewModel, kterou jsme používali např. u formulářů při zpracování dat a validaci. V SPA budeme v JavaScriptu používat také ViewModely, které úplně stejně provážeme na pohledy a díky automatickým bindingům hodnot nám velmi zjednoduší práci.
Do složky Scripts/App přidejme nový javascriptový soubor osoby.viewmodel.js. Jeho obsah bude následující:
function OsobyViewModel(app, dataModel) { } // Registrace ViewModelu app.addViewModel({ name: "Osoby", bindingMemberName: "osoby", factory: OsobyViewModel });
Jako první si vytvoříme "třídu" OsobyViewModel. Tu následně registrujeme jako ViewModel SPA aplikace pomocí objektu app, který nám poskytuje a předgenerovalo ASP.NET. Důležité je zejména bindingMemberName, pomocí kterého budeme z šablon k ViewModelu přistupovat.
Nový javascriptový soubor musíme zaregistrovat do balíčku, které ASP.NET ve stránce načítá. Přesuneme se do App_Start/BundleConfig. Najdeme bundle "~/bundles/app" a mezi soubory přidáme další řádku s naším novým modelem:
bundles.Add(new ScriptBundle("~/bundles/app").Include( "~/Scripts/app/ajaxPrefilters.js", "~/Scripts/app/app.bindings.js", "~/Scripts/app/app.datamodel.js", "~/Scripts/app/app.viewmodel.js", "~/Scripts/app/home.viewmodel.js", "~/Scripts/app/login.viewmodel.js", "~/Scripts/app/register.viewmodel.js", "~/Scripts/app/registerExternal.viewmodel.js", "~/Scripts/app/manage.viewmodel.js", "~/Scripts/app/userInfo.viewmodel.js", "~/Scripts/app/osoby.viewmodel.js", // Přidaný řádek "~/Scripts/app/_run.js"));
Pohled
Do složky Views/Home přidáme nový pohled. Pojmenujeme ho _Osoby a nastavíme jako partial view. Pokud jste se s partial views ještě nesetkali, jedná se o pohledy, které neobsahují kompletní HTML strukturu, ale pouze její fragment, který se následně vkládá do celkového layoutu stránky. Typicky je zde tedy obsah jedné konkrétní podstránky, ale menu a další části webu jsou uloženy jinde. Partial pohledy je zvykem pojmenovávat tak, aby začínaly podtržítkem.

Do šablony vložíme následující HTML kód:
<!-- ko with: osoby --> <div class="jumbotron"> <h1>Osoby</h1> <p class="lead">Osoby v evidenci.</p> </div> <!-- /ko -->
Komentáře se zkratkou ko jsou direktivy frameworku knockout.js. Označují, že tato část stránky se váže na ViewModel osoby a měla by se zobrazovat jen tehdy, když s ním pracujeme.
Layout
Jako poslední upravíme samotný layout. Přesuneme se do Views/Home/Index.cshtml. Nejprve upravíme navigační menu a to tak, že do něj přidáme odkaz na naši podstránku s osobami. Podoba seznamu s menu je nyní následující:
<ul class="nav navbar-nav"> <li><a href="#" data-bind="click: navigateToHome">Home</a></li> <li><a href="#" data-bind="click: navigateToOsoby">Osoby</a></li> <li>@Html.ActionLink("API", "Index", "Help", new { area = "HelpPage" }, null)</li> </ul>
Knockout framework nám poskytuje možnost přepínání podstránek pomocí data atributu data-bind s hodnotou "click: navigateToNazevViewModelu".
Ještě však nejsme hotoví. V té samé šabloně se přesuneme dolů, kde nalezneme sérii příkazů @Html.Partial(), která renderuje jednotlivé pohledy. Zde vidíme, že se do layoutu opravdu vygenerují úplně všechny podstránky, které knockout.js poté skryje, takže vidíme jen tu aktuální. Do série přidáme i naši parciální šablonu _Osoby:
@Html.Partial("_Home") @Html.Partial("_Login") @Html.Partial("_Register") @Html.Partial("_RegisterExternal") @Html.Partial("_Manage") @Html.Partial("_Osoby")
Když nyní aplikaci spustíme, měli byste mít v menu novou položku Osoby a po kliknutí na ni byste se měli přesunout bez přenačtení stránky na nový pohled.

Můžete se podívat do zdrojového kódu stránky, že obsahuje opravdu všechny pohledy najednou:

Back-end
K další funkcionalitě aplikace budeme z JavasSriptu potřebovat komunikovat s databází osob. Závěr tohoto tutoriálu tedy věnujeme vytvoření backendu aplikace, tedy její serverové části. Bude to velmi jednoduché.
Model
V naší aplikaci budeme evidovat osoby a za tímto účelem si vytvoříme velmi jednoduchou třídu Osoba, kterou přidáme do modelů:
public class Osoba { public int ID { get; set; } public string Jmeno { get; set; } }
Osoba má jen 2 vlastnosti, jednou je ID (protože ji budeme ukládat do databáze, kde je unikátní identifikátor nutností) a druhou je její jméno. Pro naše účely to bohatě postačí, vy si můžete další vlastnosti poté jednoduše přidat.
Následně si necháme vygenerovat databázovou tabulku a kontroler s pohledy. Klikneme pravým tlačítkem na Controllers a vybereme Add -> New Scaffolded Item...

Vybereme Web API 2 kontroler s akcemi s použitím Entity frameworku.

Jako model dále vybereme třídu Osoba, přidáme nový databázový kontext, povolíme asynchronní akce a název kontroleru nastavíme na OsobyController.
Byl nám vygenerován kontroler, který je naroutován na URL adresu api/Osoby. Obsahuje několik akcí pro:
- získání všech osob
- získání detailu osoby
- editaci osoby
- přidání osoby
- odstranění osoby
Jedná se o klasické REST API, kontroler si projděte.
Testovací data
Vložme si do aplikace nějaká testovací data, postačí nám třeba 2 osoby. Pro zjednodušení přejděme do metody GetOsobas() (pozn.: tento podivný název je důsledkem anglické pluralizace Entity Frameworku, reálném projekty je lepší psát v angličtině, pro naše výukové účely je čeština vhodnější i přes tyto drobné komplikace). Metodu upravme do následující podoby:
public IQueryable<Osoba> GetOsobas() { db.Osobas.Add(new Osoba() { ID = 1, Jmeno = "Jan Novák" }); db.Osobas.Add(new Osoba() { ID = 2, Jmeno = "Josef Nový" }); db.SaveChanges(); return db.Osobas; }
Jakmile se nyní pokusíme získat osoby z API, vloží se do databáze tyto 2 nové. Spusťme projekt a přejděme na adresu (port budete mít vy jiný):
http://localhost:52763/api/Osoby
Výsledek:

Vidíme, že se povedlo. API nám vrátilo seznam 2 osob. My vidíme XML, až se na ně bude ptát JavaScript, přijdou mu v JSONu. Řádky z metody nyní zakomentujte, aby se nám tam osoby zbytečně stále nevkládaly.
Na jednotlivé akce API se můžete podívat také do záložky API v běžící aplikaci:

Zkuste si jednotlivé akce proklikat, uvidíte, že je dokumentace velmi hezky řešena.
V příští lekci, Single Page Application v ASP.NET - Frontend s knockout.js, budeme pokračovat, dnešní projekt naleznete v příloze ke stažení.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 131x (23.56 MB)
Aplikace je včetně zdrojových kódů v jazyce C#