Software engineering and GUI design MVC design pattern

Practice Environment • ASP. NET Core (non-Framework!) – We keep the compatibility with the

Hello World – MVC introduction We can directly access/call the controller methods from Browser!

Controller -> View data transfer View() is an inherited method that has multiple overloads

Controller -> View data transfer This parameter can be processed in the View! In

User input (POST) • We use HTML Forms to send data from the HTML

User input (POST) Attribute [Http. Post] public IAction. Result Itelet( string name, int index

Exerise I. • Display random numbers in a 10 x 10 table from the

Exercise II. • Let’s create a kilometers-miles-yards converter ! • We do NOT worry

Exercise III. • Let’s create a calorie calculator ! • Input: Name, Weight, Type

Calories data • (100 kg person, 1 hour of exercise) • • • exercises.

Slides: 12

Download presentation

Software engineering and. GUI design MVC design pattern in the practice (Special thanks: Kovács András) http: //users. nik. uni-obuda. hu/prog 4/

Practice Environment • ASP. NET Core (non-Framework!) – We keep the compatibility with the previous semester (e. g. PROG 3 layering app = HF 1+HF 2) – The code will be almost the same as with the Framework version (not a complex app…) 2

Hello World – MVC introduction We can directly access/call the controller methods from Browser! • Localhost: 60421 – Calls the Index() action (method) of the Home. Controller class • Localhost: 60421/Home/Index – Same as above, just the full path is used • Localhost: 60421/Yolo/Froyo – The {XY}Controller will be searched and the given Action will be called 4

Controller -> View data transfer View() is an inherited method that has multiple overloads : • View() • View(object model) • View(string view. Name, object model) 5

Controller -> View data transfer This parameter can be processed in the View! In the first line we specify the type of the incoming model, thus making the View strictly typed. Later, in the HTML code, we can access these data using the @Model keyword This is the so-called Razor syntax. 6

User input (POST) • We use HTML Forms to send data from the HTML part – This is a simple HTML form : <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: The controller to use as the data destination – Method: POST or GET, we use POST – Name attributes: we will refer to the data using these 7

User input (POST) Attribute [Http. Post] public IAction. Result 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]); } } 8

Exerise I. • Display random numbers in a 10 x 10 table from the interval [100. . 999] • The primes should be displayed in red • The maximum number(s) should be displayed in green background 9

Exercise II. • Let’s create a kilometers-miles-yards converter ! • We do NOT worry about error handling this semester … 10

Exercise III. • Let’s create a calorie calculator ! • Input: Name, Weight, Type of exercise (select), Length of exercise (minutes) • Output: all input + the burned amount of calories 11

Calories data • (100 kg person, 1 hour of exercise) • • • exercises. Add(new Exercise("Running", 1000)); exercises. Add(new Exercise("Yoga", 400)); exercises. Add(new Exercise("Pilates", 472)); exercises. Add(new Exercise("Hiking", 700)); exercises. Add(new Exercise("Swimming", 1000)); exercises. Add(new Exercise("Bicycle", 600)); • First: use a list… Second: use a database table… 12