2. diel - Single Page Application v ASP.NET - Podstránky a Web API

V minulej lekcii, Úvod do Single Page Application v ASP.NET , sme si urobili úvod a vytvorili nový projekt. Ten budeme v dnešnom C# .NET tutoriálu rozširovať.

Pridanie podstránky

Ako prvý si do aplikácie pridáme novú záložku pre Osoby.

ViewModel

Iste ste už oboznámení s architektonickou komponentom ViewModel, ktorú sme používali napr. U formulárov pri spracovaní dát a validáciu. V SPA budeme v JavaScripte používať tiež ViewModel, ktoré úplne rovnako previažeme na pohľady a vďaka automatickým bindingům hodnôt nám veľmi zjednoduší prácu.

Do zložky Scripts / App pridajme nový javascriptový súbor osoby.viewmodel.js. Jeho obsah bude nasledujúci:

function OsobyViewModel(app, dataModel) {

}

// Registrace ViewModelu
app.addViewModel({
    name: "Osoby",
    bindingMemberName: "osoby",
    factory: OsobyViewModel
});

Ako prvé si vytvoríme "triedu" OsobyViewModel. Tú následne registrujeme ako ViewModel SPA aplikácie pomocou objektu app, ktorý nám poskytuje a předgenerovalo ASP.NET. Dôležité je najmä bindingMemberName, pomocou ktorého budeme z šablón k ViewModel pristupovať.

Nový javascriptový súbor musíme zaregistrovať do balíčka, ktoré ASP.NET v stránke načítava. Presunieme sa do App_Start / BundleConfig. Nájdeme bundle "~ / Bundles / app" a medzi súbormi pridáme ďalšie riadku s naším novým modelom:

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"));

Pohľad

Do zložky Views / Home pridáme nový pohľad. Pomenujeme ho _Osoby a nastavíme ako partial view. Ak ste sa s partial views ešte nestretli, jedná sa o pohľady, ktoré neobsahujú kompletné HTML štruktúru, ale iba jej fragment, ktorý sa následne vkladá do celkového layoutu stránky. Typicky je tu teda obsah jednej konkrétnej podstránky, ale menu a ďalšie časti webu sú uložené inde. Partial pohľady je zvykom pomenovávať tak, aby začínali podčiarknikom.

Do šablóny vložíme nasledujúci HTML kód:

<!-- ko with: osoby -->
<div class="jumbotron">
    <h1>Osoby</h1>
    <p class="lead">Osoby v evidenci.</p>

</div>

<!-- /ko -->

Komentáre sa skratkou ko sú direktívy frameworku knockout.js. Označujú, že táto časť stránky sa viaže na ViewModel osoby a mala by sa zobrazovať len vtedy, keď s ním pracujeme.

Layout

Ako posledný upravíme samotný layout. Presunieme sa do Views / Home / Index.cshtml. Najprv upravíme navigačné menu a to tak, že do neho pridáme odkaz na našu podstránku s osobami. Podoba zoznamu s menu je teraz nasledujúce:

<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žnosť prepínania podstránok pomocou dáta atribútu dáta-bind s hodnotou "click: navigateToNazev­ViewModelu".

Ešte však nie sme hotoví. V tej istej šablóne sa presunieme dole, kde nájdeme sériu príkazov @ Html.Partial (), ktorá renderuje jednotlivé pohľady. Tu vidíme, že sa do layoutu naozaj vygenerujú úplne všetky podstránky, ktoré knockout.js potom skryje, takže vidíme len tú aktuálnu. Do série pridáme aj naši parciálnej šablónu _Osoby:

@Html.Partial("_Home")
@Html.Partial("_Login")
@Html.Partial("_Register")
@Html.Partial("_RegisterExternal")
@Html.Partial("_Manage")
@Html.Partial("_Osoby")

Keď teraz aplikáciu spustíme, mali by ste mať v menu novú položku Osoby a po kliknutí na ňu by ste sa mali presunúť bez přenačtení stránky na nový pohľad.

Môžete sa pozrieť do zdrojového kódu stránky, že obsahuje naozaj všetky pohľady naraz:

Back-end

K ďalšej funkcionalite aplikácie budeme z JavasSript potrebovať komunikovať s databázou osôb. Záver tohto tutoriálu teda venujeme vytvorenie backendu aplikácie, teda jej serverovej časti. Bude to veľmi jednoduché.

Model

V našej aplikácii budeme evidovať osoby a na tento účel si vytvoríme veľmi jednoduchú triedu Osoba, ktorú pridáme do modelov:

public class Osoba
{
    public int ID { get; set; }
    public string Jmeno { get; set; }
}

Osoba má len 2 vlastnosti, raz je ID (pretože ju budeme ukladať do databázy, kde je unikátny identifikátor nutnosťou) a druhou je jej meno. Pre naše účely to bohato postačí, vy si môžete ďalšie vlastnosti potom jednoducho pridať.

Následne si necháme vygenerovať databázovú tabuľku a kontrolér s pohľadmi. Klikneme pravým tlačidlom na Controllers a vyberieme Add -> New Scaffolded Item ...

Vyberieme Web API 2 kontrolér s akciami s použitím Entity frameworku.

Ako model ďalej vyberieme triedu Osoba, pridáme nový databázový kontext, povolíme asynchrónne akcie a názov kontroleru nastavíme na OsobyController.

Bol nám vygenerovaný kontrolér, ktorý je naroutován na URL adresu api / Osoby. Obsahuje niekoľko akcií pre:

• získanie všetkých osôb
• získanie detailu osoby
• editáciu osoby
• pridanie osoby
• odstránenie osoby

Jedná sa o klasické REST API, kontrolér si prejdite.

Testovacie dáta

Vložte si do aplikácie nejaká testovacie dáta, postačí nám treba 2 osoby. Pre zjednodušenie prejdime do metódy GetOsobas () (pozn .: tento podivný názov je dôsledkom anglickej pluralite Entity Framework, reálnom projekty je lepšie písať v angličtine, pre naše výukové účely je Čeština vhodnejšie aj cez tieto drobné komplikácie). Metódu upravme do nasledujúcej podoby:

public IQueryable<Osoba> GetOsobas()
{
    db.Osobas.Add(new Osoba() { ID = 1, Jmeno = "Jan Novák" });
    db.Osobas.Add(new Osoba() { ID = 1, Jmeno = "Josef Nový" });
    db.SaveChanges();
    return db.Osobas;
}

Akonáhle sa teraz pokúsime získať osoby z API, vloží sa do databázy tieto 2 nové. Spustite projekt a prejdime na adresu (port budete mať vy iný):

http://localhost:52763/api/Osoby

výsledok:

Vidíme, že sa podarilo. API nám vrátilo zoznam 2 osôb. My vidíme XML, až sa na ne bude pýtať JavaScript, prídu mu v JSON. Riadky z metódy teraz zakomentujte, aby sa nám tam osoby zbytočne stále nevkladali.

Na jednotlivé akcie API sa môžete pozrieť aj do záložky API v bežiaci aplikácii:

Skúste si jednotlivé akcie preklikať, uvidíte, že je dokumentácia veľmi pekne riešená. V budúcej lekcii, Single Page Application v ASP.NET - Frontend s knockout.js , budeme pokračovať, dnešný projekt nájdete v prílohe k stiahnutiu.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.