ASP.NET MVC Web Development

Presentatie over: "ASP.NET MVC Web Development"— Transcript van de presentatie:

1 ASP.NET MVC Web Development
Controllers & Views |

2 Vandaag Wat we hebben geleerd in hoofdstuk 2 (Controllers)
En hoofdstuk 3 (Views) Eventuele vragen over deze hoofdstukken Keuze voor ‘project’

3 Controllers public class HomeController : Controller { public ActionResult Index() return View(); } Deze controller reageert op een request naar en geeft /views/index.cshtml terug

4 Parameters public string Check(string name) { if(name == Robert) return “Wajow”; return “Probeer een andere naam”; } /Check?name=Robert De parameter in de URL wordt automatisch omgezet naar de parameter van de method, zolang de naam hetzelfde is.

5 Int id public string Details(int id) { string message = “Het ID is " + id; return message; } Nu is het voldoende om naar /Details/24 te gaan. 24 zal in de id parameter worden geplaatst, hoe kan dit?

6 RouteConfig public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); } Je ziet dat id als optionele parameter al in de standaard route configuratie staat!

7 HttpUtility.HtmlEncode
public string Welcome(string name, int numTimes = 1) { return HttpUtility.HtmlEncode("Hello " + name + ", NumTimes is: " + numTimes); } Waarom HtmlEncode gebruiken? Om te voorkomen dat een kwaadwillende ongewenste dingen in de parameters zet, zoals javascript, en jij dit doorgeeft aan de pagina of database. HtmlEncode verandert bijv. <script> in <script> (wat er in de browser gewoon uitziet als <script>)

8 Views Views zijn eigenlijk niet veel meer dan HTML templates. + een beetje programmeercode. Views benader je in principe nooit direct /Views/Home/Index.cshtml is niet hoe je de homepage van je site bekijkt! Model bevat gegevens, logica, regels, het domein View bepaalt de weergave. Bijv. genereren van een webpagina, document, windows form Controller Context van MVC: 10 jaar geleden in java/oop voor desktop apps

9 Views De code is Razor. Lijkt op C#, maar dan geïntegreerd met HTML (daarom ook .cshtml). Razor code begint altijd <h2>Welcome</h2> <ul> @for (int i = 0; i < ViewBag.NumTimes; i++) { } </ul> Model bevat gegevens, logica, regels, het domein View bepaalt de weergave. Bijv. genereren van een webpagina, document, windows form Controller Context van MVC: 10 jaar geleden in java/oop voor desktop apps

10 3 soorten Views Layout view View Partial View Master page? Web Form?
User Control? Model bevat gegevens, logica, regels, het domein View bepaalt de weergave. Bijv. genereren van een webpagina, document, windows form Controller Context van MVC: 10 jaar geleden in java/oop voor desktop apps

11 3 soorten views We gaan het vandaag alleen hebben over gewone views. Layout views behoeven ook niet veel uitleg. Partial views zijn wat interessanter (en ingewikkelder)…maar een onderwerp voor later. Model bevat gegevens, logica, regels, het domein View bepaalt de weergave. Bijv. genereren van een webpagina, document, windows form Controller Context van MVC: 10 jaar geleden in java/oop voor desktop apps

12 Views returnen Standaard wordt de view gebruikt met dezelfde naam als de method. Dus in dit geval Index.cshtml. public ActionResult Index() { return View(); } Maar je kunt ook een andere view gebruiken: NotIndex.cshtml return View("NotIndex"); Model bevat gegevens, logica, regels, het domein View bepaalt de weergave. Bijv. genereren van een webpagina, document, windows form Controller Context van MVC: 10 jaar geleden in java/oop voor desktop apps

13 Strongly typed views Je kunt bovenaan de view opgeven welk type (class) je als model gebruikt in die IEnumerable<MvcMusicStore.Models.Album> (Album p in Model) { } </ul> Model bevat gegevens, logica, regels, het domein View bepaalt de weergave. Bijv. genereren van een webpagina, document, windows form Controller Context van MVC: 10 jaar geleden in java/oop voor desktop apps

14 Strongly typed views Je moet het model object dan wel meegeven aan de view: public ActionResult AlbumsByGenre(int id) { List<Album> albums = db.GetAlbumsByGenreId(id); return View(albums); } Model bevat gegevens, logica, regels, het domein View bepaalt de weergave. Bijv. genereren van een webpagina, document, windows form Controller Context van MVC: 10 jaar geleden in java/oop voor desktop apps

15 Strongly typed views Controller View
public ActionResult AlbumsByGenre(int id) { List<Album> albums = db.GetAlbumsByGenreId(id); return View(albums); IEnumerable<MvcMusicStore.Models.Album> (Album p in Model) { </ul> Controller View Model bevat gegevens, logica, regels, het domein View bepaalt de weergave. Bijv. genereren van een webpagina, document, windows form Controller Context van MVC: 10 jaar geleden in java/oop voor desktop apps

16 Snel een view toevoegen
Je kunt vanuit de controller code snel een view toevoegen: Model bevat gegevens, logica, regels, het domein View bepaalt de weergave. Bijv. genereren van een webpagina, document, windows form Controller Context van MVC: 10 jaar geleden in java/oop voor desktop apps

17 Razor is makkelijk Razor is op de een of andere manier heel intuïtief voor wie C# en HTML een beetje kent. Het is slim genoeg om goed te bepalen wat C# code is, en wat HTML is:

18 Explicit expressions Als je zeker wilt weten dat alles na als C# wordt uitgevoerd, een explicit expression, gebruik je haakjes ( ) Hier is het nodig om expliciet aan te geven wat door Razor moet worden verwerkt en wat niet. Omdat Razor anders gaat zoeken naar de property p.Category.CategoryName.jpg die helemaal niet bestaat.

19 Razor Syntax Specifieke details over de razor syntax kan je nalezen in het < code ) < explicit code } < code < plain text <text> </text> < plain text < comment

20 Zelf views schrijven We gaan natuurlijk niet al onze views scaffolden. Soms wil je iets wat niet eens lijkt op de standaard views. Hiervoor is het belangrijk dat je de HTML helper methods kent, maar die komen pas in hoofdstuk 5 aan bod. <div class="form-group"> @Html.LabelFor(model => model.Price, new = "control- label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Price) @Html.ValidationMessageFor(model => model.Price) </div> </div>

21 School/huiswerk Voor de volgende les: Heb je hoofdstuk 3 afgerond
Vragen?