Jak používat Razor syntaxi a C# kód pro dynamické UI v ASP.NET Core

Vytváření dynamických uživatelských rozhraní (UI) v rámci Razor Pages vyžaduje kombinaci C# kódu a HTML značek, což umožňuje vývojářům generovat obsah stránky na základě serverového zpracování a interakcí uživatele. Tento přístup v rámci ASP.NET Core je velmi efektivní a umožňuje snadnou integraci business logiky přímo do prezentace.

Pro začátek si ukážeme, jak přizpůsobit stránku Index pomocí Razor syntaxe. Otevřeme soubor index.cshtml a přidáme některé ovládací prvky. Začneme definováním proměnné pro podtitul stránky a následně upravíme obsah mezi značkami <div>, které obsahují hlavní obsah stránky. Na začátku přidáme C# kód pro definici proměnné:

csharp
Copy code
@{

    string subtitle = "It's funny";
}

Tento kód vkládáme mezi značky @{ }, což umožňuje vkládat C# kód přímo do Razor stránky. Jakmile je proměnná definována, můžeme ji použít ve zbytku HTML kódu stránky:

html
Copy code
<div>
    <h1>Welcome</h1>
    <p>Learn about building Web apps with ASP.NET Core.</p>
    <p>@Model.Message</p>
    <p>@subtitle</p>
</div>

V tomto příkladu jsou vkládány hodnoty z modelu (@Model.Message) a z lokální proměnné (@subtitle). Dále přidáme tabulku produktů s náležitým formátováním ceny:

html
Copy code
<table>

    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Price</th>
    </tr>
    @foreach (var product in Model.Products)
    {
        <tr>
            <td>@product.Id</td>
            <td>@product.Name</td>
            <td>@product.Price.ToString("C")</td>
        </tr>
    }
</table>

Tato část kódu používá foreach cyklus k vykreslení tabulky, kde jsou pro každý produkt zobrazeny jeho ID, název a cena. Ceny jsou formátovány podle kulturního nastavení pro zobrazení v měně (např. USD). Pokud bychom chtěli zajistit, aby cena byla vždy formátována podle určité kultury, můžeme použít speciální vlastnost, která formátuje cenu jako měnu:

csharp
Copy code
public string FormattedPrice

{
    get { return Price.ToString("C", CultureInfo.GetCultureInfo("en-US")); }
}

Kromě toho lze Razor Pages využít pro přidávání dynamických hodnot přímo do HTML pomocí Razor direktiv, jako jsou asp-page-handler a asp-route-id, které propojují HTML značky s C# kódem. Například při přidání odkazů na stránku můžeme použít následující kód, který dynamicky mění barvu pozadí dle výběru uživatele:

html
Copy code
<a asp-page-handler="Red" asp-route-id="1">Red</a>

<a asp-page-handler="Green" asp-route-id="2">Green</a>
<div style="background-color: @Model.Color">
    This is a dynamically colored div.
</div>

Tento kód vykreslí dva odkazy, které po kliknutí změní hodnotu barvy pozadí na stránce. Hodnota barvy je nastavena pomocí modelu a připojena k HTML značce jako CSS atribut.

Dále se budeme zabývat formou pro odesílání dat. Razor Pages zjednodušuje práci s formuláři tím, že automaticky rozpozná, na kterou stránku se má data odeslat. Akci formuláře není potřeba specifikovat explicitně, což snižuje množství kódu a zjednodušuje strukturu aplikace:

html
Copy code
<form>

    <input type="text" name="ProductName" />

    <input type="number" name="ProductPrice" />

    <button type="submit">Add Product</button>

</form>

Pokud by bylo potřeba propojit tuto stránku s backendovou logikou, stačí upravit související stránkový model, což je C# třída, která obsahuje metody pro zpracování dat a připojení k databázi.

Je důležité si uvědomit, že při používání Razor Pages je kladeno důraz na správné oddělení zodpovědností mezi business logikou a UI manipulacemi. I když je možné kombinovat C# kód přímo do HTML stránek, doporučuje se udržovat čistotu kódu a neimplementovat složité obchodní logiky přímo v Razor šablonách. Tato strategie zaručuje, že aplikace bude udržovat přehlednost a snadnou rozšiřitelnost.

Jak správně používat ControllerBase v API aplikacích?

V moderním vývoji webových API je zásadní správné používání kontrolerů pro efektivní zpracování požadavků. ASP.NET Core poskytuje robustní nástroje pro správu HTTP požadavků, mezi které patří i třída ControllerBase, která usnadňuje implementaci RESTful API. Abychom pochopili její význam, je nutné se podívat na několik klíčových aspektů této třídy a jejího využití.

