Eine Schritt-für-Schritt-Anleitung zur Implementierung der Mvc-Architektur in Asp.net Core

Die Model-View-Controller (MVC)-Architektur ist ein bewährtes Designmuster, das Bedenken innerhalb einer Webanwendung trennt, was es einfacher macht, Komplexität zu verwalten, Komponenten isoliert zu testen und Funktionen im Laufe der Zeit zu skalieren. In ASP.NET Core ist MVC ein erstklassiger Bürger und bietet ein robustes Framework für die Erstellung moderner, wartbarer Webanwendungen. Dieser Leitfaden führt Sie durch jeden Schritt der Implementierung von MVC in ASP.NET Core, von der anfänglichen Projekteinrichtung bis hin zu fortschrittlichen Best Practices.

Das MVC-Muster in der Tiefe verstehen

Bevor wir uns mit Code beschäftigen, ist es wichtig zu verstehen, wie die drei Kernkomponenten von MVC zusammenarbeiten, um eine Benutzeranfrage zu bearbeiten.

Model: Repräsentiert die Datenstruktur und Geschäftsregeln. Es kennt die Benutzeroberfläche nicht oder wie die Daten angezeigt werden. Modelle sind typischerweise einfache C#-Klassen, die Eigenschaften, Validierungslogik und Datenzugriff (oft über Entity Framework Core) kapseln.
View: Rendert die Benutzeroberfläche. In ASP.NET Core sind Views Razor-Dateien (`.cshtml`), die HTML-Markup mit serverseitigem C#-Code kombinieren. Views sollten nur Daten anzeigen, keine komplexe Logik enthalten.
Controller: Agiert als Vermittler. Er empfängt HTTP-Anfragen, entscheidet, welches Modell verwendet wird, und wählt die entsprechende Ansicht für die Rückgabe aus. Controller enthalten Aktionsmethoden, die bestimmten Routen zugeordnet sind.

Der typische Anforderungsfluss in ASP.NET Core MVC: Ein Benutzer navigiert zu einer URL (z. B. [[FLT: 0]]), die Routing-Middleware leitet die Anforderung an die [[FLT: 1]]-Aktion, die Aktion interagiert mit dem Modell (z. B. holt Produkte aus einer Datenbank ab), packt die Daten in ein Ansichtsmodell und leitet sie an die Ansicht weiter. Die Ansicht generiert dann eine HTML-Antwort, die an den Client zurückgeschickt wird.

Voraussetzungen

NET SDK (Version 6.0 oder höher).
Visual Studio, Visual Studio Code, oder ein bevorzugter Code-Editor.
Grundlegende Vertrautheit mit C# und Webentwicklungskonzepten.

Schritt 1: Erstellen eines neuen ASP.NET Core MVC-Projekts

Sie können entweder mit .NET CLI oder Visual Studio beginnen. Beide bieten eine Projektvorlage, die die Standard-MVC-Ordnerstruktur aufrüstet.

Verwenden der Kommandozeile

Öffnen Sie ein Terminal und führen Sie:

dotnet new mvc -n MyMvcApp

Das erzeugt ein Projekt mit dem Namen in einem neuen Ordner, die generierte Struktur umfasst , , und (für statische Dateien).

Mit Visual Studio

Wählen Sie in Visual Studio Create a new project → select ASP.NET Core Web App (Model-View-Controller) → konfigurieren Sie Ihren Projektnamen und -ort → wählen Sie .NET Version (z. B. .NET 8). Die gleichen Ordner werden automatisch erstellt.

Überprüfen Sie die Projektläufe:

cd MyMvcApp
dotnet run

Öffnen Sie , um die Standard-Homepage zu sehen.

Schritt 2: Die Projektstruktur verstehen

Das Gerüstprojekt enthält mehrere Schlüsselelemente:

Controller: Leerer Ordner, in dem Sie C# Controller-Klassen hinzufügen.
Models: Platz für Ihre Domain-Klassen und Ansichtsmodelle.
Views: Hat standardmäßig einen und Ordner, plus ein Layout.
Program.cs: Anwendungsstart, bei dem Dienste (einschließlich MVC) konfiguriert sind.

Öffnen Sie und notieren Sie sich die Zeilen, die MVC ermöglichen:

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

