一篇文章学会开发第一个ASP.NET网页

*开发环境:Visual Studio 2022 + ASP.NET Core 6.0*

一、开发环境准备

1.1 安装必备工具

验证安装:命令行执行 dotnet --version 显示6.0.x版本

1.2 创建新项目

  1. 打开VS2022 → 新建项目 → 选择「ASP.NET Core Web 应用」

  2. 项目模板选择「Web 应用(模型-视图-控制器)」

  3. 配置项目名称(例:FirstWebDemo)

  4. 其他设置保持默认 → 点击创建


二、项目结构解析

复制代码
FirstWebDemo/
├── Controllers/      # 控制器目录
├── Views/            # 视图目录
├── wwwroot/          # 静态资源目录
└── Program.cs        # 程序入口

三、编写第一个页面

3.1 创建控制器

cs 复制代码
// Controllers/HomeController.cs
public class HomeController : Controller
{
    public IActionResult Index()
    {
        ViewData["Message"] = "欢迎来到我的第一个ASP.NET页面!";
        return View();
    }
}

3.2 创建视图

cs 复制代码
@* Views/Home/Index.cshtml *@
@{
    ViewData["Title"] = "首页";
}

<div class="text-center">
    <h1 class="display-4">ASP.NET Core入门</h1>
    <p>@ViewData["Message"]</p>
    <p>当前时间:@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")</p>
</div>

四、运行与调试

  1. 按F5启动调试

  2. 浏览器自动打开 https://localhost:7123

  3. 你将看到:

    • 动态显示的欢迎信息

    • 实时服务器时间

    • Bootstrap默认样式页面


五、添加自定义页面

5.1 新建About页面

cs 复制代码
// 在HomeController中添加
public IActionResult About()
{
    return View();
}

5.2 创建对应视图

cs 复制代码
@* Views/Home/About.cshtml *@
@{
    ViewData["Title"] = "关于我们";
}

<h2>关于本网站</h2>
<p>这是使用ASP.NET Core构建的第一个示例网站</p>

六、常见问题排查

6.1 缺少.NET SDK

  • 症状:项目无法加载

  • 解决:访问.NET官网下载对应版本SDK

6.2 依赖项未还原

  • 症状:NuGet包错误

  • 解决:右键解决方案 → "还原NuGet包"

6.3 端口冲突

  • 解决:修改launchSettings.json中的端口号

七、学习建议

  1. 掌握Razor语法:@符号的使用

  2. 理解MVC模式:模型-视图-控制器的交互

  3. 学习中间件配置:Startup.cs文件的作用

  4. 推荐学习资源:


动手实践:尝试在页面中添加显示访问次数的功能(提示:使用Session或Cookie)

*原创声明:本文为CSDN博主「LcVong」原创,转载请附上原文出处链接。*

相关推荐
java小白小11 分钟前
SpringBoot(11):Spring Security 入门——让你的项目加上登录墙
后端
一只公羊16 分钟前
在 Ubuntu 26.04 宿主机上利用 Docker 构建低版本 glibc 兼容编译环境
后端
玉宇夕落16 分钟前
别被AI骗了!深度拆解 LLM Tool Use 背后的“缸中大脑”与代码真相
后端
程序员鱼皮17 分钟前
Codex 又出王炸功能「录制回放」,实战测评!附原理浅析
前端·后端·ai编程
云恒要逆袭34 分钟前
运行你的第一个Docker容器
后端·docker·容器
渣波34 分钟前
拒绝黑盒!NestJS + LangChain 实战保姆级拆解,手把手教你搞定双 Token 与 AI 大脑
前端·后端
MacroZheng41 分钟前
斩获20w star!Claude Code最强插件,AI编程必备!
java·人工智能·后端
IT_陈寒1 小时前
Vite打包后的路径问题差点让我改了一天代码
前端·人工智能·后端
铁皮饭盒1 小时前
Bun 多线程有多快?postMessage 传输字符串比 Node.js 快 400 倍!
前端·javascript·后端
葫芦和十三2 小时前
图解 MongoDB 12|索引与查询优化地图:一条主线,三个判断轴
后端·mongodb·agent