WebElektronika

Handler-ek alkalmazása az ASP.NET Core Razor projektekben

person access_time 2019.08.14.
Az ASP.NET Core környezet alkalmaz handler-eket. Most átnézzük ennek a handlerek használatának alapjait. Áttekintjük a get és a post lehetőségeket, illetve készítünk saját handlereket is, amelyek egyikével még paramétert is átadhatunk. Ezeknek a használata hasonlít a webformoknál megszokott eseményekre.


Indítsuk el a Visual Studio-t, és hozzunk létre egy webes projektet (1. ábra).

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

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

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

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

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

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

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

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

kep
9. ábra   Egy form-ban két handler