Dies richtet die Standardroute ein, die URLs wie zu abbildet.

Schritt 3: Erstellen einer Modellklasse

Modelle repräsentieren die Daten, mit denen Ihre Anwendung arbeitet. Beginnen Sie mit der Erstellung eines -Modells im -Ordner.

// 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;
}

Sie können Modelle mit Datenanmerkungen zur Validierung anreichern:

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 einer realen Anwendung würden Sie normalerweise einen Datenbankkontext (Entity Framework Core) hinzufügen, um Modelle zu persistenten, und für dieses Handbuch verwenden wir In-Memory-Daten, um den Fokus auf den MVC-Fluss zu halten.

Schritt 4: Hinzufügen eines Controllers

Controller bearbeiten eingehende Anfragen und orchestrieren die Antwort. Erstellen Sie ein innerhalb des -Ordners.

// 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);
 }
}

Schlüsselpunkte:

IActionResult ist der Rückgabetyp. Es kann ein , , usw. sein.
Aktionsnamen werden in einem Ordner, der nach dem Controller benannt ist, aufgerufen ().
Die Aktion hat zwei Überlastungen: eine für GET (Anzeige des Formulars) und eine für POST (Handle-Formular-Einreichung).
schützt vor standortübergreifender Fälschung.

Schritt 5: Erstellen von Ansichten mit Razor Syntax

Die Ansicht ist in [[FLT]] (in [[FLT]]) und [[FLT]] (in [[FLT]]) (in [[FLT]]) (in [[FLT]]) (in [[FLT]]) (in [[FLT]]) (in [[FLT]]) (in [[FLT]])) (in [[FLT]]).

Indexansicht – Anzeigen einer Liste

Erschaffen Sie :

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

Razor-Tipps: Verwenden Sie , um von HTML zu C# zu wechseln, und / Tag-Helfer, um URLs zu generieren.

Detailansicht

Erschaffen Sie :

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

Erstellen Sie eine Ansicht mit Form

Erschaffen Sie :

@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");}
}

Razor-Tag-Helfer wie erzeugen Formularfelder mit Modellbindung und Validierung.

Schritt 6: Hinzufügen von Routing und benutzerdefinierten Routen

MVC verwendet standardmäßig konventionsbasiertes Routing. Die Route in mappt und Sie können auch Attribut-Routing hinzufügen, um mehr Kontrolle zu haben.

[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) { ... }
}

Dieser Ansatz ist nützlich für RESTful APIs, wenn er mit kombiniert wird.

Schritt 7: Verwenden von ViewModels für komplexe Daten

Oft müssen Sie mehr als ein Datenobjekt an eine Ansicht übergeben oder zusätzliche Eigenschaften einschließen (wie Listen auswählen, Seitentitel). Hier kommen Ansichtsmodelle ins Spiel.

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;
}

Dann passen Sie die Steuerungsaktion an, um das Ansichtsmodell zu füllen und an die Ansicht zu übergeben. Die Ansicht verwendet und greift entsprechend auf Eigenschaften zu.

Schritt 8: Durchführung der Validierung

ASP.NET Core MVC bietet sowohl serverseitige als auch clientseitige Validierung über Datenannotationen. Fügen Sie , , und benutzerdefinierte Attribute hinzu. In der -Ansicht zeigt die Fehlermeldungen an. Das -Attribut auf der POST-Aktion stellt sicher, dass nur echte Formulareinreichungen verarbeitet werden.

Implementieren Sie für eine benutzerdefinierte Validierungslogik auf Ihrem Modell oder erstellen Sie eine separate Validierungsklasse. Die offizielle ASP.NET Core Validierungsdokumentation deckt diese Muster im Detail ab.

Schritt 9: Dependency Injection in Controller

Statt Hardcoding-Daten können Sie Dienste (wie ein Repository oder Datenbankkontext) in den Controller-Konstruktor einfügen, was eine lockere Kopplung und Testbarkeit fördert.

