.NETCoreWeb开发实战案例代码详解

是不是学了.NET Core 基础后，想做个 Web 项目却不知道从哪下手？控制器、视图、模型怎么配合总搞不清，写了表单提交却收不到数据，好不容易存了数据又显示不出来？其实啊，.NET Core Web 开发的核心是 “MVC 模式”—— 模型存数据、视图展页面、控制器处理逻辑，把这三者理顺了，做项目就顺多了。今天兔子哥就带大家做个 “简易留言板” 实战案例，从创建项目到代码详解，每个步骤都讲透，新手常问的 “数据怎么传”“表单怎么提交”“页面怎么显示” 这些问题，咱们一个个说清楚，一起往下看吧！

案例介绍：做个能留言的 Web 页面，包含这些核心功能

咱们要做的留言板虽然简单，但包含了.NET Core Web 开发的核心流程：

• 显示留言列表（从数据到页面的展示）；
• 提交新留言（表单数据传到控制器）；
• 存储留言数据（用列表临时存数据）。
  做完这个案例，你就能明白 MVC 模式到底怎么工作的，以后做复杂项目也能举一反三。

基础问题：为什么选留言板做案例？新手练这个有啥好处？

留言板功能简单但完整：有页面展示（视图）、有数据处理（控制器）、有数据存储（模型），刚好覆盖 MVC 的核心要素。而且逻辑不复杂，新手能快速看到效果，不容易劝退。有个粉丝练完这个案例后说：“原来控制器就是接数据、存数据的，视图就是把数据显示出来，一下子就懂了 MVC 是啥意思。”

场景问题：做这个案例需要准备啥？环境搭好了就能做吗？

只要你装好.NET Core SDK（6.0 或 7.0 LTS 版）和 Visual Studio 2022，就能直接做。项目用 “ASP.NET Core Web 应用（模型 - 视图 - 控制器）” 模板，不用额外装插件，新建项目就能开始写代码，特别方便。

第一步：创建 MVC 项目，搭好基础框架

先把项目架子搭起来，这一步不难，但路径和模板别选错。

步骤 1：新建 MVC 项目

1. 打开 Visual Studio 2022，点 “创建新项目”；
2. 搜 “ASP.NET Core Web 应用（模型 - 视图 - 控制器）”，选 C# 语言，点 “下一步”；
3. 项目名写 “MessageBoard”，位置选纯英文路径（比如D:\NETWebProjects），别用中文；
4. 框架选.NET 6.0（LTS 版稳定），点 “创建”，等项目加载完成（第一次可能慢点，耐心等）。

项目结构解析：MVC 的三个核心文件夹

• Models：放数据模型（比如留言的类，存每条留言的内容、时间）；
• Views：放页面文件（HTML+Razor 语法，负责显示内容）；
• Controllers：放控制器（C# 代码，负责接收请求、处理数据）。
  这三个文件夹就是 MVC 的核心，记住 “数据在 Models，页面在 Views，逻辑在 Controllers”，别搞混了。

第二步：核心代码详解，从数据到页面全流程

咱们分 “模型→控制器→视图” 三步写代码，每一步都讲清楚作用和细节。

1. 写模型：定义留言的数据结构

在Models文件夹右键→“添加→类”，名字写 “Message.cs”，代码：
csharp

