Jak implementovat dynamické uživatelské rozhraní pomocí Razor Pages a ASP.NET MVC

Při vytváření dynamických uživatelských rozhraní v aplikacích ASP.NET Core se velmi často využívá Razor Pages a MVC (Model-View-Controller). Oba přístupy mají své specifické výhody, ale jejich hlavní principy a struktura se vzájemně doplňují. Tento článek podrobně popisuje, jak vytvořit dynamické uživatelské rozhraní s využitím Razor Pages a ASP.NET MVC, což umožňuje vývojářům efektivně spravovat a zobrazovat data na webových stránkách.

Začneme implementací základního modelu Razor Pages s generováním produktů, který umožňuje interakci s uživatelem.

Prvním krokem je přidání vlastnosti Message do souboru Index.cshtml.cs, která bude obsahovat zprávu, jež se následně zobrazí v uživatelském rozhraní. Kód bude vypadat takto:

csharp
Copy code
public string Message { get; set; }

Dále vytvoříme adresář Models v kořenovém adresáři projektu a přidáme třídu Product.cs, která bude reprezentovat produkt. Tato třída bude obsahovat vlastnosti pro ID, název a cenu produktu:

csharp
Copy code
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Následně v souboru Index.cshtml.cs přidáme vlastnost Products, která bude obsahovat seznam produktů, jenž se zobrazí v tabulce na uživatelském rozhraní:

csharp
Copy code
public List<Product> Products { get; set; }

Také přidáme vlastnost Color, která bude definovat barvu:

csharp
Copy code
public string Color { get; set; }

S těmito základními vlastnostmi připravíme metodu pro náhodné generování seznamu produktů. Metoda GenerateProduct vygeneruje seznam produktů na základě zadaného množství:

csharp
Copy code
private List<Product> GenerateProduct(int quantity)

{
    var random = new Random();
    var products = Enumerable.Range(1, quantity).Select(i => new Product
    {
        Id = i,
        Name = $"Product {i}",
        Price = (decimal)(random.NextDouble() * 100.0)
    });
    return products.ToList();
}

Poté upravíme konstruktor třídy IndexModel, aby se při každém načtení stránky zobrazila náhodně vygenerovaná tabulka produktů a předvyplněná zpráva. Tento kód v konstruktoru:

csharp
Copy code
public IndexModel(ILogger<IndexModel> logger)
{
    _logger = logger;
    Products = GenerateProduct(10);
    Message = "I'm using the Razor Syntax.";
}

Další krok je vytvoření metody OnPost, která bude reagovat na akce uživatele, například na zadání množství produktů v uživatelském formuláři. Tento formulář následně vygeneruje novou seznam produktů podle hodnoty zadané uživatelem:

csharp
Copy code
public void OnPost(int quantity)

{
    Products = GenerateProduct(quantity);
}

Dále vytvoříme metodu OnGetDefineColor, která na základě ID produktu nastaví barvu, kterou bude tento produkt reprezentovat. V tomto případě se barva nastaví na červenou pro produkt s ID 1 a na zelenou pro všechny ostatní:

csharp
Copy code
public void OnGetDefineColor(int id)
{
    Color = id == 1 ? "#FF0000" : "green";
}

Příklad definice HTML odkazu s předáním parametru do metody může vypadat následovně:

html
Copy code
<a asp-route-id="1" asp-page="/Index" class="btn btn-primary">Red</a>

Tento odkaz předává hodnotu 1 jako parametr id metodě OnGetDefineColor, což je příklad tzv. bindingu parametrů.

ASP.NET Core MVC je framework, který implementuje známý design pattern MVC, což znamená oddělení logiky aplikace, uživatelského rozhraní a datového modelu. Tento přístup umožňuje zlepšení organizace kódu a usnadňuje jeho testování. V rámci ASP.NET Core MVC projektů jsou tři hlavní složky: Views, Controllers, a Models. Třídy v Controllers fungují jako orchestrátory, které přijímají uživatelské interakce a delegují je na modely pro manipulaci s daty. Po zpracování vracejí odpověď v podobě pohledů (views).

Při vytváření projektu MVC lze použít CLI nástroj s příkazem:

bash
Copy code
dotnet new mvc --name MyFirstMVCApp

Je důležité pochopit, že obě metody – Razor Pages i MVC – umožňují efektivní a flexibilní práci s dynamickými uživatelskými rozhraními. Rozdíl spočívá v tom, jak jsou strukturovány a jakým způsobem jsou zpracovávány HTTP požadavky. Razor Pages jsou vhodné pro jednodušší scénáře, kde je jedna stránka odpovědná za celkový výstup, zatímco MVC poskytuje vyšší úroveň organizace a flexibilitu pro složitější aplikace s více stránkami a složitější logikou.

Jak fungují systémy řízení identity: autentizace a autorizace v moderních aplikacích