public class ProductsController : Controller
{
 private readonly IProductRepository _repository;

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

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

Registrieren Sie das Repository in :

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

Die Methode registriert bereits Controller für DI. Dieses Muster macht Ihre Anwendung sauberer und wartbarer. Siehe Microsofts Dependency Injection Guide für mehr.

Schritt 10: Arbeiten mit Layouts und Teilansichten

Gemeinsame Layouts (z. B. ) definieren die Gesamtseitenstruktur. Zum Anpassen, Ändern der in können Sie Abschnitte definieren oder Teilansichten für wiederverwendbare UI-Komponenten wie Navigation, Fußzeilen oder Produktkarten-Renderings verwenden.

Beispielweise Teilansicht :

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

Berücksichtigen Sie ihn in jeder Ansicht mit .

Schritt 11: Fehlerbehandlung und Statuscodes

Controller sollten Fehler mit Anmut handhaben. Verwenden Sie -Blöcke oder einen globalen Ausnahme-Handler über Middleware.

[FLT: 68] für 404
[FLT: 69] für 400
für Serverfehler.

Sie können auch eine benutzerdefinierte Fehleransicht hinzufügen: ist bereits in der Vorlage enthalten.

Schritt 12: Testen der MVC-Anwendung

Testen ist wichtig. Verwenden Sie xUnit und das Paket, um Integrationstests zu schreiben.

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());
 }
}

Unit testet den Controller mit verspotteten Diensten, um Logik zu isolieren. Die ASP.NET Core Testdokumentation bietet umfangreiche Beispiele.

Best Practices und fortgeschrittene Tipps

Behalte die Controller dünn: Die Geschäftslogik gehört in Dienste/Repositorien, nicht in Aktionsmethoden.
Verwenden Sie Ansichtsmodelle: Vermeiden Sie es, Domänenmodelle direkt an Ansichten weiterzugeben; verwenden Sie dedizierte Ansichtsmodelle, um Daten nach Bedarf zu formen.
Leverage Tag Helfer: Sie machen HTML sauberer und reduzieren Fehler in der Formbindung.
Client-seitige Validierung aktivieren: Fügen Sie und Bundles (bereits in ) hinzu.
Verwende async-Aktionen für I/O-gebundene Operationen: mit .
Sichern Sie Ihre Anwendung: Verwenden Sie immer HTTPS, Anti-Fälschungs-Token auf POST-Formularen und rollenbasierte Autorisierung über .

Schlussfolgerung

Die Implementierung der MVC-Architektur in ASP.NET Core bietet Ihnen eine solide Grundlage für die Erstellung von Webanwendungen, die organisiert, testbar und wartbar sind. Durch die Trennung von Modellen, Ansichten und Controllern können Sie unabhängig an jeder Komponente arbeiten und Ihre Anwendung zuverlässig skalieren. Die Schritte in diesem Handbuch bieten einen vollständigen Durchlauf von der Projekterstellung bis hin zu produktionsbereiten Mustern. Beginnen Sie mit einem einfachen Projekt und fügen Sie dann schrittweise Datenbankintegration, Authentifizierung und erweiterte Funktionen hinzu. Die offizielle ASP.NET Core MVC-Übersicht ist eine ausgezeichnete nächste Ressource, wenn Sie Ihr Wissen vertiefen.

Eine Schritt-für-Schritt-Anleitung zur Implementierung der Mvc-Architektur in Asp.net Core

Table of Contents

Das MVC-Muster in der Tiefe verstehen

Voraussetzungen

Schritt 1: Erstellen eines neuen ASP.NET Core MVC-Projekts

Verwenden der Kommandozeile

Mit Visual Studio

Schritt 2: Die Projektstruktur verstehen

Schritt 3: Erstellen einer Modellklasse

Schritt 4: Hinzufügen eines Controllers

Schritt 5: Erstellen von Ansichten mit Razor Syntax

Indexansicht – Anzeigen einer Liste

Detailansicht

Erstellen Sie eine Ansicht mit Form

Schritt 6: Hinzufügen von Routing und benutzerdefinierten Routen

Schritt 7: Verwenden von ViewModels für komplexe Daten

Schritt 8: Durchführung der Validierung

Schritt 9: Dependency Injection in Controller

Schritt 10: Arbeiten mit Layouts und Teilansichten

Schritt 11: Fehlerbehandlung und Statuscodes

Schritt 12: Testen der MVC-Anwendung

Best Practices und fortgeschrittene Tipps

Schlussfolgerung