Blazor per uno sviluppatore Web Form

Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
Blazor per uno sviluppatore
Web Form
Andrea Dottor
Microsoft MVP Developer Technologies
scansiona per
codice e slide
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Sponsor
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Un po' di storia
• 2001 Web Forms .NET Framework 1.0
• 2008 ASP.NET MVC .NET Framework 3.5
• 2013 ASP.NET MVC 5.2 .NET Framework 4.5
• 2016 ASP.NET Core 1.0 .NET Core 1.0
• 2019 .NET Framework 4.8
• 2019 Blazor server .NET Core 3.0
• 2020 Blazor WebAssembly .NET Core 3.2
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Perchè "Blazor per uno sviluppatore WebForm"?
• Il .NET Framework non riceverà nuove funzionalità
• Web Forms non è supportato in ASP.NET Core
• Blazor ha un modello di sviluppo più simile a Web Form rispetto a
MVC o Razor Pages
"After .NET Core 3.0 we will not port any more features from .NET
Framework. If you are a Web Forms developer and want to build a
new application on .NET Core, we would recommend Blazor which
provides the closest programming model. "
[.NET Core is the Future of .NET] 06.06.2019
https://devblogs.microsoft.com/dotnet/net-core-is-the-future-of-net/
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Blazor for ASP.NET Web Forms Developers
https://docs.microsoft.com/en-us/dotnet/architecture/blazor-for-web-forms-developers/
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
(.NET Conf 2020) From Web Forms to Blazor
Introducing the Blazor Web Forms Components
https://www.youtube.com/watch?v=ceGzm-pBhx4
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Blazor for Web Form and C# Developers
https://www.youtube.com/watch?v=gmopA3LEEeE
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Migrating a Windows Forms App to Blazor:
The Amazing and True Story of GIFBot
https://www.youtube.com/watch?v=NRDdu67VJH0
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Pagine e Componenti
• Blazor ha il concetto di componente
• File con estensione .razor
• Corrispondenza con i file ascx di Web Form
• Un componente può essere anche una pagina
• Stesso uso dei file aspx in Web Form
• I componenti sono scritti utilizzando la sintassi Razor, combinando
codice HTML e C#
• Il codice C# può essere inserito in un blocco "@code" o in un file separato
• Stesso uso dei file MyPage.aspx.cs, MyComponent.ascx.cs
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Components → WebForm UserControl
• Un componente può venir richiamato utilizzando il suo nome come
fosse un tag html
• Possono avere parametri (in ingresso)
• E' possibile passare oggetti complessi e non solo tipi semplici come capitava
in Web Form
• Possono esporre eventi
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
BlazorWebFormsComponents
Editor Controls
• AdRotator
• Button
• HiddenField
• HyperLink
• Image
• ImageButton
• Label
• LinkButton
• Literal
Data Controls
• DataList
• FormView
• GridView
• ListView
• Repeater
Validation Controls
• CompareValidator
• CustomValidator
• RegularExpressionValidator
• RequiredFieldValidator
• ValidationSummary
Navigation Controls
• TreeView
https://github.com/FritzAndFriends/BlazorWebFormsComponents
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Modello Event-Driven
• I componenti hanno un proprio ciclo di vita basato su eventi
• OnInitialized{Async}
• OnParametersSet{Async}
• OnAfterRender{Async}
• I componenti possono scatenare eventi
• @on{EVENT}
• Possiamo gestire gli eventi dei controlli
associando un nostro metodo
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Mantenimento dello stato → ViewState
• WebForm fa uso del ViewState per mantenere i valori tra un postback
e l'altro
• Un componente Blazor mantiene i propri valori fino a quando non
viene rimosso o la pagina non viene ricaricata
• Ogni dato salvato in una proprietà o field viene mantenuto
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
Confronto Web Form - Blazor
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
Cosa c'è da imparare
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Razor engine
• Il carattere @ permette di richiamare codice C# all'interno del markup
HTML
• Implicit Razor expressions:
• Explicit Razor expressions:
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Razor engine
• Razor code blocks:
• Control structures:
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Startup.cs → Global.asax
• La classe Startup viene richiamata all'avvio dell'applicazione e
permette di configurare quali funzionalità l'applicazione utilizza
• Simile al Global.asax (Application_Start, Application_BeginRequest, …)
• ConfigureServices: aggiunta delle funzionalità/servizi necessari
all'applicazione, andando a configurare la Dependency Injection
• Configure: permette di specificare i middleware necessari
all'applicazione
• Ogni richiesta HTTP viene elaborata da questi middleware nel preciso ordine
con il quale li andiamo a inserire
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Startup.ConfigureServices()
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Startup .Configure()
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Differente modalità per Blazor WebAssembly
• Nella classe Program è possibile configurare l'applicazione e definire i
servizi utilizzanti dalla Dependency Injection
• Non c'è una definizione di pipeline
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Dependency Injection
• Transient: il servizio viene creato ogni volta che viene richiesto.
• Scoped: il servizio viene creato una sola volta per "scope". In
un'applicazione web corrisponde ad una richiesta http.
• *In Blazor Scoped si comporta come un Singleton
• Singleton: il servizio viene creato la prima volta che viene richiesto.
Tutte le volte successive, viene passata l'istanza già creata.
services.AddScoped<IMyDependency, MyDependency>();
services.AddSingleton<IMyDependency, MyDependency>();
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Depencency Injection
• In un componente blazor:
@inject IDataAccess DataRepository
• Nel caso venga utilizzata una classe base (codice C# in un file separato) è
possibile utilizzare l'InjectAttribute:
[Inject]
protected IDataAccess DataRepository { get; set; }
• Per utilizzarla in classi create tramite DI, utilizzare la Constructor
injection
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Depencency Injection - Blazor default services
• HttpClient: permette di eseguire richieste HTTP
• Scoped
• IJSRuntime: fornisce i metodi per invocare funzioni JavaScript
• Blazor WebAssembly: Singleton
• Blazor Server: Scoped
• NavigationManager: helper per gestire gli url e per navigare
• Blazor WebAssembly: Singleton
• Blazor Server: Scoped
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Gestione della configurazione (Blazor Server)
• Non esiste più la classe ConfigurationManager
• Il file di configurazione utilizza JSON e non XML
• La configurazione viene letta utilizzando la Dependency Injection
• Servizio IConfiguration passato tramite il costruttore
• Options pattern
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
JSInterop
• Tramite il servizio IJSRuntime che ci viene iniettato dalla DI è possibile
invocare funzioni JavaScript
• Il tipo di ritorno può specificando il TValue nel metodo InvokeAsync
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
Demo progetto completo
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
Migrare applicazioni esistenti
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
nessuna scorciatoia da poter prendere
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Migrate from ASP.NET Web Forms to Blazor
• https://docs.microsoft.com/en-us/dotnet/architecture/blazor-for-web-forms-developers/migration
• Server-side versus client-side hosting
• Create a new project
• Enable startup process
• Migrate HTTP modules and handlers to middleware
• Migrate static files
• Migrate runtime bundling and minification setup
• Migrate ASPX pages
• Migrate configuration
• Migrate data access
• Architectural changes
• Migration conclusion
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Blazor Server o WebAssembly?
• Blazor Server permette di richiamare eventuale logica di business e/o
accesso ai dati direttamente dai componenti
• Con Blazor Web Assembly si deve comunicare con il backend utilizzando delle
API Rest, gRPC o SignalR
• Se la logica dell'applicazione non è nella UI
• Viene riscritto "solo" il progetto di UI e non l'intero applicativo
• Con Blazor Web Assembly la logica di business può essere richiamate da delle
API Rest
• Con Blazor Server la logica di business può essere richiamata direttamente dai
componenti Blazor
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Una terza scelta: RazorComponent
• Uso di componenti Blazor in applicazioni Razor Pages
• Permettono di non vincolarsi ad una SPA Blazor
• Possibilità di inserire Blazor per le sole parti dinamiche
dell'applicazione
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
RazorComponent
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Controlli di terze parti
• Gran parte delle aziende che sviluppa controlli ha realizzato una
propria libreria per Blazor
• Prestare attenzione alla maturità di queste librerie
• Non sempre sono complete di tutti i controlli
• Non tutti i controlli hanno le stesse funzionalità dei rispettivi per ASP.NET Core
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
Conclusioni
• Blazor velocizza la migrazione di applicativi Web Form (rispetto all'uso
delle sole Razor Pages o MVC)
• La curva di apprendimento si abbassa
• Sviluppatori desktop (WPF, Windows Forms) possono passare allo
sviluppo web con maggiore facilità
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
Domande? Dubbi? Perplessità?
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+
/
+
www.dottor.net
andrea@dottor.net
@dottor
Andrea Dottor
Microsoft MVP Developer Technologies
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
Partecipate alle discussioni
https://fb.me/groups/998755440506950/
https://www.linkedin.com/groups/8896269/
https://github.com/blazordevita
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
Alla prossima!
Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani
blazordevita
blazordev.it
+ +
/
Seguite la community!
https://twitter.com/blazordevita
https://fb.me/blazordeveloperitaliani
https://github.com/blazordevita
https://blazordev.it/
1 de 40

Mais conteúdo relacionado

Mais procurados

Introduzione ad ASP.NET CoreIntroduzione ad ASP.NET Core
Introduzione ad ASP.NET CoreAndrea Dottor
783 visualizações32 slides
Esempi praticiEsempi pratici
Esempi praticiDotNetMarche
495 visualizações25 slides
Alla scoperta di gRPCAlla scoperta di gRPC
Alla scoperta di gRPCAndrea Dottor
704 visualizações33 slides
ASP .NET Core hands-onASP .NET Core hands-on
ASP .NET Core hands-onugidotnet
263 visualizações40 slides

Mais procurados(20)

Introduzione ad ASP.NET CoreIntroduzione ad ASP.NET Core
Introduzione ad ASP.NET Core
Andrea Dottor783 visualizações
Creare API pubbliche, come evitare gli errori comuniCreare API pubbliche, come evitare gli errori comuni
Creare API pubbliche, come evitare gli errori comuni
Andrea Dottor510 visualizações
Esempi praticiEsempi pratici
Esempi pratici
DotNetMarche495 visualizações
Blazor: are we ready for the launch?Blazor: are we ready for the launch?
Blazor: are we ready for the launch?
Andrea Agnoletto110 visualizações
Alla scoperta di gRPCAlla scoperta di gRPC
Alla scoperta di gRPC
Andrea Dottor704 visualizações
ASP .NET Core hands-onASP .NET Core hands-on
ASP .NET Core hands-on
ugidotnet263 visualizações
Customize ASP.NET Core scaffoldingCustomize ASP.NET Core scaffolding
Customize ASP.NET Core scaffolding
Andrea Dottor231 visualizações
ASP.NET MVC 6 - uno sguardo al futuroASP.NET MVC 6 - uno sguardo al futuro
ASP.NET MVC 6 - uno sguardo al futuro
Andrea Dottor8.8K visualizações
ASP.NET performance optimizationASP.NET performance optimization
ASP.NET performance optimization
Andrea Dottor10K visualizações
ASP.NET 4.6 e ASP.NET 5...l'evoluzione del webASP.NET 4.6 e ASP.NET 5...l'evoluzione del web
ASP.NET 4.6 e ASP.NET 5...l'evoluzione del web
Andrea Dottor398 visualizações
Generazione Dinamica di Codice in .NETGenerazione Dinamica di Codice in .NET
Generazione Dinamica di Codice in .NET
Stefano Ottaviani571 visualizações
Sviluppo Web Agile con Castle MonorailSviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle Monorail
DotNetMarche483 visualizações
Blazor - i limiti sono fatti per essere superatiBlazor - i limiti sono fatti per essere superati
Blazor - i limiti sono fatti per essere superati
Commit University128 visualizações
What's New in ASP.NET 4.5 and Visual Studio 2012What's New in ASP.NET 4.5 and Visual Studio 2012
What's New in ASP.NET 4.5 and Visual Studio 2012
Andrea Dottor2K visualizações
Sviluppo Web Agile Con MonoRailSviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRail
Stefano Ottaviani527 visualizações
Frontend Development with BlazorFrontend Development with Blazor
Frontend Development with Blazor
Michele Aponte91 visualizações
Training Signal WebtrendsTraining Signal Webtrends
Training Signal Webtrends
Stefano Iaboni455 visualizações
.NET Core, ASP.NET Core e Linux per il Mobile.NET Core, ASP.NET Core e Linux per il Mobile
.NET Core, ASP.NET Core e Linux per il Mobile
Pietro Libro317 visualizações
Asp.net web form 4.5 - what's new!!Asp.net web form 4.5 - what's new!!
Asp.net web form 4.5 - what's new!!
Massimo Bonanni3.6K visualizações

Similar a Blazor per uno sviluppatore Web Form

Blazor Focus Week BariBlazor Focus Week Bari
Blazor Focus Week BariMichele Aponte
140 visualizações33 slides
Talk introduzioneaspnetcoreTalk introduzioneaspnetcore
Talk introduzioneaspnetcoreMauro Di Liddo
152 visualizações50 slides

Similar a Blazor per uno sviluppatore Web Form(20)

Blazor with .net 5 - di Gerardo GrecoBlazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo Greco
Giuneco S.r.l165 visualizações
Blazor Focus Week BariBlazor Focus Week Bari
Blazor Focus Week Bari
Michele Aponte140 visualizações
ASP.NET MVC: Andare oltre il 100% (Web@work)ASP.NET MVC: Andare oltre il 100% (Web@work)
ASP.NET MVC: Andare oltre il 100% (Web@work)
Giorgio Di Nardo945 visualizações
Talk introduzioneaspnetcoreTalk introduzioneaspnetcore
Talk introduzioneaspnetcore
Mauro Di Liddo152 visualizações
Slide typescript - net campusSlide typescript - net campus
Slide typescript - net campus
DotNetCampus243 visualizações
Powerful asp.net 4 e ie9Powerful asp.net 4 e ie9
Powerful asp.net 4 e ie9
Stefano Benedetti998 visualizações
Dojo nuovo look alle vostre applicazioni web DominoDojo nuovo look alle vostre applicazioni web Domino
Dojo nuovo look alle vostre applicazioni web Domino
Dominopoint - Italian Lotus User Group952 visualizações
Asp.Net MVC 5Asp.Net MVC 5
Asp.Net MVC 5
Emanuele Bartolesi17.8K visualizações
Azure No-Sql approach: DocumentDBAzure No-Sql approach: DocumentDB
Azure No-Sql approach: DocumentDB
Davide Benvegnù436 visualizações
Novità di Asp.Net 4.0Novità di Asp.Net 4.0
Novità di Asp.Net 4.0
Gian Maria Ricci505 visualizações
Installing Apache tomcat with NetbeansInstalling Apache tomcat with Netbeans
Installing Apache tomcat with Netbeans
Davide Nardone475 visualizações
WordCamp Catania 2019 PWA e TWAWordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWA
FrancescoGiammanco183 visualizações
Fe04   angular js-101Fe04   angular js-101
Fe04 angular js-101
DotNetCampus538 visualizações
Blazor ♥️ JavaScriptBlazor ♥️ JavaScript
Blazor ♥️ JavaScript
Andrea Dottor112 visualizações

Mais de Andrea Dottor(13)

Blazor, lo sapevi che...Blazor, lo sapevi che...
Blazor, lo sapevi che...
Andrea Dottor93 visualizações
What's New in ASP.NET Core 3What's New in ASP.NET Core 3
What's New in ASP.NET Core 3
Andrea Dottor1.3K visualizações
Dependency injection questa sconosciutaDependency injection questa sconosciuta
Dependency injection questa sconosciuta
Andrea Dottor445 visualizações
ASP.NET, ottimizziamo con la cacheASP.NET, ottimizziamo con la cache
ASP.NET, ottimizziamo con la cache
Andrea Dottor108 visualizações
Deploy & Run on Azure App ServiceDeploy & Run on Azure App Service
Deploy & Run on Azure App Service
Andrea Dottor368 visualizações
ASP.NET CoreASP.NET Core
ASP.NET Core
Andrea Dottor713 visualizações
L'evoluzione del webL'evoluzione del web
L'evoluzione del web
Andrea Dottor295 visualizações
Crea servizi REST per la tua App con ASP.NET 5Crea servizi REST per la tua App con ASP.NET 5
Crea servizi REST per la tua App con ASP.NET 5
Andrea Dottor679 visualizações
Migliora il tuo codice con knockout.jsMigliora il tuo codice con knockout.js
Migliora il tuo codice con knockout.js
Andrea Dottor2.1K visualizações
Windows azure - abbattere tempi e costi di sviluppoWindows azure - abbattere tempi e costi di sviluppo
Windows azure - abbattere tempi e costi di sviluppo
Andrea Dottor3.2K visualizações

Blazor per uno sviluppatore Web Form

  • 1. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / Blazor per uno sviluppatore Web Form Andrea Dottor Microsoft MVP Developer Technologies scansiona per codice e slide
  • 2. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Sponsor
  • 3. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Un po' di storia • 2001 Web Forms .NET Framework 1.0 • 2008 ASP.NET MVC .NET Framework 3.5 • 2013 ASP.NET MVC 5.2 .NET Framework 4.5 • 2016 ASP.NET Core 1.0 .NET Core 1.0 • 2019 .NET Framework 4.8 • 2019 Blazor server .NET Core 3.0 • 2020 Blazor WebAssembly .NET Core 3.2
  • 4. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Perchè "Blazor per uno sviluppatore WebForm"? • Il .NET Framework non riceverà nuove funzionalità • Web Forms non è supportato in ASP.NET Core • Blazor ha un modello di sviluppo più simile a Web Form rispetto a MVC o Razor Pages "After .NET Core 3.0 we will not port any more features from .NET Framework. If you are a Web Forms developer and want to build a new application on .NET Core, we would recommend Blazor which provides the closest programming model. " [.NET Core is the Future of .NET] 06.06.2019 https://devblogs.microsoft.com/dotnet/net-core-is-the-future-of-net/
  • 5. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Blazor for ASP.NET Web Forms Developers https://docs.microsoft.com/en-us/dotnet/architecture/blazor-for-web-forms-developers/
  • 6. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + (.NET Conf 2020) From Web Forms to Blazor Introducing the Blazor Web Forms Components https://www.youtube.com/watch?v=ceGzm-pBhx4
  • 7. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Blazor for Web Form and C# Developers https://www.youtube.com/watch?v=gmopA3LEEeE
  • 8. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Migrating a Windows Forms App to Blazor: The Amazing and True Story of GIFBot https://www.youtube.com/watch?v=NRDdu67VJH0
  • 9. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Pagine e Componenti • Blazor ha il concetto di componente • File con estensione .razor • Corrispondenza con i file ascx di Web Form • Un componente può essere anche una pagina • Stesso uso dei file aspx in Web Form • I componenti sono scritti utilizzando la sintassi Razor, combinando codice HTML e C# • Il codice C# può essere inserito in un blocco "@code" o in un file separato • Stesso uso dei file MyPage.aspx.cs, MyComponent.ascx.cs
  • 10. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Components → WebForm UserControl • Un componente può venir richiamato utilizzando il suo nome come fosse un tag html • Possono avere parametri (in ingresso) • E' possibile passare oggetti complessi e non solo tipi semplici come capitava in Web Form • Possono esporre eventi
  • 11. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + BlazorWebFormsComponents Editor Controls • AdRotator • Button • HiddenField • HyperLink • Image • ImageButton • Label • LinkButton • Literal Data Controls • DataList • FormView • GridView • ListView • Repeater Validation Controls • CompareValidator • CustomValidator • RegularExpressionValidator • RequiredFieldValidator • ValidationSummary Navigation Controls • TreeView https://github.com/FritzAndFriends/BlazorWebFormsComponents
  • 12. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Modello Event-Driven • I componenti hanno un proprio ciclo di vita basato su eventi • OnInitialized{Async} • OnParametersSet{Async} • OnAfterRender{Async} • I componenti possono scatenare eventi • @on{EVENT} • Possiamo gestire gli eventi dei controlli associando un nostro metodo
  • 13. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Mantenimento dello stato → ViewState • WebForm fa uso del ViewState per mantenere i valori tra un postback e l'altro • Un componente Blazor mantiene i propri valori fino a quando non viene rimosso o la pagina non viene ricaricata • Ogni dato salvato in una proprietà o field viene mantenuto
  • 14. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / Confronto Web Form - Blazor
  • 15. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / Cosa c'è da imparare
  • 16. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Razor engine • Il carattere @ permette di richiamare codice C# all'interno del markup HTML • Implicit Razor expressions: • Explicit Razor expressions:
  • 17. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Razor engine • Razor code blocks: • Control structures:
  • 18. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Startup.cs → Global.asax • La classe Startup viene richiamata all'avvio dell'applicazione e permette di configurare quali funzionalità l'applicazione utilizza • Simile al Global.asax (Application_Start, Application_BeginRequest, …) • ConfigureServices: aggiunta delle funzionalità/servizi necessari all'applicazione, andando a configurare la Dependency Injection • Configure: permette di specificare i middleware necessari all'applicazione • Ogni richiesta HTTP viene elaborata da questi middleware nel preciso ordine con il quale li andiamo a inserire
  • 19. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Startup.ConfigureServices()
  • 20. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Startup .Configure()
  • 21. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Differente modalità per Blazor WebAssembly • Nella classe Program è possibile configurare l'applicazione e definire i servizi utilizzanti dalla Dependency Injection • Non c'è una definizione di pipeline
  • 22. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Dependency Injection • Transient: il servizio viene creato ogni volta che viene richiesto. • Scoped: il servizio viene creato una sola volta per "scope". In un'applicazione web corrisponde ad una richiesta http. • *In Blazor Scoped si comporta come un Singleton • Singleton: il servizio viene creato la prima volta che viene richiesto. Tutte le volte successive, viene passata l'istanza già creata. services.AddScoped<IMyDependency, MyDependency>(); services.AddSingleton<IMyDependency, MyDependency>();
  • 23. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Depencency Injection • In un componente blazor: @inject IDataAccess DataRepository • Nel caso venga utilizzata una classe base (codice C# in un file separato) è possibile utilizzare l'InjectAttribute: [Inject] protected IDataAccess DataRepository { get; set; } • Per utilizzarla in classi create tramite DI, utilizzare la Constructor injection
  • 24. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Depencency Injection - Blazor default services • HttpClient: permette di eseguire richieste HTTP • Scoped • IJSRuntime: fornisce i metodi per invocare funzioni JavaScript • Blazor WebAssembly: Singleton • Blazor Server: Scoped • NavigationManager: helper per gestire gli url e per navigare • Blazor WebAssembly: Singleton • Blazor Server: Scoped
  • 25. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Gestione della configurazione (Blazor Server) • Non esiste più la classe ConfigurationManager • Il file di configurazione utilizza JSON e non XML • La configurazione viene letta utilizzando la Dependency Injection • Servizio IConfiguration passato tramite il costruttore • Options pattern
  • 26. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + JSInterop • Tramite il servizio IJSRuntime che ci viene iniettato dalla DI è possibile invocare funzioni JavaScript • Il tipo di ritorno può specificando il TValue nel metodo InvokeAsync
  • 27. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / Demo progetto completo
  • 28. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / Migrare applicazioni esistenti
  • 29. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + nessuna scorciatoia da poter prendere
  • 30. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Migrate from ASP.NET Web Forms to Blazor • https://docs.microsoft.com/en-us/dotnet/architecture/blazor-for-web-forms-developers/migration • Server-side versus client-side hosting • Create a new project • Enable startup process • Migrate HTTP modules and handlers to middleware • Migrate static files • Migrate runtime bundling and minification setup • Migrate ASPX pages • Migrate configuration • Migrate data access • Architectural changes • Migration conclusion
  • 31. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Blazor Server o WebAssembly? • Blazor Server permette di richiamare eventuale logica di business e/o accesso ai dati direttamente dai componenti • Con Blazor Web Assembly si deve comunicare con il backend utilizzando delle API Rest, gRPC o SignalR • Se la logica dell'applicazione non è nella UI • Viene riscritto "solo" il progetto di UI e non l'intero applicativo • Con Blazor Web Assembly la logica di business può essere richiamate da delle API Rest • Con Blazor Server la logica di business può essere richiamata direttamente dai componenti Blazor
  • 32. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Una terza scelta: RazorComponent • Uso di componenti Blazor in applicazioni Razor Pages • Permettono di non vincolarsi ad una SPA Blazor • Possibilità di inserire Blazor per le sole parti dinamiche dell'applicazione
  • 33. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / RazorComponent
  • 34. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Controlli di terze parti • Gran parte delle aziende che sviluppa controlli ha realizzato una propria libreria per Blazor • Prestare attenzione alla maturità di queste librerie • Non sempre sono complete di tutti i controlli • Non tutti i controlli hanno le stesse funzionalità dei rispettivi per ASP.NET Core
  • 35. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + Conclusioni • Blazor velocizza la migrazione di applicativi Web Form (rispetto all'uso delle sole Razor Pages o MVC) • La curva di apprendimento si abbassa • Sviluppatori desktop (WPF, Windows Forms) possono passare allo sviluppo web con maggiore facilità
  • 36. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / Domande? Dubbi? Perplessità?
  • 37. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + / + www.dottor.net andrea@dottor.net @dottor Andrea Dottor Microsoft MVP Developer Technologies
  • 38. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / Partecipate alle discussioni https://fb.me/groups/998755440506950/ https://www.linkedin.com/groups/8896269/ https://github.com/blazordevita
  • 39. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / Alla prossima!
  • 40. Blazor Developer Italiani blazordevita fb.me/blazordeveloperitaliani blazordevita blazordev.it + + / Seguite la community! https://twitter.com/blazordevita https://fb.me/blazordeveloperitaliani https://github.com/blazordevita https://blazordev.it/