ASP.NET 网站制作全教程
这份教程将引导你从零开始，使用最新的 ASP.NET Core 框架创建一个功能完整的网站，ASP.NET Core 是微软推出的跨平台、高性能、开源的框架，是现代 Web 开发的首选。
第一部分：准备工作与基础概念
在开始编写代码之前,我们需要了解一些基本概念并准备好开发环境。
什么是 ASP.NET？
ASP.NET 是一个由微软开发的，用于构建网站、Web 应用和服务的框架，它提供了强大的工具、库和运行时,让开发者可以更高效地编写服务器端代码。
- ASP.NET Core: 这是目前的主流和推荐版本，它相比旧版本（如 ASP.NET 4.x）有以下巨大优势：
- 跨平台: 可以在 Windows, macOS, Linux 上运行。
- 高性能: 架构优化,性能极佳。
- 开源: 社区活跃,持续迭代。
- 云就绪: 非常适合部署到 Azure 等云平台。
核心概念
在开始之前,你需要了解几个核心术语：
-
MVC (Model-View-Controller): 一种软件设计模式，将应用分为三个部分，使代码结构清晰、易于维护。
（图片来源网络，侵删）- Model (模型): 数据和业务逻辑，一个
User类，包含用户名、密码等属性,以及验证用户信息的方法。 - View (视图): 用户界面，通常是 HTML 页面，用于展示数据，在 ASP.NET Core 中，视图文件是
.cshtml文件，它混合了 HTML 和 C# 代码。 - Controller (控制器): 处理用户请求的“指挥官”，它接收来自 View 的用户输入，调用 Model 处理数据，然后选择一个 View 来返回响应。
- Model (模型): 数据和业务逻辑，一个
-
Razor: 一种轻量级的标记语法，用于将 C# 代码嵌入到 HTML 页面中，它的语法非常简洁，
@DateTime.Now就会在页面上显示当前时间。 -
Entity Framework Core (EF Core): 微软官方的 ORM（对象关系映射）框架，它让你可以用 C# 对象（Model）来操作数据库，而无需编写复杂的 SQL 语句,这是进行数据持久化的标准工具。
开发环境准备
你需要安装以下软件：
-
.NET SDK (Software Development Kit):
（图片来源网络，侵删）- 这是开发 .NET 应用程序的核心工具包，包含了编译器、运行时和命令行工具。
- 访问 dotnet.microsoft.com/download 下载并安装最新的 LTS (长期支持) 版本，.NET 6.0, 7.0 或 8.0。
-
代码编辑器:
- Visual Studio Code (VS Code): 免费、轻量级、跨平台,强烈推荐初学者使用。
- Visual Studio: 功能最强大的 IDE，社区版免费，对于大型项目,它提供更丰富的调试和设计工具。
本教程将以 VS Code 为例进行讲解。
第二部分：创建你的第一个 ASP.NET Core 项目
让我们动手创建项目。
创建项目
-
打开你的终端（在 Windows 上是 PowerShell 或 CMD，在 macOS/Linux 上是 Terminal）。
-
创建一个项目文件夹,并进入该文件夹：
mkdir MyFirstWebApp cd MyFirstWebApp
-
运行以下命令，使用模板创建一个新的 ASP.NET Core Web 应用：
dotnet new webapp -o MyFirstWebApp
dotnet new: .NET 的命令行工具,用于创建新项目。webapp: 指定使用 Razor Pages 模板，Razor Pages 是一种比 MVC 更简单、更易于入门的模型,非常适合构建页面驱动的网站。-o MyFirstWebApp: 指定输出目录。
-
用 VS Code 打开这个新创建的项目：
code .
熟悉项目结构
打开项目后,你会看到以下关键文件和文件夹：
Program.cs: 应用的入口点，在这里配置和启动 Web 服务器（如 Kestrel）。appsettings.json: 应用的配置文件，用于存储数据库连接字符串、日志级别等。Startup.cs(在较新版本中可能合并到Program.cs): 配置应用的服务（如 MVC、EF Core）和中间件（处理请求的管道组件）。Controllers/: 存放控制器类的文件夹。Views/: 存放视图文件的文件夹。Pages/: 如果你使用的是 Razor Pages 模型，主要的页面文件会在这里，每个.cshtml文件对应一个页面。Models/: 存放数据模型类的文件夹。wwwroot/: 存放静态文件的文件夹，如 CSS、JavaScript、图片等。
运行项目
在 VS Code 的终端中,运行以下命令：
dotnet run
你会看到终端输出一些信息，包括监听的 URL（通常是 https://localhost:7xxx 和 http://localhost:5xxx）。
打开你的浏览器，访问 https://localhost:7xxx（或控制台显示的 HTTPS 地址），你应该能看到一个默认的欢迎页面，恭喜你,你的第一个网站已经运行起来了！
第三部分：构建一个简单的留言板功能
让我们给网站添加一个功能：一个简单的留言板,用户可以查看留言和发布新留言。
步骤 1: 创建数据模型
-
在
Models文件夹中，创建一个新文件Message.cs。 -
在
Message.cs中,定义留言的数据结构：// Models/Message.cs namespace MyFirstWebApp.Models { public class Message { public int Id { get; set; } public string Author { get; set; } public string Content { get; set; } public DateTime PostDate { get; set; } } }
步骤 2: 创建数据库和上下文
我们需要一个地方来存储留言,我们将使用内存数据库来简化开发。
-
在
Models文件夹中，创建一个新文件MessageDbContext.cs。 -
在
MessageDbContext.cs中,创建数据库上下文类：// Models/MessageDbContext.cs using Microsoft.EntityFrameworkCore; namespace MyFirstWebApp.Models { public class MessageDbContext : DbContext { public MessageDbContext(DbContextOptions<MessageDbContext> options) : base(options) { } public DbSet<Message> Messages { get; set; } } } -
注册数据库服务：打开
Program.cs文件，在构建器中注册我们的DbContext。// Program.cs using Microsoft.EntityFrameworkCore; using MyFirstWebApp.Models; var builder = WebApplication.CreateBuilder(args); // 1. 添加服务到容器。 builder.Services.AddRazorPages(); // 注册 MessageDbContext 服务，并使用内存数据库 builder.Services.AddDbContext<MessageDbContext>(options => options.UseInMemoryDatabase("MessagesDb")); var app = builder.Build(); // ... (中间件配置部分保持不变)
步骤 3: 创建页面 (使用 Razor Pages)
-
显示留言列表页:
-
在
Pages文件夹下，创建一个新文件夹Messages。 -
在
Pages/Messages文件夹中，创建一个新文件Index.cshtml。 -
在
Pages/Messages/Index.cshtml中，编写 HTML 代码来显示留言列表：@* Pages/Messages/Index.cshtml *@ @page @model MyFirstWebApp.Pages.Messages.IndexModel @{ ViewData["Title"] = "留言列表"; } <h1>@ViewData["Title"]</h1> <p> <a asp-page="Create">发布新留言</a> </p> <table class="table"> <thead> <tr> <th>作者</th> <th>内容</th> <th>发布时间</th> </tr> </thead> <tbody> @foreach (var message in Model.Messages) { <tr> <td>@message.Author</td> <td>@message.Content</td> <td>@message.PostDate.ToString("yyyy-MM-dd HH:mm:ss")</td> </tr> } </tbody> </table> -
我们需要为这个
-
