ASP.NET Core Blazor 项目结构

本文介绍了根据 Blazor 框架项目模板之一生成的 Blazor 应用中包含哪些文件和文件夹。 有关如何使用工具以 Blazor 项目模板创建 Blazor 应用的信息,请参阅“用于 ASP.NET Core Blazor 的工具”。 有关 Blazor 的托管模型、Blazor WebAssembly 和 Blazor Server 的信息,请参阅“ASP.NET Core Blazor 托管模型”。

Blazor WebAssembly

Blazor WebAssembly项目模板:blazorwasm

Blazor WebAssembly 模板创建 Blazor WebAssembly 应用的初始文件和目录结构。 该应用中填充了一个 FetchData 组件的演示代码,该组件从静态资产 weather.json 加载数据,且用户与 Counter 组件交互。

  • Pages 文件夹:包含构成 Blazor 应用的可路由组件/页面 (.razor)。 每个页面的路由都是使用 @page 指令指定的。 该模板包括以下组件:

    • Counter 组件 (Counter.razor):实现“计数器”页面。
    • FetchData 组件 (FetchData.razor):实现“提取数据”页面。
    • Index 组件 (Index.razor):实现 Home 页。
  • Properties/launchSettings.json:保留开发环境配置

  • Shared 文件夹:包含以下共享组件和样式表:

    • MainLayout 组件 (MainLayout.razor):应用的布局组件
    • MainLayout.razor.css:应用主布局的样式表。
    • NavMenu 组件 (NavMenu.razor):实现边栏导航。 包括 NavLink 组件 (NavLink),该组件可向其他 Razor 组件呈现导航链接。 NavLink 组件会在系统加载其组件时自动指示选定状态,这有助于用户了解当前显示的组件。
    • NavMenu.razor.css:应用导航菜单的样式表。
    • SurveyPrompt 组件 (SurveyPrompt.razor):Blazor 调查组件。
  • wwwroot:应用的 Web 根目录文件夹,其中包含应用的公共静态资产,包括 appsettings.json配置设置的环境应用设置文件。 index.html 网页是实现为 HTML 页面的应用的根页面:

    • 最初请求应用的任何页面时,都会呈现此页面并在响应中返回。
    • 此页面指定根 App 组件的呈现位置。 使用 appid (<div id="app">Loading...</div>) 在 div DOM 元素的位置呈现组件。

备注

添加到 wwwroot/index.html 文件的 JavaScript (JS) 文件应显示在关闭 </body> 标记之前。 在某些情况下,从 JS 文件加载自定义 JS 代码的顺序非常重要。 例如,确保在 Blazor framework JS 文件之前包含带有互操作方法的 JS 文件。

  • _Imports.razor:包括要包含在应用组件 (.razor) 中的常见 Razor 指令,如用于命名空间的 @using 指令。

  • App.razor:应用的根组件,用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • Program.cs:应用入口点,用于设置 WebAssembly 主机:

    • App 组件是应用的根组件。 对于根组件集合 (builder.RootComponents.Add<App>("#app")),使用 appidwwwroot/index.html 中的 <div id="app">Loading...</div>)将 App 组件指定为 div DOM 元素。
    • 添加并配置了服务(例如,builder.Services.AddSingleton<IMyDependency, MyDependency>())。

Blazor Server

Blazor Server项目模板:blazorserver

