ASP.NET Core Razor Pages 教程一 创建应用程序

介绍

Fourth Coffee 网站从 ASP.NET Web Pages Bakery 模板站点开始。这个模板站点提供了“最先进水平” 在线订单系统,允许用户下单订购各种各样的烘培食品。从技术角度看,这个网站展示了:

  • 使用基于文件的数据库来存储产品信息
  • 基本数据访问
  • 创建和处理表单
  • 并通过 WebMail 帮助程序功能发送电子邮件

site pages

在本系统中,将 Web Pages 版本移植到 Razor Pages。总共分为7个步骤,每个步骤检查 Razor Pages 开发的一个方面。此后,Bakery网站将通过附加功能得到增强,作为一个平台来说明在 Razor Pages 应用程序上下文中的更多其他 ASP.NET Core 功能。

这些步骤如下所示:

  • 创建应用程序
  • 添加新页面
  • 创建模型
  • 添加迁移
  • 使用数据
  • 使用窗体
  • 添加电子邮件

该网站将构建于 Visual Studio Code - 微软在开发人员社区的帮助下制作的开源代码编辑器. 数据将被保存在一个 SQLite 数据库中。这两种选择都享有跨平台和相对易于使用的好处, 这有助于使任何平台上有能力的开发人员都能访问此系列。

这个网站使用ASP.NET Core 2.2 和 Entity Framework Core(Microsoft开发的ORM) 构建。

配置开发环境

开始之前,你需要配置好开发环境。首先,你可以在这些获得 .NET Core, 你应该下载 SDK(软件开发工具包), 这是构建 .NET Core 应用程序所必需的。另一个选项 - runtime(运行时), 你想在服务器上运行 ASP.NET Core 应用程序时,要在服务器上安装这个选项。当然,SDK 中已经包含了 runtime。

下一步,你需要 Visual Studio Code, 下载并安装它,然后再安装 C# 扩展,这个是C#开发所需要的。可以通过单击左侧图像上的 "扩展" 图标并在窗格顶部显示的搜索框中键入 "c#" 来找到此目的。您还应该安装 C# Extensions 扩展, 它提供了用于添加 C# 类和接口文件的模板。

最后, 我使用了 "Material Icon Theme" 扩展, 该扩展在 "资源管理器" 窗格中为文件和文件夹提供图标。

创建空白 Web 应用程序

你创建一个文件夹来存放应用程序文件。你可以用你喜欢的任何方式来完成这个工作。你可以手动创建文件夹,然后在 VS Code 中打开它,或者你可以先打开 VS Code 然后通过它集成的终端使用标准的 mkdir 命令创建文件夹,在 VS Code 中按下 Ctrl+' (或 Mac 按 ⌘+' ) 进行访问。在任何情况下, 文件夹都应该被命名为 Bakery。

文件夹被创建后,用 VS Code 打开它。然后,确保终端的当前目录是 Bakery 文件夹,使用以下命令创建一个新的 Razor Pages 应用程序:

1dotnet new razor 2

该项目的名称来自创建它的文件夹。理想情况下,你希望这是一个大写字母为“B”的 “Bakery” 。 这样,如果您想将此系列中的代码复制并粘贴到您创建的项目中,您将通过混合项目命名空间的大小来最小化错误蔓延的可能性。如果您使用终端导航到 Bakery 文件夹一旦创建并使用全部小写(例如cd c:\bakery),生成的项目 - 及其默认命名空间 - 将具有小写“b”。

创建应用程序后,将自动执行 dotnet restore 命令。 这个命令会导致项目还原所需的依赖项和工具。 如果这是你的第一个.NET Core应用程序,则此命令可能需要一些时间才能完成。 完成后,您可以从VS Code中打 开Bakery 文件夹以查看已创建的文件和文件夹。

这个时候,可能会提示你添加构建和调试项目所需的缺少资源:

assets
单击 Yes。

文件和文件夹

在继续之前, 我们将查看模板生成的文件和文件夹:

files

  • .vscode 文件夹是由上一步单击 Yes 时生成的,它包含为调试提供配置的文件。

  • bin 文件夹包含 Build操作的输出 - 应用程序已经编译的二进制文件。目前没有什么,只有一个名为 Debug 的文件夹,其中包含另一个名为 netcoreapp2.2 的文件夹,该应用程序还没有编译,不过编译很快就要做了。

  • obj 文件夹包含各种文件,你几乎不需要访问这个文件夹,除非是想把这个文件夹的内容全部删掉。框架将其用作存储临时文件和生成过程中使用的其他对象的位置。

  • Properties 文件夹包含一个名为 lanchSettings.json 的文件。这是用于在浏览器中启动应用程序的配置文件。

  • 应用程序的根目录包含了5个文件,有两个名为 appsettings 的 JSON 文件。它们包含应用程序配置信息它们等同于以前版本的 ASP.NET的 web.Config 文件中的 appSettings 部分。只有在应用程序以开发模式运行时才会使用名称中包含 Development 的版本。

  • .csproj 文件是标准的基于 MS Build XML-based 的项目文件。它包含项目设置和对项目使用的文件的引用。MS Build 使用此文件来配置应用程序的实际构建过程。

  • 所有 ASP.NET Core 应用程序实际上都是控制台应用程序,任何控制台应用程序的默认入口点都是 Program.cs 文件中 Program 类中的 Main 方法。在这种情况下,Main 方法负责为应用程序配置 Web 主机并启动它以便它可以为请求提供服务。

  • Startup.cs 文件包含一个名为 Startup 的类。该类有两个主要方法 - ConfigureServices 和 Configure。这些用于配置应用程序的请求处理管道(应用程序需要的可选组件)及其依赖的服务。

  • wwwroot 文件夹包含静态文件 - 图像,JavaScript文件,CSS文件等。

  • 最后,Pages 文件夹。这是 Razor Pages 的默认位置。模板站点包括三个页面:Error, Index 和 Privacy。你很快就会在这里添加内容。

构建并运行应用程序

在命令提示符处,键入以下内容:

1dotnet run 2

You should get the following confirmation:

你将得到以下的确认信息:

1Now listening on: https://localhost:5001 2Now listening on: http://localhost:5000 3Application started. Press Ctrl+C to shut down. 4

打开浏览器将导航到网址:https://localhost:5001。网站应该如以下所示:
site

对Page1和Page2的导航目前无处可去。 这将在下一节中讨论。

摘要

此时,您已使用 .NET Core SDK 和 Visual Studio Code 创建新的 Razor Pages 应用程序。您已经查看了项目文件夹的内容,并且已在浏览器中启动了该应用程序。 在下一部分中,您将添加新页面并开始自定义网站内容。

代码交流 2021