简介

包含 01 到 03 章的笔记

ASP.NET Core 的结构:

image-20240103192205377

1. 理解框架

  • 应用程序框架
    • MVC 框架. 经典的框架, 受到 SPA 的影响较大. 一般在处理复杂应用时还是会用到.
    • Razor Pages. 页面模型, 开发成本比起 MVC 更小, 一般作为小规模应用开发. 可以与 MVC 合用.
    • Blazor. 包含 Blazor Server 和 Blazor WebAssembly, 让 C# 可以在浏览器中运行.
  • 实用程序框架
    • Identity. 实用微软的认证授权框架.
    • EntityFramework
  • 平台. 本书没有引入的是 SignalR 和 gRPC.

2. 其他

然后介绍了本书的结构与各个部分的内容. 并介绍了与作者联系的方式, 代码, 勘误等内容.

3. 入门

选择代码编辑器. 然后是安装步骤解释与截图.

安装 SDK. 查看 SDK

dotnet --list-sdks

安装 VSCode, 注意添加到环境变量, 以及右键菜单中.

安装数据库 SQLServer LocalDB.

个人还是比较喜欢使用 Express 版本, 或者 Developer 版本. 在 Docker 上运行, 让在 Mac 上开发很方便.

4. 创建 ASP.NET Core 项目

这个基本操作复核作者的开发模式. 基本上可以理解为在 VSCode + 命令行的开发模式下, 尽可能完成 VS 的功能

创建项目:

dotnet new globaljson --sdk-version <version> --output <proj_dir>
dotnet new mvc --no-https --output <proj_dir> --framework <netversion>

作者不喜欢使用模板, 会从最小模板开始写代码. 这点大赞.

关于 sdk 的版本, 可以使用 dotnet --list-sdks 来查看.

framework 的版本可以是: netcoreapp3.1, net5.0, net6.0, net7.0, net8.0 等.

然后分别演示了在 VS 和 VSCode 中打开项目, 并运行项目 (VSCode 会安装插件, 并生成调试用文件).

运行使用命令

dotnet run

补充说明

# 监视运行 (可以省略 run 命令, 但是如果需要其他参数, 或环境变量, 则需要添加 run 命令)
dotnet watch run

例如使用指定环境变量, 运行监视命令

dotnet watch run -- --environment sit

环境的值, 在运行时直接决定 加载 appsettings.环境.json 的文件. 可以利用该功能加载不同环境.

4.1 理解端点 Endpoint

传入的请求由端点来处理. MVC 模式下, 请求进入后, 由控制器下的某个动作方法来处理.

约定:

  • 控制器放在 Controllers 文件夹下.
  • 控制器是一个类, MVC 的控制器继承自 Controller (Microsoft.AspNetCore.Mvc.Controller).
  • 动作方法是控制器中的方法. 动作方法返回 IActionResult, 具体返回一个 View 调用. 这里作者修改返回一个字符串.

运行后访问即可看到对应字符串.

补充, 作者使用运行但不调试 (Ctrl + F5)

4.2 理解路由

由于路由定义中将 Home 控制器, 和 Index 动作方法配置为默认, 因此下面的路由均表示 HomeController 下的 Index 方法:

  • /
  • /Home
  • /Home/Index

4.3 理解 HTML 渲染

原则上, 路由将请求重定向到 动作方法后, 如果动作方法要返回页面, 直接返回页面的 HTML, 然后配合 Content-Type, 浏览器就会进行渲染显示.

因此在 MVC 中使用了视图引擎. 视图引擎是一个执行模型, 将视图和数据合并后转换为 HTML 来返回.

约定:

  • 动作方法调用 View() 方法, 并将其作为 IActionResult 来返回, 该方法就是在生成 HTML + 对应的响应头.
  • 默认约定 View() 会去寻找与控制器/动作方法同名的视图文件. 约定视图文件放在 Views 目录下. 并且目录结构与控制器, 和动作方法一一对应. 即 Home 控制器下的 Index 动作方法, 对应 Views 目录下的 Home 文件夹下的 Index.cshtml 视图文件.
  • View() 常用重载有几个
    • View() 使用默认视图, 没有为视图传入模型参数.
    • View("视图名") 指定视图, 没有传入模型参数.
    • View(模型对象) 使用默认视图, 传入模型参数.
    • View("视图名", 模型对象) 指定视图, 并传入模型参数.
  • 一个视图文件背后对应一个视图模型. 这决定了视图文件的结构.
    • @model 视图模型的类型
    • @ {} 代码块, 用来配置布局
    • 正常的 HTML 片段
    • 使用 @Model 引用视图模型对象