Další užitečný atribut je Route, který definuje URL vzor pro konkrétní cestu. Tento atribut může být aplikován jak na třídu (kontroler), tak na metody (akce) v rámci této třídy. Atribut [controller] slouží jako zástupný token, který je při běhu aplikace nahrazen názvem třídy bez přípony "Controller". Pokud má být metoda odlišena, například při existenci více metod s podobným názvem, je nutné použít parametr [action].

V případě třídy ProductController se jedná o název, který je v souladu s konvencí Model-View-Controller (MVC). I když není povinné přidávat příponu "Controller", je doporučeno tuto konvenci dodržovat, protože to zjednodušuje orientaci v projektu a usnadňuje práci dalším členům vývojového týmu. Každý kontroler by měl dědit od třídy ControllerBase, která obsahuje několik užitečných metod a vlastností pro efektivní zpracování HTTP požadavků.

Atribut HttpGet určuje, na jaký HTTP verb bude metoda reagovat. V našem příkladu se nacházejí dvě metody typu GET, přičemž jedna z nich obsahuje parametr {id}, který je součástí URL. To je důležité pro správné směrování požadavků na různé akce metody. ASP.NET Core se postará o mapování parametru id na hodnotu z URL, což je klíčová výhoda oproti minimalistickým API přístupům, kde takováto funkcionalita není běžně dostupná.

Metoda Get pro načtení produktu podle ID je ukázkou toho, jak API vrací odpověď podle stavu zpracovaného požadavku. V tomto případě se provádí kontrola, zda byl produkt nalezen. Pokud ne, API vrátí odpověď s HTTP status kódem 404 (Not Found). Naopak pokud produkt existuje, API vrátí odpověď s HTTP status kódem 200 (OK), přičemž samotný produkt je serializován do formátu JSON. Tento formát je následně odeslán zpět klientovi, který jej může správně zpracovat.

Důležité je, že metody jako Ok nebo NotFound abstrahují složitost interakce s HTTP protokolem a implementují konvence REST, což umožňuje vytváření konzistentních a interoperabilních API. Tato konvence je nezbytná, protože API není určeno pouze pro webové frontend aplikace, ale i pro mobilní aplikace, operační systémy nebo různé integrační systémy. Každý z těchto klientů nezná implementační detaily API, ale pouze podpisy požadovaných metod, parametry a možné odpovědi. Proto je důležité, aby API správně používalo standardy a konvence, což zajistí jeho interoperabilitu.

Třída ControllerBase obsahuje několik dalších metod, které zjednodušují práci s HTTP protokolem. Například při vracení dat klientovi je možné automaticky nastavit správné hlavičky HTTP odpovědi, což zahrnuje i správně nastavený Content-Type na application/json. To znamená, že klient okamžitě ví, že obdrží data ve formátu JSON a může je následně zpracovat.

Dalším důležitým aspektem při práci s ASP.NET Core API je využívání bindingu, což je funkce, která umožňuje automatické mapování hodnot z požadavku do parametrů metod kontroleru. Binding je užitečný pro adaptaci modelu požadavku na akce, které provádí kontroler. Například produktový objekt, který má atributy jako Id, Name, Price, bude automaticky převeden z JSON objektu do C# objektu na základě názvů vlastností. Tento proces je standardní chování frameworku, ale je možné jej i přizpůsobit a rozšířit podle konkrétních potřeb aplikace.

Dalším užitečným nástrojem je možnost definovat a spravovat různé možnosti pro objekty, které jsou odesílány nebo přijímány v API. Při návrhu a implementaci API je nezbytné dodržovat standardy formátování dat, které budou kompatibilní s různými klienty a zajistí bezproblémovou komunikaci mezi systémy.

Jak zabezpečit trasy API pomocí autentifikace a autorizace v ASP.NET Core

Začněme tím, že každý požadavek na chráněnou trasu by měl být vrácen s kódem HTTP 401, pokud není uživatel autentifikován. Tento stavový kód informuje spotřebitele API, že je nutné se přihlásit, aby mohl pokračovat v interakci s aplikací. Abychom dosáhli tohoto chování, je potřeba přidat správnou konfiguraci do našich tras.

V ASP.NET Core je jedním z nejjednodušších způsobů, jak zabezpečit trasu, použití metody RequireAuthorization(), která zajistí, že požadavek bude přijat pouze tehdy, když uživatel projde autentifikací. V praxi to vypadá takto:

