.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

前端如何应对精确数字运算?用BigNumber.js解决JavaScript原生Number类型在处理大数或高精度计算时的局限性

前端如何应对精确数字运算?用BigNumber.js解决JavaScript原生Number类型在处理大数或高精度计算时的局限性

目录 前端如何应对精确数字运算?用BigNumber.js解决JavaScript原生Number类型在处理大数或高精度计算时的局限性 一、BigNumber.js介绍 1、什么是 BigNumber.js? 2、作用领域 3、核心特性 二、安装配置与基础用法 1、引入 BigNumber.js 2、配置 BigNumber.js 3、常用方法 ①创建 BigNumber 实例 ②基本运算 ③幂运算 ④绝对值 ⑤舍入 ⑥比较 ⑦格式化输出 ⑧链式调用 三、核心特性 1、大数精度丢失问题 2、小数运算精度问题 3、大数乘除法精度问题 四、总结         作者:watermelo37         ZEEKLOG万粉博主、

前端无障碍性:让所有人都能使用你的网站

前端无障碍性:让所有人都能使用你的网站 毒舌时刻 前端无障碍性?这不是给残障人士用的吗? "我的网站不需要无障碍性,用户都是正常人"——结果被投诉歧视, "无障碍性太麻烦了,我没时间做"——结果失去了一部分用户, "无障碍性就是加几个alt标签而已"——结果网站在屏幕阅读器下完全不可用。 醒醒吧,无障碍性不是慈善,而是一种责任! 为什么你需要这个? * 法律合规:许多国家和地区都有无障碍性法规 * 扩大用户群体:让残障人士也能使用你的网站 * SEO优化:无障碍性好的网站更容易被搜索引擎收录 * 用户体验:对所有人都友好的设计,对正常人也有好处 反面教材 <!-- 反面教材:缺乏语义化HTML --> <div> <div>网站logo</div> <

大模型对话中的流式响应前端实现详解(附完整示例代码)

大模型对话中的流式响应前端实现详解 1. 流式响应概述 1.1 什么是流式响应 流式响应(Streaming Response)是指在大模型对话中,服务器将生成的内容以增量、实时的方式逐步发送到前端,而不是一次性返回完整响应。前端通过接收这些数据流,逐词或逐段展示给用户,模拟“打字机”效果,提升交互的实时性和自然感。这类似于人类对话中的逐步思考和表达过程。 1.2 为什么流式响应重要 在大模型对话中,响应可能较长(如数百个token),一次性返回会导致用户等待时间过长,造成卡顿感。流式响应的优势包括: * 降低感知延迟:用户立即看到部分内容,减少等待焦虑。 * 提升交互体验:更接近真人对话节奏,增强沉浸感。 * 节省资源:前端可以逐步渲染内容,避免大块数据处理带来的内存压力。 * 实时反馈:允许用户在响应生成过程中中断或调整请求,提高可控性。 2. 前端可实现方案 2.1 Server-Sent Events (SSE) SSE是一种基于HTTP的单向通信协议,服务器可以主动向客户端推送数据流。

Flutter 三方库 flutter_dropzone 的鸿蒙化适配指南 - 掌握万物皆可拖拽的资源流转技术、助力鸿蒙大屏与 Web 应用构建极致直观的文件导入与交互体系

Flutter 三方库 flutter_dropzone 的鸿蒙化适配指南 - 掌握万物皆可拖拽的资源流转技术、助力鸿蒙大屏与 Web 应用构建极致直观的文件导入与交互体系

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net Flutter 三方库 flutter_dropzone 的鸿蒙化适配指南 - 掌握万物皆可拖拽的资源流转技术、助力鸿蒙大屏与 Web 应用构建极致直观的文件导入与交互体系 前言 在 OpenHarmony 鸿蒙应用全场景覆盖、特别是适配鸿蒙桌面模式(Desktop Mode)、折叠屏大屏交互及鸿蒙 Web 版推送的工程实战中,“文件拖拽(Drag and Drop)”已成为提升生产力效率的标配功能。用户希望能够像在 PC 上一样,直接将图片或文档拖入应用窗口即可完成上传。如何实现这种跨越边界的直观交互?flutter_dropzone 作为一个专注于“拖放区域感知与文件流提取”的库,旨在为鸿蒙开发者提供一套标准的拖放治理方案。本文将详述其在鸿蒙端的实战技法。 一、原原理分析 / 概念介绍 1.1 基础原理 flutter_dropzone