ASP.NET CORE MVC. ASP.NET Core bevezetés, Hello World MVC workflow Controller réteg View réteg HTML leíró nyelv ViewModel

Átírás

1 ASP.NET CORE MVC ASP.NET Core bevezetés, Hello World MVC workflow Controller réteg View réteg HTML leíró nyelv ViewModel

2 Hallgatói tájékoztató A jelen bemutatóban található adatok, tudnivalók és információk a számonkérendő anyag vázlatát képezik. Ismeretük szükséges, de nem elégséges feltétele a sikeres zárthelyinek, illetve vizsgának. Sikeres zárthelyihez, illetve vizsgához a jelen bemutató tartalmán felül a kötelező irodalomként megjelölt anyag, a gyakorlatokon szóban, illetve a táblán átadott tudnivalók ismerete, valamint a gyakorlatokon megoldott példák és az otthoni feldolgozás céljából kiadott feladatok önálló megoldásának képessége is szükséges.

3 Internet vs. WEB Internet: telekommunikációs technológia Világméretű összekapcsolt hálózat WEB/WWW: hivatkozásokkal összekötött dokumentumrendszer Szerverek dokumentumokat/szolgáltatásokat publikálnak Szerverekre DNS címmel hivatkozunk (pl: google.com) Szerverek által hosztolt weboldalak más weboldalakra hivatkoznak (link/hiperhivatkozás) Ezt az egészet hívjuk webnek 3 fontos szabványból épül fel: URL HTML HTTP 3

4 URL Uniform Resource Locator Dokumentumok/szolgáltatások elérése távolról Ahelyett, hogy távol c:\users\valami.html-t kéne írni Hierarchikus dokumentumszervezés hirek belfold.html allas ajanlatok.html index.html

5 HTML HyperText Markup Language Weboldalak kinézetének leírónyelve HTML5 verziónál tartunk eredmeny.html tartalma <table border = "1"> <tr> <th>i. hely</th> <th>ii. hely</th> <th>iii. hely</th> </tr> <tr> <td>béla</td> <td>gizi</td> <td>saci</td> </tr> </table> Ezt látjuk a böngészőben

6 HTTP HyperText Transfer Protocol Weboldalak tartalmának átvitele az interneten Kérés-válasz alapú, állapotmentes protokoll Mindig a kliens kezdeményez, a szerver csak válaszol Két kérés között nincs állapotmegőrzés Küldünk egy parancsot és paramétereket, kapunk egy választ HTTP kérés Dokumentum neve Elvárt formátum Előzőleg látogatott oldal Elvárt nyelv HTTP válasz Dátum Utolsó módosítás Hossz Formátum Maga a dokumentum törzse

7 Állapotmegőrzés Eddigi tanulmányok: ConsoleApp, WPFApp A program kizárólag egy felhasználót szolgál ki Webfejlesztés Nem egymagunk használunk egy webalkalmazást Párhuzamosan rengeteg kérés, amelyek egymás után hajtódnak végre Géza lekéri a főoldalt Marika blogbejegyzést küld el Géza megnyit egy blogbejegyzést Marika megváltoztatja a jelszavát A web esetében két felhasználói akció között semmilyen kapcsolat nem lesz Webfejlesztés sokkal körülményesebb, mint egy WPF app

8 HTTP utasítás GET /kovacs.andras/webprog/hello.html HTTP/1.0 GET parancs A megadott dokumentum tartalmát küldje vissza a szerver Dokumentum címe Felépítése: név és kiterjesztés, ahogyan az operációs rendszeren is Verziószám A HTTP protokoll melyik verziójában értelmezendő a kérés

9 HTTP metódusok Utasítás HEAD GET POST PUT DELETE Leírás Ugyanaz, mint a GET, de csak az adott dokumentum jellemzőit kéri le, a dokumentumot nem. Adott dokumentum letöltése Adatok felküldése a szerverre (pl. űrlapba írt adatok) Dokumentum feltöltése a szerverre Dokumentum törlése a szerverről