Blazor Server 模板创建 Blazor Server 应用的初始文件和目录结构。 该应用中填充了一个 FetchData 组件的演示代码,该组件从注册服务 WeatherForecastService 加载数据,且用户与 Counter 组件交互。

  • Data 文件夹:包含 WeatherForecast 类和 WeatherForecastService 的实现,它们向应用的 FetchData 组件提供示例天气数据。

  • Pages 文件夹:包含构成 Blazor 应用的可路由组件/页面 (.razor) 和 Blazor Server 应用的根 Razor 页面。 每个页面的路由都是使用 @page 指令指定的。 该模板包括以下组件:

    • _Host.cshtml:实现为 Razor 页面的应用的根页面:
      • 最初请求应用的任何页面时,都会呈现此页面并在响应中返回。
      • 此主机页面指定根 App 组件 (App.razor) 的呈现位置。
    • _Layout.cshtml:应用的 _Host.cshtml 根页的布局页。
    • Counter 组件 (Counter.razor):实现“计数器”页面。
    • Error 组件 (Error.razor):当应用中发生未经处理的异常时呈现。
    • FetchData 组件 (FetchData.razor):实现“提取数据”页面。
    • Index 组件 (Index.razor):实现 Home 页。

备注

添加到 Pages/_Layout.cshtml 文件的 JavaScript (JS) 文件应显示在关闭 </body> 标记之前。 在某些情况下,从 JS 文件加载自定义 JS 代码的顺序非常重要。 例如,确保在 Blazor framework JS 文件之前包含带有互操作方法的 JS 文件。

  • Properties/launchSettings.json:保留开发环境配置

  • Shared 文件夹:包含以下共享组件和样式表:

    • MainLayout 组件 (MainLayout.razor):应用的布局组件
    • MainLayout.razor.css:应用主布局的样式表。
    • NavMenu 组件 (NavMenu.razor):实现边栏导航。 包括 NavLink 组件 (NavLink),该组件可向其他 Razor 组件呈现导航链接。 NavLink 组件会在系统加载其组件时自动指示选定状态,这有助于用户了解当前显示的组件。
    • NavMenu.razor.css:应用导航菜单的样式表。
    • SurveyPrompt 组件 (SurveyPrompt.razor):Blazor 调查组件。
  • wwwroot:应用的 Web 根目录文件夹,其中包含应用的公共静态资产。

  • _Imports.razor:包括要包含在应用组件 (.razor) 中的常见 Razor 指令,如用于命名空间的 @using 指令。

  • App.razor:应用的根组件,用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • appsettings.json 和环境应用设置文件:提供应用的配置设置

  • Program.cs:应用的入口点,用于设置 ASP.NET Core 主机

  • Startup.cs:包含应用的启动逻辑。 Startup 类定义两个方法:

    • ConfigureServices:配置应用的依赖关系注入 (DI) 服务。 通过调用 AddServerSideBlazor 添加服务,并将 WeatherForecastService 添加到服务容器以供示例 FetchData 组件使用。
    • Configure:配置应用的请求处理管道:
      • 调用 MapBlazorHub 可以为与浏览器的实时连接设置终结点。 使用 SignalR 创建连接,该框架用于向应用添加实时 Web 功能。
      • 调用 MapFallbackToPage("/_Host") 以设置应用的根页面 (Pages/_Host.cshtml) 并启用导航。

其他资源

本文介绍了根据 Blazor 框架项目模板之一生成的 Blazor 应用中包含哪些文件和文件夹。 有关如何使用工具以 Blazor 项目模板创建 Blazor 应用的信息,请参阅“用于 ASP.NET Core Blazor 的工具”。 有关 Blazor 的托管模型、Blazor WebAssembly 和 Blazor Server 的信息,请参阅“ASP.NET Core Blazor 托管模型”。

Blazor WebAssembly

Blazor WebAssembly项目模板:blazorwasm