csharp
Copy code
app.MapGet("/accounts", async (BankingDbContext dbContext) => {

    var accounts = await dbContext.Accounts.ToListAsync();
    return Results.Ok(accounts);
}).RequireAuthorization();

Tato metoda se přidá k jednotlivým trasám v aplikaci a zajistí, že bez správné autorizace nebude možné získat data. Pokud se tedy někdo pokusí přistupovat k této trase bez přihlášení, obdrží HTTP 401.

Před tím, než budeme moci ověřit chování aplikace, je nutné vytvořit uživatele. Tento proces začíná registrací uživatele, což lze provést prostřednictvím HTTP požadavku do trasy /register. Po úspěšné registraci uživatele se můžeme přihlásit pomocí trasy /login. Tato cesta vrátí přístupový token, který slouží k autentifikaci v dalších požadavcích.

Při přihlašování a získávání tokenu obdržíme JSON odpověď s několika důležitými informacemi:

• tokenType: Tento parametr bude vždy „Bearer“, což označuje, že odpověď obsahuje přístupový token, který je součástí hlavičky autorizace.

• accessToken: Tento token obsahuje šifrované údaje o autentifikovaném uživateli a je nezbytné ho připojit k požadavkům na chráněné trasy.

• expiresIn: Časová platnost přístupového tokenu, po jehož vypršení je potřeba získat nový.

• refreshToken: Tento token umožňuje získat nový přístupový token bez opětovného zadání přihlašovacích údajů.

Pokud vše proběhne správně, server vrátí odpověď s daty nebo prázdným polem (pokud například ještě nebyly zaregistrovány žádné účty), a to s HTTP kódem 200, což označuje úspěšný požadavek.

Při práci s autentifikací a autorizací v ASP.NET Core je důležité chápat, že tento proces není jen o bezpečném uložení údajů o uživatelském účtu, ale také o správné konfiguraci middleware, který bude zabezpečovat trasy a kontrolovat přístupová práva. API trasy mohou být chráněny různými způsoby, ať už prostřednictvím cookies, JWT tokenů, nebo vlastními metodami autentifikace, které musí být správně nakonfigurovány v souladu s požadavky aplikace.

Celý tento proces je nezbytný pro ochranu aplikace před neautorizovanými přístupy a zajištění toho, že pouze autentifikovaní uživatelé mají přístup k citlivým informacím.

Jak správně připojit a publikovat aplikaci v prostředí Azure

Při práci s aplikacemi v prostředí Azure je důležité správně nastavit připojení k databázi a následně zajistit správné publikování aplikace. Tento proces zahrnuje několik kroků, které se musí provést v určitém pořadí, aby vše fungovalo správně.

Nejprve se přihlaste do svého účtu Azure a přejděte do dříve vytvořené skupiny prostředků – v tomto případě rg-aspnetcore8. Zde se vám zobrazí seznam všech vytvořených prostředků. V něm vyhledejte a otevřete prostředek UrlshortenerDB. Po kliknutí na tento prostředek přejděte do sekce Nastavení a zvolte Řetězce připojení (Connection Strings). V této části najdete řetězec připojení, který bude vypadat následovně:
Server=tcp:urlshortener-db-server-tanure.database.windows.net,1433;Initial Catalog=UrlshortenerDB;Persist Security Info=False;User ID=urlshortener-db-server-tanure-admin;Password={your_password};MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;
Tento řetězec je klíčovým prvkem pro připojení aplikace k databázi. Měli byste nahradit parametr Password={your_password} skutečným heslem, které jste si zkopírovali při vytváření aplikace. Poté tento řetězec připojení zkopírujte.

Dále otevřete soubor appsettings.json vaší aplikace URLShortener a upravte vlastnost DefaultConnection, kam vložte právě zkopírovaný řetězec připojení. Výsledek bude vypadat následovně:

json
Copy code
"Logging": {

   "LogLevel": {
       "Default": "Information",
       "Microsoft.AspNetCore": "Warning"
   }
},
"ConnectionStrings": {
   "DefaultConnection": "Server=tcp:urlshortener-db-server-tanure.database.windows.net,1433;Initial Catalog=UrlshortenerDB;Persist Security Info=False;User ID=urlshortener-db-server-tanure-admin;Password=XL6l61uv9t4$K4Q6;MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;"
},
"AllowedHosts": "*"

