2. díl - Single Page Application v ASP.NET - Podstránky a Web API

C# .NET ASP.NET Single Page Application Single Page Application v ASP.NET - Podstránky a Web API

V minulém tutoriálu o technologii Single Page Application v ASP.NET MVC jsme si udělali úvod a vytvořili nový projekt. Ten budeme dnes 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.

Přidání partial view v ASP.NET Single Page Application

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.

Nová podstránka v ASP.NET Single Page Application

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

Zdrojový kód webové stránky v ASP.NET Single Page Application

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

Kontroler pro Web API v ASP.NET Single Page Application

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

Kontroler osob v ASP.NET SPA

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 = 1, 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:

Webové API v ASP.NET MVC

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:

Dokumentace Web API v Single Page Application v ASP.NET MVC

Zkuste si jednotlivé akce proklikat, uvidíte, že je dokumentace velmi hezky řešena. Příště budeme pokračovat, dnešní projekt naleznete v příloze ke stažení.


 

Stáhnout

Staženo 66x (22.94 MB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (2 hlasů) :
55555


 



 

 

Komentáře

Avatar
Ondřej Štorc:

Ahoj, mám problém s tímto ukázkovým příklad a to hnedka u prvního zobrazení stránky. Vždycky vidím obě "stránky", jak _Home tak _Osoby. Neporadíte co s tím? Kód bych měkl mít totožný s tímto příkladem.

Odpovědět 25. září 21:13
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.