Hirdetés

  2. Fórumok
  3. Szoftverfejlesztés
  4. ASP.NET Web Pages
  5. (téma lezárva)

Hirdetés

100 000 érv a ReGalaxy mellett: Vásárolj Galaxy Z Fold7 I Z Flip7 vagy Galaxy S25 szériás készüléket, és régi mobilod felújítását 100 000 Ft-ig mi álljuk!

Aktív témák

  • #1 trisztan94 őstag
    #1
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    trisztan94

    őstag

    Sziasztok!

    Mostanában próbálok áttérni PHP-ről ASP.NET-re nagyon tetszik a platform, jobban, mint a PHP :DD
    Amit tudni kell róla:
    3 része van, Web Pages, Web Forms, MVC. Ebből a Web Pages a "kezdő-középszint", a platformmal ismerkedőknek készült. A MS saját programjával, a Webmatrix-al lehet fejleszteni. Igazából én magamnak készítettem egy jegyzetet, ami túlnőtte magát, egy jó kis tutorial lett (szerintem, remélem :D), amit gondoltam megosztok veletek :) Maga a tutorial a MS hivatalos tutorialja szerint készült, csak hát ez magyarul van :) Remélem minden érthető és sokaknak segít majd :) Több rész is lesz majd, ahogy én haladok úgy rakok majd fel újakat.

    ASP.NET Layout elemek
    Egy átlagos weboldalon több lap szerepel, legtöbbször a tartalma nagyjból ugyan az. Gondolok itt pl. a Header-re (Fejléc), mely tartalmazza a logót, esetleg a navigációs menüt. Ezt a 'statikus' részt minden aloldalba be kell építeni, mely legtöbbször másolás-beillesztésből áll.
    Index.html
    <header>
    <img src="logo.jpg" alt="Weboldalam Logója"/>
    <nav>
    <div class="navmenu"><a href="elso.html">Első</a></div>
    <div class="navmenu"><a href="masodik.html">Második</a></div>
    <div class="navmenu"><a href="harmadik.html">Harmadik</a></div>
    <div class="navmenu"><a href="negyedik.html">Negyedik</a></div>
    </nav>
    </header>
    <body>
    <h1>Ez az oldal törzse</h1>
    <p>
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
    <footer>
    <p>Copyright 2012 trisztan94</p>
    </footer>

    Na most, a kezdőoldalról felhasználónk rálép az "Első" menüpontra:
    elso.html
    <header>
    <img src="logo.jpg" alt="Weboldalam Logója"/>
    <nav>
    <div class="navmenu"><a href="elso.html">Első</a></div>
    <div class="navmenu"><a href="masodik.html">Második</a></div>
    <div class="navmenu"><a href="harmadik.html">Harmadik</a></div>
    <div class="navmenu"><a href="negyedik.html">Negyedik</a></div>
    </nav>
    </header>
    <body>
    <h1>Első Oldal</h1>
    <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
    </p>
    <footer>
    <p>Copyright 2012 trisztan94</p>
    </footer>

    Láthatjuk, hogy az oldal legtöbb része pontosan megegyezik, csak a törzse lett lecserélve az adott lap tartalmára.
    Ez miért rossz:

    -Feleslegesen terheli a böngészőt ugyanazzal a kóddal
    -Szerkesztés esetén, például, ha egy menüpontot hozzá szeretnénk adni a sitehoz, minden aloldalon el kell végezni azt. Ez a folyamat egy több tíz lapos weboldalnál elég frusztráló lehet, nem is beszélve az esetleges hibázási lehetőségről.

    Mit tud az ASP.NET Web Pages ezen probléma kiküszöbölésére?
    ASP.NET fejlesztés esetén lehetőségünk van layout oldalakat csinálni. Ezek a felhasználótól rejtett oldalak belinkelhetők egy adott aloldalba. A linkelést a "@RenderPage('url')" kóddal adhatjuk meg. A layout fájlok _ -al kezdődnek, ezzel jelezvén a szervernek, hogy ez nem egy megnyitható fájl, kizárólag más oldalakba való "ületésre" szolgálnak. Pl. "_Header.cshtml". A ".cshtml" kiterjesztés az ASP.NET dinamikusan változó HTML fájljainak kiterjesztése.
    Példa:
    _Header.cshtml
    <header>
    <img src="logo.jpg" alt="Weboldalam Logója"/>
    <nav>
    <div class="navmenu"><a href="elso.html">Első</a></div>
    <div class="navmenu"><a href="masodik.html">Második</a></div>
    <div class="navmenu"><a href="harmadik.html">Harmadik</a></div>
    <div class="navmenu"><a href="negyedik.html">Negyedik</a></div>
    </nav>
    </header>

    _Footer.cshtml
    <footer>
    <p>Copyright 2012 trisztan94</p>
    </footer>

    index.cshtml

    @RenderPage("~/Shared/_Header.cshtml")
    <body>
    <h1>Ez az oldal törzse</h1>
    <p>
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>
    @RenderPage("~/Shared/_Header.cshtml")

    elso.cshtml

    @RenderPage("~/Shared/_Header.cshtml")
    <body>
    <h1>Első Oldal</h1>
    <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
    </p>
    @RenderPage("~/Shared/_Header.cshtml")

    Láthatjuk, hogy csak a ténylegesen változó tartalom kerül külön lapra, a statikus külön fájlból kerül beillesztésre.
    Miért jó ez:

    -Csökkenti a böngésző terheltségét, nagyobb oldalaknál láthatóan gyorsítja a teljesítményt.
    -Univerzálisan változtatható a kód. Egy új menüpont esetén csak a _Header.cshtml fájlt kell módosítanunk.
    -Kódunk sokkal átláthatóbb lesz ezáltal.

    Struktúrált Tartalom

    Az előző példa kisebb, pár oldalas siteoknál működhet, de egy nagyobb, több tíz oldalasnál még mindig elég frusztráló lehet minden egyes oldalba beírni. Ennek kiküszöbölésére lehetőségünk van template elkészítésére, mely az oldal teljes kinézetét meghatározza. Egy ilyen template-be tényleges tartalom nem kerül. A főbb részeket (Pl. <head>) beleírjuk, a css-t hozzárendeljük. A tartalom helyére a "@RenderBody()" függvényt helyezzük, ezzel jelezvén a böngészőnek, hogy ide egy Content fájl tartalma fog kerülni. A template fájlok szintén _-al kezdődnek és .cshtml a kiterjesztésük.
    _Layout.cshtml

    <!DOCTYPE html>
    <html>
    <head>
    <title> Struktúrált Tartalom </title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    @RenderPage("~/Shared/_Header2.cshtml")
    <div id="main">
    @RenderBody()
    </div>
    <div id="footer">
    &copy; 2012 trisztan94. Minden Jog Fenttartva.
    </div>
    </body>
    </html>

    Ilyen template fájlokba ugyanúgy használhatjuk a @RenderPage("url") függvényt. Mint láthatjuk a fő, statikus részek vannak benne, a tartalom helyén a @RenderBody() függvény áll. Miután kész a template rakhatunk bele tartalmat.

    elso.cshtml

    @{
    Layout = "~/Shared/_Layout.cshtml";
    }
    <h1>Első Oldal</h1>
    <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
    </p>

    A Layoutot, azaz a templatet meghatározzuk a fájl elején, majd csak maga a tartalom kerül behelyezésre. A layoutot a @{ kezdő- és } zárótagban adjuk meg.
    Miért jó ez:
    Még univerzálisabban kezelhető/szerkeszthető az oldal
    A css fájlt váloztathatjuk, például, ha egy téli témát akarunk az oldalra dobni
    Template több elemmel
    Lehetőségünk van egy layouthoz (template, mostantól Layoutként szerepel) több, esetleg opcionális részt (Section) adni. Például egyik aloldalon csak szöveg, egy másikon a tartalom mellett egy táblázat. Ezt a @RenderSection("név") függvénnyel érhetjük el.

    _Layout.cshtml

    <!DOCTYPE html>
    <html>
    <head>
    <title>Tübbrészes Layout</title>
    </head>
    <body>
    <div id="header">
    @RenderSection("header")
    </div>
    <div id="table">
    @RenderSection("table")
    </div>
    <div id="main">
    @RenderBody()
    </div>
    <div id="footer">
    &copy; 2012 trisztan94. Minden jog fenttartva.
    </div>
    </body>
    </html>

    Láthatjuk, hogy több @RenderSection("név") is került a layoutunkba, melyek különböző részeket jelölnek. Ha ezt így hagyjuk és pl. egyik content fileban nincs valamelyik Section meghatározva, hibával leáll a böngészés, mondván, hogy neki márpegig hiányzik onann az a Section, így nem megy tovább. Ezt kiküszöbölhetjük azzal, hogy opcionálisra rakjuk azt a bizonyos részt:

    <div id="table">
    @RenderSection("table", required: false)
    </div>

    Ezzel azt mondtuk a böngészőnek, hogy ha van olyan Section a content fileban, akkor jelenítse meg, ha nincs, akkor meg menjen tovább és tegyen úgy, mintha nem lenne ott semmi. A content fájlunkba természetesen mondani kell neki, hogy ezeket a részeket (Section) hogyan használja, ezt a @section név függvénnyel tehetjük meg:

    elso.cshtml

    @{
    Layout = "~/Shared/_Layout.cshtml";
    }

    @section header {
    <div id="header">
    Első Oldal
    </div>
    }

    @section table {
    <table>
    <tr>
    <td>Section vagyok</td>
    </tr>
    </table>
    }

    <h1>Első Oldal</h1>
    <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
    </p>

    Adat átadása a Content Fájlból a Layout fájlnak

    Több olyan eset is lehet, mikor a Content fájlunkból adatot kéne a template fájlba átadnunk. Például egy felhasználó login státuszát, vagy csak különböző dolgokat akarunk megjeleníteni a felhasználónak fiókja szintje miatt. Ebben a példában egy listát fogunk vagy megjeleníteni, vagy nem, a felhasználó kérése szerint. Alapértelmezetten a szövegtől balra lesz egy lista. Egy gombbal szabályozhatja, hogy megjelenjen (Kell Lista) vagy eltűnjön a dolog (Nem Kell Lista). Ezt a PageData['név'] változóval tudjuk átadni a Layoutnak, ahol egy elágazás megnézi az értékét és aszerint dönt, hogy mutassa, vagy ne mutassa. Ehhez előbb készítünk egy lista.cshtml fájlt:

    _lista.cshtml

    <ol>
    <li>Első Elem</li>
    <li>Második elem</li>
    <li>Harmadik Elem</li>
    <li>Negyedik elem</li>
    </ol>

    Most jöhet a Content fájlunk:

    elso.cshtml

    @{
    Layout = "~/Shared/_Layout.cshtml";

    PageData["Title"] = "Első Oldal";
    PageData["ShowList"] = true;

    if (IsPost) {
    if (Request.Form["list"] == "off") {
    PageData["ShowList"] = false;
    }
    }
    }

    @section header {
    <div id="header">
    Lista megjelenítése vagy elrejtése
    </div>
    }

    <h1>@PageData["Title"]</h1>
    <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
    </p>

    @if (PageData["ShowList"] == true) {
    <form method="post" action="">
    <input type="hidden" name="list" value="off" />
    <input type="submit" value="Nem Kell Lista" />
    </form>
    }
    else {
    <form method="post" action="">
    <input type="hidden" name="list" value="on" />
    <input type="submit" value="Kell Lista" />
    </form>
    }

    Ez egy kicsit sok egyszerre, vegyük át lépésről-lépésre:
    1. Megadjuk a Layout (template) Fájlt
    2 .A PageData['title'] változónak az oldal címét adjuk értékül
    3 .A PageData['ShowList'] változónak alapértelmezetten igaz értéket adunk, tehát alapértelmezetten megjelenik a lista
    4. Megnézzük, hogy leadásra került-e a form (IsPost). Ha igen akkor megnézzük, hogy a 'list' hidden input értéke off-e, ha igen, akkor a FormData['ShowList'] változó értéke hamis lesz. (Ha nem értitek miről magyarázok, ne aggódjatok, lejjebb minden függvényt elmagyarázok)
    5. A header section a layouthoz.
    6. <h1> -> A címnek a PostData['Title'] változó értékét adjuk, hiszen azt már fent definiáltuk.
    7. Dokumentum törzse
    8. Ha a PageData["ShowList"] változó igaz, akkor mutassa azt a formot, ami eltűnteti (van egy hidden input is, amit fent használtunk), különben (tehát, ha hamis az érték), mutassa azt a formot ami megmutatja a listát.

    Most jöjjön a Layout fájlunk:

    _Layout.cshtml

    <!DOCTYPE html>
    <html>
    <head>
    <title>@PageData["Title"]</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="header">
    @RenderSection("header")
    </div>
    @if (PageData["ShowList"] == true) {
    <div id="list">
    @RenderPage("~/Shared/_List.cshtml")
    </div>
    }
    <div id="main">
    @RenderBody()
    </div>
    <div id="footer">
    <p>&copy; 2012 trisztan94. Minden Jog Fenttartva.</p>
    </div>
    </body>
    </html>

    Mi történik itt?
    -Ha a PageData['ShowList'] változó értéke igaz, akkor Rendereljük a _List.cshtml fájlt a Layoutba, különben nem

    Konkrétan ennyi lenne ez a kis tutorial, hamarosan jön több is :)

    Felhasznált függvények + magyarázatok:

    @RenderPage('url') - Egy másik, rejtett fájl tartalmát a dokumentumunkba illesztjük. Az url mindig RELATÍV, tehát a szerver GYÖKERÉTŐL adjuk meg az útvonalat. (~/valami/valami.kiterjesztés)

    @RenderBody() - A layout (template) fájlunkban jelzi azt, hogy a tartalom hova fog kerülni.

    @{
    Layout = "url";
    }
    A Content Filenak megadjuk, hogy milyen layoutot (template) használjon, melyiknek a @RenderBody() részébe ágyazódjon be.

    @RenderSection('név') - A layout fájlunkban különböző, több részek helye. Ajánlatos opcionálisra állítani, hogy a böngésző ne álljon le hibával, ha esetleg nem létezik a Content fileban. Ezt így tehetjük meg: @RenderSection("név", required: false)

    @Section név{
    tartalom
    }
    A Content fájlunkban a Section ami beleépül a layout fájlba a megadott helyen.

    @PageData['név'] - Változó, mellyel a layout fájlnak adhatunk át információkat

    if(){} - Elágazás függvény. Ha a zárójelekben lévő dolog igaz, akkor csinálja a kapcsos zárójelben lévő dolgot, ha nem, akkor egy else ágat csinálja.

    IsPost - Megnézni, hogy van-e POST változó, ami "post" metódussal megadott formok leadása után létezik csak. Tehát megnézi, hogy le lett-e adva a form.

    Request.Elem['név'] - jelen tutorialban így volt jelen: Request.Form['list']. Itt a formban a hidden input értékét nézte meg. /Igazából még én sem nagyon tudom hogy kell használni, mire való, nem akarok hülyeséget mondani :)) /

    Remélem mindenki tanul belőle, tényleg nagyon jó platform, de elég szokatlan a PHP után :))

    Sok siker mindenkinek, feedbacket várok ! :D

    T

Aktív témák