Blazor WebAssembly 模板创建 Blazor WebAssembly 应用的初始文件和目录结构。 该应用中填充了一个 FetchData 组件的演示代码,该组件从静态资产 weather.json 加载数据,且用户与 Counter 组件交互。

  • Pages 文件夹:包含构成 Blazor 应用的可路由组件/页面 (.razor)。 每个页面的路由都是使用 @page 指令指定的。 该模板包括以下组件:

    • Counter 组件 (Counter.razor):实现“计数器”页面。
    • FetchData 组件 (FetchData.razor):实现“提取数据”页面。
    • Index 组件 (Index.razor):实现 Home 页。
  • Properties/launchSettings.json:保留开发环境配置

  • Shared 文件夹:包含以下共享组件和样式表:

    • MainLayout 组件 (MainLayout.razor):应用的布局组件
    • MainLayout.razor.css:应用主布局的样式表。
    • NavMenu 组件 (NavMenu.razor):实现边栏导航。 包括 NavLink 组件 (NavLink),该组件可向其他 Razor 组件呈现导航链接。 NavLink 组件会在系统加载其组件时自动指示选定状态,这有助于用户了解当前显示的组件。
    • NavMenu.razor.css:应用导航菜单的样式表。
    • SurveyPrompt 组件 (SurveyPrompt.razor):Blazor 调查组件。
  • wwwroot:应用的 Web 根目录文件夹,其中包含应用的公共静态资产,包括 appsettings.json配置设置的环境应用设置文件。 index.html 网页是实现为 HTML 页面的应用的根页面:

    • 最初请求应用的任何页面时,都会呈现此页面并在响应中返回。
    • 此页面指定根 App 组件的呈现位置。 使用 appid (<div id="app">Loading...</div>) 在 div DOM 元素的位置呈现组件。

备注

添加到 wwwroot/index.html 文件的 JavaScript (JS) 文件应显示在关闭 </body> 标记之前。 在某些情况下,从 JS 文件加载自定义 JS 代码的顺序非常重要。 例如,确保在 Blazor framework JS 文件之前包含带有互操作方法的 JS 文件。

  • _Imports.razor:包括要包含在应用组件 (.razor) 中的常见 Razor 指令,如用于命名空间的 @using 指令。

  • App.razor:应用的根组件,用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • Program.cs:应用入口点,用于设置 WebAssembly 主机:

    • App 组件是应用的根组件。 对于根组件集合 (builder.RootComponents.Add<App>("#app")),使用 appidwwwroot/index.html 中的 <div id="app">Loading...</div>)将 App 组件指定为 div DOM 元素。
    • 添加并配置了服务(例如,builder.Services.AddSingleton<IMyDependency, MyDependency>())。

Blazor Server

Blazor Server项目模板:blazorserver

Blazor Server 模板创建 Blazor Server 应用的初始文件和目录结构。 该应用中填充了一个 FetchData 组件的演示代码,该组件从注册服务 WeatherForecastService 加载数据,且用户与 Counter 组件交互。

  • Data 文件夹:包含 WeatherForecast 类和 WeatherForecastService 的实现,它们向应用的 FetchData 组件提供示例天气数据。

  • Pages 文件夹:包含构成 Blazor 应用的可路由组件/页面 (.razor) 和 Blazor Server 应用的根 Razor 页面。 每个页面的路由都是使用 @page 指令指定的。 该模板包括以下组件:

    • _Host.cshtml:实现为 Razor 页面的应用的根页面:
      • 最初请求应用的任何页面时,都会呈现此页面并在响应中返回。
      • 此主机页面指定根 App 组件 (App.razor) 的呈现位置。
    • Counter 组件 (Counter.razor):实现“计数器”页面。
    • Error 组件 (Error.razor):当应用中发生未经处理的异常时呈现。
    • FetchData 组件 (FetchData.razor):实现“提取数据”页面。
    • Index 组件 (Index.razor):实现 Home 页。

备注

