ASP.NET如何快速搭建网站？-网站相关-佑然科技平台

ASP.NET 网站开发教程：从零开始构建一个功能完整的网站

本教程将带你走过以下完整流程：

环境准备：安装所有必需的开发工具。
创建项目：使用 Visual Studio 创建第一个 ASP.NET Core MVC 项目。
项目结构解析：了解 MVC 模式和项目文件的作用。
构建网站核心功能：
- M (Model)：创建数据模型。
- V (View)：设计和编写用户界面。
- C (Controller)：处理用户请求和业务逻辑。
实现核心功能：
- 显示文章列表：主页展示所有文章。
- 显示文章详情：点击文章查看完整内容。
- 创建文章：通过表单发布新文章。
部署网站：将你的网站发布到互联网。

第一步：环境准备

在开始之前,你需要安装以下软件：

.NET SDK (Software Development Kit)
- 作用：这是运行和开发 ASP.NET Core 应用程序的核心，它包含了编译器、运行时和各种工具。
- 下载地址：https://dotnet.microsoft.com/download
- 建议版本：下载最新的 LTS (长期支持) 版本，.NET 8.0 或 .NET 6.0，对于初学者，新版本通常更好。
Visual Studio 2025 (Community Edition 社区版)
- 作用：功能强大的集成开发环境，编写、调试、运行代码的最佳选择，社区版是免费的，完全足够个人开发和小型项目使用。
- 下载地址：https://visualstudio.microsoft.com/zh-hans/vs/community/
- 安装时的重要选项：
  - 在安装程序中,确保勾选了 “.NET 桌面开发” 和 “ASP.NET 和 Web 开发” 工作负载，这会自动安装所有必需的组件。
  - 如果已经安装了 Visual Studio，可以通过“修改”选项来添加这些工作负载。

第二步：创建你的第一个 ASP.NET Core MVC 项目

打开 Visual Studio 2025。
点击 “创建新项目” (Create a new project)。
在模板搜索框中输入 ASP.NET Core，然后选择 “ASP.NET Core Web App (Model-View-Controller)” 模板，这个模板为我们搭建好了 MVC 的基本框架，点击 “下一步”。

配置你的新项目：
- 项目名称：给你的项目起一个名字，MyBlog。
- 位置：选择一个你想要保存项目的文件夹。
- 解决方案名称：可以和项目名一样。
- 确保顶部的下拉框选择了 “.NET 8.0” (或你安装的 LTS 版本)。
- 点击 “创建”。
Visual Studio 会为你生成一个完整的项目结构，点击绿色的按钮来运行和调试你的网站，浏览器会自动打开，并显示一个默认的欢迎页面。

恭喜！你已经成功创建了第一个 ASP.NET Core 网站。

第三步：理解项目结构

在开始编写代码之前,花几分钟熟悉一下 Visual Studio 为你创建的项目结构，在 “解决方案资源管理器” (Solution Explorer) 窗口中，你会看到以下关键文件夹：

Controllers (控制器)：存放处理用户请求的 C# 类，当用户访问一个 URL (/Home/Index) 时，对应的 Controller 就会被执行。
Models (模型)：存放代表你网站数据的 C# 类，文章、用户、评论等都是模型，它定义了数据的结构和行为。
Views (视图)：存放用户看到的 HTML 页面，通常是 Razor 语法（HTML 和 C# 的混合）编写的文件，Controller 执行完毕后，会选择一个 View 来渲染并返回给用户。
wwwroot：存放所有静态文件，如 CSS 样式表、JavaScript 文件、图片、字体等。
Program.cs：应用程序的入口点，在这里配置服务（如数据库、中间件）和请求管道。
appsettings.json：存放应用程序的配置信息，如数据库连接字符串、日志级别等。
_Layout.cshtml 和 _ViewStart.cshtml (位于 Views/Shared 文件夹)：这些是共享的视图文件。_Layout.cshtml 定义了整个网站的公共布局（如头部 <head>、导航栏 <nav>、页脚 <footer>），所有其他页面都会“套用”这个布局。

MVC 工作流程简述：

用户在浏览器中输入一个 URL，如 https://localhost:xxxx1/Articles/Details/5。
请求到达服务器,ASP.NET Core 路由系统将其映射到 ArticlesController 控制器的 Details 方法，并传入参数 id=5。
Details 方法根据 id=5 从数据库中查找对应的文章数据。
找到数据后,方法将文章数据传递给 Details.cshtml 视图。
视图使用这些数据生成最终的 HTML 页面，并返回给用户的浏览器。

第四步：构建核心功能

