Building web applications with Blazor + MudBlazor
Developer Presentation Template Hello, I AM MIGUEL TEHERAN Developer and consultant Microsoft MVP C# Corner MVP Alibaba cloud MVP You can find me at: Mteheran Mteheran.dev
Developer Presentation Template Blazor for web applications 01. Framework to create web applications 02. Free and Open Source 03. Cross Platform 04. Extension of ASP.NET 05. C#, HTML and CSS 06. Base on components
Developer Presentation Template Blazor Server vs Blazor WebAssembly 01. It runs in the server 02. Use SignalR to update the client 03. Faster processing large amount of data 01. It runs in the browser using Web Assembly 02. Single page application 03. Progressive web app (PWA) Both are good solution for .NET developers who wants to use C# and less JavaScript
Blazor Time Line Preview .NET 3.1 .NET 5 .NET 6 •Web Assembly •Blazor Server •SPA application •Visual Studio Support •Mono •.NET core integration •Share component •.NET Standard •CSS Isolation •Virtualization •Web SDK •Wasm size improved •Lazy loading •New Template •Hot reload •Required parameters •AOT compilation •Error boundaries •Components for react.js and angular 2018 .NET 7 •Hot reload improved •.NET MAUI •New console output •Inject services into custom validation attributes in Blazor 2019 2020 2022 2021
Developer Presentation Template MudBlazor MudBlazor is a material design component framework for Blazor, which facilitates web development framework without having to struggle with CSS and javascript. If we are looking for date selectors, progress bars, sorting, etc. MudBlazor has our back and almost all components use only C# and no JavaScript except when strictly necessary.
Developer Presentation Template TryMudBlazor A playground for MudBlazor https://try.mudblazor.com/
Steps to start with MudBlazor 1. dotnet new blazorwasm 2. dotnet add package MudBlazor 3. @using MudBlazor 4. add styles to index.html file 5. add javascript 6. add services 7. add components
Set up project Demo
MudBlazor Library ● Themes, Colors, Typography ● Layout ● Buttons ● Inputs ● Data Display ● Navigation ● Feedback ● Utilities
MudBlazor Library Demo
Why to use MudBlazor? ● Rich controls ● Easy to use (based on components) ● Great support ● Good performance
Recommended for reading in C# corner - CI/CD For Blazor Applications In Azure Devops (c- sharpcorner.com) - New Features In Blazor With .NET 6 (c-sharpcorner.com) - Unit Test For Blazor Components (c-sharpcorner.com)
Thank You mteheran.dev

Building Web Applications with Blazor and MudBlazor

  • 1.
  • 2.
    Developer Presentation Template Hello,I AM MIGUEL TEHERAN Developer and consultant Microsoft MVP C# Corner MVP Alibaba cloud MVP You can find me at: Mteheran Mteheran.dev
  • 3.
    Developer Presentation Template Blazorfor web applications 01. Framework to create web applications 02. Free and Open Source 03. Cross Platform 04. Extension of ASP.NET 05. C#, HTML and CSS 06. Base on components
  • 4.
    Developer Presentation Template BlazorServer vs Blazor WebAssembly 01. It runs in the server 02. Use SignalR to update the client 03. Faster processing large amount of data 01. It runs in the browser using Web Assembly 02. Single page application 03. Progressive web app (PWA) Both are good solution for .NET developers who wants to use C# and less JavaScript
  • 5.
    Blazor Time Line Preview.NET 3.1 .NET 5 .NET 6 •Web Assembly •Blazor Server •SPA application •Visual Studio Support •Mono •.NET core integration •Share component •.NET Standard •CSS Isolation •Virtualization •Web SDK •Wasm size improved •Lazy loading •New Template •Hot reload •Required parameters •AOT compilation •Error boundaries •Components for react.js and angular 2018 .NET 7 •Hot reload improved •.NET MAUI •New console output •Inject services into custom validation attributes in Blazor 2019 2020 2022 2021
  • 6.
    Developer Presentation Template MudBlazor MudBlazoris a material design component framework for Blazor, which facilitates web development framework without having to struggle with CSS and javascript. If we are looking for date selectors, progress bars, sorting, etc. MudBlazor has our back and almost all components use only C# and no JavaScript except when strictly necessary.
  • 7.
    Developer Presentation Template TryMudBlazor Aplayground for MudBlazor https://try.mudblazor.com/
  • 8.
    Steps to startwith MudBlazor 1. dotnet new blazorwasm 2. dotnet add package MudBlazor 3. @using MudBlazor 4. add styles to index.html file 5. add javascript 6. add services 7. add components
  • 9.
  • 10.
    MudBlazor Library ● Themes,Colors, Typography ● Layout ● Buttons ● Inputs ● Data Display ● Navigation ● Feedback ● Utilities
  • 11.
  • 12.
    Why to useMudBlazor? ● Rich controls ● Easy to use (based on components) ● Great support ● Good performance
  • 13.
    Recommended for readingin C# corner - CI/CD For Blazor Applications In Azure Devops (c- sharpcorner.com) - New Features In Blazor With .NET 6 (c-sharpcorner.com) - Unit Test For Blazor Components (c-sharpcorner.com)
  • 14.