Blazor Web APP学习记录

1 呈现模式

参见：https://learn.microsoft.com/zh-cn/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0
Blazor Web App 中的每个组件会采用呈现模式来确定其使用的托管模型、呈现位置以及它是否是交互式的，主要的呈现模式为以下4种：

1.1 静态SSR

静态服务器端呈现，静态页面，无任何交互。

1.2 服务器端交互SSR

组件中定义@rendermode InteractiveServer/@rendermode @(new InteractiveServerRenderMode(false：是否进行预加载))或使用组件时进行指定@rendermode=“InteractiveServer或RenderMode.InteractiveServerRenderMode.InteractiveServer”

1.3 客户端交互CSR

组件中定义@rendermode InteractiveWebAssembly或使用组件时指定@rendermode=“InteractiveWebAssembly或RenderMode.InteractiveServerRenderMode.InteractiveWebAssembly”

1.4 自动交互式

下载 Blazor 捆绑包后，在后续访问时先使用 Blazor Server 然后使用 CSR 的交互式 SSR。
先服务器，后客户端。
组件中定义@rendermode InteractiveAuto

1.5 注意

1.呈现模式不可交叉使用，比如服务器端交互的父组件不可使用客户端交互的子组件；
2.呈现模式不指定的情况下，会继承父组件的呈现模式；
3.级联参数不可跨呈现模式使用；

2 Blazor Web APP项目

新建的Blazor Web APP项目，选择呈现模式为“自动交互式”，项目结构如下：

“.Client”部分：使用交互式 WebAssembly 或交互式自动呈现模式的组件必须位于 .Client 项目中。
注意：
1.界面可存放在主项目中的“Components/Pages”或“.Client”项目下的“Pages”中，若这两个目录下存在同样导航的界面，则无法定位到相应界面；
2.服务器项目的 Components 文件夹用于保存应用的服务器端 Razor 组件。 共享组件通常放置在 Components 文件夹的根目录中（最好在主项目中），而布局和页面组件通常放置在 Components 文件夹内的文件夹中，共享组件不要在组件中定义呈现模式，应在使用时定义或继承；

3 会话状态

参见：https://learn.microsoft.com/zh-cn/aspnet/core/blazor/state-management?view=aspnetcore-8.0&pivots=server

Blazor WebAssembly和Blazor Server不同且不共用，需要根据项目类型分别进行设置，目前暂时限制Blazor Web APP的使用。

3.1 Blazor Server会话状态保存

1.服务器端保存：将信息存储到服务器上，也就是数据库中，如：Blob存储，键值存储，关系型数据库和表存储；
2.URL：使用访问地址参数；
3.浏览器存储：localStorage（显示清除之前，当前浏览器共享存储）；sessionStorage（仅当前选项卡可用）※注意数据保护，预呈现状态下不可用（预呈现过程中不可用）※；
4.可编写内存中状态容器存储信息；

3.2 Blazor WebAssembly 会话状态保存

在 Blazor WebAssembly 应用中创建的用户状态会保存在浏览器的内存中，当用户关闭并重新打开其浏览器或重新加载页面时，浏览器的内存中保存的用户状态丢失。

1.服务器端存储：对于跨多个用户和设备的永久数据持久性，应用可以使用通过 Web API 访问的独立服务器端存储；
2.URL：同上；
3.浏览器存储：localStorage 和 sessionStorage 可用于 Blazor WebAssembly 应用，但只能通过编写自定义代码或使用第三方包的方式使用；
4.可编写内存中状态容器存储信息。

4 使用JS

@page "/"
@inject IJSRuntime JSRuntime;
@using System.Drawing;
@using System.IO;
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>



<video id="video" width="640" height="480" autoplay></video>

<div>
  <button type="button" class="btn btn-primary" @onclick="StartVideo">Click Me</button>
</div>

Welcome to your new app.

<script>
  function startVideo() {
    alert("Test Alert!");

    var video = document.getElementById('video');

    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
        video.src = window.URL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
      });
    }
  }
</script>

@code{
  async Task StartVideo()
  {
    await JSRuntime.InvokeVoidAsync("startVideo");
  }
}

5 模板化组件开发

参见：https://my.oschina.net/u/3772973/blog/5187889

//模板化组件
@typeparam TItem     //声明为一个泛型类型
<br />
<h3>@Title</h3>
<table class="table table-striped table-bordered">
  <thead class="thead-dark">
    <tr>
      @HeaderTemplate
    </tr>
  </thead>
  <tbody>
    @foreach (var item in Items)
    {
      <tr>
        @RowTemplate(item)
      </tr>
    }
  </tbody>
  <tfoot>
    <tr>
      @FooterTemplate
    </tr>
  </tfoot>
</table>
@code {
  [Parameter]
  public string Title { get; set; }

  [Parameter]
  public RenderFragment HeaderTemplate { get; set; }

  [Parameter]
  public RenderFragment<TItem> RowTemplate { get; set; }

  [Parameter]
  public RenderFragment FooterTemplate { get; set; }

  [Parameter]
  public IReadOnlyList<TItem> Items { get; set; }
}
//组件中使用
<div class="col">
  @if (Orders != null)
  {
    <TableWidget Title="Recent Orders" Items="Orders">
      <HeaderTemplate>
        <th scope="col">Order</th>
        <th scope="col">Date</th>
        <th scope="col">Status</th>
        <th scope="col">Total</th>
      </HeaderTemplate>
      <RowTemplate>
        //context 是一个隐式参数，所有类型为 RenderFragment<T> 的组件参数都可以使用。我们可以使用 context 访问我们正在处理对象的属性
        <td>@context.OrderNo</td>
        <td>@context.OrderDate.ToShortDateString()</td>
        <td>@context.Status</td>
        <td>@context.OrderTotal</td>
      </RowTemplate>
    </TableWidget>
  }
</div>

6 Blazor组件刷新

@code {
    //组件布局刷新
    public void RefreshLayout()
    {
        StateHasChanged();
    }
}