ASP.NET Core

Az ASP.NET Core egy platformfüggetlen open-source keretrendszer, mely segítségével modern, felhő alapú (pl. webes) alkalmazásokat készíthetünk. Ezen kívül web service-eket, IoT alkalmazásokat és mobil alkalmazások backendjét is elkészíthetjük a segítségével. Alapvetően futtathatjuk .NetCore-on illetve .NET Framework-ön is.

Az ASP.NET Core egy modernebb változata az ASP.NET 4.x-nek (.NET Framework) webalkalmazások készítésére.

• egységesített megoldás web UI és web API-k készítéséhez
• tesztelhetőbb
• Razor oldalakkal teszi egyszerűbbé és produktívabbá a UI elkészítését
• Blazor segítéségével használhatunk C# kódot a böngészőben a JavaScript mellett vagy inkább helyett
• használható pl. Angularral vagy React-tal is
• hostolható pl. IIS-re, Apachra, Dockerre, stb.

ASP.NET Core alkalmazás Visual Studioban

Mivel korábban MVC alapú alkalmazásokat készítettünk, ezért a Core alkalmazás esetén is ezt a forgatókönyvet fogjuk követni.

1. Hozzunk létre egy új projektet és válasszuk ki a .Net Core -> ASP.NET Core Web App (Model-View-Controller) lehetőséget,
2. A konfigurációs lehetőségeknél ellenőrizzük, hogy a .NET 5.0 legyen kiválasztva Target Framework-nek,
3. További konfigurációra van lehetőségünk pl. Docker Support, autentikációs beállítások. Ne változtassunk a default beállításokon (no authentication).
4. Majd hozzuk létre az alkalmazást.

ASP.NET Core alkalmazás Visual Studio Code-ban

A következőkre lesz szükségünk a projektünk összerakásához:

• .NET 5
• Visual Studio Code
• VS Code C# Extension [ld.figure 3]

Példa alkalmazás

1. Nyissunk egy VS Code-ot, és nyissunk benne egy új terminált (Terminal->New Terminal vagy Ctrl+Shift+ö segítségével)
2. Hozzunk létre egy új mappát a projektnek pl. Webapp néven az mkdir WebApp parancs segítségével, majd lépjünk be az újonnan létrehozott mappába: cd WebApp,
3. A következőkben egy ASP.NET Core Web Application-t szeretnénk létrehozni a mappánkban, ezt a dotnet new mvc parancs segítségével tehetjük meg,
4. Nyissuk meg a létrehozott mappát az oldalsó Explorerben az Open Folder segítségével [ld. figure 4, figure 5]
5. Ha ezzel megvagyunk, a létrehozott alkalmazást az F5 segítségével indíthatjuk el - ha van VS Code extensionünk -, vagy a dotnet run parancs segítségével terminálból (ilyenkor nem nyílik meg az app a böngészőben, hanem nekünk kell a megfelelő oldalra navigálnunk, amit megkapunk a terminálban indítás után)

Az alkalmazás felépítése

A korábbi projektekhez hasonlóan az ASP.NET Web projekt is tartalmaz egy .csproj kiterjesztésű fájlt, amiben többek között a használt SDK verzió és az aktuálisan feltelepített nuget package-k is szerepelnek.

appsettings

A projekt fájlon kívül lesz még legalább 1 de általában 2 vagy 3 konfigurációs json fájlunk: az appsettings.json és az appsettings.Development.json. Ezekben a konfigurációs állományokban definiálhatók a globális (környezeti) változók, amiket a projekt használni fog. Azt, hogy alapvetően ezek közül melyiket használja a projekt az ASPNETCORE_ENVIRONMENT változó határozza meg, amit az alkalmazás tulajdonságai (Properties) között találunk meg. Általában szokás egy appsettings.Production.json fájl-t is létrehozni és a speciális, dev és production mode közötti eltéréseket feloldani a segítségükkel. Így egyrészt egy valószínűleg sok helyen használt dolgot csak egy helyen kell átírni a kódban, másrészt a dev és az éles verzió közötti eltéréseket is egy helyen tárolhatjuk és egy változó segítségével átbillenthetjük a megfelelő értékre, attól függően, hogy mire van szükségünk. Projekt létrehozáskor csak az appsettings.json fog létrejönni, a másik kettőt nekünk kell kézzel létrehoznunk, ha szükségünk van rá.

