使用 ASP.NET Core 进行现代全栈 Web 开发: 2 设置与构建基础应用程序

最新推荐文章于 2026-06-22 22:05:57 发布

原创最新推荐文章于 2026-06-22 22:05:57 发布 · 708 阅读

32 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#asp.net #前端 #后端

使用 ASP.NET Core 进行现代全栈 Web 开发专栏收录该内容

16 篇文章

订阅专栏

本章中，我们将开启一段旅程，奠定 ASP.NET Core 开发的基础，确保你掌握构建首个 Web 应用程序的核心技能与理解。通过深入实践开发环境配置，并动手创建一个基础 Web 应用程序，你将扎实掌握定义 ASP.NETCore 开发的核心概念与架构。

我将向您介绍 模型-视图-控制器 （MVC）架构，这是组织 Web 应用程序的基石，确保您理解其重要性以及如何有效应用。此外，我们还将深入探讨路由和控制器这些关键要素，它们为应用程序的导航和功能实现提供了支持。在本章结束时，您不仅将拥有第一个运行中的 ASP.NET Core 应用程序，还将对基本原理有扎实的理解，这些知识将助您成长为一名熟练的 ASP.NET Core 开发人员。

这些课程旨在为您提供实用的动手实践机会，让您在构建开发职业生涯不可或缺的基础理解的同时，能够立即看到成果。通过掌握这些初始步骤，您将为更高级的主题和应用奠定基础，从而提升您在 ASP.NET Core 领域的技能和信心。

本章我们将涵盖以下主要内容：

构建您的第一个 ASP.NET Core 应用程序
探索项目结构
开发一个简单页面
理解 MVC 架构
理解路由概念

每个章节都经过精心设计，逐步引导您学习，确保您不仅能掌握知识，还能将其应用于实际成果的达成。到本章结束时，您将对 ASP.NET Core 开发的这些关键方面有清晰的理解和实际经验，为后续章节的学习打下坚实基础。

20年工作经验，承接微信小程序，App，网站，网站后端开发。有意向私聊我哈。

构建你的第一个 ASP.NET Core 应用程序

构建你的第一个 ASP.NET Core 应用程序是一个令人兴奋的步骤，它将带你进入使用微软强大框架进行现代 Web 开发的世界。这一过程包含多个阶段，从项目创建到开发、测试，再到理解构成 ASP.NET Core 应用程序的核心组件。在本节中，我们将详细探讨这个过程所涉及的内容。

在 Visual Studio 中创建新项目

当开始学习 ASP.NET Core 时，首要掌握的技能之一就是在 Visual Studio 中创建微软的 集成开发环境 （ IDE ）里新建项目。Visual Studio 凭借其全面的工具集和功能简化了开发流程，使其成为 .NET 开发者的热门选择。本小节将详细指导您在 Visual Studio 中创建 ASP.NET Core 项目的完整步骤，确保您能为构建网络应用程序打下坚实基础。

在按照项目创建步骤操作前，请确保您的计算机上已安装 Visual Studio。您应从微软官网下载 Visual Studio，选择最适合您需求的版本（ Community 社区版 、 Professional 专业版 或 Enterprise 企业版 ）。进行 ASP.NET Core 开发时，请确保在 ASP.NET 和 Web 开发 工作负载中勾选相应组件安装过程中。

安装 Visual Studio 时，选择 ASP.NET 和 Web 开发 工作负载的界面应如下图所示：

图 2.1：ASP.NET 和 Web 开发工作负载

安装完成后，从开始菜单或桌面快捷方式打开 Visual Studio。启动后，您将看到一个欢迎屏幕，提供打开现有项目或创建新项目的选项，如 图 2 .2 :

图 2.2：初始界面 - Visual Studio

点击 创建新项目 选项。此操作将打开一个展示各种项目模板的窗口。 Visual Studio 为不同编程语言和应用程序类型提供了多种模板，但您需要专注于 ASP.NET Core Web 应用程序模板。在新项目窗口的搜索栏中，输入 Asp.Net Core 以筛选掉无关模板：

