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

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

    https://heureka-kreativ.hu

  • #2 Blaise veterán
    #2
    Ö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

    Blaise

    veterán

    Van bőven magyar nyelvű Webmatrix anyag, videó screencast és könyv is egyaránt:

    [link]

  • #3 JuhaszD csendes tag
    #3
    Ö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

    JuhaszD

    csendes tag

    Sziasztok!

    ASP.NET és C# nyelvekben történő fejlesztésben jártas szakembert keresünk Budapestre egy webfejlesztésekkel foglalkozó céghez! Nagyon jó munkalehetőség, fiatalos csapat, kötetlen munkarend! Jelentkezni lehet itt:

    http://bap.hu/allasajanlat/3083/asp-net-fejleszto

    Gyertek hozzánk dolgozni! :)

  • #4 trisztan94 őstag Blaise #2
    #4
    Ö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

    válasz Blaise #2 üzenetére

    Óh. Akkor jó :D
    Azért meghagyom a topikot, kerestem, de nem találtam itt.

    https://heureka-kreativ.hu

  • #5 Lacces őstag trisztan94 #4
    #5
    Ö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

    Lacces

    őstag

    válasz trisztan94 #4 üzenetére

    Maradhatna, ASP.NET néven szerintem, akkor külön válna a C#-tól, így sokkal áttekinthetőbb lenne.

    Héjló :D Arra van lehetőség, hogy ASP.NET MVC-t apache2 szerveren futtassak?

    [ Szerkesztve ]

  • #6 trisztan94 őstag Lacces #5
    #6
    Ö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

    válasz Lacces #5 üzenetére

    Nem hinném, csak a MS IIS szervert viszi, ha jól tudom :( Sajnos ez a baj az ASP.NET-tel, dedikált Windows szerveren lehet csak futtatni, ami költségesebb a szoftverliszenc miatt :(

    [ Szerkesztve ]

    https://heureka-kreativ.hu

  • #7 Lacces őstag trisztan94 #6
    #7
    Ö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

    Lacces

    őstag

    válasz trisztan94 #6 üzenetére

    ajj meg mindig nem oldották meg :( :DDD
    Annyira nem nagy érvágás mert a Yii filozófiája nagyon hasonlít az ASP.NET MVC-hez. :). Én ezt kifejezetten jó néven vettem :)

  • #8 mysticman csendes tag Lacces #5
    #8
    Ö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

    mysticman

    csendes tag

    válasz Lacces #5 üzenetére

    Csak IIS viszi. Rendelkezik valaki Azure-os kompetenciákkal?

  • #9 mysticman csendes tag trisztan94 #6
    #9
    Ö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

    mysticman

    csendes tag

    válasz trisztan94 #6 üzenetére

    Nem feltétlen, mert 50-60$ ért 1 évig tudsz szinte bárhol hosztolni alkalmazást, vagy vannak különböző Microsoft programok ahol pl. ingyen windows Azure szolgáltatást kapsz.

    3 hónapig amúgy bárkinek ingyenes ami mondjuk egy kezdő alkalmazás életében máris egész jó. Egy olyan gondom van hogy hogy lehetne azt beállítani, hogy az IIS minél tovább tartsa memóriában az oldalt, mert ha 2-3 perc után nem nézegetik az oldalt a következő indulás pár másodpercet igénybe vesz.

    ha valaki megnézi ez Windows Azure-ban fut. www.onlinetachograf.hu ,és amúgy elég jól van optimalizálva sebesség terén, de mégis van amikor csak 2-3 másodpercig tölt az az oldal hogy az IIS kitudja szolgálni a kérést. Amúgy pedig gyors pörgős az oldal.

Aktív témák