添加到 Pages/_Host.cshtml 文件的 JavaScript (JS) 文件应显示在关闭 </body> 标记之前。 在某些情况下,从 JS 文件加载自定义 JS 代码的顺序非常重要。 例如,确保在 Blazor framework JS 文件之前包含带有互操作方法的 JS 文件。

  • Properties/launchSettings.json:保留开发环境配置

  • Shared 文件夹:包含以下共享组件和样式表:

    • MainLayout 组件 (MainLayout.razor):应用的布局组件
    • MainLayout.razor.css:应用主布局的样式表。
    • NavMenu 组件 (NavMenu.razor):实现边栏导航。 包括 NavLink 组件 (NavLink),该组件可向其他 Razor 组件呈现导航链接。 NavLink 组件会在系统加载其组件时自动指示选定状态,这有助于用户了解当前显示的组件。
    • NavMenu.razor.css:应用导航菜单的样式表。
    • SurveyPrompt 组件 (SurveyPrompt.razor):Blazor 调查组件。
  • wwwroot:应用的 Web 根目录文件夹,其中包含应用的公共静态资产。

  • _Imports.razor:包括要包含在应用组件 (.razor) 中的常见 Razor 指令,如用于命名空间的 @using 指令。

  • App.razor:应用的根组件,用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • appsettings.json 和环境应用设置文件:提供应用的配置设置

  • Program.cs:应用的入口点,用于设置 ASP.NET Core 主机

  • Startup.cs:包含应用的启动逻辑。 Startup 类定义两个方法:

    • ConfigureServices:配置应用的依赖关系注入 (DI) 服务。 通过调用 AddServerSideBlazor 添加服务,并将 WeatherForecastService 添加到服务容器以供示例 FetchData 组件使用。
    • Configure:配置应用的请求处理管道:
      • 调用 MapBlazorHub 可以为与浏览器的实时连接设置终结点。 使用 SignalR 创建连接,该框架用于向应用添加实时 Web 功能。
      • 调用 MapFallbackToPage("/_Host") 以设置应用的根页面 (Pages/_Host.cshtml) 并启用导航。

其他资源

本文介绍了根据 Blazor 框架项目模板之一生成的 Blazor 应用中包含哪些文件和文件夹。 有关如何使用工具以 Blazor 项目模板创建 Blazor 应用的信息,请参阅“用于 ASP.NET Core Blazor 的工具”。 有关 Blazor 的托管模型、Blazor WebAssembly 和 Blazor Server 的信息,请参阅“ASP.NET Core Blazor 托管模型”。

Blazor WebAssembly

Blazor WebAssembly项目模板:blazorwasm

Blazor WebAssembly 模板创建 Blazor WebAssembly 应用的初始文件和目录结构。 该应用中填充了一个 FetchData 组件的演示代码,该组件从静态资产 weather.json 加载数据,且用户与 Counter 组件交互。

  • Pages 文件夹:包含构成 Blazor 应用的可路由组件/页面 (.razor)。 每个页面的路由都是使用 @page 指令指定的。 该模板包括以下组件:

    • Counter 组件 (Counter.razor):实现“计数器”页面。
    • FetchData 组件 (FetchData.razor):实现“提取数据”页面。
    • Index 组件 (Index.razor):实现 Home 页。
  • Properties/launchSettings.json:保留开发环境配置

  • Shared 文件夹:包含以下共享组件:

    • MainLayout 组件 (MainLayout.razor):应用的布局组件
    • NavMenu 组件 (NavMenu.razor):实现边栏导航。 包括 NavLink 组件 (NavLink),该组件可向其他 Razor 组件呈现导航链接。 NavLink 组件会在系统加载其组件时自动指示选定状态,这有助于用户了解当前显示的组件。
    • SurveyPrompt 组件 (SurveyPrompt.razor):Blazor 调查组件。
  • wwwroot:应用的 Web 根目录文件夹,其中包含应用的公共静态资产,包括 appsettings.json配置设置的环境应用设置文件。 index.html 网页是实现为 HTML 页面的应用的根页面:

    • 最初请求应用的任何页面时,都会呈现此页面并在响应中返回。
    • 此页面指定根 App 组件的呈现位置。 组件呈现在 app DOM 元素 (<app>Loading...</app>) 的位置。

备注