图 2.3：Visual Studio 中的项目模板

从列表中选择 ASP.NET Core Web 应用程序（模型-视图-控制器） 并点击 下一步 。选择模板后，您需要配置新项目。这个步骤包括为项目命名以及选择项目文件的存储位置。如 图 2 .4 所示，为项目取一个有意义的名称并建立有序的目录结构对于有效管理项目至关重要。 :

图 2.4：项目名称 - ASP.NET Core

在 项目名称字段中输入您的项目名称。该名称将作为默认命名空间使用，并可能影响项目各组成部分的命名。为项目文件选择存储位置。填写完相应字段后，点击下一步 .

每个模板都附带预配置的设置和文件，专为您构建的应用程序类型量身定制。例如，MVC 模板将包含默认的控制器、视图和模型目录，以及用于入门的示例文件。每个模板还需要为项目选择特定配置，例如 .NET Framework 版本、 身份验证类型和 HTTP 协议，如图 2.5 所示 :

图2.5：模板配置

如果您的应用程序需要用户身份验证，Visual Studio 在项目创建时提供了配置此功能的选项。您可以根据 无需身份验证 、 个人用户账户 或 工作或学校账户 进行选择，具体取决于应用程序的需求。

以下是各选项的简要说明：

无需身份验证 ：此选项适用于不需要任何用户登录或身份管理的应用程序。通常用于面向公众的网站，这些网站无需身份验证。
个人用户账户 ：此选项允许用户使用电子邮件地址进行注册和登录。它非常适合需要用户管理自己账户的应用场景，例如社交媒体平台或电子商务网站。
工作或学校账户 ：此选项与 Azure Active Directory 集成，允许用户使用其组织账户登录。通常用于企业环境，需要将访问权限限制为特定组织的员工或成员。

除了基础设置外，还提供高级配置选项，例如启用 Docker 支持与配置 HTTPS。Docker 是一个平台，可简化在轻量级、可移植容器中打包、分发和管理应用程序的流程。HTTPS 即超文本传输安全协议 ，该协议通过加密用户浏览器与网站之间交换的数据来保护计算机网络通信安全。这些选项可根据项目具体需求进行定制，并随着应用程序的演进而调整。

完成所有选项配置后，请检查您的设置以确保一切按需配置妥当。准备就绪后，点击创建以初始化项目创建流程。

现在我们已经了解如何创建新项目，下一节将探索项目结构，熟悉 ASP.NET Core MVC Web 应用程序项目创建的默认文件。

探索项目结构

当 Visual Studio 完成创建您的 ASP.NET Core 项目后，您不仅会得到一组文件和目录，还会获得一个已搭建好、可直接运行和探索的应用程序。这个初始结构旨在为您提供一个良好的起点，并展示 ASP.NET Core 应用程序的基本原理，特别是当您选择 MVC 或 Razor Pages 等项目模板时。让我们在接下来的小节中更深入地了解初始项目设置。

项目结构概览

初次打开新项目时，您会注意到解决方案资源管理器窗格中呈现的结构化目录布局。每个文件夹和文件都有其用途，理解它们的目的是导航并最终掌握 ASP.NET 核心开发的关键。

关键目录包括 Controllers、Views、Models（用于 MVC 项目）以及 Pages（用于 Razor Pages 项目）。其中 wwwroot 目录存放静态资源，例如 JavaScript、CSS 和图片文件：

图2.6：解决方案资源管理器

让我们继续探索这个项目结构并了解这些文件夹，除了 Models 文件夹，它将在本章中通过代码示例进行解释和演示。

Controllers 文件夹

在 Controllers 文件夹中，您可以找到控制器类。控制器负责处理传入的 HTTP 请求并返回响应。浏览模板中提供的默认控制器，注意控制器中的操作如何对应应用程序的不同部分。项目模板默认包含 HomeController ，其中包含 index、privacy 和 error 端点，如以下代码所示：

