Пошаговое руководство по внедрению архитектуры Mvc в Asp.net Core

Архитектура Model-View-Controller (MVC) - это проверенный временем шаблон дизайна, который разделяет проблемы в веб-приложении, облегчая управление сложностью, изолированность тестовых компонентов и масштабирование функций с течением времени. В ASP.NET Core MVC является первоклассным гражданином, обеспечивая надежную основу для создания современных, поддерживаемых веб-приложений. Это руководство проведет вас через каждый шаг внедрения MVC в ASP.NET Core, от первоначальной настройки проекта до передовых лучших практик.

Понимание шаблона MVC в глубине

Прежде чем погрузиться в код, важно понять, как три основных компонента MVC взаимодействуют для обработки запроса пользователя.

Модель: Представляет структуру данных и бизнес-правила.Он не знает об пользовательском интерфейсе или о том, как отображаются данные.Модели обычно представляют собой простые классы C#, которые инкапсулируют свойства, логику проверки и доступ к данным (часто через Entity Framework Core).
View: Отображает пользовательский интерфейс. В ASP.NET Core видны файлы Razor (‘.cshtml’), которые сочетают разметку HTML с серверным кодом C#. Просмотры должны отображать только данные, не содержащие сложной логики.
Контроллер: выступает в качестве посредника. Он получает HTTP-запросы, решает, какую модель использовать, и выбирает соответствующий вид для возврата. Контроллеры содержат методы действия, которые отображают на конкретные маршруты.

Типичный поток запросов в ASP.NET Core MVC: пользователь переходит к URL (например, ), промежуточное программное обеспечение маршрутизации направляет запрос к действию , действие взаимодействует с моделью (например, извлекает продукты из базы данных), упаковывает данные в модель просмотра и передает ее в представление. Затем представление генерирует ответ HTML, отправленный обратно клиенту.

Предпосылки

.NET SDK (версия 6.0 или более поздняя). Скачать с dotnet.microsoft.com.
Visual Studio, Visual Studio Code или любой предпочтительный редактор кода.
Базовое знакомство с C# и концепциями веб-разработки.

Шаг 1: Создание нового MVC-проекта ASP.NET Core

Вы можете начать с .NET CLI или Visual Studio. Оба предоставляют шаблон проекта, который формирует стандартную структуру папок MVC.

Использование командной строки

Откройте терминал и запустите:

dotnet new mvc -n MyMvcApp

Это создает проект под названием в новой папке.Сгенерированная структура включает , , и (для статических файлов).

Использование Visual Studio

В Visual Studio выберите Создать новый проект → выбрать ASP.NET Core Web App (Model-View-Controller) → настроить название и местоположение проекта → выбрать версию .NET (например, .NET 8).

Проверить, работает ли проект:

cd MyMvcApp
dotnet run

Откройте , чтобы увидеть домашнюю страницу по умолчанию.

Шаг 2: Понимание структуры проекта

Проект лесов содержит несколько ключевых элементов:

Контроллеры (FLT:0) — пустая папка, в которую вы добавите классы контроллеров C#.
Модели : Место для классов доменов и моделей просмотра.
Виды : Имеет и папку по умолчанию, плюс макет.
Program.cs: Стартап приложений, где настроены сервисы (включая MVC).

Откройте и обратите внимание на линии, которые позволяют MVC:

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

Это позволяет установить маршрут по умолчанию, который отображает URL-адреса, такие как до .

Шаг 3: Создание модельного класса

Модели представляют данные, с которыми работает ваше приложение. Начните с создания модели внутри папки .

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

Вы можете обогатить модели аннотациями данных для проверки:

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

В реальном приложении вы обычно добавляете контекст базы данных (Entity Framework Core) к постоянным моделям. Для этого руководства мы будем использовать данные в памяти, чтобы сосредоточиться на потоке MVC.

Шаг 4: Добавление контроллера

Контроллеры обрабатывают входящие запросы и организуют ответ. Создайте внутри папки.

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

Ключевые моменты:

Иакционный результат — это тип возврата., , и т. д.
Имена действий отображаются в папке, названной в честь контроллера (].
В этом случае [28], в частности, есть два варианта: один для POST (форма для рукоятки) и один для GET (форма для отображения).
защищает от подделки запроса на перекрестном сайте.

Шаг 5: Создание представлений с помощью синтаксиса бритвы

В этом случае, в этом случае, в другом месте (в другом месте) [31].

Index View - Отображение списка

Создайте :

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

