Indítsuk el a Visual Studio-t, és hozzunk létre egy webes projektet (1. ábra).
1. ábra Projekt létrehozása
A projekt létrehozása során válasszuk ki a Razor alkalmazást, azaz, nem egy API-t, vagy egy MVC alapú projekt elkészítése a célunk (2. ábra).
2. ábra Razor projekt létrehozása
A projektünk elindításakor a "Pages" könyvtárban található Index.cshtml file tartalma kerül megjelenítésre. Ennek a default tartalma számunkra felesleges, ezért másoljuk be a Index.cshtml file-ba a következő kódot:
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}<h3>Handler-ek</h3>
<hr />
<h4>@Model.WebElektronika</h4><div>
<form method="post">
<button>katt ide (post)</button>
</form><form method="get">
<button>katt ide (get)</button>
</form>
</div>
H3-as tag-gel kiírjuk a címet, majd alatta h4-es címmel az aktuális üzenetet, amelyet a "WebElektronika" property fog majd tartalmazni. Ennek a propertynek az értékét a kódfile-ban lévő handlerek egyikében fogjuk majd beállítani.
Az Index.cshtml.cs kódfile egy OnGet() metódust tartalmaz, amely akkor fog lefutni, amikor az oldal betöltésre kerül. Módosítsuk a kódfile-t a következők szerint:
namespace WebHandler.Pages
{
public class IndexModel : PageModel
{
public string WebElektronika { get; set; }public void OnGet()
{
WebElektronika = "OnGet metódus";
}public void OnPost()
{
WebElektronika = "OnPost metódus";
}
}
}
Az IndexModel osztályban elhelyeztünk egy OnPost() metódust is. A Razor olyan névkonvenciót alkalmaz, amelynél a handler-ek neve elé az "On" szót ki kell tenni. Tehát például a "Get()" metódus neve "OnGet()" lesz (Létezik aszinkron handler is, de kettő egyforma névvel nem lehet egy osztályban. Tehát nem lehet OnGet() és OnGetAsync() egy osztályban.).
Indítsuk el az alkalmazásunkat debug módban (F5), és a következő eredményt kapjuk (3. ábra). A két nyomógomb segítségével "érjük el" a kódfile-ban található adott handlereket.
3. ábra Alkalmazásunk futtatása
Amikor az adott nyomógombot megnyomjuk, akkor az ahhoz tartozó handlert érjuk el, és kiírjuk a WebElektronika property adott értékét.
Elkészültünk a projektünk alapverziójával, amelyet majd mindig módosítani/kiegészíteni fogunk.
A get-en és a post-on kívül a form-nál használhatnánk még a delete-et, illetve a put-ot is. Viszont most mi egyedi handlereket fogunk készíteni és alkalmazni. Egészítsük most ki az Index.cshtml file-t a következő, vastagon kiemelt kódrészlettel.
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}<h3>Handler-ek</h3>
<hr />
<h4>@Model.WebElektronika</h4><div>
<form method="post">
<button>katt ide (post)</button>
</form><form method="get">
<button>katt ide (get)</button>
</form><form asp-page-handler="Metodus1" method="post">
<button>katt ide (Metodus1, post)</button>
</form><form asp-page-handler="Metodus2" method="post">
<button>katt ide (Metodus2, post)</button>
</form>
</div>
Valósítsuk meg a "saját" handlereinket (Metodus1, Metodus2) a kódfile-ban a következők szerint:
namespace WebHandler.Pages
{
public class IndexModel : PageModel
{
public string WebElektronika { get; set; }public void OnGet()
{
WebElektronika = "OnGet metódus";
}public void OnPost()
{
WebElektronika = "OnPost metódus";
}public void OnPostMetodus1()
{
WebElektronika = "OnPostMetodus1 metódus";
}public void OnPostMetodus2()
{
WebElektronika = "OnPostMetodus2 metódus";
}
}
}
Látható, hogy a saját handlereink is megkapták a neveiknél az "On" előtagot, illetve jeleztük a névmegadásnál azt is, hogy post-ként fussanak majd le.
Indítsuk el újra az alkalmazásunkat és kattintsunk például a "Metódus 1" nyomógombra. Ekkor a "Webelektronika" property értékét kiírjuk a weboldalra (4. ábra). Látható a böngésző URL-jében, hogy az alkalmazásunk címében megjelent egy query string (handler), amely megegyezik a "Metodus1"-gyel.
4. ábra Alkalmazásunk query sztring-gel
Egyenlőre ne változtassunk meg a query string féle megoldáson, hanem adjunk át egy paramétert. Azaz, ha beírunk egy számot egy szövegmezőbe, akkor azt jelenítsük meg utána a weboldalon. Ehhez módosítani kell a cshtml, illetve a kódfile tartalmait is.
Hajtsuk végre a következő kiegészítést az Index.cshtml file-ban:
<div>
<form method="post">
<button>katt ide (post)</button>
</form><form method="get">
<button>katt ide (get)</button>
</form><form asp-page-handler="Metodus1" method="post">
<button>katt ide (Metodus1, post)</button>
</form><form asp-page-handler="Metodus2" method="post">
<button>katt ide (Metodus2, post)</button>
<input name="szam" value="123321" />
</form>
</div>
Tekintettel arra, hogy a cshtml file-ban a beviteli mező neve "szam", ezért a kódfile-ban található handler paraméterlistájában a paraméter neve a "szam" lesz.
public void OnPostMetodus2(int szam)
{
WebElektronika = "OnPostMetodus2 metódus - " + szam;
}
Futtassuk újra az alkalmazásunkat, és a következő eredményt kapjuk (5. ábra).
5. ábra Átadott paraméter a weblapon
Megjegyezzük, hogy az "input" mezőnél az átadandó értéket elrejthettük volna a "type="hidden"" beállítással, de ekkor nem tudtuk volna módosítani a szám értékét. Látható az 5. ábrán, hogy az URL mezőben query string-es megoldás van, amely nem a legjobb megoldás. Módosítsuk úgy a projektünket, hogy nem ezt a lehetőséget alkalmazzuk, hanem elhagyjuk a query string-et. Ehhez a cshtml file-ban a következő kiegészítést kell tennünk (6. ábra).
6. ábra A @page kiegészítése
Futtassuk újra debug módban az alkalmazásunkat (7. ábra). Látható az, hogy ugyanúgy működik az alkalmazásunk, de az URL mezőben már nyoma sincs a query string-nek. Az alkalmazásunk címe nem is utal arra, hogy Razor oldalon dolgozunk, lehetne ez akár egy MVC projekt HomeControllerének Index() action-ja is.
7. ábra Paraméterátadás és handler alkalmazása query string nélkül
Újra módosítsuk a cshtml file-ban található @page direktívát a következő sor szerint:
@page "{handler?}/{pelda?}"
@model IndexModel
@{
ViewData["Title"] = "Home page";
}<h3>Handler-ek</h3>
<hr />
<h4>@Model.WebElektronika</h4><div>
<form method="post">
<button>katt ide (post)</button>
</form><form method="get">
<button>katt ide (get)</button>
</form><form asp-page-handler="Metodus1" asp-route-pelda="123" method="post">
<button>katt ide (Metodus1, post)</button>
</form><form asp-page-handler="Metodus2" method="post">
<button>katt ide (Metodus2, post)</button>
<input name="szam" value="123321" />
</form>
</div>
Adjunk a "Metodus1()" handlernek egy int típusú paramétert, amelynek a neve a "pelda", hiszen ezt adtuk meg a cshtml @page direktívánál is (illetve az "asp-route-pelda"-t adtuk meg a form-nál).
namespace WebHandler.Pages
{
public class IndexModel : PageModel
{
public string WebElektronika { get; set; }public void OnGet()
{
WebElektronika = "OnGet metódus";
}public void OnPost()
{
WebElektronika = "OnPost metódus";
}public void OnPostMetodus1(int pelda)
{
WebElektronika = "OnPostMetodus1 metódus - " + pelda;
}public void OnPostMetodus2(int szam)
{
WebElektronika = "OnPostMetodus2 metódus - " + szam;
}
}
}
Futtassuk újra a webes alkalmazásunkat, és amikor a "Metódus 1" nyomógombra kattintunk, akkor a kódfile-ban lévő handlernek átadjuk a 123-as értéket.
8. ábra Az asp-route-.... alkalmazása
Látható az, hogy minden egyes nyomógombhoz egy form blokk tartozott. Nézzünk meg most egy példát, ahol egy form-ban helyezzük el az összes handlert.
Módosítsuk most az Index.cshtml file-t a következők szerint:
@page "{handler?}/{pelda?}"
@model IndexModel
@{
ViewData["Title"] = "Home page";
}<h3>Handler-ek</h3>
<hr />
<h4>@Model.WebElektronika</h4><div>
<form method="post">
<button asp-page-handler="Metodus1">Metodus1</button>
<button asp-page-handler="Metodus2">Metodus2</button>
</form>
</div>
Indítsuk el újra a projektünket, és kattintsunk a "Metódus 2" nyomógombra (9. ábra). Tekintettel arra, hogy most nem adunk át egész számot a handlernek, ezért a paraméter értéke 0.
9. ábra Egy form-ban két handler
A Microsoft által kínált .NET Core nagy népszerűségnek örvend, hiszen ennek a segítségével már nem csak Microsoft operációs rendszer alatt tudjuk futtatni az alkalmazásainkat, hanem akár Linux rendszeren is. Ehhez azonban a Linux operációs rendszerü. . . .
Ebben a cikkben megnézzük az Ubuntu 20.04-re azoknak a programoknak, szolgáltatásoknak a telepítését, amelyek szükségesek ahhoz, hogy az ASP.NET Core alkalmazások futtathatók legyenek ezen a disztribúción. Ezért telepíteni fogjuk most a keretkörnyeze. . . .
A Microsoft által kínált .NET Core nagy népszerűségnek örvend, hiszen ennek a segítségével már nem csak Microsoft operációs rendszer alatt tudjuk futtatni az alkalmazásainkat, hanem akár Linux rendszeren is. Ehhez azonban a Linux operációs rendszerü. . . .