.net Core Web 保姆级教学 逐文件讲解 从0搭建一个 ASP.NET Core Razor Pages

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


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

当你通过 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引用
<!DOCTYPEhtml><html><head><!-- 这里的 @RenderSection("Head", ...) 是个占位符 --><linkrel="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.cshtmlIndex.cshtml.cs —— 一对一的"包间+服务员"

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

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

usingMicrosoft.AspNetCore.Mvc.RazorPages;publicclassIndexModel:PageModel// 继承PageModel{publicstring CurrentTime {get;set;}// 当用户通过GET方式访问页面时(比如直接在浏览器输入网址),这个方法会被执行publicvoidOnGet(){ CurrentTime = DateTime.Now.ToString();}// 当用户通过POST方式提交表单时,这个方法会被执行publicvoidOnPost(){ CurrentTime ="你刚刚点了提交按钮!";}}

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

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

@page // 第一行必须是@page,标记这是一个Razor Page @model IndexModel // 关联到下面的IndexModel类 <h1>欢迎</h1><p>当前时间是: @Model.CurrentTime</p><formmethod="post"><buttontype="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 的样式,把页面渲染得漂漂亮亮。

Read more

AI 辅助开发实战:为前端毕设项目注入智能提效能力

最近在帮学弟学妹们看前端毕设,发现大家普遍卡在几个地方:选题要么是“电商后台”要么是“博客系统”,代码写得又慢又容易出bug,最后答辩时功能也显得平平无奇。其实,现在有了AI辅助开发工具,完全可以换个思路,让毕设既高效又有亮点。今天我就结合自己的实践,聊聊怎么用AI工具链给前端毕设“注入”智能提效能力。 1. 背景痛点:为什么前端毕设需要AI辅助? 先说说我观察到的几个普遍问题: 1. 选题重复与创新困境:超过一半的前端毕设题目集中在后台管理、电商、博客这几个领域。不是这些题目不好,而是同质化严重,很难在答辩中脱颖而出。学生往往因为缺乏灵感或技术储备,不敢尝试更有趣的方向。 2. 开发效率低下与周期紧张:毕设周期通常只有几个月,但前端开发涉及UI搭建、状态管理、接口联调、测试部署等多个环节。很多时间浪费在写重复的样板代码(如表格组件、表单验证)和调试一些低级错误上,导致核心功能开发时间被严重挤压。 3. 工程规范缺失与代码质量参差:由于教学更侧重知识点而非工程实践,很多同学的代码结构混乱,缺乏一致的编码规范、类型定义和单元测试。这不仅影响代码可维护性,也给后期调试和扩展带来

By Ne0inhk
Flutter for OpenHarmony:web 拥抱 Web 标准的桥梁(Wasm GC 与 DOM 互操作) 深度解析与鸿蒙适配指南

Flutter for OpenHarmony:web 拥抱 Web 标准的桥梁(Wasm GC 与 DOM 互操作) 深度解析与鸿蒙适配指南

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net 前言 随着 Flutter 3.x 全面拥抱 Wasm(WebAssembly),Dart 团队推出了全新的 package:web 来取代老旧的 dart:html。 package:web 是基于最新的 JS Interop 机制构建的,它不仅性能更好,而且兼容 Wasm GC 标准。 虽然这个库通过名字看是为 “Web” 平台的,但对于 OpenHarmony 开发者来说,了解它有着特殊的意义: 1. 混合开发:鸿蒙原生支持 ArkWeb (WebView),在 Flutter 中通过 JS互操作与 Web 页面交互是常见需求。 2.

By Ne0inhk
Flutter for OpenHarmony:shelf_web_socket 快速构建 WebSocket 服务端,实现端到端实时通信(WebSocket 服务器) 深度解析与鸿蒙适配指南

Flutter for OpenHarmony:shelf_web_socket 快速构建 WebSocket 服务端,实现端到端实时通信(WebSocket 服务器) 深度解析与鸿蒙适配指南

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net 前言 在移动应用开发中,我们通常扮演“客户端”的角色,去连接远程的 WebSocket 服务。但有时,我们需要在设备本身运行一个微型服务器,例如用于局域网内的设备发现、P2P 文件传输信令,或者在调试模式下作为数据广播源。 shelf_web_socket 是基于 Dart 标准 Web 服务器框架 shelf 的 WebSocket 处理器。它能让你在 Flutter 应用(包括 OpenHarmony)中轻松启动一个能够处理 WebSocket 连接的 HTTP 服务。 一、核心概念 * Shelf: Dart 的 Web 服务器中间件管道框架(类似 Express.

By Ne0inhk
.NET 的 WebApi 项目必要可配置项都有哪些?

.NET 的 WebApi 项目必要可配置项都有哪些?

目录 一、数据库配置 (一)选择合适的数据库提供程序 (二)配置数据库连接字符串 (三)数据库迁移(以 EF Core 为例) 二、依赖注入配置 (一)理解依赖注入 (二)注册服务 (三)使用依赖注入 三、Swagger 配置 (一)安装 Swagger 相关包 (二)配置 Swagger 服务 (三)启用 Swagger 中间件 四、接口接收和输出大小写配置 (一)接口接收大小写配置 (二)接口输出大小写配置 五、跨域配置 (一)什么是跨域 (二)配置跨域 六、身份验证与授权配置

By Ne0inhk