Советы Разор : Используйте для перехода с HTML на C#, и / помощники тегов для генерации URL-адресов.

Подробности View

[[[37]]]: [[[37]]]

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

Создайте вид с помощью формы

[[Флт:39]]:

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

Бритвенные помощники, такие как , генерируют поля форм с связыванием и валидацией модели. загружает скрипты проверки на стороне клиента.

Шаг 6: Добавление маршрутизации и пользовательских маршрутов

MVC использует стандартную маршрутизацию по умолчанию. Маршрут в картах . Вы также можете добавить маршрутизацию атрибутов для большего контроля. Например, в контроллере:

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

Этот подход полезен для RESTful API в сочетании с .

Шаг 7: Использование моделей просмотра для сложных данных

Часто вам нужно передать более одного объекта данных на просмотр или включить дополнительные свойства (например, списки избранных, заголовки страниц). Вот где появляются модели просмотра. Создайте класс моделей просмотра в :

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

Затем настройте действие контроллера, чтобы заполнить модель просмотра и передать ее в вид. Вид использует и соответственно получает доступ к свойствам.

Шаг 8: Внедрение проверки

ASP.NET Core MVC обеспечивает как серверную, так и клиентскую проверку посредством аннотаций данных. Добавить , , и пользовательские атрибуты. В представлении отображаются сообщения об ошибках. атрибут на действии POST обеспечивает обработку только подлинных представлений формы.

Для пользовательской логики проверки, реализуйте на вашей модели или создайте отдельный класс проверки.Официальная ASP.NET Core документация по проверке подробно охватывает эти шаблоны.

Шаг 9: Инъекция зависимостей в контроллеры

Вместо жесткого кодирования данных вы можете вводить службы (например, репозиторий или контекст базы данных) в конструктор контроллеров. Это способствует свободной связи и проверяемости.

public class ProductsController : Controller
{
 private readonly IProductRepository _repository;

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

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

Зарегистрируйтесь в :

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

Метод уже регистрирует контроллеры для DI. Этот шаблон делает ваше приложение более чистым и более удобным в обслуживании. Руководство по введению зависимостей Microsoft для большего.

Шаг 10: Работа с макетами и частичными представлениями

Общие макеты (например, ) определяют общую структуру страницы. Для настройки, изменения в . Вы можете определить разделы или использовать частичные просмотры для многоразовых компонентов пользовательского интерфейса, таких как навигация, нижние колонтитулы или рендеринг карт продукта.

Пример частичного просмотра :

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

Включите его в любой вид с .

Шаг 11: Обработка ошибок и коды состояния

Контроллеры должны изящно обрабатывать ошибки. Используйте блоки или глобальный обработчик исключений через промежуточное ПО. Возвращайте соответствующие коды состояния HTTP:

для 404
для 400
для ошибок сервера.

Вы также можете добавить пользовательский вид ошибки: уже включен в шаблон. Набор в для перенаправления на исключения в производстве.

Шаг 12: Тестирование приложения MVC

Тестирование имеет решающее значение. Используйте xUnit и пакет для написания интеграционных тестов. Пример действия :

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

Единица тестирования контроллера с помощью высмеянных сервисов для изоляции логики. Документация по тестированию ASP.NET Core предоставляет обширные примеры.

Лучшие практики и продвинутые советы

Сохраняйте тонкие контроллеры : бизнес-логика принадлежит сервисам/репозиториям, а не методам действия.
Использовать модели просмотра: Избегайте передачи моделей домена непосредственно в представления; используйте специализированные модели просмотра для формирования данных по мере необходимости.
Помощники тегов: Они делают HTML-чище и уменьшают ошибки при связывании формы.
Включите : Включите и пакеты (уже в ).
Использовать действия асинхронизации для операций, связанных с вводом/выводом: с .
Защитите ваше приложение : Всегда используйте HTTPS, токены против подделки в формах POST и авторизацию на основе ролей через .

Заключение

Внедрение архитектуры MVC в ASP.NET Core дает вам прочную основу для создания веб-приложений, которые организованы, тестируемы и поддерживаются. Разделяя модели, представления и контроллеры, вы можете работать над каждым компонентом независимо и масштабировать свое приложение с уверенностью. Шаги в этом руководстве обеспечивают полный переход от создания проекта к готовым к производству шаблонам. Начните с простого проекта, затем постепенно добавьте интеграцию базы данных, аутентификацию и расширенные функции. Официальный обзор ASP.NET Core MVC является отличным следующим ресурсом по мере углубления ваших знаний.