.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 Agent新范式:FastGPT+MCP协议实现工具增强型智能体构建

AI Agent新范式:FastGPT+MCP协议实现工具增强型智能体构建

AI Agent新范式:FastGPT+MCP协议实现工具增强型智能体构建 作者:高瑞冬 本文目录 * AI Agent新范式:FastGPT+MCP协议实现工具增强型智能体构建 * 一、MCP协议简介 * 二、创建MCP工具集 * 1. 获取MCP服务地址 * 2. 在FastGPT中创建MCP工具集 * 三、测试MCP工具 * 四、AI模型调用MCP工具 * 1. 调用单个工具 * 2. 调用整个工具集 * 五、私有化部署支持 * 1. 环境准备 * 2. 修改docker-compose.yml文件 * 3. 修改FastGPT配置 * 4. 重启服务 * 六、使用MCP-Proxy集成多个MCP服务 * 1. MCP-Proxy简介 * 2. 安装MCP-Proxy * 3. 配置MCP-Proxy * 4. 将MCP-Proxy与FastGPT集成 * 5. 高级配置

By Ne0inhk
【大模型实战篇】基于Claude MCP协议的智能体落地示例

【大模型实战篇】基于Claude MCP协议的智能体落地示例

1. 背景         之前我们在《MCP(Model Context Protocol) 大模型智能体第一个开源标准协议》一文中,介绍了MCP的概念,虽然了解了其概念、架构、解决的问题,但还缺少具体的示例,来帮助进一步理解整套MCP框架如何落地。         今天我们基于claude的官方例子--获取天气预报【1】,来理解MCP落地的整条链路。 2. MCP示例         该案例是构建一个简单的MCP天气预报服务器,并将其连接到主机,即Claude for Desktop。从基本设置开始,然后逐步发展到更复杂的使用场景。         大模型虽然能力非常强,但其弊端就是内容是过时的,这里的过时不是说内容很旧,只是表达内容具有非实时性。比如没有获取天气预报和严重天气警报的能力。因此我们将使用MCP来解决这一问题。         构建一个服务器,该服务器提供两个工具:获取警报(get-alerts)和获取预报(get-forecast)。然后,将该服务器连接到MCP主机(在本例中为Claude for Desktop)。         首先我们配置下环

By Ne0inhk
基于腾讯云HAI + DeepSeek快速设计自己的个人网页

基于腾讯云HAI + DeepSeek快速设计自己的个人网页

前言:通过结合腾讯云HAI 强大的云端运算能力与DeepSeek先进的 AI技术,本文介绍高效、便捷且低成本的设计一个自己的个人网页。你将了解到如何轻松绕过常见的技术阻碍,在腾讯云HAI平台上快速部署DeepSeek模型,仅需简单几步,就能获取一个包含个人简介、技能特长、项目经历及联系方式等核心板块的响应式网页。 目录 一、DeepSeek模型部署在腾讯云HAI 二、设计个人网页 一、DeepSeek模型部署在腾讯云HAI 把 DeepSeek 模型部署于腾讯云 HAI,用户便能避开官网访问限制,直接依托腾讯云 HAI 的超强算力运行 DeepSeek-R1 等模型。这一举措不仅降低了技术门槛,还缩短了部署时间,削减了成本。尤为关键的是,凭借 HAI 平台灵活且可扩展的特性,用户能够依据自身特定需求定制专属解决方案,进而更出色地适配特定业务场景,满足各类技术要求 。 点击访问腾讯云HAI控制台地址: 算力管理 - 高性能应用服务 - 控制台 腾讯云高性能应用服务HAI已支持DeepSeek-R1模型预装环境和CPU算力,只需简单的几步就能调用DeepSeek - R1

By Ne0inhk
AI革命先锋:DeepSeek与蓝耘通义万相2.1的无缝融合引领行业智能化变革

AI革命先锋:DeepSeek与蓝耘通义万相2.1的无缝融合引领行业智能化变革

云边有个稻草人-ZEEKLOG博客 目录 引言 一、什么是DeepSeek? 1.1 DeepSeek平台概述 1.2 DeepSeek的核心功能与技术 二、蓝耘通义万相2.1概述 2.1 蓝耘科技简介 2.2 蓝耘通义万相2.1的功能与优势 1. 全链条智能化解决方案 2. 强大的数据处理能力 3. 高效的模型训练与优化 4. 自动化推理与部署 5. 行业专用解决方案 三、蓝耘通义万相2.1与DeepSeek的对比分析 3.1 核心区别 3.2 结合使用的优势 四、蓝耘注册流程 五、DeepSeek与蓝耘通义万相2.1的集成应用 5.1 集成应用场景 1. 智能医疗诊断

By Ne0inhk