Radzen 是一個 UI 元件的開發商，除了有出 Angular 的版本以外，也有提供 Blazor 的版本。剛好專案是 Open Source 的，我們就來看看人家都如何設計及規劃，並且跟官方的文件做一個實務上的結合。

1. 探索 .NET 新世界

2. Blazor 與 Radzen 同行
Jimmy Ho

3. UI Component
• Telerik
• Blazorise
• Ant Design
• Blazorstrap
• Radzen
• …

5. Jimmy Ho
• 任職於資通電腦
• ciMes系統研發
• 從後端到前端再到後端
• 前往特級廚師的路上
• 部落格-機密檔案

6. Agenda
• Component
• Data binding
• Unmatched
• Template
• Cascading Parameter
• Validation
• Manual render
• JavaScript interop
• Testing

7. Source code
• Demo site
• RadzenTemplateForm
• Cascading parameter
• BuildRenderTree
• Template
• RadzenTextBox: FormComponent: RadzenComponent
• Data Binding
• Unmatched parameter
• JS Interop
• RadzenRequiredValidator: ValidatorBase
• Validation

8. Data binding
• MS Document
• 雙向綁定的屬性名稱為 [input property] + changed
• 跨copmonent雙向綁定，使用另一個屬性的get set

9. Unmatched Parameter
• MS Document
• 快速 element 的原生屬性
• 先後順序會影響輸出

10. Template
• MS Document
• 由外部決定內容，元件指定位置
• 使用 typeparam 決定型別
• 名稱為 ChildContent 表示預設

11. Cascading Parameter
• MS Document
• 跨 component 存取資料
• 可以將元件本身往下傳
• 跟 React 的 Context 概念類似

12. Validation
• MS Document
• 搭配 Cascading parameter
• 監聽 EditContext 事件
• OnFieldChanged
• OnValidationRequested

13. Manual render
• MS Document
• 進階應用
• 可以更好的控制一些邏輯
• 順序很重要
• 缺點是可讀性很差

14. JavaScript interop
• MS Document
• 透過 IJSRuntime 來呼叫 JS function
• JSInvokable 屬性讓 JS 可以呼叫
• 我的文章

15. Testing
• MS Document
• 任何一種測試專案下搭配 bUnit
• 以元件的行為互動為主
• 透過參數/事件的影響，比對html的差異
• Source code

16. Thanks for joining!

17. Azure Taiwan
User Group