ASP.NET MVC Web Development Controllers & Views | www.starwave.nl/mq

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

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

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.

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?

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!

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>)

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

Views De code is Razor. Lijkt op C#, maar dan geïntegreerd met HTML (daarom ook .cshtml). Razor code begint altijd met @ <h2>Welcome</h2> <ul> @for (int i = 0; i < ViewBag.NumTimes; i++) { <li>@ViewBag.Message</li> } </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

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

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

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

Strongly typed views Je kunt bovenaan de view opgeven welk type (class) je als model gebruikt in die view: @model IEnumerable<MvcMusicStore.Models.Album> <ul> @foreach (Album p in Model) { <li>@p.Title</li> } </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

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

Strongly typed views Controller View public ActionResult AlbumsByGenre(int id) { List<Album> albums = db.GetAlbumsByGenreId(id); return View(albums); } @model IEnumerable<MvcMusicStore.Models.Album> <ul> @foreach (Album p in Model) { <li>@p.Title</li> </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

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

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:

Explicit expressions Als je zeker wilt weten dat alles na de @ 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.

Razor Syntax Specifieke details over de razor syntax kan je nalezen in het boek. @ < code expression @( ) < explicit code expression @{ } < code block @: < plain text <text> </text> < plain text (hetzelfde als @:) @* *@ < comment

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 { @class = "control- label col-md-2" }) <div class="col-md-10"> @Html.EditorFor(model => model.Price) @Html.ValidationMessageFor(model => model.Price) </div> </div>

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