Een About Me pagina met model

Doelstelling

We proberen het MVC patroon in de vingers te krijgen. Gegevens die in de html pagina staan, halen we eruit en stoppen die in een aparte model klasse. Op die manier werken we volgens het MVC patroon, dat het SEC princiepe nastreeft of Seperation Of Concerns: elke klasse zijn eigen verantwoordelikheid. De View toont de data en dient niet als opslagplaats voor de gegevens.

A. De biografie gegevens in een tekstbestand plaatsen

1. Maak een submap met de naam Data in de MVC Content map.
2. Maak een html bestand in die submap met de naam Biografie.html.
3. Sla het bestand op in Unicode 1200. Er staan immers karakters in die niet in ASCII kunnen worden weergegeven zoals é, è, ë enz.

B. Een tekstbestand inlezen

Om data vanaf je harde schijf in je C# programma te halen heb je een DAL (data access layer) nodig. Hoe je een tekstbestand in leest, vind je op deze pagina Tekstbestanden inlezen.

C. Een Model aan het MVC framework toevoegen

1. Om een model aan de MVC website toe te voegen maken we een Persoon klasse.

   1. Om een klassenbestand te maken, klik je met de rechtermuisknop op de Models map, New Item, Code, Class (zie figuur Een model klasse toevoegen). Geef er de naam Persoon.cs aan.
   2. Maak een model klasse in de namespace LerenWerkenMetMVC.Models met de naam Persoon. In de klasse zet je de volgende properties:
      1. Voornaam, Familienaam, FotoURL, RootPath, Biografie

         namespace LerenWerkenMetMVC.Models
         {
             public class Persoon
             {
                 public string Voornaam { get; set; }
                 public string Familienaam { get; set; }
                 public string FotoURL { get; set; }
                 public string Rootpath { get; set; }
                 private string biografie;
             }
         }
          

      2. De Biografie is een speciale property. De setter moet de naam instellen van het html bestand waarin de biografie staat, de getter moet het html bestand inlezen.
         1. Hoe je een tekstbestand in leest, vind je op deze pagina Tekstbestanden inlezen. Kopiëer de code en plaats die in bestand met de naam Tekstbestand.cs in de map App_Code\Dal van je project. Als de map niet bestaat, maak je die. Meer info vind je in bovenstaande link.
         2. Code voor de setter:
2. Voeg een menu-link toe in de pagina Views/Shared/_Layout.cshtml met de tekst 'About Me met Model':

   <li><a href="/Home/AboutMeMetModel">Over Mezelf met Model</a></li>

   of

   @Html.ActionLink("Over mezelf met Model", "AboutMeMetModel", "Home")

3. In de HomeController klasse voer je een actiemethode toe voor de About Me met Model pagina. Creëer een instantie van de klasse Persoon en initialiseer de eigenschappen van het object:

   public ActionResult AboutMeMetModel()
   {
       // boodschappentas om data van de Controller naar de View
       // te brengen
       ViewBag.Message = "De About Me pagina met Model";
       LerenWerkenMetMVC.Models.Persoon persoon = new LerenWerkenMetMVC.Models.Persoon();
       persoon.Voornaam = "Jef";
       persoon.Familienaam = "Inghelbrecht";
       persoon.Rootpath = Server.MapPath("~");
       persoon.FotoURL = "../../Content/Images/pasfoto.png";
       persoon.Biografie = "/Content/Data/biografie.html";
       return View(persoon);
   }

4. Creëer een view, een MVC Page with Layout (Razor) pagina met de naam AboutMeMetModel.cshtml in de map Views/Home. Gebruik daarin een instantie van Persoon om de eigenschappen in de browser te tonen. Ik toon hier een afbeelding en geen tekst omdat ik problemen heb om rechtstreeks HTML in te typen. Je kan dus geen knippen/plakken doen.

   

5. Test de website. Zorg ervoor dat de pagina voorzien is van minimale CSS opmaak. Als als alles naar wens verloopt krijg je ongeveer iets dat gelijkt op mijn resultaat:

   

6. Stuur de volgende bestanden via de Insturen link:
   1. Persoon.cs
   2. AboutMeMetModel.cshtml
   3. HomeController.cs