using PacktBook.Models;
using Microsoft.AspNetCore.Mvc;
using System.Diagnostics;
namespace PacktBook.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;
        public HomeController(
            ILogger<HomeController> logger)
        {
            _logger = logger;
        }
        public IActionResult Index()
        {
            return View();
        }
        public IActionResult Privacy()
        {
            return View();
        }
        [ResponseCache(
            Duration = 0,
            Location = ResponseCacheLocation.None,
            NoStore = true
        )]
        public IActionResult Error()
        {
            return View(new ErrorViewModel {
                RequestId = Activity.Current?.Id ??
                HttpContext.TraceIdentifier
            });
        }
    }
}

每个端点通常都指向一个同名的 Razor 页面，正如我们将在下一节中看到的那样。

视图和 Razor 页面文件夹

在 MVC 项目中，Views 文件夹包含 Razor 视图文件，这些文件负责生成发送到客户端浏览器的 HTML 内容。每个视图对应控制器中的一个操作。

如果您使用的是 Razor Pages 项目，您会看到一个 Pages 文件夹，其中每个 Razor 页面都包含标记和关联的页面模型，它们位于一个文件或一对文件中。

花点时间打开一个视图或 Razor 页面，观察 Razor 语法如何让 C#代码与 HTML 混合以实现动态内容生成，如下列代码所示：

@{
    ViewData["Title"] = "Home Page";
    <h1>@ViewBag.Message</h1>
    <p>
        Today's date is:
        @ViewBag.CurrentDate.ToShortDateString()
    </p>
}
<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>
        Learn about
        <a href="https://learn.microsoft.com/aspnet/core">
        building Web apps with ASP.NET Core</a>.
    </p>
</div>

Razor 语法是创建动态网页内容的关键。您可以通过 @ 符号后接 C#代码来识别 Razor 代码。例如， @DateTime.Now.ToString() 在视图中会渲染出当前日期和时间。

Razor 视图可以使用从控制器传递的模型对象，实现数据驱动的内容呈现。例如， @Model.Name 会显示该模型对象的 Name 属性。

结合 Razor 页面，您可以使用布局、局部视图和视图组件。 Razor 中的布局提供了一种定义通用站点模板（如母版页）的方式，该模板可被多个视图继承使用，从而促进代码重用并保持一致性。

部分视图是可重用的视图片段，能够嵌入到多个其他视图中，非常适合渲染常见的用户界面 （UI）片段。

视图组件比部分视图更强大且可重用，它将渲染逻辑和数据获取封装在一个单元中，可以在不同视图间调用。

下一节我们将探讨 ViewBag 、 ViewData 和 TempData ，这些是 ASP.NET Core 中用于在服务器与客户端之间传递数据的优秀特性。

ViewBag、ViewData 和 TempData

这些是用于将数据从控制器传递到视图的动态属性。虽然 ViewBag 和 ViewData 非常适合传递不适合放在模型中的数据， TempData 则特别适用于在请求之间传递数据，例如重定向场景。

ViewBag 是一种动态属性，允许我们将数据从控制器传递到 Razor 页面或视图，而无需使用模型或强类型对象。这种方法比其他方式更灵活地向视图传递数据，因为它不需要进行对象类型转换。

以下是一个在控制器操作中设置 ViewBag 的示例：

public IActionResult Index()
{
    ViewBag.Message = "Welcome to your first ViewBag";
    ViewBag.CurrentDate = DateTime.UtcNow;
    return View();
}

在此示例中，动态属性 Message 被设置为字符串内容，而属性 CurrentDate 则被设置为当前的 UTC 时间。

在对应的视图（Index.cshtml）中，可以通过以下方式访问这些属性：

<h1>@ViewBag.Message</h1>
<p>
    Today's date is:
    @ViewBag.CurrentDate.ToShortDateString()
</p>

这里， ViewBag.Message 传递了一个字符串，而 ViewBag.CurrentDate 则传递了一个 DateTime 对象，从控制器到视图。