5. 第一个 ASP.NET Core 应用

通过一个 DEMO 来介绍 MVC 的基本结构与用法. 这里不解释原理, 仅仅是操作步骤.

5.1 场景设置

创建一个约定参会的邀请应用:

  • 需要显示聚会信息页面
  • 可用于 RSVP 的表单
  • 确认 RSVP 表单, 返回一个感谢页面
  • 显示聚会数据汇总页面

5.2 创建项目

命令行创建项目

dotnet new globaljson --sdk-version 3.1.101 --output PartyInvites
dotnet new mvc --no-https --output PartyInvites --framework netcoreapp3.1

打开代码, 编辑 HomeController, 移除所有控制器类中的内容, 仅保留一个 Index 动作方法, 并调用 View() 返回.

namespace PartyInvites.Controllers {
  public class HomeController: Controller {
    public IActionResult Index() {
      return View();
    }
  }
}

修改 Views/Home/Index.cshtml 文件

@{ 
	Layout = null;
}
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width"/>
    <title>Party!</title>
  </head>
  <body>
    <div>
      <div>
        We're going to have an exciting party.<br />
        (To do: sell it better. Add picture or something.)
      </div>
    </div>
  </body>
</html>

运行后即可单开展示上述 HTML 的页面.

image-20240103203631139

补充

在 Pro ASP.NET Core 6/7 中创建项目多出了两个步骤, 同时添加了修改 Properities/launchSettings.json 的部分.

  • 创建项目的时候
    • 创建 sln 解决方案配置文件
    • 将项目添加到解决方案中 (这样使用 VS 也可以打开项目)
  • 修改配置项目的 端口为 5000, 直接编辑 Properties/launchSettings.json

使用 Pro ASP.NET Core 7 中的代码演示:

dotnet new globaljson --sdk-version 7.0.100 --output PartyInvites
dotnet new mvc --no-https --output PartyInvites --framework net7.0
dotnet new sln -o PartyInvites
dotnet sln PartyInvites add PartyInvites

dotnet sln 解决方案文件 add 需要添加的项目文件夹

将后面的添加到前面.

5.3 添加数据模型

引入了一些概念, 模型, 模型域, 域对象.

本质是一个东西.

约定模型放在 Models 目录中.

  • 创建 GuestResponse.cs 文件.
  • 创建 GustResponse 类, 包含属性: Name, Email, Phone, WillAttend
namespace PartyInvites.Models {
  public class GustResponse {
    public string Name { get; set; }
    public string Email { get; set; }
    public string Phone { get; set; }
    public bool? WillAttend { get; set; }
  }
}

注意这里的 WillAttend 是可空类型, 有助于后期做数据绑定.

5.4 创建第二个操作与视图

这次创建表单, 用来录入用户的信息.

  • 添加动作方法 RevpForm, 因为返回视图, 直接返回 ViewResult 类型.
  • 调用 View() 并返回.
  • 添加 RsvpForm.cshtml 视图文件.
public ViewResult RsvpForm() {
  return View();
} 

@{
  Layout = null;
}
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>RsvpForm</title>
  </head>
  <body>
    <div>
      This is the RsvpForm.cshtml View
    </div>
  </body>
</html>

运行后得到:

image-20240103204729919

5.5 连接操作方法

使用内置的 tag-helper, 在 Index 上添加跳转到 RsvpForm 的连接

@{ 
	Layout = null;
}
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width"/>
    <title>Party!</title>
  </head>
  <body>
    <div>
      <div>
        We're going to have an exciting party.<br />
        (To do: sell it better. Add picture or something.)
      </div>
      <a asp-action="RsvpForm">RSVP Now</a>
    </div>
  </body>
</html>

image-20240103205548553

5.6 构建表单

主要是修改视图文件. 关键点:

  • 视图模型使用 GuestResponse
  • 表单中使用 tag helper
Last Updated:
Contributors: jk