Uložte soubor appsettings.json. Nyní musíte nakonfigurovat přístup k databázovému serveru. Vraťte se zpět na skupinu prostředků rg-aspnetcore8 a otevřete prostředek urlshortener-db-server. Z hlavního menu přejděte do sekce Bezpečnost (Security) a poté vyberte Síťování (Networking). Zde klikněte na možnost Přidat vaši klientskou adresu IPv4 (Add your client IPv4 address), jak je ukázáno na obrázku. Tato konfigurace vytvoří pravidlo, které umožní přístup k databázi pouze z vaší aktuální IP adresy. Mějte na paměti, že pokud se vaše IP adresa změní, budete muset tento krok zopakovat.

Nyní klikněte na Uložit. Tímto krokem jsme nakonfigurovali aplikaci pro připojení k databázi v Azure a přidali pravidlo brány firewall, které umožňuje přístup k databázi z naší aktuální IP adresy. Nyní je třeba aktualizovat databázi. Otevřete terminál operačního systému a přejděte do adresáře projektu URLShortener. Poté spusťte následující příkaz:

bash
Copy code
dotnet ef database update

Po dokončení procesu můžete zkontrolovat, zda byla tabulka správně vytvořena. Přejděte do portálu Azure (https://portal.azure.com), otevřete skupinu prostředků rg-aspnetcore9 a poté přejděte na prostředek UrlShortenerDB. Zde klikněte na Query Editor a přihlaste se pomocí přihlašovacích údajů, které jste použili při vytváření aplikace.

Po konfiguraci databáze přichází čas na publikování aplikace. Tento krok provedeme pomocí Visual Studio Code. Proces publikování pomocí Visual Studio Code nebo Visual Studio je velmi přímočarý. V sekci technických požadavků bylo doporučeno nainstalovat a nakonfigurovat rozšíření Azure Tools (https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack), které značně usnadňuje manuální proces publikování.

Pro publikování aplikace postupujte následovně:

1. Otevřete adresář aplikace UrlShortener a spusťte příkaz code ..

2. Poté klikněte na ikonu rozšíření Azure Tools v Visual Studio Code, jak je zobrazeno na obrázku.

3. Zobrazí se seznam dostupných předplatných pro vašeho uživatele. Rozbalte předplatné a uvidíte prostředek App Service, kde byla vytvořena aplikace UrlShortener.

4. Klikněte pravým tlačítkem myši na aplikaci a zvolte možnost Deploy to Web App….

5. Bude vás požádáno o několik konfiguračních údajů pro nasazení. Potvrďte zobrazené možnosti a počkejte na dokončení procesu nasazení.

6. Po dokončení publikování se zobrazí oznámení, které vám potvrdí úspěšné nasazení aplikace.

Po dokončení publikování můžete přejít na publikovanou webovou stránku kliknutím na tlačítko Browse Website. Uvidíte výsledek podobný obrázku, kde bude aplikace pro zkracování URL běžet na Azure.

Rozšíření Azure Tools automatizuje proces publikování nových verzí aplikace tím, že na pozadí provádí následující kroky:

• Obnovení balíčků

• Sestavení aplikace

• Generování balíčku pro publikování

• Komprese balíčku do formátu .zip

• Připojení k prostředí Azure

• Nasazení .zip souboru s balíčkem pro publikování

• Rozbalení .zip souboru na serveru

Tyto kroky se vykonají vždy, když se rozhodnete nasadit aplikaci prostřednictvím Azure Tools.

Dnes je hosting aplikací v cloudu nezbytný a existuje celá řada zdrojů, které nám s tímto úkolem mohou pomoci. Každá vrstva hostingových služeb a prostředků bude záviset na požadavcích aplikace a úrovni znalostí týmu. Existují případy, kdy je možné využít strategie, které umožňují hostování aplikací v různých prostředích, nezávisle na konkrétních prostředcích poskytovatelů cloudu. Jednou z těchto strategií je použití kontejnerů, což je přístup, který je v současnosti velmi populární u aplikací běžících v cloudu.

Kontejnerová strategie je dnes zásadní pro cloud-native aplikace. Kontejnery poskytují konzistentní prostředí pro vývoj, testování a nasazení, čímž zajišťují hladký běh aplikace bez ohledu na to, kde je nasazena. Při použití kontejnerů máme vše potřebné pro běh aplikace v daném prostředí, což eliminuje potřebu instalace dalších balíčků nebo runtime. To znamená větší stabilitu a kompatibilitu s cloudovými prostředími, jako je Azure, které nabízejí robustní služby pro správu a škálování kontejnerizovaných aplikací.