Blazor组件

news2024/11/25 2:56:28

Blazor组件

前言：博主文章仅用于学习、研究和交流目的，不足和错误之处在所难免，希望大家能够批评指出，博主核实后马上更改。

组件：

Blazor 应用基于 Razor 组件，通常仅称为组件。组件是 UI 的一个元素，例如页面、对话框或数据输入窗体。组件是内置到 .NET 程序集的 .NET C# 类。

Razor 是指组件通常以 Razor 标记页面的形式编写，用于客户端 UI 逻辑和组合。 Razor 是一种语法，用于将 HTML 标记与专为提高开发人员工作效率而设计的 C# 代码结合在一起。 Razor 文件使用 .razor 文件扩展名。

创建一个Blazor Server项目

在这里插入图片描述

项目结构说明
- Data 文件夹：包含 WeatherForecast 类和 WeatherForecastService 的实现，它们向应用的 FetchData 组件提供示例天气数据。
- Pages 文件夹：包含 Blazor 应用的可路由 Razor 组件 (.razor) 和 Blazor Server 应用的根 Razor 页。每个页面的路由都是使用 @page 指令指定的。该模板包括以下组件：
  - ```
  _Host.cshtml
```
  ：实现为 Razor 页面的应用根页面：
  - 最初请求应用的任何页面时，都会呈现此页面并在响应中返回。
  - 此主机页面指定根 App 组件 (App.razor) 的呈现位置。
- Counter 组件 (Counter.razor)：实现“计数器”页面。
- Error 组件 (Error.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 根目录文件夹，其中包含应用的公共静态资产。
- _Imports.razor：包括要包含在应用组件 (.razor) 中的常见 Razor 指令，如用于命名空间的 @using 指令。
- App.razor：应用的根组件，用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。
- appsettings.json 和环境应用设置文件：提供应用的配置设置。
运行效果

修改Home页面，将Counter组件集成进去

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />
<h1>集成Counter组件</h1>
<Counter></Counter>

在这里插入图片描述

修改Home页面，将Counter组件集成进去

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />
<h4>集成Counter组件</h4>
<Counter></Counter>
<h4>集成Fetchdata组件</h4>
<FetchData></FetchData>

在这里插入图片描述

创建一个自定义的Messges组件

<PageTitle>Messges</PageTitle>
<h1>
    @str
</h1>

@code {
    [Parameter]
    public string? str { get; set; } = "hello word";

}

集成到Home页面

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />
@* <h4>集成Counter组件</h4>
<Counter></Counter>
<h4>集成Fetchdata组件</h4>
<FetchData></FetchData> *@
<h4>集成Messges组件</h4>
<Messges str="我是Messges组件"></Messges>