Building Full-stack C# Web Apps with Blazor in .NET Core 3.0

Announcing .NET Core 3.0: aka.ms/dotnetc...
#dotNETConf
.NET Core 3.0 includes support for Blazor, a new client-side web UI framework based on C# instead of JavaScript. In this session you'll see how to build Blazor Server apps with rich, interactive web UI where all the UI interactions are handled over a real-time SignalR connection.
We'll look at how to build Blazor components using a combination of C#, HTML, and CSS. We'll also show you how to deploy your Blazor Server apps and how to secure them.

[@FrankHale]

If I saw a pull request sitting in my Github from Dan Roth I'd merge it without even looking. Dan is the man! Blazor is rocking, thank you so much!!!!

[@danielward336]

That's pretty intimate

[@Chiramisudo]

3:44 LOL, I'm literally watching this for the first time "in May of next year." 😋

[@shahrazkl]

Daniel is one of the most energetic and awesome guys in this conf. and overall in dotnet team! keep up the good work!

[@fredhair]

" You had to write some JavaScript! " *Audience boos loudly*

[@heinzriemann3213]

Haha cracked me up!

[@kaceyezerioha495]

What I love so much about this is I can just easily have blazor working on my existing mvc application without rewriting it. HOW AWESOME IS THAT!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@srinivasadineshparupalli5139]

I feel like its a matured way of classic ASP.NET which we used to do in Visual IntroDev somewhere around 2000 with different flavor for this generation technology :-)

[@alexanderstromer5106]

It was called InterDev ...

[@rahulmathew8713]

Its razor in new name

[@arwahsapi]

And it was called classic ASP instead of ASP. NET

[@developpa1519]

This looks promising. Let's see how it fares against the heavyweights like angular and so on.

[@tuck582]

This was super applicable, informative and easy to follow. Great demo.

[@testg4andmmm129]

Instead of electron based crossplatform ui. It can be blazor. More about offline desktop app runs on browser or browserview

[@shahnawazk]

Great video! I started learning Blazor and stop Angular and React! Thanks Dan

[@benleonard237]

Project has been uploaded: github.com/danroth27/BlazorWeather

[@RawCoding]

Sombody serving 10MB png is not a valid excuse for a 2.5MB default blazor app (compressed). Glad to hear they are working on trimming it down thou! Looking forward to using server/client side blazor

[@JohnSedlak119]

Your enthusiasm is refreshing!

[@SBDavin]

I'm going to start using this now. Great video - thank you!

[@PatricSjoeoe]

I'm so exited to try this out!! Great job with blazor!

[@seandougan8593]

I just switched my primary language to .NET because of Blazor components - Microsoft is killing it #BestDevsWorld

[@casperknudsen7086]

This looks awesome. Im doing my final exsam and was hoping to use this for my project. Ty Microsoft :D

[@StefanJarina]

Great stuff!!! I just can't wait for May 2020. How does the hot-reload look like so I can just run application, edit the files and it will refresh my page automatically (as I assume for web developers it will be hard to go away from hot reload they are so used to). Currently I couldn't find a simple way to do it with neither VS, nor Rider. Also you couldn't get better guy to do presentations than Daniel, you can see that he really loves his job and product he is creating :-)

[@PK-xu7gu]

How does the server scale? How does it cope with thousands of SignalR connections? How does the consumption of resources compare with ASP.Net?

[@thowheedh]

Please share the source code

[@soluxion1073]

This is super exciting! no more JS dictatorship.

[@theman3282]

lol

[@patkartarun]

it is not easy to catch error in Blazor web assembly, it is itself confused, where to show error / unable to show/understand error whether it is client side / server side

[@nicktech2152]

“There’s only one page. So this really is a single page application” 😂😂😂

[@nosoydev]

i was excited until i saw i couldn't pass a parameter to my component and set rendermode to server prerendered. Error: "Prerendering server components with parameters is not supported." . This crashed the interactive UI experience for me ...

[@yurifx89]

that's amazing! thanks for such an incredible job

[@HeroicKhalid]

I'm little bit confuse it looks good but question! Why I need to use Blazor if I'm already developing my .net core with Razor and JS ? It looks good but not sure yet should I really need it or not.

[@nicknovotny8908]

Everything looks smooth on local host with all the bindings to the server. I wonder how it looks on a remote server

[@bernhardtrian7471]

did you actually test it ?

[@badrulhussain5545]

Downloading Webassembly to the browser. Now wouldn't that slow down page loading time for the 1st and how does that compare with reactjs and other js frameworks?

[@yurydoroshenko3922]

Not a "production ready" tho. No reload. When debuging and chnging even 1 html line, you need to restart the whole project Routing for pages is not clear. How to have same routojg on server and clioent ? How to authentificate ? Howe to render only "usefull" infos ? Well, fun to try, but no where "production ready"

[@bahaaelboraey3238]

What do I really need to learn before going ahead to Blazor tutorial, is it C# and html only?

