Deel 2: een controller toevoegen aan een ASP.NET Core MVC-app

Door Rick Anderson

Het Model-View-Controller (MVC) architectuurpatroon scheidt een app in drie hoofdcomponenten: Model, View, en Controller. Met het MVC-patroon kunt u apps maken die testbaar en gemakkelijker kunnen worden bijgewerkt dan traditionele monolithische apps.

Op MVC gebaseerde apps bevatten:

• Models: klassen die de gegevens van de app vertegenwoordigen. De modelklassen gebruiken validatielogica om bedrijfsregels voor die gegevens af te dwingen. Modelobjecten halen de modelstatus meestal op en slaan deze op in een database. In deze zelfstudie haalt het Movie model filmgegevens op uit een database, geeft ze door aan de weergave of werkt ze bij. Bijgewerkte gegevens worden naar een database geschreven.
• V: Weergaven zijn de onderdelen die de gebruikersinterface (UI) van de app weergeven. Over het algemeen worden in deze gebruikersinterface de modelgegevens weergegeven.
• Controllers: Klassen die:
  • Browseraanvragen verwerken.
  • Modelgegevens ophalen.
  • Weergavesjablonen aanroepen die een antwoord retourneren.

In een MVC-app wordt in de weergave alleen informatie weergegeven. De controller verwerkt en reageert op gebruikersinvoer en -interactie. De controller verwerkt bijvoorbeeld URL-segmenten en queryreekswaarden en geeft deze waarden door aan het model. Het model kan deze waarden gebruiken om een query uit te voeren op de database. Bijvoorbeeld:

• https://localhost:5001/Home/Privacy: hiermee geeft u de Home controller en de actie Privacy op.
• https://localhost:5001/Movies/Edit/5: is een aanvraag om de film met ID=5 te bewerken met behulp van de Movies controller en de Edit-actie, die verderop in de zelfstudie worden beschreven.

Routegegevens worden verderop in de handleiding uitgelegd.

Het architectuurpatroon van MVC scheidt een app in drie hoofdgroepen onderdelen: Modellen, Weergaven en Controllers. Dit patroon helpt bij het bereiken van scheiding van problemen: de UI-logica hoort in de weergave. Invoerlogica hoort bij de controller. Bedrijfslogica hoort bij het model. Deze scheiding helpt bij het beheren van complexiteit bij het bouwen van een app, omdat hiermee tegelijkertijd wordt gewerkt aan één aspect van de implementatie zonder dat dit van invloed is op de code van een andere. U kunt bijvoorbeeld aan de weergavecode werken zonder dat u afhankelijk bent van de bedrijfslogicacode.

Deze concepten worden geïntroduceerd en gedemonstreerd in deze reeks zelfstudies tijdens het bouwen van een film-app. Het MVC-project bevat mappen voor de Controllers en weergaven.

Een controller toevoegen

Visual Studio

Klik in Solution Explorermet de rechtermuisknop op Controllers >> Controller toevoegen.

Selecteer in het dialoogvenster Nieuw gestructureerd item toevoegen de optie Lege MVC-controller>en klik op Toevoegen.

Voer in het dialoogvenster Add New Item - MvcMovieHelloWorldController.cs in en selecteer Add.

Visual Studio Code

Selecteer het EXPLORER--pictogram en klik met control (klik met de rechtermuisknop) Controllers > Nieuw bestand en geef het nieuwe bestand een naam HelloWorldController.cs.

Vervang de inhoud van Controllers/HelloWorldController.cs door de volgende code:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers;

public class HelloWorldController : Controller
{
    // 
    // GET: /HelloWorld/
    public string Index()
    {
        return "This is my default action...";
    }
    // 
    // GET: /HelloWorld/Welcome/ 
    public string Welcome()
    {
        return "This is the Welcome action method...";
    }
}

Elke public methode in een controller kan worden aangeroepen als een HTTP-eindpunt. In het bovenstaande voorbeeld retourneren beide methoden een tekenreeks. Noteer de opmerkingen voorafgaand aan elke methode.

Een HTTP-eindpunt:

• Is een doel-URL in de webtoepassing, zoals https://localhost:5001/HelloWorld.
• Combineert:
  • Het gebruikte protocol: HTTPS.
  • De netwerklocatie van de webserver, inclusief de TCP-poort: localhost:5001.
  • De doel-URI: HelloWorld.

De eerste opmerking geeft aan dat dit een HTTP GET- methode is die wordt aangeroepen door /HelloWorld/ toe te voegen aan de basis-URL.

De tweede opmerking geeft een HTTP GET- methode op die wordt aangeroepen door /HelloWorld/Welcome/ toe te voegen aan de URL. Verderop in de zelfstudie wordt de scaffolding-engine gebruikt om HTTP POST methoden te genereren, waarmee gegevens worden bijgewerkt.

