Corvus+ Blazor(8)-Component

Blazor的畫面是由Component元件所組成的，這些Component元件可大可小，它可以是頁面，也可以是一個按鈕。 Component包含了Html、Razor與C#程式碼。建立這些Component的好處就是可以重複使用，增加我們程式的維護性。

在Blazor中的Component元件就是razor元件，而我們前面調整的MainLayout就是Component中的一種。因為Blazor的主要都是以Component元件所組成的，因此接下來的文章基本上都會以Component為核心介紹元件的相關功能。而本篇文章會先教大家建立可路由元件-routable component。

可路由元件就是可以做為一個頁面呈現的元件，需要在程式碼頂端加上「@page」指示詞來宣告該頁面的路徑。

這邊會新增Blog的文章清單及文章內容做為範例：

1.在Pages中新增「Blog.razor」檔案。

2.「Blog.razor」檔案加入清單程式碼：


@page "/blog"

<div>
    <article class="pt-3" style="border-top: 1px solid #F2F2F2; border-bottom: 1px solid #F2F2F2;">
        <a href="blog/1" class="text-dark">
            <h2 class="fw-bold fs-4">Blazor-前言</h2>
            <p class="text-secondary d-flex align-items-center fs-6">
                2023-10-13 17:25
            </p>
        </a>
    </article>
</div>

@code{

}

可以看到範例程式碼中，程式分成了3個區塊：

頂端區塊(01~03)：放置指示詞，如@page、@inherits及@inject等等。

中間區塊(04~13)：放置主要顯示元素，這邊會混和html、razor及C#語法。

底部區塊(15~17)：放置C#程式碼，處理頁面事件、畫面所需資料。若是採用Code behind寫法的話不會有此區塊。

3.新增「BlogPost.razor」檔案

4.「BlogPost.razor」檔案加入清單程式碼：


@page "/blog/1"

<div class="ms-auto pb-5">
文章1
</div>

5.執行後選blog分頁就能看到文章清單及內容了。

圗：文章清單

圗：文章內容

Blazor(8)-Component

Component

Routable component