[.NET大牛之路 034] 实战：使用 MVC 模式改造书大师

上一节课我们对 ASP.NET Core 平台有了整体的认识，理解了 ASP.NET Core 平台的三大 Web 应用程序框架 MVC、Razor Pages 和 Blazor。下面我们将使用 MVC 框架来改造书大师项目，其它框架将在后续功能实例中演示。

下面请大家跟着我写代码，关键代码我都会简单解释一下，但具体涉及的知识点（比如依赖注入和路由等），我会在后面章节专门讲解，如果暂时不是很理解也没关系。

1 启用 MVC 框架

要启用 MVC 框架，先要在 Program.cs 中注册相关服务和中间件，不过，在此之前要把之前 Razor Pages 相关注册代码删除（或注释掉）。Program.cs 代码如下：

var builder = WebApplication.CreateBuilder(args);

// 注册服务
// builder.Services.AddRazorPages();
builder.Services.AddControllersWithViews();

var app = builder.Build();

// 注册中间件
app.UseStaticFiles();
// app.MapRazorPages();
app.MapDefaultControllerRoute();

app.Run();

这里的 app.Services.AddControllersWithViews() 集中注册了一系列和控制器和视图相关的服务，比如视图引擎、认证、跨域等组件服务，这样我们可以通过依赖注入的方式在任意类中使用框架提供的接口。关于依赖注入的知识点，后续会专门讲。

和之前的 app.MapRazorPages() 类似，这里的 app.MapDefaultControllerRoute() 则是用于注册和配置路由，映射到具体的 Controller 的 Action 端点，默认规则是 {controller=Home}/{action=Index}/{id?}。

可以看到，启用 MVC 和 Razor Pages 之间的区别就是两行代码的区别。

2 使用 MVC 文件结构

根据 MVC 模式，一般约定俗成地将 MVC 的三个部分对应到三个文件夹，即 Models、Views 和 Controllers。于是，我们在 Bookist.Web 项目根目录创建好这三个文件夹。接着就是在各个文件夹中添加相应的代码文件了。

如果你使用 VSC 开发，在创建代码文件之前，这里先分享一个 VSC 插件：vscode-solution-explorer。该扩展识别到你是 .NET 项目时，第一次打开项目它会询问你是否要生成默认的模板文件，生成的模板文件在 .vscode/solution-explorer 目录下，我们可以根据需要自义修改这些模板。这样每次添加文件时就不需要每次都输入一些固定的内容了，比如命名空间的声明。

安装完 vscode-solution-explorer 插件后，会在 VSC 左侧的工具栏中看到一个 VS 图标的 Tab。在该 Tab 中添加 C# 文件和引用都非常方便，和 VS 差不多。操作很简单，大家自己实践一下就知道了，具体也可以查看插件的介绍。

下面继续在 Models、Views 和 Controllers 文件夹中添加相应的三个代码文件，具体如下图所示。

3 代码修改

在 Models/BookVM 类中，我们定义一个 Model 类，用于承载视图数据：

namespace Bookist.Web.Models;

public class BookVM
{
    public string Title { get; set; }
    public string Cover { get; set; }
    public string Author { get; set; }
    public DateOnly PubDate { get; set; }
    public string Description { get; set; }
    public string Format { get; set; }
    public string FetchUrl { get; set; }
    public string FetchCode { get; set; }
}

现在我们把原先的 Pages/Index.cshtml 文件的内容复制到 Views/Home/Index.cshtml 中，指定绑定的数据模型为 BookVM，并移除原来的 book 对象及 @page 声明，相关代码如下：

@model Bookist.Web.Models.BookVM

<!DOCTYPE html>
....
    <div class="book-card">
        <img src="@Model.Cover" />
        <div class="book-card__body">
            <div class="book-card__info">
                <h3>@Model.Title</h3>
                <dl>
                    <dt>作者:</dt>
                    <dd>@Model.Author</dd>
                </dl>
                <dl>
                    <dt>日期:</dt>
                    <dd>@Model.PubDate.ToString("yyyy年MM月")</dd>
                </dl>
                <dl>
                    <dt>简介:</dt>
                    <dd>@Model.Description</dd>
                </dl>
            </div>
            <div class="book-card__oprate">
                <a class="btn-primary" href="@Model.FetchUrl" target="_blank">下载 @Model.Format</a>
                <span>提取码：<b class="book-card__code">@Model.FetchCode</b></span>
            </div>
        </div>
    </div>
...

注：完整代码请前往 bookist.cc 的 GitHub 仓库查看。

最后在 Controller 中定义一个和默认首页（URL 为/或/Home/Index）对应的 Index Action 方法，在 Action 方法中返回视图需要的 Model 及其数据，代码如下：

using Bookist.Web.Models;
using Microsoft.AspNetCore.Mvc;

namespace Bookist.Web.Controllers;

public class HomeController : Controller
{
    public ViewResult Index()
    {
        var vm = new BookVM
        {
            Title = "CLR via C# (4th Edition)",
            Cover = "https://img.geekgist.com/Foc1d-NbacAQ6D1WSQ_3UndhaOuR-w2h3",
            Author = "Jeffrey Richter",
            PubDate = new DateOnly(2012, 10, 1),
            Description = "Dig deep and master the intricacies of the CLR, C#, and .NET development. You’ll gain pragmatic insights for building robust, reliable, and responsive apps and components.",
            Format = "PDF",
            FetchUrl = "https://url19.ctfile.com/f/15677019-228693113-e89578",
            FetchCode = "bookist"
        };
        return View(vm);
    }
}

可以看到，这里基本只是文件结构的修改，把原来 Pages/Index.cshtml 的内容拆分到 MVC 的三个部分中去，这样做可以使项目结构更清晰，也更容易维护。

4 发布

在项目的 Bookist.Web 目录下，运行如下命令生成发布文件：

$ dotnet publish -c release -o bin/Publish

每次发布更新，我们只需要把有改动的文件复制上去就行，这次我们只需要复制 Bookist.Web.* 开头的两个文件到服务器上。

向云服务器拷文件，我个人使用的是 Xftp 工具。它有个很方便的技巧，可以在 Xftp 工具上直接打开 Xshll，并自动定位到当前目录。

把发布文件复制到服务器上后，别忘了运行如下命令重启应用：

$ systemctl restart bookist

最后用浏览器访问一下网站检查一下是否一切正常。

本文来自http://cnblogs.com/willick，经授权后发布，本文观点不代表个人技术分享立场，转载请联系原作者。

[.NET大牛之路 034] 实战：使用 MVC 模式改造书大师

1 启用 MVC 框架

2 使用 MVC 文件结构

3 代码修改

4 发布

相关推荐

.Net Core 教程 Part4 – (16)(17)(18)(19) Web API

.Net Core 教程 Part4 – (23)(24)(25)(26) 缓存

[.NET大牛之路 021] C# 高级：玩转反射

[.NET大牛之路 033] 实战：理解 ASP.NET Core 平台

[.NET大牛之路 014] C# 基础：操作符知识点

[.NET大牛之路002] 什么是 .NET

发表回复