添加到 wwwroot/index.html 文件的 JavaScript (JS) 文件应显示在关闭 </body> 标记之前。 在某些情况下,从 JS 文件加载自定义 JS 代码的顺序非常重要。 例如,确保在 Blazor framework JS 文件之前包含带有互操作方法的 JS 文件。

  • _Imports.razor:包括要包含在应用组件 (.razor) 中的常见 Razor 指令,如用于命名空间的 @using 指令。

  • App.razor:应用的根组件,用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • Program.cs:应用入口点,用于设置 WebAssembly 主机:

    • App 组件是应用的根组件。 App 组件指定为根组件集合 (builder.RootComponents.Add<App>("app")) 的 app DOM 元素(wwwroot/index.html 中的 <app>Loading...</app>)。
    • 添加并配置了服务(例如,builder.Services.AddSingleton<IMyDependency, MyDependency>())。

Blazor Server

Blazor Server项目模板:blazorserver

Blazor Server 模板创建 Blazor Server 应用的初始文件和目录结构。 该应用中填充了一个 FetchData 组件的演示代码,该组件从注册服务 WeatherForecastService 加载数据,且用户与 Counter 组件交互。

  • Data 文件夹:包含 WeatherForecast 类和 WeatherForecastService 的实现,它们向应用的 FetchData 组件提供示例天气数据。

  • Pages 文件夹:包含构成 Blazor 应用的可路由组件/页面 (.razor) 和 Blazor Server 应用的根 Razor 页面。 每个页面的路由都是使用 @page 指令指定的。 该模板包括以下组件:

    • _Host.cshtml:实现为 Razor 页面的应用的根页面:
      • 最初请求应用的任何页面时,都会呈现此页面并在响应中返回。
      • 此主机页面指定根 App 组件 (App.razor) 的呈现位置。
    • Counter 组件 (Counter.razor):实现“计数器”页面。
    • Error 组件 (Error.razor):当应用中发生未经处理的异常时呈现。
    • FetchData 组件 (FetchData.razor):实现“提取数据”页面。
    • Index 组件 (Index.razor):实现 Home 页。

备注

添加到 Pages/_Host.cshtml 文件的 JavaScript (JS) 文件应显示在关闭 </body> 标记之前。 在某些情况下,从 JS 文件加载自定义 JS 代码的顺序非常重要。 例如,确保在 Blazor framework JS 文件之前包含带有互操作方法的 JS 文件。

  • Properties/launchSettings.json:保留开发环境配置

  • Shared 文件夹:包含以下共享组件:

    • MainLayout 组件 (MainLayout.razor):应用的布局组件
    • NavMenu 组件 (NavMenu.razor):实现边栏导航。 包括 NavLink 组件 (NavLink),该组件可向其他 Razor 组件呈现导航链接。 NavLink 组件会在系统加载其组件时自动指示选定状态,这有助于用户了解当前显示的组件。
    • SurveyPrompt 组件 (SurveyPrompt.razor):Blazor 调查组件。
  • wwwroot:应用的 Web 根目录文件夹,其中包含应用的公共静态资产。

  • _Imports.razor:包括要包含在应用组件 (.razor) 中的常见 Razor 指令,如用于命名空间的 @using 指令。

  • App.razor:应用的根组件,用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • appsettings.json 和环境应用设置文件:提供应用的配置设置

  • Program.cs:应用的入口点,用于设置 ASP.NET Core 主机

  • Startup.cs:包含应用的启动逻辑。 Startup 类定义两个方法:

    • ConfigureServices:配置应用的依赖关系注入 (DI) 服务。 通过调用 AddServerSideBlazor 添加服务,并将 WeatherForecastService 添加到服务容器以供示例 FetchData 组件使用。
    • Configure:配置应用的请求处理管道:
      • 调用 MapBlazorHub 可以为与浏览器的实时连接设置终结点。 使用 SignalR 创建连接,该框架用于向应用添加实时 Web 功能。
      • 调用 MapFallbackToPage("/_Host") 以设置应用的根页面 (Pages/_Host.cshtml) 并启用导航。

其他资源