另一方面， ViewData 是一个以键值对形式存储数据的字典对象。不同于 ViewBag ，这种方法在视图中使用数据时需要类型转换。以下是 ViewData 在控制器动作中的使用方法：

public IActionResult ShipmentDetails()
{
    ViewData["Title"] = "Shipment Details";
    ViewData["Value"] = 100000.00;
    return View();
}

在此情况下，Title 和 Value 属性被添加到 ViewData 对象中并赋予相应的值。以下是在视图中获取这些值的方法：

@{
    <h1>@ViewData["Title"]</h1>
    <p>Value: $@ViewData["Value"]</p>
}

虽然与 ViewBag 非常相似，ViewData 在需要处理字典结构或需要向视图中的其他方法传递数据时更为实用。

最后， TempData 在需要跨不同请求传递数据时非常有用，特别是当您需要从一个控制器动作重定向到另一个动作，同时仍需在这些交换中保持数据状态的情况下。一旦访问 TempData ，数据就会从内存中移除。

以下是您如何在 控制器中 使用 TempData 的方法：

public IActionResult SubmitForm()
{
    TempData["SuccessMessage"] =
        "The information was successfully saved!";
    return RedirectToAction("Confirmation");
}
public IActionResult Confirmation()
{
    return View();
}

在此情况下， Confirmation 视图可以使用 TempData["SuccessMessage"] 数据来显示消息。

通过探索和理解视图与 Razor 页面的这些方面，您将掌握为 ASP.NET Core 应用程序构建动态交互式 Web 界面的关键知识。这些元素是应用程序呈现数据并与用户交互的核心，因此在开发和提升您的 Web 开发技能时，它们是需要重点关注的领域。

下一节我们将深入探讨如何创建一个简单页面，该示例将展示如何熟悉 Razor 语法以及视图和控制器的核心概念。

开发一个简单页面

在 ASP.NET Core 中开发简单页面（无论是 MVC 还是 Razor Pages 应用）是一项基础技能，它能展示如何渲染内容并接收用户输入。本节我们将探索如何创建和修改简单页面，包含代码示例来演示在 MVC 和 Razor Pages 两种模式下的实现过程。

在 MVC 应用中，开发简单页面需要创建一个视图和一个返回该视图的控制器动作。以下是开发基础 Hello World 页面的分步指南。

添加控制器

要创建新的控制器，请按照以下步骤操作：

转到解决方案资源管理器 ，右键点击 Controllers 文件夹，然后选择添加选项并点击控制器…，如图 2.7 所示 :

图2.7：添加新控制器

您将被重定向到一个控制器创建选项列表。在本章内容中，我们将创建一个空控制器，因此请选择 MVC 控制器 - 空选项并点击添加，如图 2.8 所示。 :

图 2.8：MVC 控制器 - 空

点击添加按钮后，您需要为控制器命名。遵循所有控制器名称都带有 Controller 后缀的命名约定是个好习惯。在本示例中，我们将控制器命名为 HelloWorldController，如图 2.9 所示。 :

图 2.9：HelloWorldController

确认控制器创建完成后，底层文件内容应如下所示：

