iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
1

今天要來介紹如何將自己撰寫的元件包成元件類別庫,並提供給 Blazor Server 與 Blazor WebAssembly 使用,並以 MatBlazor 來示範如何使用別人的元件類別庫。


要建立 Blazor Server 與 Blazor WebAssembly 都能使用的元件類別庫我們需要建立 Razor 類別庫(RCL)。

https://raw.githubusercontent.com/MMiooiMM/learn-blazor-in-30-days/master/figures/28/select-rcl.png

注意別勾選到 Support 頁面與檢視,否則你的範本專案會跟我文章的內容差別很大。

https://raw.githubusercontent.com/MMiooiMM/learn-blazor-in-30-days/master/figures/28/do-not-check-support-page-and-view.png

建立完成後你會得到下面的專案架構。

https://raw.githubusercontent.com/MMiooiMM/learn-blazor-in-30-days/master/figures/28/rcl-structure.png

雖然範本提供了 JavaScript 檔與相關的服務,卻沒有在 Component1.razor 中使用,所以我們修改一下範本來讓該服務能被使用如:

@* Component1.razor *@
@inject Microsoft.JSInterop.IJSRuntime JSRuntime
<div class="my-component">
    This Blazor component is defined in the <strong>Blazor30daysRCL</strong> package.
</div>
<button @onclick="@(()=>ExampleJsInterop.Prompt(JSRuntime, "Prompt..."))">Click ME</button>

這樣就完成一個擁有自定義 css 與 js 且有一個元件能使用的 RCL 了,回到主專案並參考 RCL 專案後,我們就可以呼叫該專案下的所有類別了,如果不想重複寫命名空間,記得在 _imports.razor 引用命名空間即可。

但會發現使用 Component1.razor 時會發生找不到對應的 css 與 js 檔的錯誤,此時我們只需要在 index.html 載入相對的 css 與 js 檔即可,而其目錄為 _content/{project name}/ 就會對應到該專案的 wwwroot/ 目錄如:

<!--index.html-->
<link href="_content/Blazor30daysRCL/styles.css" rel="stylesheet" />
<script src="_content/Blazor30daysRCL/exampleJsInterop.js"></script>

其中 Blazor30daysRCL 是我的 RCL 專案名稱。

這樣就完成 RCL 建立與使用方式了,是不是很簡單呢?建立完後也可以推送到 Nuget 或者公司內部的套件平台供大家使用。

最後簡單的介紹一下 MatBlazor,雖然並非官方提供,但屬於 MIT 授權,如果是畫面苦手或者是想參考別人如何客製化元件,推薦你參考這個 repo(MatBlazor Github)。

使用方式很簡單,從 Nuget 上面下載,也可以輸入 Install-Package MatBlazordotnet add package MatBlazor 安裝,使用時別忘了剛剛提到的 css 與 js 檔案的參考方式,在 index.html 合適的地方補上:

<script src="_content/MatBlazor/dist/matBlazor.js"></script>
<link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />

這樣就可以使用第三方套件了!至於 MatBlazor 元件的介紹與元件的設計技巧,有機會的話再分享囉。


以上就是建立 RCL 與使用 RCL 的方式,一樣有簡單的範本程式碼 - day28

感謝大家的閱讀,我們明天見。

參考資料
ASP.NET Core Razor 元件類別庫
MatBlazor
MatBlazor Github


上一篇
多國語系魔術
下一篇
測試魔術
系列文
大內魔術 Blazor - 誰說前端一定要寫JS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言