10 Webszerver szoftver A webszerver szoftver adott fájlok kérése esetén két dolgot tehet A fájl tartalmát HTTP válaszban visszaküldi (HTML tipikus példa) Egyéb példák: telepítőfájlok, videók, tömörített állományok, office dokumentumok Statikus weboldal készíthető így Csak akkor kap a felhasználó más tartalmat, ha a szerveren a HTML állományokat valaki módosítja A fájl tartalmát átadja egy tőle független programnak, ami feldolgozza és a webszerver ennek a független programnak az eredményét küldi vissza Dinamikus weboldal készíthető így (webalkalmazás) Felhasználó inputok függvényében más-más eredmények születnek 10

11 Statikus/Dinamikus weboldal kérése

12 CGI alkalmazások Tetszőleges programozási nyelven írt önmagában futtatható alkalmazások (.exe) Minden programozási nyelvben lehetőség van szabványos bemenet és szabványos kimenet kezelésére Van egy bemeneti adathalmaz, és különböző műveletek segítségével valamilyen kimenetet ad a program a futtatás végén Webszerver környezetben a HTTP kérés kerül a szabványos bemenetre, és a program válaszát a webszerver a HTTP válaszba illeszti Elavult módszer Nagy erőforrásigény Korlátolt szolgáltatáskészlet 12

13 Mi az az ASP.NET? Szerveroldali C# nyelvű keretrendszer webes fejlesztéshez ASP.NET MVC 2-5 (Nem Core verziók) Kizárólag Microsoft IIS szerveren hosztolható Az IIS szerver pedig kizárólag Windows operációs rendszerre jelent meg ASP.NET MVC Core :.NET reneszánsz (nyílt, modularizált világ) [.NET Core] Saját Kestrel webszerverrel rendelkezik, amely Linuxra és macos-re is könnyedén telepíthető a.net Core frameworkkel együtt (+Entity Framework Core) Cél: elosztott alkalmazások/mikroszolgáltatások/konténer 13

14 ASP.NET korábbi verziók hátrányai A teljes Base Class Library egyben telepítendő Semmi szükség pl. egy regisztrációs űrlaphoz System.Drawing, System.XML és egyéb névtereket tartalmazó szerelvényekre 14

15 ASP.NET Core újítás Bármilyen.NET keretrendszerbeli osztályt ha használni akarunk, az IntelliSense felismeri és azonnal telepíti NuGet Package Manageren keresztül Teljesen moduláris lett az egész rendszer Egy új build esetén az összes függőséget egyben újratelepíti Bover/NuGet csomagkezelőn keresztül telepíthető minden népszerű webes frontend építőkocka CSS libraryk (pl. Bootstrap) JS libraryk (pl. JQuery) 15

16 ASP.NET alkotóelemek I. ASP.NET Web Forms Moduláris weboldalak, a UI elemek eseményei szerveroldalon váltódnak ki (keretrendszer) ASP.NET MVC MVC tervezési minta alapján 3 réteget különböztetünk meg (keretrendszer) ASP.NET Web Pages Szintaxis, amellyel szerveroldali kódot ágyazhatunk a HTML nyelvbe ASP.NET Web API Nem HTML válaszokat, hanem pl. egy objektumot küldünk vissza (JSON formátumban) 16

17 ASP.NET alkotóelemek II. ASP.NET WebHooks HTTP protokollon keresztül lehetőség van eseményeket elsütni, és eseményekre feliratkozni SignalR Aszinkron hívások kliens oldalról szerveroldalra (Javascripttel) 17

18 Hello World! 18

19 Hello World! 19

20 Hello World! Függőségek Milyen package-eket használ az alkalmazásunk Egy új webszerverre költözéskor ezek automatikusan letöltődnek Indítási konfiguráció Portszámok Futtatási módok jellemzői (Development/Staging/Production) Gyökérmappa Statikus fájlok (pl. képek) helye Alkalmazás belépési pont Alkalmazás konfigurációk 20

21 Hello World! public class Startup { public void ConfigureServices(IServiceCollection services) { } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.isdevelopment()) { app.usedeveloperexceptionpage(); } } } app.run(async (context) => { await context.response.writeasync("hello World!"); }); Alapvetően ezt látjuk, a futtatás gombra kattintva megnyílik egy böngésző, ahol megtekinthetjük a végeredményt. 21

22 Hello World MVC bevezetés 1. Bekapcsoljuk az MVC-t a szolgáltatások között 2. Az MVC-t utasítjuk, hogy név alapú útválasztással működjön 22

