Visual studio - kennismaking

• Informatica
• Middelbare school
• vwo
• Leerjaar 5

lgg .net visual studio

Kennismaking Visual Studio

• Je hebt een nieuw website project gemaakt in visual studio
• Je kan de website starten 
• Je kan simple html aanpassingen maken in de body van je pagina

We beginnen met een demo

In deze demo ga je zien hoe je een nieuw MVC project maakt in Visual Studio. Je kan precies nalezen hoe dat moet (en welke vinkjes er precies aangevinkt zijn) in de handleiding in classroom.

Dit scherm is je solution explorer. Daarin kan je alle bestanden vinden van je project. Zoals je ziet heb je er al een hoop "gratis gekregen".

Met deze knop start je je website

Als je op start drukt (zie vorige slide) wordt een server(tje) gestart waarop je website gaat draaien. Als het goed is krijg je dan zoiets als hiernaast.

We zien een menu, titel, een tekst en een footer

Laten we eens kijken hoe we die kunnen aanpassen.

De website aanpassen

1. Open het bestand index.cshtml

2. Hee, daar staat "Welcome" dat hebben we eerder gezien. Pas de html aan en druk op start (IIS Expres)

Drommels! Het werkt! Er staat nu wat anders!

Maar dan zijn we er nog niet.. want hebben nu misschien wel de h1 aangepast (of misschien nog wat) maar dat menu, of die footer stonden niet in index.cshtml.. 

Hmm... eens kijken of we die kunnen vinden.

De website aanpassen

1. Open het bestand _Layout.cshtml

Oei! Da's een boel html.. misschien een beetje overweldigend maar als je een beetje zoekt kan je zien dat in dit bestand het menu en de footer staan.. 

Iets anders vinden?

Zoek je iets anders? Probeer ctrl + shift + f

!

Over Layout

Om uit te leggen wat er precies gebeurt maken we gebruik van de afbeelding hiernaast.

We zien hier een header en een footer met daartussen content en navigatie. Een veel gebruikte layout

_Layout.cshtml

_Layout.cshtml wordt standaard altijd getekend. Maar het is mogelijk is het uit te zetten.

Meer weten?

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/layout?view=aspnetcore-6.0

RenderBody()

Elke pagina

De RenderBody() functie zorgt er voor dat alles wat er in index.cshtml zit op die plek wordt getekend.

Maar niet alleen index.cshtml.. Hetzelfde geldt voor privacy.cshtml en alle pagina die je zelf nog gaat maken..

Eigenlijk heb je dus maar heel weinig nieuwe code nodig voor een nieuwe pagina. Hoewel.. daarover later meer..

Pas aan in _Layout.cshtml

Maak de code zoals je hieronder ziet. Je haalt dus eigenlijk alles weg behalve de link naar de css

Opdracht

Het css bestand kan je hier vinden

En die maken we meteen leeg. Als we toch bezig zijn

Grutjes! De solution explorer is weg. Wat moeten we nu beginnen?!

Geen nood! Hieronder kan je de juiste tab selecteren. De huidige tab is Git Change. Die gaan we ook gebruiken. Maar daarover later meer..

Gebruik maken van een framework

Die layout en renderbody zijn voorbeelden van dingen die het .net framework voor je regelt. Andere voorbeelden zijn:

• Structuur
• Nette urls
• Makkelijke koppeling met database