using Microsoft.AspNetCore.Mvc;
namespace PacktBook.Controllers
{
    public class HelloWorldController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

本例中，控制器包含一个返回视图的 index 操作方法，该视图将在下一节创建。

创建视图

接下来，为中的 HelloWorldController 创建索引动作视图。首先，在 Views 文件夹中创建一个名为 HelloWorld 的文件夹。然后新建一个名为 Index.cshtml 的文件。使用 Visual Studio 底层选项创建的文件内容应如下所示：

@{
    <h1>Hello, World!</h1>
    <p>Welcome to my first ASP.NET Core View!</p>
    <br />
}

您可以根据需要编辑 HTML 代码，在索引视图上进行测试。要测试新应用程序，请点击 Visual Studio 中的播放图标，如图 2.10 所示。 :

图2.10：运行应用程序

在本例中，由于我们在本地环境中运行应用程序，将使用 HTTP 选项而非 HTTPS。 Visual Studio 将启动浏览器并加载 ASP.NET Core MVC 模板的初始页面，如 图 2 .11 所示。 :

图2.11：初始页面

要测试您的 HelloWorld 控制器及新的索引视图，请在浏览器中执行带有基础路由的 URL，该路由将作为控制器的前缀（HelloWorld）并运行它。应用程序将呈现位于 HelloWorld 文件夹中的索引视图 HTML，如图 2.12 所示。

图 2.12：HelloWorld 页面

在探索了如何在 MVC 应用程序中创建简单视图后，您已迈出了进入 ASP.NET Core 开发实践世界的第一步。您已经了解了控制器如何与视图交互。随着进一步学习，深入理解使这些交互成为可能的基本原理至关重要。

下一节中，我们将逐层剖析 MVC 框架，揭示其核心组件：模型、视图和 控制器 。您将了解它们如何协同工作来创建动态且响应式的 Web 应用程序，这为提升您使用 ASP.NET Core MVC 构建更复杂、更健壮应用程序的能力奠定基础。

理解 MVC 架构

MVC 架构是一种久经考验的设计模式，起源于 1970 年代施乐帕洛阿尔托研究中心，并因 Smalltalk 编程语言的使用而声名鹊起。最初为桌面计算环境设计的 MVC，其核心原则被证明具有普适性和实用性，因此在 Web 应用开发中得到了广泛采用。其持久的相关性源于它能够将软件应用的不同方面分而治之，使其更易于管理和适应变化。

MVC 模式的核心是模型组件，它封装了应用的业务逻辑和数据。模型负责响应关于其状态信息的请求以及状态变更指令。作为直接管理应用数据、逻辑和规则的核心组件，它确保数据的完整性与一致性。

视图组件则负责将模型数据呈现给用户。它是模型的可视化表现，负责渲染数据并提供用户界面。在 Web 应用中，视图通常由 HTML、CSS 和 JavaScript 构成，形成用户交互的布局与结构。视图会观察模型，当模型数据发生变化时自动更新，始终保持对当前状态的映射呈现。

控制器作为模型与视图之间的中介，负责处理传入请求、操作模型，并根据用户交互和模型操作结果决定渲染哪个视图。它将用户输入解释为模型需要执行的操作。当模型完成状态更新后，控制器会选择合适的视图进行响应渲染。

这种关注点分离促进了应用程序开发的模块化方法。只要开发者遵守组件交互的既定约定，就可以独立开发模型、视图和控制器。这种模块化不仅提高了应用程序的可维护性和可扩展性，还支持协作开发环境，让不同团队或开发者能专注于应用程序的特定方面。

此外， MVC 模式促进了可测试应用程序的开发。通过将业务逻辑、用户界面和输入处理分离，开发者能够为独立组件编写单元测试，而无需依赖其他部分。例如，模型可以独立于用户界面进行测试，控制器也可以与视图分开测试。

在 Web 开发中，特别是使用如 ASP.NET Core 等框架时，MVC 提供了一种结构化的应用构建方法。它为处理请求、管理业务逻辑和展示数据提供了清晰的路径，同时保持了服务器端操作与客户端呈现之间的清晰分离。

MVC 模式的适应性还意味着它可以针对应用程序的特定需求进行定制。例如，在复杂的应用程序中，控制器可以将任务委托给多个模型，或根据逻辑在多个视图之间进行选择。同样，一个模型可能以多种视图形式呈现，每种视图都针对不同的用户交互场景而设计。

总之，理解 MVC 架构的基本设计原则为构建健壮、可维护且可扩展的 Web 应用程序提供了基础框架。随着开发者深入探究 MVC 的每个组件，他们将能够打造出复杂且响应迅速的应用程序，这些应用能在不断演变的 Web 开发领域中经受住时间的考验。

下一节中，我们将探讨 ASP.NET Core 应用程序的路由基础概念。

理解路由的概念

路由在 ASP.NET Core 中是通过一个中间件组件实现的，该组件会分析传入的 URL 并决定执行哪个控制器和操作方法。因此，正确理解和配置路由对于构建有效的 MVC 应用程序至关重要。当你在 ASP.NET Core 中启动一个新的 MVC 项目时，路由配置通常是在 Program.cs 文件中的 Configure 方法里设置的。

在默认配置中，ASP.NET Core 采用了一种称为基于约定的路由方式。这种设置会根据启动配置中建立的模式来定义路由。一个典型模式可能类似于 /controller/action/id，其中 URL 的每个部分对应路由逻辑的特定方面——控制器名称、操作方法以及一个常用作标识符的可选参数。

例如，考虑在 Program.cs 中定义的基于约定的路由设置，如以下代码所示：

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}"
);
app.Run();