Moderní systémy pracují s řízením identity z různých hledisek. Jak jsme probírali v předchozích kapitolách, webové aplikace mohou provádět požadavky na různé API. API umožňuje firmám poskytovat služby jako produkty, což umožňuje různé integrace mezi aplikacemi. Díky tomu je možné mít aplikace s různými funkcionalitami, které přidávají hodnotu uživatelům, jako jsou mapová API, platební brány nebo API poskytující AI funkce. Aby aplikace a API mohly bezpečně komunikovat, je nezbytný mechanismus zabezpečení založený na identitě. Tento mechanismus nám umožňuje zjistit, kdo požaduje nějaké informace a proč. Tento mechanismus zabezpečení se dělí na dva koncepty: autentizaci a autorizaci.

Autentizace má za cíl odpovědět na otázku: Kdo jste? Tento proces probíhá v několika krocích. Při autentizaci uživatel poskytne své přihlašovací údaje, například e-mail a heslo. Tyto údaje se odesílají na server a aplikace na základě těchto údajů identifikuje uživatele. Pokud aplikace najde odpovídající údaje, zjistí, kdo chce přistupovat k systému. To je ale pouze první část procesu. Jakmile aplikace identifikuje uživatele, je důležité pochopit, co tento uživatel může dělat. To se děje během procesu autorizace.

Autorizace se zaměřuje na odpověď na otázku: Co tento uživatel může dělat? Po identifikaci uživatele aplikace začíná ověřovat jeho oprávnění. Autorizace definuje rámec, ve kterém může uživatel jednat, ať už jde o správu nějakých informací, přístup k určitým datům nebo jiné aspekty. Tento proces často identifikuje uživatele prostřednictvím rolí, což umožňuje seskupit různé úrovně přístupu v rámci aplikace. Použití rolí je běžné, protože umožňuje snadno seskupit oprávnění, která uživatel může v aplikaci mít.

Protokol OAuth 2.0 se zaměřuje na autorizaci. Umožňuje uživatelům udělit přístup k jejich datům na jedné platformě (například na sociální síti) jiným aplikacím, aniž by bylo nutné sdílet své skutečné heslo. To znamená, že umožňujeme jiným aplikacím přístup k určitým informacím, aniž bychom museli zadávat přihlašovací údaje pro každou novou aplikaci. Tento proces, při kterém aplikace získává přístup k datům uživatele prostřednictvím speciálních tokenů, je bezpečnější a pohodlnější. OAuth 2.0 využívá tento tok k udělení přístupu bez nutnosti zadávat přihlašovací údaje opakovaně.

Na druhé straně OIDC přidává vrstvu autentizace k OAuth 2.0. Využívá OAuth pro ověření identity uživatele prostřednictvím důvěryhodných poskytovatelů, jako jsou Google nebo Facebook. Proces probíhá takto: uživatel se přihlásí pomocí účtu na sociální síti, čímž poskytne svou autentifikaci. Po ověření identity poskytovatel (například Google) pošle aplikaci ID token, který obsahuje základní informace o uživatelském profilu, jako je jméno a e-mail.

OIDC umožňuje funkce, jako je jednotné přihlašování (SSO), které umožňuje uživatelům přístup k více aplikacím pomocí jediných přihlašovacích údajů. Ačkoliv protokoly OAuth 2.0 a OIDC mají podobný tok, slouží různým účelům: OAuth 2.0 se zaměřuje na autorizaci (udělení přístupu k datům), zatímco OIDC se zaměřuje na autentizaci (ověření identity uživatele). OAuth 2.0 bychom tedy mohli přirovnat k klíči, který otevírá dveře, zatímco OIDC je proces, který ověřuje, že ten, kdo klíč používá, je skutečně majitelem.

I když je proces implementace těchto protokolů jednoduchý, samotná implementace autorizace a autentizace může být složitá a závisí na správném nastavení mechanismů, které zajišťují jejich správné fungování. Platforma ASP.NET Core 9 nabízí abstrakce, které podporují vývoj řízení identity a dodržování těchto standardů. ASP.NET Core Identity je systém členství, který přidává možnosti do webových aplikací, které jsou vyvinuty v ASP.NET Core 9, a to jak v procesech autentizace, tak autorizace. Tento rámec poskytuje funkce, jako jsou API, uživatelské rozhraní, databáze pro správu identit a oprávnění a možnost integrace s externími poskytovateli přihlášení, což usnadňuje implementaci bezpečnostních praktik v moderních aplikacích.

Proč je ASP.NET Core 9 ideálním nástrojem pro moderní vývoj webových aplikací?

ASP.NET Core 9 je výkonná a flexibilní platforma pro vývoj webových aplikací, která se neustále vyvíjí od svého vzniku v roce 2016. Tento framework umožňuje vývojářům vytvářet moderní, vysoce výkonné a cloudově připravené aplikace. Jeho klíčová vlastnost spočívá v tom, že přetváří způsob, jakým vyvíjíme aplikace, a to nejen z hlediska architektury, ale i z hlediska dostupnosti na různých operačních systémech.

Historicky byla platforma .NET spojena s operačním systémem Windows, což vyžadovalo specifické nastavení a omezení. Dnes už však díky ASP.NET Core 9 není vývoj aplikací závislý na jednom operačním systému. Můžeme pracovat jak na Windows, tak na macOS nebo Linuxu, což je v současném světě otevřeného vývoje naprostý standard. Tato platforma přináší velkou flexibilitu a schopnost rychle přizpůsobovat aplikace různým prostředím.