Startup

A root mappában még megtalálhatjuk az alkalmazásunk belépési pontját és a Startup osztályt, ami egy további konfigurációs eszköz lesz. Ebben találhatunk egy (opcionális) ConfigureServices metódust, amiben a használt service-eket határozhatjuk meg, illetve egy Configure metódust, ami az alkalmazás kéréseinek a feldolgozásáért fog felelni. Ez a két metódus az app indításakor fog meghívódni.

A ConfigureServices metódusban alapvető beállításokat igénylő service-okat Add{Service} extension metódusok segítségével adhatunk az alkalmazásunkhoz, pl: services.AddControllersWithViews()

A Configure metódusban azt adjuk meg, hogy hogyan válaszoljon az alkalmazásunk a HTTP kérésekre, különböző middleware-eket adhatunk a request pipeline-hoz extension method-ok segítségével. Pl. app.UseMvc(). Itt találhatjuk meg a routing-ot is.

 app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
});

Ez egy default a Home/Index útvonalat határoz meg, és minden egyéb esetben <Controller>/<Action>/<opc param> útvonalat, tehát pl. ha az About page-re navigálunk, akkor a címsorban a Home/About fog megjelenni, ez pedig azt jelenti, hogy a HomeController About actionjét hívtuk meg, ami az About.cshtml fájl tartalmát jeleníti meg.

Controllers

A Controllers mappában egy HomeControllert találhatunk, a controllerek akciókat fognak tartalmazni, ezek metódusok, amik lehetnek szinkronok/aszinkronok, jelenleg az egyes Action-ökhöz tartozó View page-eket jelenítik meg a metódusok.

Views

Webalkalmazás lévén a frontend HTML állományokból épül fel, a dinamikus content megjelenítéshez viszont nem elég számunkra a HTML (+ CSS), ezért C# segítségével segítségével fogjuk manipulálni a megjelenítendő tartalmat (illetve opcionálisan JavaScript segítségével). Ehhez lesz segítségünkre a Blazor és a Razor, amikkel C# kódot írhatunk a HTML állományokba. Minden egyes viewhoz egy .cshtml kiterjesztésű fájl tartozik, ezekben az állományokban mind C#-ot, mind hagyományos kliens oldali kódot írhatunk. Ha szerver oldali kódot szeretnénk használni, akkor azt a Razor segítségével tehetjük meg, ha pedig a böngészőben futó JavaScript kódot szeretnénk C#-al helyettesíteni/kiegészíteni, azt a Blazor segítségével tehetjük meg.

Layout

Az egész view-t egyfajta keretként egy layout fogja körül venni, amit a Shared mappában találhatjuk meg _Layout néven. A példában egy navbar és egy footer szerepel benne (illetve css és js importok), ezek azok a tartalmak, amelyek minden oldalon egyaránt meg szeretnénk jeleníteni. Ezt egy ilyen layout fájl segítségével érhetjük el és minden oldalon beállíthatjuk, hogy használja ezt a layout-ot. Ez a gyakorlatban azt jelenti, hogy minden egyéb oldalfüggő tartalom külön állományokban fog szerepelni, amit a layout a @RenderBody() metódussal fog renderelni a megjelenítés során. A layout egy full HTML állomány lesz (doctype, html-, head-, body tagek ), minden más tartalmunk pedig majd egy csonka HTML állomány lesz, ami ebbe renderelődik bele.

CSS, JS és egyéb állományok

A site-hoz tartozó css és js állományok a wwwroot mappában találhatóak. A régebbi verziókban volt egy bundleconfig.json állomány, amiben az egyes használt css és js fájlokat definiálhattuk és egy állományként használhattuk az alkalmazásunkban, illetve a css és js fájlok tömörítését is a segítségével valósíthattuk meg. Ez a 2.1-es verzióval kikerült és nem is helyettesítették más megoldással (tehát rajtunk múlik, hogy milyen eszközzel valósítjuk meg ezeket a feladatokat).

Hivatkozások

• ASP.NET Core
• .NET vs. .NET Framework for server apps
• Use multiple environments in ASP.NET Core
• ASP.NET Core fundamentals
• Introduction to ASP.NET Web Programming Using the Razor Syntax (C#)

---

Utolsó frissítés: 2023-08-07 09:17:05