[@GaganBodduluru]

The basic idea of asp.net core and razor syntax along with of course C#, HTML and CSS imo

[@ronjones1587]

the long wait is over!!! thanks for this! ^_^

[@przemysawkulasek902]

Congrats Dan. Great presentation as always.

[@Sathyaish]

Yay! Yay! Super duper yay! Oh my fucking goodness!

[@singhsahab7860]

Really good explanation over all. liked it.

[@abdouldia1605]

I'm starting using it right now with my new projects. No Way!

[@marcosphs]

Congratulations Daniel Roth for the presentation !!!

[@vinothdharmaraj7510]

Blazor validation not support individual field validation, its only validate all fields at a time in context. if i load my page at once in separated tab or stepper, partially validate the controls not all fields. Is it possible? Please give me the solution.

[@arwahsapi]

Time to bid farewell to the node_modules folder

[@cageybee777]

his excitement is contagious

[@hintsoftware]

can we use @ref to work with html for setfocus, tab-order, stylings etc by C# code like we can do with winform controls ?

[@aniruddhakudtarkar8476]

Is Microsoft trying to build framework similar to GWT (Google Web Toolkit) ?

[@lyrimetacurl0]

🤔

[@BCLBlazorCollectionsLibrary]

Superb 😁😁😁

[@alphaprimal1669]

I wish the Api was similar to XAML+C#

[@thomasanderson1416]

SO MUCH BOILERPLATE! I just wish the project structure was a bit more minimal, the default template makes no sense to me. You can for example merge Program.cs and Startup.cs files as well as _Imports.blazor and App.blazor and make a single obvious entrypoint.

[@gaznapirotuercas9467]

blazor web layer programming its posible? id like to add data access and business layer to the project

[@AkshaySrinivasan123]

Awesome!!! Well done!!! :) ♥♥

[@nmarks]

While this is extremely welcome, it does beggar belief why it took so long to get around to it. At best I am a hobbyist, and while I could always write the Server end stuff in .NET I just couldn't afford the time and money to get around to learn Javascript on top.

[@cas4425]

Amazing

[@mrnettek]

Thanks for the video! -MrNetTek

[@abdouldia1605]

Daniel, please can you speed up the production ready release ? Can not wait any longer!

[@jawaidakhter08]

blazor has updated but www.blazor.net still showing @functions instead of @code :)

[@benleonard237]

@functions can still be used atm and they are interchangeable. Going forward Daniel said that @code would be preferred.

[@massoudasadi6367]

awesome 💎

[@bguen1234]

Fantastic! Great stuff.

[@MrSigmaSharp]

Too many moving parts. Reminds me of web forms. You want c# for client side? Write a .net standard 2 api with javascript

[@kourosh234]

There is a template called "Asp.net Core Hosted". I was wondering how it is possible to change the server-side project in this template with the "server-side" template which has all the best practices and authentication.

[@charlesbaldo]

On the server? When is the client

[@bitronicc1887]

Blazor WebAssembly (Client side) is scheduled to be released sometime around May

[@tonymullachery8805]

can you share the codes

[@himanshuk6199]

Can anyone create a tutorial on .Net + Blazor + Electron.js or Electron.Net

[@farrenyoung]

Thanks for sharing!

[@starkbotha1129]

Which project template was used in this video?

Stark Botha I want to know the same thing

[@howtofordummies6582]

Previously Its a single page application.. Plus 30 Javascript files...

[@莫莠君]

if the Blazor need a .net runtime, is the published website size lager than a Vue website?

[@thomasanderson1416]

Why is there no Net Core hosters available?

[@sacredgeometry]

What does that mean? You can host .NET core on almost anything, linux, windows or mac.

[@benleonard237]

Will BlazorWeather be added to github?

[@AhmedAli-lz1bv]

sir i am facing problem in visual stdio clr c++ so i how to define entry point??

[@rafaelbrugnollo]

How hard will it be to change from Blazor Client Blazor Server? Any ideas?

[@bitbrain3468]

I haven't done it, but it's supposed to be relatively easy. At least that seems to be the goal. Some people have talked about using blazor server and then if the connection has cut off, drop back to blazor client-side. It requires having needed data downloaded though.

[@njoroge2061]

I have downloaded VS 2019 but cant find launcher icon on the denev.exe even after searching on my computer am on windows 7 .

[@meowchuz]

I just understand 10% from what he said. I have been learning c# and ASP.NET MVC5 (the old one, not even core) in a month. I can create some simple API controllers from back-end and render the data to the front-end. Knowing html helper with blazor view, but this blazor component looks different from what I understand about “blazor” in general. It seems this new blazor component can replace JavaScript (write markup and c# in this blazor component instead JavaScript). Could someone tell me what I should learn first in order to understand this new tech more clearly?

[@theman3282]