我们来为这个网站添加核心功能：一个简单的博客系统，可以显示文章列表、查看文章详情和发布新文章。

创建数据模型

我们需要定义“文章”应该包含哪些信息。

在 “解决方案资源管理器” 中，右键点击 Models 文件夹，选择 “添加” -> “类...”。
将类命名为 Article.cs。
打开 Article.cs，输入以下代码：

// Models/Article.cs
using System.ComponentModel.DataAnnotations;
namespace MyBlog.Models
{
    public class Article
    {
        public int Id { get; set; } // 文章的唯一ID
        [Required] // 数据验证：标题不能为空
        [StringLength(100)] // 标题最大长度为100
        public string Title { get; set; }
        [Required] // 内容不能为空
        public string Content { get; set; }
        public DateTime CreatedAt { get; set; } // 创建时间
    }
}

这里我们定义了 Article 模型，它有 Id、Title、Content 和 CreatedAt 四个属性，我们使用了 DataAnnotations 命名空间下的特性（如 [Required]）来添加数据验证规则。

创建控制器

控制器负责处理逻辑和返回视图。

在 “解决方案资源管理器” 中，右键点击 Controllers 文件夹，选择 “添加” -> “控制器...”。
选择 “MVC 控制器 - 空”，然后点击 “添加”。
将控制器命名为 ArticlesController.cs。
打开 ArticlesController.cs，输入以下代码：

// Controllers/ArticlesController.cs
using Microsoft.AspNetCore.Mvc;
using MyBlog.Models;
using System.Collections.Generic;
using System.Linq;
namespace MyBlog.Controllers
{
    public class ArticlesController : Controller
    {
        // 模拟一个数据库，实际项目中应使用真实数据库
        private static List<Article> _articles = new List<Article>();
        private static int _nextId = 1;
        // GET: /Articles
        // 显示文章列表
        public IActionResult Index()
        {
            // 从“数据库”中获取所有文章，并按创建时间倒序排列
            var model = _articles.OrderByDescending(a => a.CreatedAt).ToList();
            return View(model);
        }
        // GET: /Articles/Details/5
        // 显示文章详情
        public IActionResult Details(int id)
        {
            var article = _articles.FirstOrDefault(a => a.Id == id);
            if (article == null)
            {
                return NotFound(); // 如果找不到文章，返回404
            }
            return View(article);
        }
        // GET: /Articles/Create
        // 显示创建文章的表单
        public IActionResult Create()
        {
            return View();
        }
        // POST: /Articles/Create
        // 处理创建文章的表单提交
        [HttpPost]
        [ValidateAntiForgeryToken] // 防止跨站请求伪造攻击
        public IActionResult Create(Article article)
        {
            if (ModelState.IsValid) // 检查模型验证是否通过
            {
                article.Id = _nextId++;
                article.CreatedAt = DateTime.Now;
                _articles.Add(article);
                return RedirectToAction(nameof(Index)); // 创建成功后，重定向到文章列表页
            }
            return View(article); // 如果验证失败，返回表单并显示错误信息
        }
    }
}

Index()：返回一个视图，用于显示所有文章列表。
Details(int id)：根据传入的 id 查找文章并返回详情视图。
Create() (GET)：返回一个空的创建表单视图。
Create(Article article) (POST)：接收用户通过表单提交的文章数据，验证并保存到我们的“模拟数据库”中，然后重定向到列表页。

创建视图

视图负责展示数据。

创建文章列表页 (Index.cshtml)

在 “解决方案资源管理器” 中，右键点击 Views 文件夹，选择 “添加” -> “新建文件夹”，命名为 Articles。
右键点击新创建的 Views/Articles 文件夹，选择 “添加” -> “视图...”。
视图名称输入 Index，模板选择 “List”，模型类选择 MyBlog.Models.Article，数据上下文类选择 MyBlog.Models.Article (因为我们没有上下文类，直接用模型即可)。
点击 “添加”，Visual Studio 会自动生成一个列表视图。
打开 Views/Articles/Index.cshtml，修改其内容如下：

@model IEnumerable<MyBlog.Models.Article>
@{
    ViewData["Title"] = "文章列表";
}
<h1>@ViewData["Title"]</h1>
<p>
    <a asp-action="Create">创建新文章</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CreatedAt)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <a asp-action="Details" asp-route-id="@item.Id">@Html.DisplayFor(modelItem => item.Title)</a>
                </td>
                <td>
                    @item.CreatedAt.ToString("yyyy-MM-dd HH:mm")
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.Id">编辑</a> |
                    <a asp-action="Delete" asp-route-id="@item.Id">删除</a>
                </td>
            </tr>
        }
    </tbody>
