.NET Core - 技术栈

选择的模板

项目创建好后，看一下右侧的 "解决方案资源管理器"。会看到三个非常重要的文件夹，这就是 MVC 的核心：

Models (模型) ：用来存放数据。比如要做一个博客，这里就会有 Article.cs（文章）或 User.cs（用户）的代码。它代表了业务逻辑和数据库里的东西。
Views (视图) ：用户最终在浏览器里看到的网页。这里面的文件后缀是 .cshtml，可以把它理解为"可以写 C# 代码的 HTML 文件"。
Controllers (控制器) ：系统的大脑。当用户在浏览器输入网址或点击按钮时，指令会先发送到这里。控制器决定去 Model 里拿什么数据，然后把数据塞给对应的 View 来展示给用户。

安装 NuGet 依赖包（让项目支持 MySQL）

工具 -> NuGet 包管理器 -> 管理解决方案的 NuGet 程序包

注意：安装时请选择和你项目 .NET 版本一致的版本，比如项目是 .NET 8.0，就选 8.x 的版本

Pomelo.EntityFrameworkCore.MySql （这是 .NET 连接 MySQL 最流行、最好用的驱动）
Microsoft.EntityFrameworkCore.Design （用于后续执行数据库指令）
Microsoft.EntityFrameworkCore.Tools （用于在 VS 内部调用迁移工具）

MySQL在navicat上的使用

新建数据库连接在左上角-连接

连接好了双击它下面的localhost_3306即可激活连接

连接成功（图标变色）后，右键点击 localhost_3306 这个名字，在弹出的菜单中选择 "新建数据库"

这时会弹出一个新建数据库的窗口，按照下面这样填写：

数据库名 (Database Name)：填写 xxx
字符集 (Character Set) ：下拉选择 utf8mb4 （这是目前最推荐的格式，完美支持中文和 Emoji 表情）
排序规则 (Collation) ：可以留空让它默认，或者选择 utf8mb4_general_ci

1.创建"商品"模型 (Model)

模型就是你要存入数据库里的数据结构。

在右侧的"解决方案资源管理器"中，找到 Models 文件夹。
右键点击 Models 文件夹 -> 添加(Add) -> 类(Class)。
把这个类命名为 Product.cs，然后点击添加。
把里面的代码替换成下面这样（注意：namespace 后面的名字如果是你自己的项目名，请保留你原来的）：

cs 复制代码

namespace MyFirstWebApp.Models // 这里的 MyFirstWebApp 应该是你的项目名
{
    public class Product
    {
        // 商品ID (主键，数据库会自动自增)
        public int Id { get; set; }
        
        // 商品名称
        public string Name { get; set; } = string.Empty;
        
        // 商品价格
        public decimal Price { get; set; }
        
        // 商品描述 (加个问号代表可以为空)
        public string? Description { get; set; }
    }
}

2.创建数据库上下文 (DbContext)

这个文件是 C# 和 MySQL 沟通的"桥梁"。

为了代码整洁，我们先在项目里建个新文件夹。右键点击你的项目名称 （最顶层那个，不是解决方案） -> 添加 -> 新建文件夹 ，命名为 Data。
右键点击刚才建好的 Data 文件夹 -> 添加 -> 类。
命名为 AppDbContext.cs，点击添加。
将代码替换为以下内容：

cs 复制代码

using Microsoft.EntityFrameworkCore;
using MyFirstWebApp.Models; // 引入刚才写的 Product 所在的命名空间

namespace MyFirstWebApp.Data
{
    // 必须继承 DbContext
    public class AppDbContext : DbContext
    {
        public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
        {
        }

        // 这行代码非常重要：它告诉程序，我们需要在数据库里建一张叫 Products 的表，里面装的都是 Product 数据
        public DbSet<Product> Products { get; set; }
    }
}

3.配置数据库连接字符串

我们要把 Navicat 里的连接信息告诉你的代码。

在"解决方案资源管理器"里，找到并双击打开 appsettings.json 这个文件。

cs 复制代码

{
  "ConnectionStrings": {
    // 请把 Password=后面的文字换成你平时登录 Navicat (root用户) 的真实密码
    "DefaultConnection": "Server=localhost;Port=3306;Database=ProductManagementDb;User=root;Password=你的MySQL密码;"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

4.在 Program.cs 中注册桥梁

最后一步，让程序启动的时候加载这个数据库桥梁。

双击打开根目录下的 Program.cs 文件。
在 var builder = WebApplication.CreateBuilder(args); 这一行的下面，添加以下注册代码：

cs 复制代码

// === 开始：添加数据库服务配置 ===
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseMySql(connectionString, ServerVersion.AutoDetect(connectionString)));
// === 结束：添加数据库服务配置 ===

数据库生成（数据迁移）

通过两行命令，让程序自动在你的 Navicat 空数据库里把"商品表"建出来。在 .NET 中，这被称为"Code First（代码优先）"开发模式。

打开程序包管理器控制台
在 Visual Studio 2022 顶部菜单栏点击 "工具" -> "NuGet 包管理器" -> "程序包管理器控制台"。
此时，VS 的底部会弹出一个控制台窗口，里面有一个闪烁的光标，前面写着 PM>。
生成迁移文件 (准备图纸)

在 PM> 提示符后面，输入以下命令并按下回车键：

bash 复制代码

Add-Migration InitialCreate

Update-Database

右键点击表，选择刷新。

你会惊喜地发现，原本空空的数据库里多出了两张表：

Products：这就是根据你的 C# 模型完美生成的商品表，里面有 Id、Name、Price、Description 这几个字段。

__EFMigrationsHistory：这是系统用来记录我们刚才执行的迁移历史的表，你可以完全忽略它。

根据模型自动生成代码

Visual Studio 提供了一个非常强大的功能叫做"基架（Scaffolding）"，它可以根据你的 Product 模型，一键自动生成所有用来"增、删、改、查"商品的代码和网页。

1. 自动生成控制器和视图

在右侧的"解决方案资源管理器"中，找到 Controllers 文件夹。
右键点击 Controllers 文件夹 -> 选择 添加(Add) -> 选择 控制器(Controller)...。
在弹出的窗口中，选择左侧的 MVC，然后在中间的列表中选择视图使用 Entity Framework 的 MVC 控制器
这时会出现配置窗口，请仔细选择：
- 模型类 ：下拉选择我们建好的 Product (20260616.Models)。
- 数据上下文类 ：下拉选择我们建好的桥梁 AppDbContext (20260616.Data)。
- 控制器名称 ：保持默认的 ProductsController 即可。
- 点击底部的 "添加"。

(注意：点击添加后，Visual Studio 可能会花半分钟到一分钟的时间来安装代码生成器并自动写代码，此时屏幕上会有进度条提示，请耐心等待它完成。)

2. 把"商品管理"放到网站导航栏

自动生成完毕后，商品管理的页面其实已经做好了，但为了方便点击，我们把它加到网站的顶部菜单栏里。

在右侧的资源管理器中，依次展开 Views 文件夹 -> Shared 文件夹，双击打开 _Layout.cshtml（这是网站的全局模板文件）。
在代码里往下找，找到类似 <ul class="navbar-nav flex-grow-1"> 这样的地方（大概在第 20 行左右），这下面是网站目前的菜单。
在现有的 Home 或 Privacy 菜单项下面，加一行我们自己的菜单：

cs 复制代码

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Products" 
asp-action="Index">商品管理</a>
</li>