企业官网建设流程全解析

用intro-to-dotnet-web-dev构建披萨网站：Razor Pages实战指南

【免费下载链接】intro-to-dotnet-web-devGet Started as a Web Developer with .NET, C#, and ASP.NET Core项目地址: https://gitcode.com/gh_mirrors/in/intro-to-dotnet-web-dev

intro-to-dotnet-web-dev是一个专为Web开发者设计的入门项目，通过它你可以快速掌握.NET、C#和ASP.NET Core技术栈。本指南将带你使用该项目中的Razor Pages技术，从零开始构建一个功能完整的披萨网站，体验服务器端Web开发的核心流程。

为什么选择Razor Pages构建披萨网站？

在Web开发领域，不同场景需要不同的技术方案。对于交互性极强的应用（如在线游戏），Blazor可能是更好的选择；但对于大多数以数据展示和业务逻辑为主的网站（如电商平台、企业官网），Razor Pages凭借其简洁高效的特性成为理想选择。

Razor Pages采用"页面模型+视图"的架构：

• 页面模型（Page Model）：用C#编写业务逻辑，处理HTTP请求（GET/POST等）
• Razor视图：融合HTML与C#语法，动态生成页面内容

这种分离模式既保持了代码的清晰组织，又简化了开发流程，特别适合快速构建数据驱动的网站。

图：创建Razor Pages项目时的配置界面，选择.NET 6.0长期支持版本确保稳定性

准备工作：环境与项目搭建

工具选择

你可以使用以下任一开发环境：

• GitHub Codespaces：直接在浏览器中开发，无需本地配置
• Visual Studio 2022：完整的Windows开发体验，支持拖放式界面设计

初始化项目

1. 克隆项目仓库：

   git clone https://gitcode.com/gh_mirrors/in/intro-to-dotnet-web-dev

2. 进入Razor Pages起始模板目录：3-razor-pages/0-start/RazorPagesPizza
3. 用Visual Studio打开解决方案，或在终端运行：dotnet run

图：Visual Studio起始窗口，选择"创建新项目"开始Razor Pages开发

核心步骤：从数据模型到CRUD界面

1. 定义披萨数据模型

在Models文件夹中创建Pizza.cs类，定义披萨的核心属性：

using System.ComponentModel.DataAnnotations; namespace RazorPagesPizza.Models; public class Pizza { public int Id { get; set; } [Required] // 确保名称不为空 public string? Name { get; set; } public bool IsGlutenFree { get; set; } // 无麸质选项 [Range(0.01, 9999.99)] // 价格范围验证 public decimal Price { get; set; } }

这个模型不仅定义了数据结构，还通过数据注解实现了基本验证规则，确保用户输入的数据符合业务要求。

2. 自动生成CRUD界面（Scaffolding）

ASP.NET Core提供的脚手架工具能根据数据模型自动生成完整的增删改查界面：

1. 右键点击Pages文件夹，选择"添加"→"新建脚手架项"
2. 选择"Razor Pages使用Entity Framework (CRUD)"模板
3. 在配置对话框中：
   • 模型类选择Pizza (RazorPagesPizza.Models)
   • 点击"+"创建新的数据上下文（Data Context）
   • 确认配置后点击"添加"

图：CRUD脚手架配置界面，关联Pizza模型与数据上下文

脚手架会自动生成以下文件：

• Index.cshtml：披萨列表页面
• Create.cshtml：添加新披萨表单
• Edit.cshtml：编辑披萨信息
• Delete.cshtml：删除确认页面
• 对应的页面模型（.cshtml.cs文件）

3. 配置数据库连接

打开appsettings.json文件，确保包含正确的数据库连接字符串：

{ "ConnectionStrings": { "RazorPagesPizzaContext": "Server=(localdb)\\mssqllocaldb;Database=RazorPagesPizzaContext;Trusted_Connection=True;MultipleActiveResultSets=true" } }

4. 执行数据库迁移

通过EF Core迁移功能创建数据库表结构：

1. 打开"工具"→"NuGet包管理器"→"包管理器控制台"
2. 执行以下命令：

   Add-Migration InitialCreate # 创建迁移文件 Update-Database # 应用迁移到数据库

图：在Package Manager Console中执行数据库迁移命令

运行与体验披萨网站

按下F5启动调试，浏览器会自动打开网站。你可以：

1. 点击"Create New"添加新披萨
2. 尝试提交空表单，体验数据验证功能
3. 查看披萨列表，测试编辑和删除功能

图：运行中的披萨网站列表页面，展示已添加的披萨信息

项目结构解析

生成的项目包含以下关键目录：

• Pages：存放所有Razor页面和页面模型
  • Index.cshtml：披萨列表页面
  • Create.cshtml：新增披萨表单
• Models：数据模型定义（如Pizza.cs）
• Data：数据库上下文（RazorPagesPizzaContext.cs）
• wwwroot：静态资源（CSS、JS、图片等）

进阶学习路径

完成基础披萨网站后，你可以通过以下资源深入学习：

• 官方教程：Create a Razor Pages web app with ASP.NET Core
• 项目实战：尝试添加搜索功能（在Index.cshtml.cs中扩展OnGetAsync方法）
• 代码优化：查看3-razor-pages/1-complete目录中的完整实现，学习高级特性

总结

通过intro-to-dotnet-web-dev项目，你已经掌握了Razor Pages开发的核心流程：从数据模型设计到CRUD界面生成，再到数据库配置与迁移。这种"约定优于配置"的开发模式，让你能够专注于业务逻辑而非基础架构，快速构建功能完善的Web应用。

现在，你可以基于这个披萨网站继续扩展功能，如添加用户认证、订单管理或支付集成，逐步提升你的.NET Web开发技能！

【免费下载链接】intro-to-dotnet-web-devGet Started as a Web Developer with .NET, C#, and ASP.NET Core项目地址: https://gitcode.com/gh_mirrors/in/intro-to-dotnet-web-dev