現在每次啟動專案，預設路徑都會是/，但我們目前沒有 Component 套用這個路由，要自己切換到Post實在有些麻煩，另外 Menu 的圖示也跟名稱不符，我們來調整一下。
我們先來改 icon，由於font-awesome目前已用會員制，必須登入才能產生一套免費的 icon 集合，因此筆者使用bootstrap的icon。首先去bootstrap的icon頁面下載zip檔案（不想下載檔案的人可以直接引用 CDN），將檔案解壓縮存放在wwwroot，在_Layout.cshtml引用bootstrap-icons.css，在官網搜尋自己喜歡的 icon 套用即可，筆者這邊還做了些樣式調整。
接著開啟 Blazor Server 專案的launchSettings.json檔案，在 profiles 內的 BlazorServer 輸入這行"launchUrl": "Post"。
Day06 有提到繫結，不過只有稍微帶過，因為當時的目的只是展示form，現在來詳細說明一下。
Blazor 的資料繫結分為單向繫結（one way binding）跟雙向繫結（two way binding），單向繫結就是在頁面上輸入@variable，有什麼資料就顯示什麼。
雙向繫結則要用@bind-value將 input 內的資料跟頁面綁在一起，頁面輸入的內容也會反向影響資料。
如果有學過 Angular 的人應該會很熟悉，就是[ngModel]跟[(ngModel)]的用途，只是名字換了一個。
那 Blazor 有像 Angular 的(click)事件繫結嗎？也是有的，不過若用<InputText>Component 會說到較為複雜如EventCallBack的內容，所以筆者這邊先用單純的<input>元素，之後講到EventCallBack再回來說明。
先把<InputText>換成<input>，接著將@bind-Value改成@bind，再加入@bind:event，值為html的事件名，如onchange、oninput等等，這些事件在 MDN 都可以查到。接著在網頁的輸入框輸入內容，就可以看到底下的字即時變換了，可以看到我的焦點雖然仍在 input 元素上，底下的內容已經改變了。
不過oninput跟onchange的使用時機最好再拿捏一下，如果使用oninput繫結number型別的資料，當使用者輸入 1.5 的瞬間，就會被改為 1，這會讓使用者困惑，若用onchange，則是在使用者移開焦點後才會將 1.5 改為 1。若非得用oninput的話，可以將繫結資料改為nullable或是字串，再使用 getter,setter 自己做邏輯處理不合法資料。
那 Blazor 有類似 Angular 的pipe去改變網頁的資料格式如 number、datetime 嗎？目前有提供@bind:format繫結可以改變日期格式，我們先在PostModel加入一個CreateDateTime，接著複製一組標題的div貼上，將label跟@bind的繫結資料改一下，再把@bind:event改成@bind:format，就可以看到顯示成指定的日期格式。
要注意的是 Blazor 並沒有對應<select>的 Component，因為 HTML 的attribute不能有null，最接近null的概念是移除value這個attribute，但如果選到一個沒有value的<option>，瀏覽器會將該<option>的文字當成value。
本文引用：
註：本文程式碼透過 .NET 6 + Visual Studio 2022 重構，可點選原文連結與重構後程式碼比較學習，謝謝閱讀，支持原作者