23 Hello World MVC bevezetés 3. Létrehozunk egy Controllers nevű mappát, és benne egy HomeController.cs nevű fájlt 23

24 Hello World MVC bevezetés 4. Megírjuk a HomeController osztályt! public class HomeController : Controller { public string Index() { return "Főoldal"; } } public string Items() { return "alma, körte, banán"; } 24

25 Hello World MVC bevezetés 5. Tesztelünk böngészővel! Localhost:60421 A HomeController osztály Index() Action-jét (metódusát) fogja hívni az ASP Localhost:60421/Home/Index Alapvetően így nézne ki kiírva a teljes elérési út Localhost:60421/Home/Items Az ASP keres egy olyan Controllert, amelynek a neve {XY}Controller és benne az adott nevű Action 25

26 MVC WorkFlow Models Business Logic Repository Controller Car Model Person Model View User 26

27 MVC WorkFlow Models Business Logic Repository Controller Car Model Person Model View 1. A felhasználó a böngészőjével az alkalmazásba navigál. A Routing alapján a kérése valamelyik Controller valamelyik Action-jéhez érkezik meg. User 27

28 MVC WorkFlow Models Controller 2. Business Logic Car Model Repository Person Model View 1. Az adott Action (metódus), ha szükséges, a Model réteg osztályaihoz fordul (tipikusan a BusinessLogichoz) User 28

29 MVC WorkFlow Controller 2. Business Logic Car Model Models 3. Repository Person Model View 1. A BusinessLogic az adatbázisból adatot kér, vagy oda adatot küld. Közben példányok keletkeznek az egyed osztályokból. User 29

30 MVC WorkFlow Controller Business Logic Car Model Models 3. Repository Person Model View 1. A BusinessLogic az összeállított választ (pl. Car lista, stb.) elküldi a View-nak a Controlleren át. User 30

31 MVC WorkFlow Controller 5. View Business Logic Car Model 1. Models 3. Repository Person Model A Controller továbbítja a BusinessLogic válaszát a View-nak (Itt már nem szokás hozzányúlni!) User 31

32 MVC WorkFlow Controller (6.) Business Logic Car Model 1. Models 3. Repository Person Model View A View HTML válaszát megkapja a User. (Gyakorlatilag a Controlleren keresztül, de itt már nem lehet a válaszba belenyúlni, mert az maga a HTML kód) 6. User 32

33 ViewModel Controller 4. Model ViewModel Business Logic Car Model Models 3. Repository Person Model View Amikor a BusinessLogic adatot továbbít a View számára, tipikusan egy darab objektumot adunk át. Abban az esetben, hogyha egy Autó objektumot és a rendelkezésünkre álló egyenleget akarjuk megjeleníteni együtt, akkor nem az adott Autó Model osztályt adjuk át, hanem létrehozunk egy ViewModelt, amely egy átmeneti megjelenítési célú összetett objektum. (Adott autó, összes autó) 33

34 Controller View együttműködés 1. Létrehozunk egy Views nevű mappát a Solution Explorerben, majd alkönyvtárként egy Home mappát. 34

35 Controller View együttműködés 2. Hozzáadunk a Home mappához egy új View-t. Az új View neve Index. 35

36 Controller View együttműködés 3. Tetszőleges HTML kódot írunk, ez lesz a kezdőoldalunk. 36

37 Controller View együttműködés 4. A Controllerünk Action-jét módosítjuk, hogy ne string választ adjon, hanem az azonos nevű View-hoz továbbítsa a kérést. public class HomeController : Controller { public IActionResult Index() { return View(); } } 37

38 View tartalma: HTML kód HTML: HyperText Markup Language A weboldalak megjelenítésére szolgál Böngésző értelmezi, kirajzolja (táblázatok, listák, stb.) Sima szöveges állomány, bármilyen editorral lehet szerkeszteni.html formátumban elmentve, a böngészővel megnyitható Verziók HTML (1991) HTML 2.0 (1995) HTML 3.2 (1997) HTML 4.01 (1999) XHTML (2000) HTML 5 (2014) 38

