跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
C#

ASP.NET Core Razor Pages 从零搭建入门指南

综述由AI生成通过餐厅类比详解 ASP.NET Core Razor Pages 项目结构。涵盖 Program.cs 启动配置、Pages 文件夹页面模型、wwwroot 静态资源及配置文件作用。解析了请求流程:从启动服务到路由匹配、逻辑执行及视图渲染,帮助开发者快速理解核心文件功能与协作机制。

游戏玩家发布于 2026/4/6更新于 2026/5/2127 浏览

我们可以把整个项目比喻成一家餐厅的运作体系。


第一步:先看项目结构(以默认模板为例)

当你通过 Visual Studio 或 dotnet new webapp 命令创建一个新项目后,会看到类似下面的文件夹和文件(不同版本可能略有差异,但核心一致):

你的项目名称/ │
├── 📁 Properties/
│   └── launchSettings.json (配置文件:启动按钮的设置)
├── 📁 wwwroot/ (餐厅的"公共用餐区":存放浏览器能直接访问的静态文件)
│   ├── 📁 css/ (样式文件 - 餐厅的装修风格)
│   ├── 📁 js/ (JavaScript 文件 - 服务员的现场互动)
│   └── 📁 lib/ (第三方库 - 比如借来的桌椅餐具)
├── 📁 Pages/ (餐厅的"核心包间区":所有网页都在这里)
│   ├── 📁 Shared/ (公共组件:每个包间都有的墙壁、菜单样式)
│   │   └── _Layout.cshtml (网页的"骨架":定义页眉、页脚、导航栏)
│   │   └── _ValidationScriptsPartial.cshtml (脚本片段:用于表单验证)
│   │
│   ├── Index.cshtml (首页:比如餐厅的入口大厅)
│   ├── Index.cshtml.cs (首页的"专属服务员":处理首页的后台逻辑)
│   ├── Privacy.cshtml (隐私政策页)
│   └── Privacy.cshtml.cs (隐私页的专属服务员)
├── 📁 bin/ 和 📁 obj/ (厨房后厨:编译生成的临时文件和最终输出,一般不用管)
├── appsettings.json (餐厅的"规章制度手册":数据库连接、应用配置)
├── appsettings.Development.json (开发环境专用的规章制度)
├── Program.cs (餐厅的"总设计师 + 总指挥":应用的入口和启动配置)
└── 项目名称.csproj (餐厅的"购物清单":项目依赖的包和 SDK)

第二步:详细讲解每个核心文件

1. Program.cs —— 餐厅的"总设计师 + 总指挥"

这是整个项目最先运行的地方,相当于你进入餐厅前,设计师画好蓝图、老板搭好骨架。

// 这是创建一个默认的 Web 应用构建器,相当于开始搭建餐厅
var builder = WebApplication.CreateBuilder(args);

// 告诉餐厅:我们使用 Razor Pages 模式营业
// 这会在系统中注册所有必要的服务,比如把"页面文件 (.cshtml)"和"服务员 (.cshtml.cs)"关联起来
builder.Services.AddRazorPages();

// 搭建完成,餐厅开始营业
var app = builder.Build();

// 配置 HTTP 请求管道:相当于设定客人进门后的路线
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error"); // 如果出错了,带客人去错误处理页面
    app.UseHsts(); // 强制使用 HTTPS 安全连接
}

app.UseHttpsRedirection(); // 把所有 HTTP 请求自动跳转到 HTTPS(更安全)
app.UseStaticFiles(); // 允许客人访问 wwwroot 文件夹里的静态文件(图片、CSS)
app.UseRouting(); // 启动路由系统:根据客人访问的 URL,决定带他去哪个包间
app.MapRazorPages(); // 关键步骤:把所有 Razor Pages 映射到路由中
// 比如访问 "/Index" 就去找 Index.cshtml
app.Run(); // 餐厅开始正式营业,监听客人请求
2. Pages 文件夹 —— 餐厅的"核心包间区"

这里存放所有 .cshtml 文件,每个文件代表网站的一个具体页面。

2.1 _Layout.cshtml (在 Shared 文件夹中) —— 网页的"骨架"

这个文件定义了所有页面的公共部分,比如:

  • 整个网站的头部(Logo、导航菜单)
  • 底部(版权信息)
  • 全局 CSS 和 JS 引用
<!DOCTYPE html>
<html>
<head>
    <!-- 这里的 @RenderSection("Head", ...) 是个占位符 -->
    <link rel="stylesheet" href="~/css/site.css"/>
</head>
<body>
    <header>这里是导航栏</header>
    <!-- 最关键的部分:页面主体内容会渲染在这里 -->
    @RenderBody()
    <footer>版权所有</footer>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

其他页面(如 Index.cshtml)只负责写自己独有的内容,最终会被塞进 @RenderBody() 的位置。

2.2 Index.cshtml 和 Index.cshtml.cs —— 一对一的"包间 + 服务员"

这是 Razor Pages 的精髓,一个页面由一对文件组成。

Index.cshtml.cs (页面模型/逻辑):处理页面的后台逻辑。

using Microsoft.AspNetCore.Mvc.RazorPages;