此代码片段为应用程序建立了默认的路由模式。当用户访问 http://yourwebsite.com/Products/Details/5 时，路由系统会解析该 URL 并调用 Products 控制器的 Details 操作方法，并将 5 作为 ID 参数传入。

然而，基于约定的路由并非 ASP.NET Core 中的唯一选择。该框架还支持 特性路由 ，这种路由方式通过在控制器和操作上直接定义路由，提供了更精细的控制。使用特性路由时，您可以为每个控制器或操作方法通过特性指定路由。

例如，您可以在控制器上定义一个路由如下所示：

using Microsoft.AspNetCore.Mvc;
namespace PacketBook.Controllers
{
    [Route("products")]
    public class ProductsController : Controller
    {
        [Route("")]
        public IActionResult Index()
        {
            return View();
        }
        [Route("{id}")]
        public IActionResult Details(int id)
        {
            return View();
        }
    }
}

此示例展示了属性路由如何为每个操作响应的 URL 提供清晰精确的控制。在需要定义不符合默认模式的自定义路由场景中尤为有益。

此外，ASP.NET Core 中的路由具有可扩展性，支持创建自定义路由。对于更复杂的路由需求，开发人员可以定义自己的路由处理程序，甚至扩展路由框架，以创建针对特定应用需求定制的高级路由逻辑。

路由在应用程序内部生成 URL 方面也起着关键作用。例如，当您在视图中使用 Url.Action() 辅助方法时，ASP.NET Core 会利用路由信息，根据您的路由配置生成正确的 URL。

请看以下示例，其中在 Razor 视图 中使用了 Url.Action() 辅助方法：

@{
    <h1>Hello, World!</h1>
    <p>Welcome to ASP.NET Core MVC!</p>
    <br />
    <a
        href="@Url.Action(
            "Details",
            "Products",
            new { id = 5}
        )">
        View Product
    </a>
}

此辅助方法生成一个与路由配置匹配的 URL，确保应用程序内的链接格式正确且可导航。

路由的另一个关键方面在于它对搜索引擎优化 （SEO）和用户体验的影响。定义清晰的路由能生成更简洁、易记的 URL，从而提升应用程序的可用性和可发现性。从 SEO 角度来看，结构合理且描述性强的路由有助于搜索引擎更好地理解应用程序的内容和层级关系。这还能让搜索引擎更高效地进行索引，因为它们可以更准确地解析应用程序的结构和内容。

此外，ASP.NET Core 的路由功能还支持在应用程序代码中生成出站 URL，便于创建符合路由模式的链接。这对于在电子邮件、通知或任何外部通信中生成链接特别有用，能确保应用程序 URL 呈现方式的一致性和可靠性。

错误处理是路由发挥重要作用的另一个领域。通过为错误页面定义特定路由，您可以在应用程序故障或 URL 访问错误时提供更好的用户体验。例如，您可以设置一个路由来处理 404 错误，将用户引导至自定义的 页面未 找到页面。

总之，路由是 ASP.NET Core 的一项强大功能，它作为应用程序响应 HTTP 请求的核心机制。通过有效配置路由，可以确保应用程序结构清晰、易于维护且用户友好。随着您不断构建和增强 ASP.NET Core 应用程序，深入理解路由将使您能够设计出更直观、响应更迅速的用户交互，最终打造出更成功且更具吸引力的应用程序。