从零开始：用Visual Studio 2022和ASP.NET Core快速搭建你的第一个Razor Pages网站

从零开始用Visual Studio 2022和ASP.NET Core快速搭建你的第一个Razor Pages网站第一次打开Visual Studio 2022时那个深色主题的启动界面让我想起了小时候第一次组装乐高积木的兴奋感。作为一个完全没接触过.NET开发的菜鸟我原本以为搭建一个动态网站需要掌握无数晦涩难懂的概念但Razor Pages的出现彻底改变了我的认知——它就像是为新手量身定制的脚手架让你在2小时内就能看到自己的代码变成真实可交互的网页。1. 开发环境准备安装与配置在开始敲代码之前我们需要确保电脑上已经安装了正确的工具链。Visual Studio 2022社区版是微软提供的免费IDE它集成了开发ASP.NET Core应用所需的一切组件。安装步骤要点访问Visual Studio官网下载安装程序选择ASP.NET和Web开发工作负载勾选.NET Core跨平台开发组件建议安装位置使用默认路径约需要8GB磁盘空间安装完成后第一次启动时会让你选择开发环境设置。对于新手我推荐颜色主题深色减少眼睛疲劳开发设置常规保留默认快捷键启动时显示起始页方便快速创建新项目注意如果遇到.NET SDK未正确安装的情况可以单独下载最新版.NET 6.0 SDK进行补充安装。2. 创建第一个Razor Pages项目在Visual Studio的起始页点击创建新项目这里有个新手容易困惑的地方——ASP.NET Core提供了多种项目模板。我们需要选择的是ASP.NET Core Web应用而不是MVC或Web API。项目配置关键参数选项推荐值说明项目名称MyFirstRazorApp不要包含空格和特殊字符位置自定义文件夹建议建立专用开发目录解决方案名称与项目同名保持简单一致框架.NET 6.0长期支持版本身份验证类型无初学者暂不需要配置HTTPS勾选现代Web应用标配启用Docker不勾选进阶功能后续学习创建完成后解决方案资源管理器会显示默认生成的文件结构。对于完全的新手这几个文件最重要Pages文件夹存放所有Razor页面Pages/Index.cshtml网站首页Pages/Shared/_Layout.cshtml全局布局文件wwwroot静态资源目录图片/CSS/JS3. 理解Razor Pages基础架构Razor Pages采用了一种独特的页面模型架构将前端展示和后端逻辑完美封装在同一个上下文中。这与传统的MVC模式相比学习曲线更加平缓。典型的Razor Page由两个文件组成.cshtml文件 - 包含HTML标记和Razor语法.cshtml.cs文件 - 包含C#代码处理逻辑例如我们来看自动生成的Index.cshtml页面page model IndexModel { ViewData[Title] Home page; } div classtext-center h1 classdisplay-4Welcome/h1 pLearn about a hrefhttps://docs.microsoft.com/aspnet/corebuilding Web apps with ASP.NET Core/a./p /div对应的Index.cshtml.cs文件则包含using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; namespace MyFirstRazorApp.Pages { public class IndexModel : PageModel { public void OnGet() { } } }这种设计让新手可以很直观地理解当用户访问这个页面时框架会先执行OnGet()方法然后渲染HTML内容。4. 添加动态内容与数据绑定让我们给首页增加一些简单的动态功能。修改Index.cshtml.cs文件public class IndexModel : PageModel { public string WelcomeMessage { get; set; } public DateTime CurrentTime { get; set; } public void OnGet() { WelcomeMessage Hello, Razor Pages新手; CurrentTime DateTime.Now; } }然后在Index.cshtml中使用这些数据div classtext-center h1 classdisplay-4Model.WelcomeMessage/h1 p当前服务器时间: Model.CurrentTime.ToString(F)/p /div这个小例子展示了Razor Pages的几个核心特性Model语法访问PageModel中定义的属性C#代码与HTML标记的无缝混合服务端渲染的动态内容5. 创建新页面与基础路由添加一个新页面About只需三个简单步骤在Pages文件夹右键 → 添加 → 新建项选择Razor Page模板命名为About.cshtml点击添加按钮VS会自动生成一对文件About.cshtmlAbout.cshtml.cs修改About页面的内容page model MyFirstRazorApp.Pages.AboutModel { ViewData[Title] 关于我们; } h2ViewData[Title]/h2 p这是我们用Razor Pages创建的第一个网站/pRazor Pages的路由规则非常直观Pages/Index.cshtml→/Pages/About.cshtml→/AboutPages/Contact.cshtml→/Contact如果想创建多级URL只需在Pages文件夹下创建子文件夹。例如Pages/Products/Index.cshtml→/ProductsPages/Products/Detail.cshtml→/Products/Detail6. 调试与常见问题解决按下F5启动调试时可能会遇到几个典型问题问题1端口已被占用解决方法netstat -ano | findstr :5000 taskkill /PID [进程ID] /F问题2浏览器未自动打开检查launchSettings.json文件{ profiles: { MyFirstRazorApp: { commandName: Project, launchBrowser: true, applicationUrl: https://localhost:5001;http://localhost:5000, environmentVariables: { ASPNETCORE_ENVIRONMENT: Development } } } }问题3修改未生效尝试以下步骤清除浏览器缓存在VS中点击生成 → 重新生成解决方案停止调试后再次启动调试过程中善用这些工具会事半功倍断点调试在代码行左侧点击设置输出窗口查看日志浏览器开发者工具F127. 进阶技巧列表数据展示让我们实现一个稍微复杂点的功能——在页面上显示产品列表。首先在PageModel中定义数据public class Product { public int Id { get; set; } public string Name { get; set; } public decimal Price { get; set; } } public class IndexModel : PageModel { public ListProduct Products { get; set; } public void OnGet() { Products new ListProduct { new Product { Id 1, Name 笔记本电脑, Price 5999 }, new Product { Id 2, Name 智能手机, Price 3999 }, new Product { Id 3, Name 无线耳机, Price 899 } }; } }然后在Razor页面中使用foreach渲染列表table classtable thead tr thID/th th名称/th th价格/th /tr /thead tbody foreach (var product in Model.Products) { tr tdproduct.Id/td tdproduct.Name/td tdproduct.Price.ToString(C)/td /tr } /tbody /table这个例子展示了在PageModel中定义复杂数据类型使用Razor语法循环渲染HTMLBootstrap表格样式的应用8. 部署准备与发布选项当网站开发完成后你可能想把它分享给朋友访问。VS提供了多种发布选项发布到本地文件夹最简单的方式右键项目 → 发布选择文件夹目标配置发布设置部署模式框架依赖较小目标运行时可移植跨平台点击发布按钮生成的发布文件可以复制到任何支持.NET Core的服务器使用命令行运行dotnet MyFirstRazorApp.dll其他发布选项对比发布目标难度适用场景备注Azure应用服务中等生产环境需要Azure账号Docker容器较高云原生部署需学习DockerIIS服务器中等Windows服务器需安装Hosting Bundle对于新手我建议先从本地文件夹发布开始熟悉基本流程后再尝试其他方式。