39 HTML oldal felépítése Ezeket kötelező kiírni, még akkor is, ha megjelenik a kívánt tartalom <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>oldal címe</title> </head> <body> </body> </html> Megjelenítést leíró tag-ek Egyéb, a teljes oldalra vonatkozó információk A böngésző értelmezi ezek nélkül is az oldalt, de az XHTML szabvány alapján kötelező kiírni. Charset nélkül a karakterkódolás rossz lehet például. 39

40 HTML elemek XML formátum <a> tartalom </a> <- HTML tag A HTML tag-nek lehetnek a nyitó tag-en belül attribútumai Nyitó tag Attribútum <a href=" Neumann Kar Weboldala </a> Záró tag 40

41 Címsorok <h1> Üdvözlő oldal </h1> h1..h6 [1 a legnagyobb, 6 a legkisebb] Keresőmotorok ezek alapján detektálják az oldal struktúráját Mindegyikből csak 1-1 darabot illik használni <body> <h1>termékek</h1> <h3>kategóriák</h3> </body> 41

42 Bekezdés <p> Ez egy bekezdés </p> Végtelen sok lehet belőle Sortörést ad automatikusan a tartalom után <body> <h1>szólások, közmondások</h1> <p>alkalom szüli a tolvajt</p> <p>ajándék lónak ne nézd a fogát</p> <p>nem esik messze az alma a fájától</p> </body> 42

43 Sortörés, választóvonal, formázott szöveg <p> ez egy szöveg <br/> ez meg új sorba jön </p> <br> tag egyben nyitó és záró tag is <hr/> Egy vízszintes vonalat szúr be <pre> tartalom </pre> Olyan bekezdés, ahol enterek és space-ek megmaradnak <h1>szólások, közmondások</h1> <p>alkalom szüli a <br /> tolvajt</p> <hr /> <p>ajándék lónak ne nézd a fogát</p> <hr /> <pre>nem esik messze az alma a fájától</pre> 43

44 Hiperhivatkozás (link) <a href= > ez egy szöveg </a> Href paraméterben a link célja, tartalomként a linken megjelenő szöveg A cél lehet egy teljes url (lásd fent), vagy relatív hivatkozás Másik Action: <a href="info">ugrás az infókhoz!</a> Másik Controller, másik Action: <a href="/ujsag/hirek">ugrás a hírekhez!</a> Egy statikus fájl (pl: egy pdf vagy videó letöltéséhez)*: <a href="/files/about.pdf">leírás letöltése</a> *statikus fájl: A wwwroot mappába helyezzük el őket (a files itt egy alkönyvtár) [későbbiekben lesz szó a statikus fájlokról] 44

45 Hiperhivatkozás - folytatás Target attribútum: hol nyíljon meg a cél oldal? _blank: új ablakban/lapon _self: cseréljük le a mostani oldalt az újra (alapértelmezés) Title attribútum: Linkre mutatva megjelenő szöveg Navigálás adott oldal adott pontjához Jelenlegi oldalon belül valamely tag-nek adjunk id attribútumot <a href="#infok">ugrás az infókhoz!</a> <p id="infok">itt vannak az infók!</p> Másik oldal adott pontjához Ha a cél egy HTML oldal: <a href="infos.html#footer">ugrás!</a> Mivel ASP-ben Action-re lépünk át, ritkán használjuk 45

46 Kép megjelenítés <img src= ship.jpg alt= egy hajó /> src attribútum wwwroot mappában lévő képfájl Vagy másik szerveren kiírva a teljes url-t alt attribútum (alternatív szöveg) Ha a kép nem érhető el, jelenjen meg azért valami helyette Vakok számára a felolvasó programok ezt olvassák be <img src="ship.jpg" alt="egy hajó" /> Kép, mint link: <a href=" <img src="nik.jpg" alt="niklink" /> </a> 46

47 Táblázat <tr> </tr> Egy sort jelöl ki <th> </th> Fejléc cellák <td> </td> Sima cellák <table> <tr> <th>sorszám</th> <th>név</th> </tr> <tr> <td>1.</td> <td>kovács Géza</td> </tr> <tr> <td>2.</td> <td>tóth Pál</td> </tr> </table> 47