namespace MessageBoard.Models{public class Message{// 留言内容public string Content { get; set; }// 留言时间public DateTime Time { get; set; }}}

代码解析：这个类就是 “模型”，用来存每条留言的内容和时间。public表示外部能访问，get; set;表示这两个属性能读能改，后面控制器要靠这个存数据。

---

2. 写控制器：处理留言提交和数据存储

在Controllers文件夹里找到HomeController.cs（默认就有），修改代码：
csharp

using Microsoft.AspNetCore.Mvc;using MessageBoard.Models;using System.Collections.Generic;namespace MessageBoard.Controllers{public class HomeController : Controller{// 用静态列表存留言（实际项目用数据库，这里简单处理）static List<Message> messages = new List<Message>();// 显示留言列表页面public IActionResult Index(){// 把留言列表传到视图ViewBag.Messages = messages;return View();}// 处理留言提交（接收表单数据）[HttpPost] // 表示这个方法接收POST请求（表单提交常用）public IActionResult AddMessage(string content){// 判断留言内容不为空if (!string.IsNullOrEmpty(content)){// 创建留言对象，存内容和当前时间var msg = new Message{Content = content,Time = DateTime.Now};// 加到列表里messages.Add(msg);}// 提交后跳回首页，显示最新留言return RedirectToAction("Index");}}}

代码解析：

• HomeController是首页的控制器，Index方法负责显示页面，AddMessage负责处理表单提交；
• ViewBag.Messages = messages：把留言列表传到视图，视图就能用这些数据了；
• [HttpPost]：表单提交默认用 POST 方式，加这个标签控制器才能收到数据；
• RedirectToAction("Index")：提交后跳回首页，这样刷新页面不会重复提交。

避坑点：控制器里要先using MessageBoard.Models;，不然找不到Message类。有个粉丝忘了加这句，报错 “找不到类型或命名空间”，加上后立马好了，新手常犯这个错。

---

3. 写视图：显示留言列表和提交表单

在Views/Home文件夹里找到Index.cshtml（首页视图），修改代码：
html

@{ViewData["Title"] = "简易留言板";}<div class="container"><h1>@ViewData["Title"]h1><form method="post" asp-action="AddMessage"><div><input type="text" name="content" placeholder="请输入留言内容" /><button type="submit">提交留言button>div>form><div class="messages"><h3>留言列表h3>@if (ViewBag.Messages != null && ViewBag.Messages.Count > 0){<ul>@foreach (var msg in ViewBag.Messages){<li><span>@msg.Contentspan><small>（@msg.Time.ToString("yyyy-MM-dd HH:mm")）small>li>}ul>}else{<p>暂无留言，快来写第一条吧！p>}div>div>

代码解析：

• asp-action="AddMessage"：告诉表单提交到控制器的AddMessage方法；
• name="content"：表单输入框的名字要和控制器方法的参数content一致，不然收不到数据；
• @foreach (var msg in ViewBag.Messages)：循环显示控制器传过来的留言列表，@符号表示后面是 C# 代码；
• @msg.Time.ToString(...)：格式化时间显示，不然默认时间格式太长不好看。

运行效果：看看你的留言板能不能用

点 Visual Studio 工具栏的绿色 “启动” 按钮（或按 F5），项目会自动启动浏览器，访问https://localhost:xxxx（端口自动分配）：

1. 在输入框输 “我的第一条留言”，点 “提交留言”；
2. 页面会刷新，下面的留言列表会显示你刚提交的内容和时间；
3. 再输几条不同的内容，会按提交顺序显示，说明你的留言板成功了！

常见错误及解决：新手 90% 会遇到这些问题

错误 1：表单提交后没收到数据，content总是空的

原因：表单输入框的name属性和控制器方法的参数名不一致。比如输入框name="msg"，控制器参数是string content，就收不到数据。
解决：确保name="content"和public IActionResult AddMessage(string content)的参数名完全一样，大小写也要注意（C# 区分大小写）。

错误 2：留言列表不显示，ViewBag.Messages是 null

原因：控制器里没给ViewBag.Messages赋值，或者赋值前列表没初始化。
解决：在控制器开头初始化列表static List messages = new List();，并在Index方法里加ViewBag.Messages = messages;。

错误 3：提交后页面报错 “找不到方法”

原因：表单没指定提交的方法，或者控制器方法没加[HttpPost]。
解决：表单加method="post"，控制器的AddMessage方法上面加[HttpPost]标签，确保请求方式匹配。

个人心得：MVC 模式没那么难，多练就能找到感觉

刚开始写 MVC 项目时，兔子哥也总搞不清数据怎么从表单传到控制器，又怎么从控制器传到视图。后来发现，关键是记住 “三个流动”：

• 数据从表单到控制器：靠表单name和方法参数对应；
• 数据从控制器到视图：靠ViewBag或模型传递；
• 页面跳转：靠RedirectToAction或return View()。

这个留言板案例虽然简单，但把这三个流动讲透了。新手别着急做复杂项目，先把这个案例改改试试：比如加个 “删除留言” 按钮，或者给留言加个用户名，一步步增加功能，慢慢就熟练了。
其实.NET Core Web 开发的乐趣在于 “即时反馈”—— 改一行代码，刷新页面就能看到变化，这种成就感能让你越学越有劲。按今天的案例练下去，你会发现 MVC 模式真的很清晰，做 Web 项目也没那么难，加油！

标签： NETWebProjects Visual Studio