ASP.NET Core Razor Pages 教程一 创建应用程序 介绍 配置开发环境 创建空白 Web 应用程序 文件和文件夹 构建并运行应用程序

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

  • 使用基于文件的数据库来存储产品信息
  • 基本数据访问
  • 创建和处理表单
  • 并通过 WebMail 帮助程序功能发送电子邮件
    ASP.NET Core Razor Pages 教程一 创建应用程序
介绍
配置开发环境
创建空白 Web 应用程序
文件和文件夹
构建并运行应用程序

在本系统中,将 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 应用程序:

dotnet new razor

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

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

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

ASP.NET Core Razor Pages 教程一 创建应用程序
介绍
配置开发环境
创建空白 Web 应用程序
文件和文件夹
构建并运行应用程序
单击 Yes

文件和文件夹

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

ASP.NET Core Razor Pages 教程一 创建应用程序
介绍
配置开发环境
创建空白 Web 应用程序
文件和文件夹
构建并运行应用程序

  • .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。你很快就会在这里添加内容。

构建并运行应用程序

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

dotnet run

You should get the following confirmation:

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

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

打开浏览器将导航到网址:https://localhost:5001。网站应该如以下所示:
ASP.NET Core Razor Pages 教程一 创建应用程序
介绍
配置开发环境
创建空白 Web 应用程序
文件和文件夹
构建并运行应用程序

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

摘要

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