48 Táblázat egyéb lehetőségek <caption> </caption> A table tag után következik, címet adunk meg vele Cellák egyesítése rowspan, colspan attribútumok egy td vagy th tagen <table> <tr> <td>a</td> <td colspan="2">b</td> </tr> <tr> <td rowspan="2">c</td> <td>d</td> <td>e</td> </tr> <tr> <td>e</td> <td>f</td> </tr> </table> A keret csak szemléltetés! 48

49 Felsorolások <ul> <li>analízis</li> <li>bevszám</li> <li>prog I.</li> </ul> <ol> <li>analízis</li> <li>bevszám</li> <li>prog I.</li> </ol> <ul> <li> </li> </ul> Egyszerű felsorolás <ol> <li> </li> </ol> Sorszámozott felsorolás <ol type= A > [A,B,C] <ol type= a > [a,b,c] <ol type= I > [I,II,III,IV] <ol type= i > [i,ii,iii,iv] <ol type= I > [I,II,II] <ol start= 50 > [50,51,52..] 49

50 Egymásba ágyazott felsorolás <ul> <li>coffee</li> <li> Tea <ol> <li>black tea</li> <li>green tea</li> </ol> </li> <li>milk</li> </ul> 50

51 Definíció leírás páros <dl> <dt>windows</dt> <dd>- Fizetős</dd> <dd>- Szép</dd> <dd>- Desktopra ideális</dd> <dt>linux</dt> <dd>- Ingyenes</dd> <dd>- Kevésbé szép</dd> <dd>- Szervernek ideális</dd> </dl> 51

52 Iframe Használata napjainkban nem javasolt! Javascript lesz helyette <iframe src= google.com </iframe> Egy beágyazott keretbe betölthető egy másik HTML állomány/weboldal Link céljának iframe-be irányítása Iframe-et name attribútummal látjuk el Link célja ez a iframe lesz (name-el azonosítva) <iframe name="keret"></iframe> <a href=" target="keret">katt ide</a> 52

53 HEAD tag-en belül használható elemek <meta charset="utf-8"> Megadjuk a böngészőnek az oldal karakterkódolását VS által generált HTML csontvázban alapból benne van UTF-8-al <meta name="description" content="free tutorials"> Oldal leírása (keresőmotoroknak hasznos) <meta name="keywords" content="html, CSS, XML"> Oldal gyakori kulcsszavai (keresőoptimalizálás alapja) <meta name="author" content="john Doe"> Oldal készítője (keresőmotoroknak hasznos) <meta http-equiv="refresh" content="30"> Oldal automatikus frissítése X másodpercenként Használata nem javasolt, Javascript megoldás lesz helyette

54 Különleges karakterek Egyes karaktereknek speciális jelentése van < és > karakterek HTML tag kezdetek, space-ből csak 1 látszik, hiába írunk többet Helyettük az entity name-et írjuk le

55 Controller -> View adattovábbítás A View() egy statikus függvény, amelynek több paraméterlistája is van: View() View(object model) View(string viewname) View(string viewname, object model) Adjunk át 1-5 között egy véletlenszámot a View-nak! 55

56 Controller -> View adattovábbítás Vegyük át a paramétert a View-ban! Az első sorban meg kell adnunk az érkező objektum típusát. Szigorúan típusos a View is. A HTML kód bármely részén hivatkozással érhetjük el az objektumot. Ez úgynevezett Razor szintaxis. 56

57 Programozás a View-ban Lehetőség van egyszerű C# kódokat írni. De ide csupán olyat szabad, ami a megjelenítéshez { } blokkon belül c# nyelvű kódot írhatunk. C# blokkon belül html kód <h1> alma </h1> 57

58 Feladat Készítsünk egy webalkalmazást, amelynek főoldalán egy hivatkozásra tudunk kattintani A kattintás után írjuk ki, hogy az elsőéves hallgató melyik Programozás előadónál fog szóbelizni! 58

59 Megoldás (Controller) public class HomeController : Controller { Random r; string[] nevek; public HomeController() { r = new Random(); nevek = new string[] { "Vámossy Zoltán", "Sergyán Szabolcs", "Csink László", "Szénási Sándor" }; } } public IActionResult Index() { return View(); } public IActionResult Itelet() { return View("Itelet", nevek[r.next(0, nevek.length)]); } Ha stringet adunk át a View-nak, akkor ügyeljünk rá, hogy azt viewname-nek fogja venni. Ezért ki kell írnunk a cél View nevét is 59

