3.1 MVC 架构模式

3.1 MVC 架构模式

3.1 MVC 架构模式

MVC (Model-View-Controller) 是一种广泛使用的软件设计模式，用于构建用户界面应用程序。它将应用程序分为三个相互关联的部分，每个部分负责特定的职责，从而实现关注点分离、代码重用和可维护性。在 ASP.NET Core 中，MVC 架构模式是构建 Web 应用程序的核心方法。

3.1.1 MVC 的核心组件

• Model (模型): 模型代表应用程序的数据和业务逻辑。它负责从数据库或其他数据源检索数据，处理数据，并将其提供给视图。模型不依赖于视图或控制器。

• View (视图): 视图负责向用户显示数据。它从模型接收数据，并将其呈现为 HTML、JSON 或其他格式。视图不包含任何业务逻辑，只负责显示数据。

• Controller (控制器): 控制器充当模型和视图之间的中介。它接收用户的输入，更新模型，并选择要显示的视图。控制器包含应用程序的控制逻辑。

以下是一个 Mermaid 图表，可视化了 MVC 架构模式：

3.1.2 ASP.NET Core MVC 的实现

在 ASP.NET Core 中，MVC 框架提供了构建 MVC 应用程序所需的基础设施。

• 模型: 可以使用 C# 类来定义模型。可以使用 Entity Framework Core 等 ORM (对象关系映射) 工具来访问数据库。

• 视图: 可以使用 Razor 视图引擎来创建视图。Razor 是一种模板引擎，允许将 C# 代码嵌入到 HTML 中。

• 控制器: 可以创建继承自 Controller 基类的 C# 类来定义控制器。控制器中的方法称为操作方法 (Action Methods)，用于处理用户请求。

3.1.3 代码实践

让我们创建一个简单的 ASP.NET Core MVC 应用程序，用于显示一个产品列表。

1. 创建 ASP.NET Core MVC 项目:

使用 Visual Studio 或 .NET CLI 创建一个新的 ASP.NET Core MVC 项目。

2. 定义模型 (Model):

创建一个名为 Product.cs 的类，定义产品模型：

// Models/Product.cs
namespace MyWebApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public decimal Price { get; set; }
    }
}
​

3. 创建控制器 (Controller):

创建一个名为 ProductController.cs 的控制器：

// Controllers/ProductController.cs
using Microsoft.AspNetCore.Mvc;
using MyWebApp.Models;
using System.Collections.Generic;
using System.Linq;
namespace MyWebApp.Controllers
{
    public class ProductController : Controller
    {
        private static List<Product> _products = new List<Product>()
        {
            new Product { Id = 1, Name = "Laptop", Description = "High-performance laptop", Price = 1200 },
            new Product { Id = 2, Name = "Mouse", Description = "Ergonomic mouse", Price = 25 },
            new Product { Id = 3, Name = "Keyboard", Description = "Mechanical keyboard", Price = 100 }
        };
        public IActionResult Index()
        {
            return View(_products);
        }
        public IActionResult Details(int id)
        {
            var product = _products.FirstOrDefault(p => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }
            return View(product);
        }
        public IActionResult Create()
        {
            return View();
        }
        [HttpPost]
        public IActionResult Create(Product product)
        {
            if (ModelState.IsValid)
            {
                product.Id = _products.Count > 0 ? _products.Max(p => p.Id) + 1 : 1;
                _products.Add(product);
                return RedirectToAction(nameof(Index));
            }
            return View(product);
        }
    }
}
​

解释:

• ProductController 类继承自 Controller 基类。

• Index 操作方法返回一个包含产品列表的视图。

• Details 操作方法根据 ID 返回一个产品详情视图。

• Create 操作方法显示一个用于创建新产品的视图，并在 POST 请求中处理表单提交。[HttpPost] 特性指示该方法仅响应 HTTP POST 请求。

• ModelState.IsValid 属性用于验证模型数据。

• RedirectToAction 方法用于重定向到另一个操作方法。

4. 创建视图 (View):

在 Views/Product 目录下创建以下视图：

• Index.cshtml: 显示产品列表。

@model IEnumerable<MyWebApp.Models.Product>
@{
    ViewData["Title"] = "Products";
}
<h1>Products</h1>
<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Description)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Description)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                <a asp-action="Details" asp-route-id="@item.Id">Details</a>
            </td>
        </tr>
}
    </tbody>
</table>
​

• Details.cshtml: 显示产品详情。

@model MyWebApp.Models.Product
@{
    ViewData["Title"] = "Product Details";
}
<h1>Product Details</h1>
<div>
    <h4>Product</h4>
    <hr />
    <dl class="row">
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Name)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Name)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Description)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Description)
        </dd>
        <dt class = "col-sm-2">
            @Html.DisplayNameFor(model => model.Price)
        </dt>
        <dd class = "col-sm-10">
            @Html.DisplayFor(model => model.Price)
        </dd>
    </dl>
</div>
<div>
    <a asp-action="Index">Back to List</a>
</div>
​

• Create.cshtml: 创建新产品的表单。

@model MyWebApp.Models.Product
@{
    ViewData["Title"] = "Create Product";
}
<h1>Create Product</h1>
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Name" class="control-label"></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="Description" class="control-label"></label>
                <input asp-for="Description" class="form-control" />
                <span asp-validation-for="Description" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Price" class="control-label"></label>
                <input asp-for="Price" class="form-control" />
                <span asp-validation-for="Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>
<div>
    <a asp-action="Index">Back to List</a>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
​

解释:

• @model 指令指定视图的模型类型。

• @Html.DisplayNameFor 和 @Html.DisplayFor 辅助方法用于显示模型属性的名称和值。

• asp-action 和 asp-route-id 标签助手用于生成链接到其他操作方法的 URL。

• asp-validation-summary 和 asp-validation-for 标签助手用于显示验证错误。

• _ValidationScriptsPartial partial view 包含了客户端验证脚本。

5. 配置路由:

确保在 Startup.cs 文件中配置了 MVC 路由。 通常，默认模板已经配置了路由。

// Startup.cs
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
    });
    // ...
}
​

6. 运行应用程序:

运行应用程序，并在浏览器中访问 /Product/Index 查看产品列表。

3.1.4 MVC 的优点

• 关注点分离: MVC 将应用程序分解为三个独立的组件，每个组件负责特定的职责，从而提高代码的可读性、可维护性和可测试性。

• 代码重用: 模型和控制器可以被多个视图重用，从而减少代码重复。

• 可测试性: 由于 MVC 组件是独立的，因此可以单独进行单元测试。

• 并行开发: 不同的开发人员可以同时开发模型、视图和控制器，从而加快开发速度。

• 易于维护: 由于 MVC 组件是独立的，因此可以更容易地进行更改和维护。

3.1.5 总结

MVC 架构模式是构建 ASP.NET Core Web 应用程序的强大工具。它提供了一种结构化的方法来组织代码，从而提高代码的可读性、可维护性和可测试性。通过理解 MVC 的核心概念和实践，可以构建更健壮、更易于维护的 Web 应用程序。 这个例子提供了一个简单的 MVC 应用，展示了如何定义模型，创建控制器来处理用户请求，并使用 Razor 视图引擎来显示数据。 通过运行这个应用程序，您可以亲身体验 ASP.NET Core MVC 的工作方式。