De architectuur van Model-View-Controller (MVC) is een tijdgetest ontwerppatroon dat problemen binnen een webapplicatie scheidt, waardoor het gemakkelijker wordt om complexiteit, componenten in isolatie te testen en functies op schaal te beheren. In ASP.NET Core is MVC een eersteklas burger, die een robuust kader biedt voor het bouwen van moderne, onderhoudbare webapplicaties. Deze gids laat u door elke stap van de implementatie van MVC in ASP.NET Core, van de initiële projectopstelling tot geavanceerde beste praktijken.

Het MVC-patroon in diepte begrijpen

Voordat je in code gaat duiken, is het essentieel om te begrijpen hoe de drie kerncomponenten van MVC samenwerken om een gebruikersverzoek te behandelen. Het patroon definieert duidelijke verantwoordelijkheden:

  • Model: vertegenwoordigt de gegevensstructuur en bedrijfsregels. Het weet niet hoe de gegevens worden weergegeven of hoe de gegevens worden weergegeven. Modellen zijn meestal gewone C#-klassen die eigenschappen, validatielogica en toegang tot gegevens insluiten (vaak via Entity Framework Core).
  • Bekijk: Geeft de gebruikersinterface door. In ASP.NET Core zijn weergaven Razor-bestanden (
  • Controller: treedt op als tussenpersoon. Het ontvangt HTTP-verzoeken, beslist welk model te gebruiken, en selecteert de juiste weergave om terug te keren. Controllers bevatten actiemethoden die naar specifieke routes in kaart brengen.

De typische aanvraagstroom in ASP.NET Core MVC: een gebruiker navigeert naar een URL (bijv. ), de routering middleware stuurt het verzoek naar de actie, de actie interacteert met het model (bijv., haalt producten uit een database), packs de gegevens in een weergavemodel, en geeft het door naar het uitzicht. Het uitzicht genereert dan een HTML-respons die naar de client wordt teruggestuurd.

Vereisten

  • .NET SDK (versie 6.0 of later). Downloaden van dotnet.microsoft.com.
  • Visual Studio, Visual Studio Code, of een gewenste code-editor.
  • Basiskennis met C# en web development concepten.

Stap 1: Een nieuw ASP.NET kern MVC-project aanmaken

U kunt beginnen met de .NET CLI of Visual Studio. Beide bieden een project template dat steigers de standaard MVC mapstructuur.

De commandoregel gebruiken

Open een terminal en voer uit:

dotnet new mvc -n MyMvcApp

Dit creëert een project genaamd in een nieuwe map. De gegenereerde structuur omvat , , en (voor statische bestanden).

Visual Studio gebruiken

In Visual Studio, kies Maak een nieuw project → selecteer ASP.NET Core Web App (Model-View-Controller) → configureer uw projectnaam en locatie → kies .NET versie (bijv., .NET 8). Dezelfde mappen worden automatisch aangemaakt.

Controleer de project-runs:

cd MyMvcApp
dotnet run

Open om de standaard startpagina te zien.

Stap 2: Begrip van de projectstructuur

Het steigerproject bevat verschillende belangrijke elementen:

  • Controllers: Lege map waarin je C# controller klassen toevoegt.
  • Models: Plaats voor uw domeinklassen en bekijk modellen.
  • Bekijkt : Heeft standaard een en map, plus een layout.
  • Programma.cs: Opstarten van de toepassing, waarbij diensten (inclusief MVC) zijn geconfigureerd.

Open en noteer de regels die MVC inschakelen:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();
var app = builder.Build();
...
app.MapControllerRoute(
 name: "default",
 pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();

Dit stelt de standaard route in die URL's als naar in kaart brengt.

Stap 3: Modelklasse aanmaken

Modellen geven de gegevens weer waarmee uw toepassing werkt. Begin met het maken van een model in de map.

// Models/Product.cs
namespace MyMvcApp.Models;

public class Product
{
 public int Id { get; set; }
 public string Name { get; set; } = string.Empty;
 public decimal Price { get; set; }
 public string? Description { get; set; }
 public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
}

U kunt modellen verrijken met data annotaties voor validatie:

using System.ComponentModel.DataAnnotations;

public class Product
{
 public int Id { get; set; }

 [Required(ErrorMessage = "Product name is required.")]
 [StringLength(100)]
 public string Name { get; set; } = string.Empty;

 [Range(0.01, 10000)]
 public decimal Price { get; set; }

 [MaxLength(500)]
 public string? Description { get; set; }

 [Display(Name = "Created")]
 public DateTime CreatedAt { get; set; }
}

In een echte toepassing zou je meestal een database context (Entity Framework Core) toevoegen om modellen te behouden. Voor deze handleiding gebruiken we in-geheugen gegevens om de focus op MVC flow te houden.

Stap 4: Een controller toevoegen

Controllers behandelen binnenkomende verzoeken en orkestreren het antwoord. Maak een in de map.

// Controllers/ProductsController.cs
using Microsoft.AspNetCore.Mvc;
using MyMvcApp.Models;
using System.Collections.Generic;

namespace MyMvcApp.Controllers;

public class ProductsController : Controller
{
 // Simulate a data source
 private static List<Product> _products = new List<Product>
 {
 new Product { Id = 1, Name = "Laptop", Price = 999.99m },
 new Product { Id = 2, Name = "Smartphone", Price = 599.99m },
 new Product { Id = 3, Name = "Tablet", Price = 399.99m }
 };

 // GET: /Products
 public IActionResult Index()
 {
 return View(_products); // Pass list to the view
 }

 // GET: /Products/Details/5
 public IActionResult Details(int id)
 {
 var product = _products.Find(p => p.Id == id);
 if (product == null)
 return NotFound();
 return View(product);
 }

 // GET: /Products/Create
 public IActionResult Create()
 {
 return View();
 }

 // POST: /Products/Create
 [HttpPost]
 [ValidateAntiForgeryToken]
 public IActionResult Create(Product product)
 {
 if (ModelState.IsValid)
 {
 product.Id = _products.Max(p => p.Id) + 1;
 product.CreatedAt = DateTime.UtcNow;
 _products.Add(product);
 return RedirectToAction(nameof(Index));
 }
 return View(product);
 }
}

Belangrijkste punten:

  • IActieResult is het type terugkeer. Het kan een , , , enz. zijn.
  • Actienamen kaart naar weergaven in een map die naar de controller is vernoemd ().
  • De actie heeft twee overbelastingen: één voor GET (display the form) en één voor POST (handle form submitting).
  • beschermt tegen cross-site verzoek vervalsing.

Stap 5: Weergaven maken met Scheermes Syntaxis

De gedeelde indeling is in .

Indexweergave

Aanmaken :

@model IEnumerable<MyMvcApp.Models.Product>
@{
 ViewData["Title"] = "Product List";
}

<h2>@ViewData["Title"]</h2>

<table class="table table-striped">
 <thead>
 <tr>
 <th>@Html.DisplayNameFor(model => model.Id)</th>
 <th>@Html.DisplayNameFor(model => model.Name)</th>
 <th>@Html.DisplayNameFor(model => model.Price)</th>
 <th></th>
 </tr>
 </thead>
 <tbody>
 @foreach (var item in Model)
 {
 <tr>
 <td>@item.Id</td>
 <td>@item.Name</td>
 <td>@item.Price.ToString("C")</td>
 <td>
 <a asp-action="Details" asp-route-id="@item.Id">Details</a>
 </td>
 </tr>
 }
 </tbody>
</table>

<p>
 <a asp-action="Create" class="btn btn-primary">Create New Product</a>
</p>

Scheerpunten: Gebruik ] om van HTML naar C# over te schakelen, en /] taghelpers om URL's te genereren.

Details bekijken

Aanmaken :

@model MyMvcApp.Models.Product
@{
 ViewData["Title"] = "Product Details";
}

<h2>@Model.Name</h2>

<dl class="row">
 <dt class="col-sm-2">@Html.DisplayNameFor(model => model.Id)</dt>
 <dd class="col-sm-10">@Model.Id</dd>

 <dt class="col-sm-2">@Html.DisplayNameFor(model => model.Price)</dt>
 <dd class="col-sm-10">@Model.Price.ToString("C")</dd>

 <dt class="col-sm-2">@Html.DisplayNameFor(model => model.Description)</dt>
 <dd class="col-sm-10">@Model.Description</dd>

 <dt class="col-sm-2">@Html.DisplayNameFor(model => model.CreatedAt)</dt>
 <dd class="col-sm-10">@Model.CreatedAt</dd>
</dl>

<a asp-action="Index">Back to List</a>

Beeld met formulier aanmaken

Maak :

@model MyMvcApp.Models.Product
@{
 ViewData["Title"] = "Create Product";
}

<h2>Create</h2>

<form asp-action="Create">
 <div asp-validation-summary="ModelOnly" class="text-danger"></div>

 <div class="form-group">
 <label asp-for="Name"></label>
 <input asp-for="Name" class="form-control" />
 <span asp-validation-for="Name" class="text-danger"></span>
 </div>

 <div class="form-group">
 <label asp-for="Price"></label>
 <input asp-for="Price" class="form-control" />
 <span asp-validation-for="Price" class="text-danger"></span>
 </div>

 <div class="form-group">
 <label asp-for="Description"></label>
 <textarea asp-for="Description" class="form-control"></textarea>
 </div>

 <button type="submit" class="btn btn-primary">Create</button>
 <a asp-action="Index" class="btn btn-secondary">Cancel</a>
</form>

@section Scripts {
 @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Scheermesjes als genereren formuliervelden met modelbinding en validatie. De laadt client-side validatiescripts.

Stap 6: Toevoegen van Routing en aangepaste routes

MVC gebruikt standaard op conventie gebaseerde routering. De route in kaarten . U kunt ook attribuutrouting toevoegen voor meer controle. Bijvoorbeeld in de controller:

[Route("products")]
public class ProductsController : Controller
{
 [Route("")] // matches /products
 [Route("index")] // matches /products/index
 public IActionResult Index() { ... }

 [Route("{id:int}")] // matches /products/5
 public IActionResult Details(int id) { ... }
}

Deze benadering is nuttig voor RESTful API's wanneer gecombineerd met .

Stap 7: Het gebruik van ViewModels voor complexe gegevens

Vaak moet je meerdere gegevensobjecten doorgeven aan een weergave, of extra eigenschappen toevoegen (zoals selecteer lijsten, paginatitels). Daar komen de weergavemodellen voor. Maak een weergavemodelklasse aan in :

namespace MyMvcApp.Models.ViewModels;

public class ProductIndexViewModel
{
 public IEnumerable<Product> Products { get; set; }
 public string SearchString { get; set; } = string.Empty;
 public decimal MaxPrice { get; set; } = 10000;
}

Pas vervolgens de controller actie aan om het weergavemodel te vullen en geef het door aan het beeld. De weergave gebruikt en toegang tot eigenschappen dienovereenkomstig.

Stap 8: Uitvoering Validatie

ASP.NET Core MVC biedt zowel server- als client-side validatie via data annotaties. Voeg , , , en aangepaste attributen. In de -weergave wordt de foutmelding weergegeven. De attribuut op de POST-actie zorgt ervoor dat alleen echte vorminzendingen worden verwerkt.

Voor aangepaste validatielogica, implementeer op uw model of creëer een aparte validatieklasse. De officiële ASP.NET Kernvalidatiedocumentatie behandelt deze patronen in detail.

Stap 9: Afhankelijkheidsinjectie in controllers

In plaats van gegevens met harde codering, kunt u diensten (zoals een repository of database context) in de constructeur van de controller injecteren. Dit bevordert een losse koppeling en testbaarheid.

public class ProductsController : Controller
{
 private readonly IProductRepository _repository;

 public ProductsController(IProductRepository repository)
 {
 _repository = repository;
 }

 public IActionResult Index()
 {
 var products = _repository.GetAll();
 return View(products);
 }
}

Registreer de repository in :

builder.Services.AddScoped<IProductRepository, ProductRepository>();

De methode registreert al controllers voor DI. Dit patroon maakt uw toepassing schoner en onderhoudbaarder. Zie Microsoft's Afhankelijkheidsinjectiegids voor meer.

Stap 10: Werken met lay-outs en gedeeltelijke weergaven

Gedeelde indelingen (bv. ) definiëren de algemene paginastructuur. Om de aan te passen in . U kunt secties definiëren, of gedeeltelijke weergaven gebruiken voor herbruikbare UI-componenten zoals navigatie, footers of productkaartweergaven.

Voorbeeld gedeeltelijke weergave :

@model Product
<div class="card">
 <div class="card-body">
 <h5 class="card-title">@Model.Name</h5>
 <p class="card-text">Price: @Model.Price.ToString("C")</p>
 <a asp-action="Details" asp-route-id="@Model.Id" class="btn btn-primary">Details</a>
 </div>
</div>

De Commissie heeft de Commissie verzocht om de volgende opmerkingen te maken:

Stap 11: Fout bij het hanteren van en statuscodes

Controllers moeten fouten op een sierlijke manier verwerken. Gebruik blokken of een globale uitzonderingsafhandeling via middleware. Geef passende HTTP statuscodes terug:

  • voor 404
  • voor 400
  • voor serverfouten.

U kunt ook een aangepaste foutweergave toevoegen: is al opgenomen in het sjabloon. Stel in om naar uitzonderingen in productie te leiden.

Stap 12: Testen van de MVC-toepassing

Testen is kritiek. Gebruik xUnit en het pakket om integratietests te schrijven. Voorbeeld voor de actie :

public class ProductsControllerTests : IClassFixture<WebApplicationFactory<Program>>
{
 private readonly HttpClient _client;

 public ProductsControllerTests(WebApplicationFactory<Program> factory)
 {
 _client = factory.CreateClient();
 }

 [Fact]
 public async Task Index_ReturnsSuccessAndCorrectContentType()
 {
 var response = await _client.GetAsync("/products");
 response.EnsureSuccessStatusCode();
 Assert.Equal("text/html; charset=utf-8",
 response.Content.Headers.ContentType.ToString());
 }
}

De eenheid test de controller met bespotte diensten om logica te isoleren. De ASP.NET Kerntestdocumentatie biedt uitgebreide voorbeelden.

Beste praktijken en geavanceerde tips

  • Houd controllers dun: Bedrijfslogica hoort thuis in diensten/repositorieën, niet in actiemethoden.
  • Gebruik weergavemodellen: Vermijd het direct doorgeven van domeinmodellen aan weergaven; gebruik speciale weergavemodellen om gegevens te vormen indien nodig.
  • Hefboomhulpjes voor het gebruik van hefboommechanismen: Ze maken HTML schoner en verminderen fouten in vormbinding.
  • Validatie van de cliënt inschakelen: Inclusief en bundels (reeds in ).
  • Gebruik async-acties voor I/O-gebonden operaties: met .
  • Beveilig uw toepassing: Gebruik altijd HTTPS, anti-forgery tokens op POST-formulieren en een op rollen gebaseerde autorisatie via .

Conclusie

De implementatie van MVC architectuur in ASP.NET Core biedt u een solide basis voor het bouwen van webapplicaties die georganiseerd, testbaar en onderhoudbaar zijn. Door modellen, views en controllers te scheiden, kunt u onafhankelijk van elk onderdeel werken en uw toepassing met vertrouwen opschalen. De stappen in deze gids bieden een volledige doorloop van projectcreatie tot productie-ready patronen. Begin met een eenvoudig project, dan incrementele database integratie, authenticatie en geavanceerde functies toevoegen. De officiële ASP.NET Core MVC overzicht[] is een uitstekende volgende bron als u uw kennis verdiept.