60 Megoldás (View - Főoldal) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>index</title> </head> <body> <a href="/home/itelet">kattints, ha mersz!</a> </body> </html> Link a másik Action-re 60

61 Megoldás (View Ítélet string <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>itelet</title> </head> <body> <h1>a </body> </html> 61

62 Felhasználói adatbevitel Szerver felé adatküldés két módja a felhasználótól: HTTP GET metódus Minden sima URL címre navigálás egy GET kérés Minimálisan paraméterezhető az URL cím name: John city: Berlin HTTP POST metódus Adatok küldésére van kifejezetten (pl. űrlapadatok) URL címben nem látszanak a küldött adatok A metódus törzsében kerülnek küldésre 62

63 Felhasználói adatbevitel (GET) Az Action-t felparaméterezzük Alapvetően minden GET érték karakterláncként továbbítódik Vegyük észre, hogy automatikusan lefut az int.parse() a háttérben! Hogyha nem jön paraméter, arra az esetre adjunk egy default értéket Meghívás a böngészőből: [index: 3] [index: -1] 63

64 Feladat Folytassuk a vizsgáztató-sorsolós feladatot! Az URL címben GET kéréssel küldjünk paraméterként egy számot, és az adott sorszámú tanár nevét jelenítsük meg. 64

65 Megoldás (Controller) public IActionResult Itelet(int index = -1) { if (index == -1) { return View("Itelet", nevek[r.next(0, nevek.length)]); } else { return View("Itelet", nevek[index]); } } 65

66 Felhasználói adatbevitel (POST) HTML Formokon (űrlapokon) keresztül küldünk adatot Egy egyszerű HTML űrlap: <body> <form action="/home/itelet" method="post"> Neved: <input type="text" name="name" /> <br/> Oktató sorszáma: <input type="text" name="index" /> <br/> <input type="submit" value="kérem az oktatót!" /> </form> </body> Action: Melyik controllernek kell továbbítani az adatokat Method: POST metódussal menjen Name attribútumok: ezzel hivatkozunk az adatra majd 66

67 HTML form (űrlap) <form action= Feldolgozo method= POST > </form> A form tagen belül helyezhetjük el az űrlapelemeket Action attribútum: Melyik /Controller/Action fogja megkapni az adatokat Method attribútum: POST (ASP-ben mindig) *Target attribútum: ugyanaz, mint egy link esetén (_self pl.) <input type= submit value= Küldés /> Az összes űrlapelem után az elküldésre szolgáló gomb Value attribútum: Mi legyen a gomb felirata Type attribútum: submit elküldés, reset mezőtörlés <form action="feldolgozo" method="post"> <input type="submit" value="küldés!" /> <input type="reset" value="töröl!" /> </form> 67

68 HTML űrlapelemek: egyszerű szövegmező <input type= text name= firstname /> Egyszerű szövegbeviteli mező Name attribútummal tudunk rá szerveroldalon hivatkozni Form elemek tagolása, segédszöveg Az űrlapelem elé írjuk a segédszöveget (nem kell tag) <br/> taggel tördelünk új sorokat C#: string <form action="feldolgozo" method="post"> Vezetéknév: <br /> <input type="text" name="firstname" /> <br /> Keresztnév: <br /> <input type="text" name="lastname" /> <br /> <input type="submit" value="küldés!" /> <input type="reset" value="töröl!" /> </form> 68

69 HTML űrlapelemek: rádiógombok <input type= radio name= szi value= bir /> Választógombok (csak egyet jelölhetünk be) Name attribútum: hivatkozunk rá + csoportba szervezés Azonos name attribútumúak közül lehet csak egyet választani Value attribútum: szerveroldalon ezt kapjuk meg Checked attribútum: ez van alapból bejelölve C#: string Értéke nincs az attribútumnak (pl. true), a megléte a jelentéshordozó <input type="radio" name="szi" value="other" checked /> Későbbi félévben kívánok választani <br /> <input type="radio" name="szi" value="bir"/> Beágyazott rendszerek <br /> <input type="radio" name="szi" value="szf"/> Szoftverrendszerek fejlesztése <br /> 69

70 HTML űrlapelemek: checkboxok <input type= checkbox name= targy value= prog1 /> Jelölőnégyzetek (egyet vagy többet jelölhetünk be) Name attribútum: hivatkozunk rá + csoportba szervezés Lehetnek külön csoportok is Value attribútum: szerveroldalon ezt kapjuk meg Checked attribútum: ez van alapból bejelölve Értéke nincs az attribútumnak (pl. true), a megléte a jelentéshordozó C#: string [ ] <input type="checkbox" name="targy" value="prog1" checked/> Programozás I. <br /> <input type="checkbox" name="targy" value="opre" checked/> Operációs rendszerek <br /> <input type="checkbox" name="targy" value="vir" checked/> Vállalati információ rendszerek <br /> 70

71 HTML űrlapelemek csoportosítása <fieldset> form elemek </fieldset> Csoportosítja és bekeretezi a tartalmazott form elemeket <legend> felirat </legend> a keretre címfeliratot tesz <fieldset> <legend>személyes infók</legend> Vezetéknév:<br> <input type="text" name="firstname"><br> Keresztnév:<br> <input type="text" name="lastname"><br><br> </fieldset> <fieldset> <legend>véglegesítés</legend> <input type="submit" value="elküldés"> </fieldset> 71

72 HTML űrlapelemek: lista <select> <option>..</option> </select> Lista, amiből egy vagy több elem választható ki name attribútum: hivatkozunk rá szerveroldalon size attribútum: ennyi opció látszik egyszerre (1: legördül) <option> value attribútum: ez megy szerveroldalra <option> selected attribútum: alapból kijelölt multiple attribútum: többet is ki lehet választani Értéke nincs az attribútumnak (pl. true), a megléte a jelentéshordozó <select name="pizza" size="4" multiple> <option value="sajt">sajt</option> <option value="szalami" selected>szalámi</option> <option value="sonka">sonka</option> <option value="gomba" selected>gomba</option> </select> C#: string C#: string [ ] 72

73 HTML űrlapelemek: datalist <input/> <datalist> <option>..</option> </datalist> Egy szövegbeviteli mező, amelynek vannak alapértékei De írhatunk bele saját értéket is! <input> list attribútum: melyik datalistből a forrás <datalist> id attribútum: el kell nevezni, hogy az input lássa <option> value attribútum: ez megy szerveroldalra Vagy az általunk beírt szöveg <input list="elotag"> <datalist id="elotag"> <option value="id."> <option value="ifj."> <option value="dr."> <option value="prof."> </datalist> C#: string 73

74 HTML űrlapelemek: többsoros szövegbevitel <textarea> opcionális előírt szöveg </textarea> Többsoros szövegbevitelt tesz lehetővé rows attribútum: ennyi sor férjen bele cols attribútum: soronként ennyi karakter férjen bele <textarea rows="5" cols="20"></textarea> <br/> <input type="submit" value="elküldés"> Vigyázat! A nyitó és a záró tag közti rész kerül bele a dobozba automatikusan. Hogyha szépen több sorba formázzuk a kódot (nyitó tag, enter, tartalom, enter, záró tag), és ráadásul a html kód beljebb van tabulálva, akkor rengeteg extra space kerül a dobozba. 74

75 HTML űrlapelemek: input mezők <input type= valami /> Sima text típussal már találkoztunk: egyszerű szövegmező type lehetséges egyéb értékei: type leírás speciális attribútumok password color A begépelt szöveg helyett csillagok színválasztó date Dátummező max= min= datetime-local Dátum + időmező number Szám (léptetővel) min= 10 max= 100 step= 10 file Fájlfeltöltés range csúszka min= 10 max= 100 step= 10 time hidden időmező Rejtett szövegmező 75

76 HTML űrlapelemek egyéb attribútumai readonly Csak olvasható mező (szerverre elküldésre kerül) disabled Csak olvasható mező (szerverre nem küldődik el) size (pl: size= 40 ) Ennyi karaktert lehet beleírni maxlength (pl: maxlength= 10 ) Ennyi karakter fér el a képernyőn, de továbbgördül autocomplete (autocomplete= on off ) Formon magán is megadható, és mező szinten is A böngésző megpróbálja kitölteni korábbi tartalmainkkal 76

77 HTML űrlapelemek egyéb attribútumai autofocus Ez a mező legyen aktív a betöltés után required Nem küldi el a formot addig amíg nincs kitöltve pattern (pl: pattern= [A-Za-z]{3} ) Reguláris kifejezéssel testreszabható placeholder (pl: placeholder= Ide jön a neved ) Egy segédszöveget helyez el, ami kattintásra törlődik novalidate A mezők helyessége ne legyen ellenőrizve A form szintjén határozzuk meg 77

78 Felhasználói adatbevitel (POST) Attribútum! [HttpPost] public IActionResult Itelet(string name, int index = -1) { if (index == -1) { return View("Itelet", "Kedves " + name + "! A vizsgáztatód: " + nevek[r.next(0, nevek.length)]); } else { return View("Itelet", "Kedves " + name + "! A vizsgáztatód: " + nevek[index]); } } 78

79 Nagy feladat Készítsünk hitelkalkulátort! A felhasználó adhassa meg, hogy: Mi a neve Mekkora összeget venne fel Milyen futamidőre (év) Mekkora kamatra Táblázatos formában jelenítsük meg minden egyes évre az alábbiakat: Mekkora tőketartozása van még Mennyi kamatot fizet idén Mennyi tőkét törleszt idén Mennyit fizet ki összesen idén Írjuk ki azt is, hogy összesen mennyit fizetett vissza 79

80 A feladat levezetése t = 5 év PV = 5000e ft r = 20% -tőketörlesztés minden évben a felvett összeg 20%-a -minden évben ennyivel kevesebb a tőketartozás -az éves tőketartozás 20%-a a kamat -az adósságszolgálat a kamat és a tőketartozás összege év tőketartozás kamatfizetés tőketörlesztés adósságszolgálat e Ft 1000e Ft 1000e Ft 2000e Ft e Ft 800e Ft 1000e Ft 1800e Ft e Ft 600e Ft 1000e Ft 1600e Ft e Ft 400e Ft 1000e Ft 1400e Ft e Ft 200e Ft 1000e Ft 1200e Ft 80

81 Megoldás (Index.cshtml) <body> <form action="/home/kalkulator" method="post"> Név: <input type="text" name="nev" /> <br /> Felvett összeg: <input type="text" name="osszeg" />e Ft <br /> Futamidő: <input type="text" name="futamido" />év <br /> Kamatláb: <input type="text" name="kamat" />% <br /> <input type="submit" value="kalkulál!" /> </form> </body> 81

82 Megoldás: segédosztály a küldéshez Készítsünk egy ViewModels mappát és bele egy HitelViewModel osztályt! ViewModel: olyan osztály, ami kizárólag azért létezik, hogy a megjelenítési réteghez való továbbításkor összefogja a szükséges adatokat. public class HitelViewModel { public double[,] Matrix { get; set; } public double TeljesPenz { get; set; } public string Nev { get; set; } } 82

83 Megoldás: Controller [HttpPost] public IActionResult Kalkulator (string nev, int osszeg, double kamat, int futamido) { double[,] matrix = new double[futamido, 5]; double toketorlesztes = osszeg * (kamat / 100); double tartozas = osszeg; double osszfizetes = 0; for (int i = 0; i < matrix.getlength(0); i++) { matrix[i, 0] = i + 1; matrix[i, 1] = tartozas; matrix[i, 2] = tartozas * (kamat / 100); matrix[i, 3] = toketorlesztes; matrix[i, 4] = toketorlesztes + (tartozas * (kamat / 100)); osszfizetes += toketorlesztes + (tartozas * (kamat / 100)); tartozas -= toketorlesztes; } HitelViewModel hvm = new HitelViewModel() { Matrix = matrix, TeljesPenz = osszfizetes, Nev = nev }; return View(hvm); 83

84 Megoldás: Kalkulator View <body> hitelkonstrukciója:</h1> <table> <tr> <th>év</th> <th>tőketartozás</th> <th>kamatfizetés</th> <th>tőketörlesztés</th> <th>adósságszolgálat</th> for (int i = 0; i < Model.Matrix.GetLength(0); i++) <td>@model.matrix[i, <td>@model.matrix[i, 1] e <td>@model.matrix[i, 2] e <td>@model.matrix[i, 3] e <td>@model.matrix[i, 4] e </tr> } } </table> <h6>összes </body> 84