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/Bun­dleConfig. 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/In­dex.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: navigateToNazev­ViewModelu".

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š.