This document provides an overview of ASP.NET Core and Blazor frameworks. It discusses the differences between ASP.NET and ASP.NET Core, benefits of ASP.NET Core like cross-platform support and modern frontend frameworks. It also summarizes Razor Pages, MVC, and Blazor - the different UI frameworks in ASP.NET Core. Blazor allows building client-side web apps using C# and runs using WebAssembly or as server-rendered apps. The document demonstrates how Blazor works and compares client-side versus server-side Blazor. It also includes a demo of building hybrid mobile/desktop apps with Blazor and .NET Multi-platform App UI.

1. Ed Charbeneau
Modernizing Web
Applications with
.NET 6

2. 2
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
ASP.NET vs. ASP.NET Core
Full-Framework ASP.NET Core
• Windows only
• Matured
• Supported .NET v. 4.6.2 – 4.8+
• Cross Platform & OSS
• Performant
• Dependency Injection built-in
• Configuration improvements
• Improved Middleware Pipeline
• Modern Front-End Frameworks
• Rapid Release Cycle

3. 3
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
ASP.NET Core
benefits:
• A unified story for building web UI
and web APIs.
• Architected for testability.
• Razor Pages makes coding page-
focused scenarios easier and more
productive.
• Blazor lets you use C# in the browser
alongside JavaScript. Share server-
side and client-side app logic all
written with .NET.

4. 4
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
ASP.NET Core
benefits: (cont.)
• Ability to develop and run on
Windows, macOS, and Linux.
• Open-source and community-
focused.
• Integration of modern, client-side
frameworks and development
workflows.
• Support for hosting Remote
Procedure Call (RPC) services using
gRPC.

5. 5
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
ASP.NET MVC -> ASP.NET Core MVC
• .NET Upgrade Assistant ⚠️
• Expect Breaking Changes ⚠️
• App Startup ⚠️
• App Settings ⚠️
• Static File hosting ⚠️
• Dependency Injection ⚠️
• Routing ⚠️

6. 6
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
ASP.NET MVC -> ASP.NET Core MVC
• HtmlHelpers are generally
unchanged ✅
• HTML ✅
• CSS ✅
• JavaScript ✅

7. 7
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
ASP.NET vs. ASP.NET Core: UI
Full-Framework ASP.NET Core
• WebForms
• MVC 5.2
• MVC
• Razor Pages
• Blazor

8. 8
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
MVC
(Model-View-Controller)
• Clear separation of responsibilities
• Testable
• Flexible
• Server Rendered views, JavaScript
for interactivity

9. 9
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
MVC (Model-View-Controller)
• Razor lets you render a
page/component using C#
• @ syntax
• Rendered on the server
• Client-side logic is JavaScript
(typically jQuery)
• Html Helpers / TagHelpers / Razor
Components

10. 10
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Razor Pages
• ASP.NET without the fuss of MVC
• Feature focused
• MVVM like
• Server Rendered views, JavaScript
for interactivity

11. 11
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Razor Pages
• Razor lets you render a
page/component using C#
• @ syntax
• Rendered on the server
• Client-side logic is JavaScript
(typically jQuery)
• Html Helpers / TagHelpers / Razor
Components

12. 12
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Blazor Wasm
(WebAssembly)
• .NET in the Browser
• Web Standards
• Rendered Client-Side
• Single Page Application (SPA)
• Much like Angular/React but using C#
• Low Learning Curve for .NET Developers
• Great transition from WebForms or
Silverlight

13. 13
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Blazor Server
• Same framework as Blazor Wasm
( minus WebAssembly )
• Rendered Server-Side, instead of
Client
• .NET on the server, thin client on the
browser
• Great for LOB apps

14. 14
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Blazor
• Razor Components / RenderTree
• @ syntax
• Rendered on the client
• UI logic is C# instead of JS

15. 15
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
ASP.NET in .NET Core: Component Models
Framework Component Models
MVC HtmlHelpers, TagHelpers, Razor Components*
Razor Pages HtmlHelpers, TagHelpers, Razor Components*
Blazor Razor Components
*Requires Blazor dependencies

16. Blazor Deep Dive

17. 17
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Blazor is a new .NET web framework using C# and
HTML that runs in the browser.
What is Blazor
Browser + Razor = Blazor

18. 18
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Just the FAQs
What it IS What it is NOT
• Client-side C#
• Web Standard Technologies
• WebAssembly
• .NET Standard
• A Plugin
• ASP.NET WebForms
• Trans-piled JavaScript

19. PUBLISHING
COMPONENT MODEL FORMS & VALIDATION
DEPENDENCY INJECTION
AUTO REBUILD
UNIT TESTING
JAVASCRIPT INTEROP
SERVER-SIDE RENDERING
DEBUGGING
INTELLISENSE & TOOLING
LAYOUTS
ASSEMBLY TRIMMING
COMPONENT PACKAGES
ROUTING
Blazor

20. 20
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
blazorREPL.Telerik.com
• Write / Run / Share / Embed
• Live in the browser
• No install
• No account required
• Completely FREE

21. 21
© 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved.
Blazor:Client& Server
https://...
DOM
Razor Components
.NET
WebAssembly
https...
DOM
ASP.NET
Core
SignalR
Razor Components
.NET

22. 22
© 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved.
HowClient-SideWorks
https://...
Engine
Compiler
Byte Code
DOM
Parser
Foo.js

23. 23
© 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved.
HowClient-SideWorks
https://...
DOM
Engine
Parser
Compiler
Byte Code
Foo.wasm
Parser
Compiler

24. 24
© 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved.
HowClient-SideWorks
https://...
DOM
Engine
mono.wasm
.NET Runtime

25. 25
© 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved.
HowClient-SideWorks
https://...
DOM
.NET Runtime
.NET Application
App.dll

26. 26
© 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved.
https...
HowServer-SideWorks
ASP.NET Core
.NET Runtime
SignalR Blazor.server.js
DOM

27. 27
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Let’s Compare
Client-Side Server-Side
• Low-no server overhead
• RESTful
• Offline & PWA capable
• Larger payload size
• Disconnected Environment
• Performance
• Tiny Payload Size
• Less Abstraction
• Pre-Rendering
• Connection Required
• Server Resources

28. Blazor Demo

29. 29
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Hybrid apps with .NET & Blazor
Native desktop app
Web view
Native mobile app
Web view
.NET
.NET
Blazor
Blazor

30. 30
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Hybrid app benefits
• Reuse existing web development skills and code
• Access to all the native capabilities of the device
• Mix native & web UI
• Reduce app development time

31. 31
© 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Reuse UI components across native & web
Mix & match web and native UI
Directly access native device functionality
Cross-platform mobile & desktop apps
(primary focus on desktop for .NET 7+)
Blazor hybrid apps with
.NET Multi-platform App UI
.NET Multi-platform App UI
WinUI Mac
Catalyst
Android
iOS
iOS
macOS
github.com/dotnet/maui
Blazor

32. Blazor Hybrid Demo