public class IndexModel : PageModel
{
    public string CurrentTime { get; set; }

    // 当用户通过 GET 方式访问页面时(比如直接在浏览器输入网址),这个方法会被执行
    public void OnGet()
    {
        CurrentTime = DateTime.Now.ToString();
    }

    // 当用户通过 POST 方式提交表单时,这个方法会被执行
    public void OnPost()
    {
        CurrentTime = "你刚刚点了提交按钮!";
    }
}

这里要特别注意:.cshtml.cs 文件的名字必须和 .cshtml 一样,并且放在同一个文件夹下。

Index.cshtml (视图/界面):就是你在浏览器里看到的 HTML 代码,可以混合 C# 代码。

@page
@model IndexModel
<h1>欢迎</h1>
<p>当前时间是:@Model.CurrentTime</p>
<form method="post">
    <button type="submit">点我提交</button>
</form>
3. wwwroot 文件夹 —— 餐厅的"公共用餐区"

这是唯一一个浏览器可以直接访问的文件夹。存放:

  • css/site.css:整个网站的样式表(字体、颜色、布局)。
  • js/site.js:你自己写的 JavaScript 代码(弹窗、动画)。
  • lib/:第三方的库,比如 jQuery、Bootstrap。
4. appsettings.json —— 餐厅的"规章制度手册"

存放配置信息,比如:

{
  "Logging": {...}, // 日志记录级别(错误信息记多细)
  "ConnectionStrings": {
    "DefaultConnection": "数据库连接字符串" // 数据库地址和账号
  },
  "AllowedHosts": "*" // 允许哪些域名访问
}
5. launchSettings.json (在 Properties 文件夹里) —— 调试模式的"开关面板"

当你按 F5 启动项目时,Visual Studio 会读这个文件。它定义了:

  • 用什么浏览器打开?
  • 打开哪个 URL?(https://localhost:5001)
  • 是否自动打开窗口?

第三步:一次完整的请求流程(帮你串起来)

为了让你理解这些文件如何协同工作,我们模拟一次访问首页的过程:

  1. 启动:你按 F5,Program.cs 开始运行,配置好所有服务。
  2. 请求:你在浏览器输入 https://localhost:5001/。
  3. 路由:app.MapRazorPages() 根据 URL / 找到 Pages/Index.cshtml 文件。
  4. 执行逻辑:系统自动创建 IndexModel 类的实例(Index.cshtml.cs),并执行其中的 OnGet() 方法。
  5. 渲染页面:系统读取 _Layout.cshtml 作为骨架,把 Index.cshtml 生成的 HTML 内容填进 @RenderBody() 的位置。
  6. 返回:最终生成一个完整的 HTML 页面,返回给浏览器。
  7. 浏览器显示:浏览器解析 HTML,并根据 wwwroot/css/site.css 的样式,把页面渲染得漂漂亮亮。

目录

  1. 第一步:先看项目结构(以默认模板为例)
  2. 第二步:详细讲解每个核心文件
  3. 1. Program.cs —— 餐厅的"总设计师 + 总指挥"
  4. 2. Pages 文件夹 —— 餐厅的"核心包间区"
  5. 2.1 _Layout.cshtml (在 Shared 文件夹中) —— 网页的"骨架"
  6. 2.2 Index.cshtml 和 Index.cshtml.cs —— 一对一的"包间 + 服务员"
  7. 3. wwwroot 文件夹 —— 餐厅的"公共用餐区"
  8. 4. appsettings.json —— 餐厅的"规章制度手册"
  9. 5. launchSettings.json (在 Properties 文件夹里) —— 调试模式的"开关面板"
  10. 第三步:一次完整的请求流程(帮你串起来)
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • 基于 Spring Boot 的学生成绩管理系统设计与实现
  • Python 文件操作详解:读写、序列化与路径管理
  • Cursor Visual Editor 评测:Web 开发如何回归所见即所得
  • JDK 安装与环境配置详解
  • WSL(Windows Subsystem for Linux)安装教程
  • 贝叶斯网络原理与代码实战
  • RAG 应用程序中的意图路由策略与实践
  • OpenClaw 本地部署与 QQ 机器人接入指南
  • PlotDigitizer 图表数据自动化提取实战指南
  • DeepSeek 各版本说明与优缺点分析
  • 人形机器人:从万物皆可机器人化到终极通用平台
  • AI 绘画内容安全与合规提示词工程实践
  • Pencil.dev:AI 驱动的开发设计工具安装与使用指南
  • Python 环境安装与配置 Gurobi 求解器指南
  • C++ 类与对象:封装特性的实现与实战应用
  • OpenClaw 在 macOS 主力机的安全部署与配置
  • Flutter BIP340 适配鸿蒙 HarmonyOS 实战:Schnorr 签名应用
  • 大模型 LLM 在数据领域的四大应用场景探索
  • Ollama Windows 安装与使用指南:本地运行 Llama 等模型
  • 阿里云 Maven 镜像配置实战

相关免费在线工具

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online

  • Markdown转HTML

    将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online

  • HTML转Markdown

    将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online

  • JSON 压缩

    通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online

  • JSON美化和格式化

    将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online