大家好，我是第八哥，一个有十年.NET开发经验的老码农。今天带大家轻松入门ASP.NET Core。无论你是新手还是想转行，跟着我，带你一步步搭建属于自己的首个Web应用。
咱们的目标是让你30分钟内上手，消除入门恐惧感。
为什么选择ASP.NET Core？
作为微软推出的现代化Web开发框架，ASP.NET Core凭借其创新架构在开发者社区广受推崇，主要体现在以下三个关键维度：
全平台兼容性
采用真正的跨平台设计，无缝支持Windows、macOS及Linux操作系统，配合Docker容器化部署能力，彻底打破传统.NET框架的平台限制。
模块化架构体系
通过中间件(Middleware)管道设计和依赖注入(DI)机制，开发者可灵活组合功能模块，如同构建乐高积木般实现按需装配，显著提升代码复用率。
高性能运行时
基于优化的Kestrel Web服务器和精简的运行时环境，基准测试显示其请求处理速度较传统ASP.NET提升达5-8倍，特别适合高并发场景应用。
核心概念三剑客
在ASP.NET Core开发中，Controller、Model和View是MVC架构的三大核心组件，它们的作用和协作方式如下：
1. Controller（控制器）
就像餐厅的服务员，负责处理用户请求。它接收HTTP请求（如URL路由），调用业务逻辑（Model层），最后决定返回哪个View或数据。关键特点：继承Controller基类，方法称为"Action"，返回IActionResult，通过依赖注入获取服务。
2. Model（模型）
相当于餐厅的厨师和后厨系统，包含核心业务逻辑和数据。主要分为两种类型：
领域模型：业务实体（如Product类）
视图模型：专为View定制的数据包装（如ProductViewModel）
3. View（视图）
如同餐厅的摆盘呈现，负责UI展示。采用Razor语法（混合HTML和C#）：文件扩展名为.cshtml，通过@model指令强类型绑定数据，支持布局页（_Layout.cshtml）复用UI。
常用功能：表单生成、局部视图、Tag Helpers
实战步骤
现在我们就来动手实现一个简单的CRUD操作。打开Visual Studio，新建一个项目，选择ASP.NET Core Web 应用(MVC) 模板。创建完成后的项目结构如下（默认自动创建HomeController及对应的Home文件夹，按F5可直接运行）：
WebApplication1
|---wwwroot // 静态资源文件夹
|---Controllers // 控制器文件夹
|---Models // 模型实体类文件夹
|---Views // 视图文件夹
|---Home // 对应HomeController
|---Shared // 公共视图
|---appsettings.json // 配置文件
|---Program.cs // 程序入口文件我们在Controllers文件夹中新建一个产品控制器ProductController，在Models文件夹中新建产品的实体类Product，打开ProductController，在方法（如 Index）中右击，选择添加视图 -> Razor 视图 - 空，名称填写对应方法名称（如 Index.cshtml），确认后VS就会自动在Views文件夹下创建一个当前控制器名称对应的文件夹Product，并在Product文件夹下创建一个空的Index.cshtml文件。文件结构如下图所示：
相关文件的代码如下：
前端 - Index.cshtml：
@model IEnumerable<Product>
@{
ViewData["Title"] = "产品列表";
}
<h1>产品列表</h1>
<p>
<a asp-action="Create" class="btn btn-primary">创建新产品</a>
</p>
<table class="table">
<thead>
<tr>
<th>产品名称</th>
<th>产品描述</th>
<th>产品价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Name</td>
<td>@item.Description</td>
<td>¥@item.Price</td>
<td>
<a asp-action="Detail" asp-route-id="@item.Id" class="btn btn-info btn-sm">详情</a>
<a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-warning btn-sm">编辑</a>
<button type="button" class="btn btn-danger btn-sm" onclick="handleDelete(@item.Id)">删除</button>
</td>
</tr>
}
</tbody>
</table>
<!-- 删除确认对话框 -->
<div class="modal fade" id="delModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">删除产品</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<input type="hidden" id="Id" name="Id" />
确定要删除这个产品吗？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnDel">确定</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<script>
function handleDelete(id){
$('#Id').val(id)
$('#delModal').modal('show');
}
document.getElementById('btnDel').addEventListener('click', function(){
let id = document.getElementById('Id').value;
$.post("/Product/Delete", {id: id}, function(res){
location.reload()
})
})
</script>前端 - Detail.cshtml
@model Product
@{
ViewData["Title"] = "产品详情";
}
<h1>产品详情</h1>
<div>
<div class="mb-3 row">
<div class="col-sm-2">产品名称:</div>
<div class="col-sm-10">@Model.Name</div>
</div>
<div class="mb-3 row">
<div class="col-sm-2">产品描述:</div>
<div class="col-sm-10">@Model.Description</div>
</div>
<div class="mb-3 row">
<div class="col-sm-2">产品价格:</div>
<div class="col-sm-10">@Model.Price</div>
</div>
<div class="row">
<div class="col">
<a asp-action="Edit" asp-route-id="@Model.Id" class="btn btn-primary">编辑</a>
<a asp-action="Index" class="btn btn-secondary">返回列表</a>
</div>
</div>
</div>前端 - Create.cshtml
@model Product
@{
ViewData["Title"] = "创建产品";
}
<h1>创建产品</h1>
<form asp-action="Create">
<div class="mb-3 mt-3">
<label for="Name" class="form-label">产品名称:</label>
<input class="form-control" id="Name" placeholder="产品名称" name="Name">
</div>
<div class="mb-3">
<label for="Description" class="form-label">产品描述:</label>
<textarea class="form-control" id="Description" placeholder="产品描述" name="Description"></textarea>
</div>
<div class="mb-3 mt-3">
<label for="Price" class="form-label">产品价格:</label>
<input class="form-control" id="Price" placeholder="产品价格" name="Price">
</div>
<div class="row">
<div class="col">
<button type="submit" class="btn btn-primary">创建</button>
<a asp-action="Index" class="btn btn-secondary">返回列表</a>
</div>
</div>
</form>前端 - Edit.cshtml
@model Product
@{
ViewData["Title"] = "编辑产品";
}
<h1>编辑产品</h1>
<form>
<input type="hidden" id="Id" name="Id" value="@Model.Id" />
<div class="mb-3 mt-3">
<label for="Name" class="form-label">产品名称:</label>
<input class="form-control" id="Name" placeholder="产品名称" name="Name" value="@Model.Name">
</div>
<div class="mb-3">
<label for="Description" class="form-label">产品描述:</label>
<textarea class="form-control" id="Description" placeholder="产品描述" name="Description">@Model.Description</textarea>
</div>
<div class="mb-3 mt-3">
<label for="Price" class="form-label">产品价格:</label>
<input class="form-control" id="Price" placeholder="产品价格" name="Price" value="@Model.Price">
</div>
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary" id="btnEdit">修改</button>
<a asp-action="Index" class="btn btn-secondary">返回列表</a>
</div>
</div>
</form>
<script>
document.getElementById('btnEdit').addEventListener('click', function(){
const postData = {
id: document.getElementById('Id').value,
name: document.getElementById('Name').value,
description: document.getElementById('Description').value,
price: document.getElementById('Price').value
};
$.ajax({
url: "/Product/Edit",
type: "POST",
contentType: "application/json",
data: JSON.stringify(postData),
success: function (res) {
console.log("响应数据:", res);
}
});
})
</script>后端：
/// <summary>
/// 产品实体类
/// </summary>
public class Product
{
public int Id { get; set; }
/// <summary>
/// 产品名称
/// </summary>
public string Name { get; set; }
/// <summary>
/// 产品描述
/// </summary>
public string Description { get; set; }
/// <summary>
/// 产品价格
/// </summary>
public decimal Price { get; set; }
}
/// <summary>
/// 产品控制器
/// </summary>
public class ProductController : Controller
{
// 产品列表，演示用，实际项目需从数据库中查询
private static List<Product> products = new List<Product>()
{
new Product
{
Id = 1,
Name = "手机",
Description = "智能手机",
Price = 1000
}
};
public IActionResult Index()
{
return View(products);
}
// GET: Product/Detail/1
public IActionResult Detail(int? id)
{
if(id == null) return NotFound();
// 根据id查询具体的产品信息
var product = products.FirstOrDefault(x => x.Id == id);
if(product == null) return NotFound();
return View(product);
}
// GET: Product/Create
public IActionResult Create()
{
return View();
}
// POST: Product/Create
[HttpPost]
public IActionResult Create(Product product)
{
if(products.Count > 0)
{
product.Id = products.Max(p => p.Id) + 1;
}
else
{
product.Id = 1;
}
products.Add(product);
return View();
}
// GET: Product/Edit/1
public IActionResult Edit(int? id)
{
if (id == null) return NotFound();
// 根据id查询具体的产品信息
var product = products.FirstOrDefault(x => x.Id == id);
if (product == null) return NotFound();
return View(product);
}
// POST: Product/Edit
[HttpPost]
public IActionResult Edit([FromBody]Product product)
{
if (product == null) return NotFound();
// 根据id查询具体的产品信息
var tmpProduct = products.FirstOrDefault(x => x.Id == product.Id);
if (tmpProduct == null) return NotFound();
tmpProduct.Name = product.Name;
tmpProduct.Description = product.Description;
tmpProduct.Price = product.Price;
return Ok(1);
}
// POST: Product/Delete
[HttpPost]
public IActionResult Delete(int? id)
{
if (id == null) return NotFound();
// 根据id查询具体的产品信息
var product = products.FirstOrDefault(x => x.Id == id);
if (product == null) return NotFound();
products.Remove(product);
return Ok(1);
}
}上面的代码，仅用于演示，未对参数进行校验。具体项目中，会用到一些框架及UI来辅助开发，创建精美的页面。之后我会再写一篇进阶版的，包括数据库的操作。上面的页面，默认使用的布局是Shared文件夹下的 _Layout.cshtml，如果需要给不同页面指定不同的布局样式，可以参照下面的代码进行设置：
@{
Layout = "_Layout_Style.cshtml"; // 使用其他布局样式
ViewData["Title"] = "产品列表";
}调试与运行
本地调试时按F5启动，用断点检查变量的值，常见技巧包括日志输出和异常处理。发布时，IIS部署也很简单，部署教程及一些常见的问题，可以参考我的另一篇文章 资深.NET开发者实战：ASP.NET Core MVC部署到IIS详细步骤与常见问题解决方案。
总结与资源推荐
恭喜！你已经搭建了首个ASP.NET Core Web应用，虽然比较简陋，但是基本的CRUD的操作都有了。
之后学习路径建议：先掌握基础，再学高级如身份验证等。
推荐资源：微软官方文档链接。
持续练习是关键，遇到问题随时问我。Web开发之路，从此不再迷茫。
评论