</table>

@model IEnumerable<MyBlog.Models.Article>：告诉这个视图它接收的是一个 Article 列表。
asp-action 和 asp-route-id：这是 ASP.NET Core 的 Tag Helper，用于生成指向其他 Controller 方法的链接，非常方便。

创建文章详情页

在 Views/Articles 文件夹中，右键点击，选择 “添加” -> “视图...”。
视图名称输入 Details，模板选择 “Details”，模型类选择 MyBlog.Models.Article。
点击 “添加”，然后修改内容如下：

@model MyBlog.Models.Article
@{
    ViewData["Title"] = Model.Title;
}
<h1>@Html.DisplayFor(model => model.Title)</h1>
<div>
    <hr />
    <dl class="row">
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Content)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Content)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.CreatedAt)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.CreatedAt)
        </dd>
    </dl>
</div>
<div>
    <a asp-action="Edit" asp-route-id="@Model.Id">编辑</a> |
    <a asp-action="Index">返回列表</a>
</div>

创建文章表单页

在 Views/Articles 文件夹中，右键点击，选择 “添加” -> “视图...”。
视图名称输入 Create，模板选择 “Create”，模型类选择 MyBlog.Models.Article。
点击 “添加”如下：

@model MyBlog.Models.Article
@{
    ViewData["Title"] = "创建新文章";
}
<h1>@ViewData["Title"]</h1>
<h4>Article</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Title" class="control-label"></label>
                <input asp-for="Title" class="form-control" />
                <span asp-validation-for="Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Content" class="control-label"></label>
                <textarea asp-for="Content" class="form-control" rows="10"></textarea>
                <span asp-validation-for="Content" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="创建" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>
<div>
    <a asp-action="Index">返回列表</a>
</div>

第五步：运行和测试

所有核心功能都已准备就绪,让我们来测试一下：

在 Visual Studio 中，确保启动项目是 MyBlog。
点击绿色的按钮运行网站。
浏览器会打开,显示默认主页，我们需要修改默认路由，让它直接显示我们的文章列表。
打开 Program.cs 文件，找到 app.MapControllerRoute 这一行，将其修改为：

// Program.cs
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Articles}/{action=Index}/{id?}"); // 默认指向 ArticlesController 的 Index 方法

{controller=Articles}：默认控制器是 Articles。
{action=Index}：默认方法是 Index。
{id?}：id 参数是可选的。

重新启动网站，浏览器应该会直接跳转到 /Articles/Index 页面，显示一个空的文章列表和“创建新文章”的链接。
点击“创建新文章”链接，填写标题和内容，然后点击“创建”按钮。
你应该会被重定向到文章列表页,并看到你刚刚创建的文章，点击文章标题，可以进入详情页。

至此,你已经成功用 ASP.NET Core MVC 构建了一个功能完整的网站！

第六步：下一步与进阶

你已经掌握了 ASP.NET Core MVC 的基础，接下来可以探索更多内容：

使用真实数据库：
- 目前我们用的是内存中的 List，数据重启后就会丢失。
- 学习使用 Entity Framework Core (EF Core)，这是一个强大的对象关系映射工具。
- 从 SQLite (轻量级文件数据库) 或 SQL Server LocalDB (SQL Server 的精简版) 开始，它们非常适合开发。
- 最终可以部署到 SQL Server、PostgreSQL 或 MySQL 等生产级数据库。
优化用户体验：
- 前端框架：学习使用 Bootstrap、Tailwind CSS 或 Bulma 来美化你的网站。
- JavaScript：引入 jQuery 或现代框架如 Vue.js、React 来处理更复杂的交互。
- 局部视图：将重复的 UI 组件（如文章卡片）提取为局部视图，方便复用。
身份验证与授权：

学习如何使用 ASP.NET Core Identity 实现用户注册、登录、角色管理等功能，让只有登录用户才能发布文章。
部署到生产环境：
- 将你的网站发布到云服务器,如 Microsoft Azure、AWS 或 Vultr。
- 学习使用 Docker 容器化你的应用，使其在任何环境中都能稳定运行。

学习资源推荐

官方文档：Microsoft Learn - ASP.NET Core - 最权威、最全面的资料。
视频教程：
- ASP.NET Core 中文教程 (B站/YouTube)：搜索“ASP.NET Core MVC”，有很多优秀的免费视频系列。
- FreeCodeCamp：有完整的 ASP.NET Core 课程。
书籍：
- 《ASP.NET Core in Action》
- 《Pro ASP.NET Core MVC》

希望这份详细的教程能帮助你顺利开启 ASP.NET 网站开发之旅！祝你编码愉快！