just go on with your pace mvc5 is still largely used by the enterprise, so don't worry. After MVC 5 is finished try to move to .Net Core, there is resemblance especially the razor and now .Net core heavily leaning to DI and startup bootstrapping replace global asax and the rest which is essentially the same but more transparent and easy to follow i think, and about the jobs .Net core beginning to gain traction within startup business.

[@sebastianolaf]

where is the GIT for that weather forecast app ?

[@theman3282]

the feeling of programming web forms is back...good ol form programming with that bind:event... but i hope this time mcs is aligning with interest of the mass not only just to serve those old people and cause us young programmer that like mcs and hate google always in beta service and lack of .net support shortage of job or even there is existing job but specs is for those old people only.

[@robertzeurunkl8401]

Is this project code available to download somewhere?

[@batman2010ish]

blazor was awsome.. beginner

[@LDdrums20]

Yes! Blazor FTW!

[@weilunyi]

Do we have a sample project as you introduce us to download ?

[@mustafageo]

The hello world is generated when you create a new project.

[@PaulMarangoni]

Hallelujah!!!

[@ME-dg5np]

A pretty good technology yepp Tooooo be aware of 🤹🤹🤸

[@maacpiash]

So, how is a Blazor Server app different from an app with server-side rendered pages?

[@JohnNecirRebellion]

The server-side app renders the page and sends the response as static pages to the client. The Blazor Server app sends the responses by SignalIR but with the binaries(c# objects) that can be accessed by Blazor WebAssembly client, less data exchange than full HTML page responses.

[@developersamim786]

Im thrilled

[@maxmarch1103]

Currently in market we have lot of plugib tools avaliable for react and angular i do not see developers moving to blazor

[@rahulmathew8713]

Why blazor when have razor

[@thedude3544]

31 : 17 WE Love You Daniel ! stay a lit bit with us ..

[@Viking251978]

Hey, I am creating a MemoryStream object on the client side, which I need to send to the server side. Any ideas how I can do it? Haven't been able to with PostAsync, PostJsonAsync or any other way. Any help would be appreciated.

[@Me_llamo_Lucifer]

Is there really still not any link to a GitHub source code to follow along with??

[@lyrimetacurl0]

Someone posted it somewhere else in the comments.

[@wattvisuddhimagga9695]

why .net core don't have crystal report?

[@weifengmao]

Because it's 2019. Crystal report is windows only and owned by SAP. The last Visual studio to support Crystal report was 2008. Time to move on, or stay with .net full.

[@meinradrecheis895]

Has anyone tried material component libraries for Blazor? Which is better MatBlazor or this one: skclusive.github.io/Skclusive.Material.Docs/

[@martinb.r2180]

Finally

[@fredhair]

Thank god for this. Can't be dealing with JS nowadays, I'm mainly C++ dev but need to build web apps. Modern JS is worse than C++ build systems, so many APIs and libraries all doing relatively similar things that barely extend JS itself. Microsoft always been great for devs IMO, I use predominantly linux but I usually use VSCode on nix and VS on windows and I think C# is a great language. Why is Windows so poor when all the dev tools are great??

[@yatocraige706]

the least the world needs is another js framework

[@sylwesterbzdyl7905]

LOL - what?, no IE 11 support? Calling JavaScript API's and taking credit... so Microsoft. And the code looks beautiful. Just like classic asp page from 1996. I also love the @bind 2 way data bind directive. Angular much?

[@notaspectator]

Interop with JavaScript, ohhh jeez

[@aspdotnet]

For a server with 8Gb of RAM, how much clients could blazer can handle without crash the application?

[@rahulmathew8713]

Lol That Old Wine (Razor) in New Bottle (Blazor)

[@VBKing2]

More like mixing the old wine and new in the same bottle

[@cbrcoder]

What's wrong with Angular or React ? Why use Blazor ? Can someone please explain me business case for this? IMHO this will give birth to new spaghetti code after webforms.

[@mohhamadtoosi8128]

Perfect

[@samuelgrahame3617]

Web assembly needs gc so you can interact with html.

[@20102010az]

Finally!

[@NeverMyRealName]

sounds like it will be slow and cumbersome like web forms or silverlight

[@markyanthonylaredo2614]

😍😍❤

[@ossamahjaji7985]

I don't trust people NOT using dark theme on VS

[@secondhanddog3]

webforms 2.0?

[@andrejuha164]

Is very naive implementation , but good Idea. : No direct acces to DOM wtf? No suport for simple rendering for games, graphics in browser . Wtf? For some reason native client side stops working when is not working internet . Need java script to work. We will probably wait another 1000 years for something real to full replace javascript .

[@bashmohandes]

Wow, how is this even advertised as a Good thing, both approaches are horrible ideas 😱 Downloading & Running a version of .net compiled to WASM is like shooting a nail with a Cannon, and running your client side on the server is just a scalability nightmare not even talking about the unnecessary latency introduced, why?? The only reason seems to be avoiding JavaScript? In 2020 JavaScript is not something to avoid.