Základem pro používání ASP.NET Core 9 je pochopení rozdílů mezi staršími verzemi .NET Framework a novým, otevřeným a multiplatformním přístupem ASP.NET Core. Klíčovým rozdílem je to, že ASP.NET Core není pouze přepisem .NET Frameworku, ale kompletním přehodnocením architektury. To znamená, že můžete používat moderní nástroje a knihovny, které jsou optimalizovány pro výkon, bezpečnost a škálovatelnost, což je zásadní pro vývoj aplikací na úrovni cloudových služeb.

Pokud máte v úmyslu vyvíjet webové aplikace pomocí ASP.NET Core 9, je důležité mít na paměti, že vývojové prostředí a nástroje by měly být přizpůsobeny specifikám vašeho operačního systému. Například Docker je nástroj, který umožňuje spouštět aplikace v izolovaných kontejnerech, což znamená, že váš vývojový systém není ovlivněn závislostmi konkrétní aplikace. Git je pak nepostradatelným nástrojem pro verzování kódu a spolupráci mezi týmy, což je v moderním vývoji zcela běžnou praxí.

ASP.NET Core 9 přináší také novinky, které usnadňují vývoj moderních webových aplikací. Například podpora pro real-time komunikaci pomocí SignalR nebo podpora pro Blazor, který umožňuje psát interaktivní webové aplikace pomocí C#. Tato nová generace webových aplikací, která nevyžaduje JavaScript na straně klienta, přináší větší bezpečnost a přehlednost kódu.

Jako čtenář této knihy byste měli být připraveni na to, že ASP.NET Core 9 představuje nejen technologickou změnu, ale i změnu přístupu k vývoji aplikací. Vývojář již není závislý na jednom operačním systému nebo konkrétním vývojovém nástroji. Konečně je možné pracovat v prostředí, které vyhovuje vašim potřebám a umožňuje vám využívat moderní technologie bez zbytečných komplikací.

Jak zajistit efektivní správu kódu a konfigurace v cloudových aplikacích

V oblasti vývoje aplikací a správy zdrojového kódu je nezbytné jít nad rámec základní správy kódu na vzdálených serverech. Vývojové týmy musí převzít odpovědnost za celý proces řešení, což zahrnuje definování procesů pro správu zdrojového kódu, jako je používání větví, vývojové standardy, revize kódu, procesy kvality a dokumentace. V cloudových prostředích je běžné mít jedno úložiště pro správu aplikačního kódu a další úložiště speciálně pro ukládání kódu infrastruktury. Kontextualizace a oddělení těchto kontextů v úložištích umožňuje neustálou spolupráci a správu mezi vývojovými a operačními týmy. Tento přístup se zakládá na principu "jednotného kódu", který je základem pro všechny další principy.

Závislosti

Konfigurace

Konfigurace jsou klíčovým faktorem v každé aplikaci. Většina aplikací má nějaký typ konfiguračního souboru, který může obsahovat citlivé informace, jako jsou šifrovací klíče a připojovací řetězce. Uchovávání nastavení v konfiguračních souborech je vynikající praxe, která zabraňuje nutnosti měnit zdrojový kód při změnách konfigurace. V cloudu aplikace obvykle mají různé prostředí, aby byla zachována vysoká kvalita řešení při každé aktualizaci. Produkční prostředí mají omezený přístup z bezpečnostních důvodů, a konfigurace v těchto prostředích by neměly být přístupné. Princip "config" říká, že konfigurace musí být odděleny od kódu, což usnadňuje správu různých prostředí. Příklad této architektury je znázorněn na obrázku 11.6, kde vývojový tok využívá automatizační pipeline, CI a CD. Po získání artefaktu bude tento artefakt publikován v různých prostředích, přičemž aplikace získá své příslušné konfigurace na základě vykonávajícího prostředí.

Služby na pozadí

Automatizace v procesu vývoje

Automatizace je klíčovým prvkem v moderních vývojových procesech. V předchozích kapitolách jsme se seznámili s významem DevOps a automatizovaných procesů, přičemž CI (Continuous Integration) a CD (Continuous Deployment) hrají zásadní roli. CI je spojený s procesem sestavení artefaktu, kde probíhá stahování závislostí, sestavení kódu a provádění testů kvality a bezpečnosti. CD se pak zaměřuje na nasazení artefaktu do různých prostředí, přičemž automatizace umožňuje rychlou reakci na jakékoliv problémy v těchto prostředích, včetně procesu rollback pro vrácení nasazení zpět na stabilní verzi.

Pro efektivní správu kódu a aplikací je nezbytné chápat jak správu závislostí, tak i oddělení konfigurace a služeb. Tento přístup umožňuje lepší flexibilitu, zjednodušuje nasazení a zajišťuje vyšší úroveň bezpečnosti. Automatizace, spolu s rozdělením odpovědností mezi vývoj a operace, se stává základním stavebním kamenem moderního vývoje a nasazování cloudových aplikací.