Blazor 與 Radzen 同行
Download as PPTX, PDF0 likes293 views
本文件探讨了 .NET 中 Blazor 和 Radzen 的使用，涵盖了组件、数据绑定、验证、手动渲染及 JavaScript 互操作等高级主题。文档介绍了双向绑定、跨组件数据访问以及如何进行测试和源代码管理。内容侧重于 Blazor 组件的结构与灵活应用，适用于开发人员和技术爱好者。
![Data binding
• MS Document
• 雙向綁定的屬性名稱為 [input property] + changed
• 跨copmonent雙向綁定，使用另一個屬性的get set](https://image.slidesharecdn.com/2021-dotnet-conf-jimmy-blazor-radzen-211220013342/85/Blazor-Radzen-8-320.jpg)
Blazor 與 Radzen 同行
- 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