Voer de app uit zonder het foutopsporingsprogramma door op Ctrl+F5-te drukken.

Voeg /HelloWorld toe aan het pad in de adresbalk. De methode Index retourneert een tekenreeks.

MVC roept controllerklassen aan en de actiemethoden hierin, afhankelijk van de binnenkomende URL. De standaard-URL-routeringslogica die door MVC wordt gebruikt, gebruikt een indeling zoals deze om te bepalen welke code moet worden aangeroepen:

/[Controller]/[ActionName]/[Parameters]

De routeringsindeling wordt ingesteld in het Program.cs-bestand.

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

Wanneer u naar de app bladert en geen URL-segmenten opgeeft, wordt deze standaard ingesteld op de controller 'Home' en de methode 'Index' die is opgegeven in de sjabloonregel die hierboven is gemarkeerd. In de voorgaande URL-segmenten:

• Het eerste URL-segment bepaalt de controllerklasse die moet worden uitgevoerd. Daarom wordt localhost:5001/HelloWorld toegewezen aan de klasse HelloWorld Controller.
• Het tweede deel van het URL-segment bepaalt de actiemethode voor de klasse. localhost:5001/HelloWorld/Index zorgt er dus voor dat de Index methode van de HelloWorldController-klasse wordt uitgevoerd. U hoeft alleen naar localhost:5001/HelloWorld te bladeren en de Index methode is standaard aangeroepen. Index is de standaardmethode die op een controller wordt aangeroepen als er niet expliciet een methodenaam is opgegeven.
• Het derde deel van het URL-segment (id) is voor routegegevens. Routegegevens worden verderop in de handleiding uitgelegd.

Blader naar: https://localhost:{PORT}/HelloWorld/Welcome. Vervang {PORT} door uw poortnummer.

De methode Welcome wordt uitgevoerd en retourneert de tekenreeks This is the Welcome action method.... Voor deze URL is de controller HelloWorld en de actiemethode is Welcome. U hebt het [Parameters] deel van de URL nog niet gebruikt.

Wijzig de code om bepaalde parametergegevens van de URL door te geven aan de controller. Bijvoorbeeld /HelloWorld/Welcome?name=Rick&numtimes=4.

Wijzig de methode Welcome om twee parameters op te nemen, zoals wordt weergegeven in de volgende code.

// GET: /HelloWorld/Welcome/ 
// Requires using System.Text.Encodings.Web;
public string Welcome(string name, int numTimes = 1)
{
    return HtmlEncoder.Default.Encode($"Hello {name}, NumTimes is: {numTimes}");
}

De voorgaande code:

• Gebruikt de functie optionele C#-parameter om aan te geven dat de numTimes parameter standaard 1 is als er geen waarde wordt doorgegeven voor die parameter.
• Gebruikt HtmlEncoder.Default.Encode om de app te beschermen tegen schadelijke invoer, zoals via JavaScript.
• Gebruikt geïnterpoleerde tekenreeksen in $"Hello {name}, NumTimes is: {numTimes}".

Voer de app uit en blader naar: https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4. Vervang {PORT} door uw poortnummer.

Probeer verschillende waarden voor name en numtimes in de URL. De MVC-modelbinding systeem wijst automatisch de benoemde parameters van de queryreeks toe aan parameters in de methode. Zie Modelbinding voor meer informatie.

In de vorige afbeelding:

• Het URL-segment Parameters wordt niet gebruikt.
• De parameters name en numTimes worden doorgegeven in de queryreeks.
• De ? (vraagteken) in de bovenstaande URL is een scheidingsteken, waarna de querytekenreeks volgt.
• Het & teken scheidt veld-waardeparen.

Vervang de Welcome methode door de volgende code:

public string Welcome(string name, int ID = 1)
{
    return HtmlEncoder.Default.Encode($"Hello {name}, ID: {ID}");
}

Voer de app uit en voer de volgende URL in: https://localhost:{PORT}/HelloWorld/Welcome/3?name=Rick

In de voorgaande URL:

• Het derde URL-segment komt overeen met de routeparameter id.
• De methode Welcome bevat een parameter id die overeenkomt met de URL-sjabloon in de methode MapControllerRoute.
• Met de afsluitende ? wordt de queryreeksgestart.

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

In het voorgaande voorbeeld:

• Het derde URL-segment komt overeen met de routeparameter id.
• De methode Welcome bevat een parameter id die overeenkomt met de URL-sjabloon in de methode MapControllerRoute.
• De afsluitende ? (in id?) geeft aan dat de parameter id optioneel is.

Vorige: Aan de slagVolgende: Een weergave toevoegen