BootStrapBlazor之數據注入

簡言

  Blazor 面世之后，許多優秀的開發者也相繼投入到組件庫的研發中去，這也就意味着，前端開發又多了一種選則，而不僅僅是 Vue、react、Angular。
眾所周知，Blazor 有兩種托管方式方式：Client-Side和Server-Side。兩種模式，兩種工作方式，網上也有較多文章詳盡解釋了兩種模式的工作方式，在這里就不做太多贅述了。
接下來進入我們今天的正題：BootstrapBlazor 的數據注入，所謂數據注入，就是把 ORM 集成到組件內部，以較少的配置，即可完成增刪改查。

正題

1.首先，我們需要創建一個Blazor的示例工程，並且引入BootstrapBlazor的包，以及BootstrapBlazor的數據注入包。(示例以EFCore進行，並且是以父子表進行展示，ps：官網只是單表展示)

dotnet add package BootstrapBlazor
dotnet add package BootstrapBlazor.DataAcces.EntityFrameworkCore

創建 DbContext 類

在startup類中，注入數據服務

完成以上步驟，我們還需引入 css，js 文件，這里不做過多介紹，詳細請自行查看BootstrapBlazor；

2.接下來就該編寫我們的 razor 文件了

<Table TItem="Blog"
       IsPagination="true" PageItemsSource="@PageItemsSource"
       IsStriped="true" IsBordered="true" IsMultipleSelect="true" AutoGenerateColumns="true"
       ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true" UseInjectDataService="true"
       @ref="QueryTable">

  <RowButtonTemplate>
    <TableCellButton Size="Size.ExtraSmall" Color="Color.Primary" Icon="fa fa-edit" @onclick="(()=>AddPosts(context.Id))">添加</TableCellButton>
  </RowButtonTemplate>
  <DetailRowTemplate>
    @if (context.Posts is not null)
    {
      <Table TItem="Post" IsStriped="true" IsBordered="true" IsMultipleSelect="true" AutoGenerateColumns="true" Items="context.Posts" @ref="QueryChild">
      </Table>
    }
    else
    {
      <p>暫無文章</p>
    }

  </DetailRowTemplate>
</Table>

效果圖如下：（ps:子表並未啟用延遲加載）

3.由於官方示例文檔是操作單表，那就不滿足我們的當前需求，所以，我們需要重寫一下默認的數據注入方法，這里只需繼承DataServiceBase類，並重寫方法，最后只需在starpUp類，注入即可。

至此，我們完成增刪改查，查步驟，時間較為倉促，我們下次，繼續完成增刪改步驟。

歡迎大佬入群討論：（若①群滿員，請加②群）

  ①群：795206915
  ②群：675147445