Blazor Full Course For Beginners

💻Get the source code: go.dotnetacademy.io/blazor8-f...
Learn how to build a modern frontend application, step by step, using Blazor and the C# language.
⭐️ Topics ⭐️
00:00 Welcome!
04:23 What is Blazor?
11:19 Creating a Blazor project
56:37 Using Razor syntax
1:13:00 Styling with Bootstrap
1:21:39 Create and reuse components
1:38:54 Use Forms and bindings
2:19:55 Routing and navigation
2:32:35 Dependency injection
2:53:03 Client-side validation
3:08:57 Use component parameters
3:55:36 Add user interactivity
4:20:39 Use the configuration system
4:26:59 Use asynchronous programming
4:31:03 Talk to the backend via HttpClient
4:55:35 Stream rendering & enhanced forms
🌐Build the backend: • ASP.NET Core Full Cour...
🔥Become a Senior .NET Backend Engineer: juliocasal.com/courses
🗺️Get My Free .NET Backend Developer Roadmap: juliocasal.com/roadmap
Join me on Patreon: / juliocasal
Follow me on LinkedIn: / juliocasal
Follow me on X: x.com/julioc
#blazor #csharp #aspnetcore #dotnet

[@antonmartyniuk]

It's really impressive that your released such an amazing course for free! Well done and thanks!

[@juliocasal]

My pleasure!

[@adamv2628]

you are my hero julio casal! thanks for sharing all your Blazor and dotnet expertise here. it is wonderful.

[@juliocasal]

Wow, thank you!

[@eatersdaily]

i love the way how you teach , please keep going and create more advanced tutorials for us . GOAT

[@juliocasal]

More to come!

[@paca3107]

Thank you Julio, I really appreciate your job and that you want to share it for free. You are really good teacher, I know what I am saying because I have watched a lot of programming stuff.

[@juliocasal]

Thank you, really appreciate your kind words!

[@damianjankov3343]

Incrredible stuff. I have been only working with MVC and this video is perfect for someone who would like to know what Blazor is and how it works. The most detailed/friendly and up to date Blazor video out there! I also really like how you started with the most simple version of Blazor app instead of having the visual studio create the classic weather page template.

[@juliocasal]

Glad you liked it!

[@danielwales363]

Yesssssss this has been much awaited... You've been so much helpful on my journey so far... Many thanks!!

[@juliocasal]

Glad I could help!

[@stephanram125]

I appreciate you used VS Code instead of Visual studio for this tutorial. Great

[@juliocasal]

Welcome!

[@WyattHaley-un7wu]

Great video, thank you! You are a good instructor. Everything was well paced, well structured, and well explained. I want to commend the entire first hour. Going through the basics of the project files and explaining how they relate was great. I think many learning paths gloss over the fundamentals of the *.csproj file, the starting configuration of Program.cs, etc.

[@juliocasal]

Glad it was helpful!

[@the-antroy]

Thanks a lot sir. Something I love from this community is the much learning resources. 🚀

[@juliocasal]

My pleasure!

[@ciminoce]

Thanks for share with us!!! All the best!!!

[@melliflousbufo]

Fantastic - thanks so much for what must have been days or weeks in the making!

[@juliocasal]

A little over a month, but I think well worth it!

[@pepsiman_official]

thank you very much big brother, i will continue gaining knowledge from you with this one

[@juliocasal]

Keep it up!

[@THEspindoctor84]

the first 56 minutes are already extremely helpful

[@juliocasal]

I’m glad!

[@saeedrezataheri2578]

that is great, I really appreciate your job and very happy for finding this clip and your channel

[@juliocasal]

Thank you very much!

[@Duelweb]

Where, oh where can I buy you a coffee ??? This is so amazing, loving every minute!

[@juliocasal]

I'm glad you are liking it!

[@TheDeathknight23]

Thank you clicksaver man. I wanted to learn Blazor without dying on first try lol.

[@juliocasal]

Glad to help!

[@shahinuddin4418]

Thank a lot for the awesome tutorial as usual. Now I think I can learn Blazor.

[@juliocasal]

You can do it!

[@shahinuddin4418]

Thanks.

[@WangAndrew]

Thanks for the course. Love it !🥳🥳🥳🥳🥳🥳

[@juliocasal]

So glad!

[@yaoj9407]

Thank you sir, your video is what I was looking for.

[@juliocasal]

Glad it helped!

[@joegurriacelimendiz3972]

Interesting course, thanks Julio!

[@juliocasal]

My pleasure!

[@serghei.cupelschii]

Thank you for your work :) It is usefull, I've got a lot of new information

[@juliocasal]

You are welcome!

[@juanignaciosampedro1930]

Awesome explanation! Thanks 🙌

[@juliocasal]

My pleasure!

[@kevinrambo]

Great course, thank you for posting.

[@juliocasal]

My pleasure!

[@sepidehdalirpour5640]

Thanks for such an incredible course😃

[@juliocasal]

Glad you like it!

[@JoystonLewis]

Hey Julio, love your tutorials man. Just need to know if you have a video explaining the differences between Blazor web apps and Razor ones? Because I have a project in Razor at my workplace and it would really help to understand the folder structure and other aspects and how it differs from or is better or worse than Blazor. Keep doing what your doing man, your my go to person for C# tutorials

[@juliocasal]

Sorry, I don't have such a video. But the recommendation today is to create new sites using Blazor, not Razor.

[@JoystonLewis]

@@juliocasal Its fine I just asked in case you have one, sure I will focus on blazor as its latest.

[@benjaminvenezia1944]

Very nice, thank's!

[@martinsilungwe2725]

Thank you for the tutorial much appreciated🙏🙏

[@juliocasal]

No problem 👍

[@sspykson]

Thank you so much, you really helped me to get up to speed with the framework and saved me tons of time! Great tutorial, and your explanations are extremely helpful and detailed! There is only one thing I'm not getting: why adding a modal for each table row (3:45:30) and not just creating one modal and on edit button click not passing the selected game id to this one modal? Wouldn't having just one modal positively impact both server- and client-side performance? I understand that this is totally fine for the tutorial, but in the long run, I would prefer make things rather more lightweight. Or am I missing something?.. Anyway, once again, thank you!

[@juliocasal]

I'm glad the tutorial helped. To your modal question, it's likely doable, but probably not with just Static SSR. Since that would require interactivity, would need to switch to one of the interactive rendering modes to run C# when you click to open the modal.

[@TheFourthPrince]

You are the best. Thanks a lot!!!

[@juliocasal]

You're welcome!

[@chidii]

Thanks @Julio Casal for this. I always love your content and how perfect you teach. Please if you would add authentication and authorization and how both the client and API handles this both for both custom authentication and default provided by .NET

[@nicolasgonzalezl]

Amazing! Thanks a lot.

[@juliocasal]

You're welcome!

[@tomekm9]

Waiting for another Blazor Course ❤

[@jasemtechno6218]

Thanks brother Very nice Tutorial 🌺

[@juliocasal]

Welcome!

[@bennymountain1]

Instant like! Having a slow day at work, so you saved me from unproductive faffing about 🤣

[@juliocasal]

Great to hear!

[@demetrischristopoulos1973]

Nice tut thanks!!!

[@juliocasal]

You bet!

[@vijayarajan-bt5fk]

வாழ்த்துகள் 🎉🎉🎉நன்றி

[@juliocasal]

Welcome!

[@tinyolympus]

Excellent stuff

[@juliocasal]

Glad you think so!

[@shawnwu4042]

Thank you very much for your tutorial, I am a beginner and slightly regret that there is no tutorial for reading SQL data

[@juliocasal]

For reading SQL data?

[@shawnwu4042]

@@juliocasal yes. i'm from china,my english is not good. i mean how does the frontend or backend get the data from SQL database

[@mq9032]

Thank you for such a great course for free! Just want to let you know that there is something wrong on your website when it comes to header.

[@juliocasal]

Header?

[@mq9032]

@juliocasal sorry, the navbar

[@mq9032]

@@juliocasal Can you see it Sir? The navbar is not sticked to the top, there is a gap when you scroll at least in google chrome

[@aldkdenedik2451]

Thanks a lot sir..avosome tutorial

[@juliocasal]

Most welcome!

[@learningfromYT]

Thanks

[@Mo-ef9yt]

Great video 👍🏿

[@juliocasal]

Thanks for watching!

[@himanshudwivedi533]

Loved your content !👌 Can you please tell which extension you use for HTML intellisense suggestion inside razor file also which theme you are using currently.

[@juliocasal]

Thanks, I use the C# Dev Kit Extension the default VS Code theme.

[@himanshudwivedi533]

I'm using VS code on mac, same extension c# dev kit installed but still not getting the html intellisense suggestions 🤔

[@yousefmohamedtawfiq9022]

thank you so much. what is your recommendation after this course?

[@juliocasal]

Depends on what you'd like to learn next.

[@yousefmohamedtawfiq9022]

@@juliocasal i want to create ecommerce training website to practice dotnet core and blazor

[@nada3131]

Would it be possible to have a tutorial on how to deploy this app? Thank you so much for these videos!

[@juliocasal]

No exactly this app, but here: kzbin.info/www/bejne/jqW6ppWfit-tY80

[@nada3131]

@@juliocasal Thank you!

[@GeirSrbotten]

Thank you so much for a great course, Julio! However, I am having a problem finding the source code for the backend. The only download I find is for the Blazor-part. Can you give me a hint to where I find it?

[@juliocasal]

Here: kzbin.info/www/bejne/d5mkqX-ffKhqhsU

[@adityabhusal]

I think you should upload version control after every chapter on the code to physically see the changes and if anything from previous chapter was wrongly implemented

[@adityabhusal]

I absolutely adore your vids btw I am in no place to criticise you

[@juliocasal]

I provide lesson by lesson source code in the paid version: juliocasal.com/courses/blazor-essentials

[@adityabhusal]

@@juliocasal I appreciate it ! Thanks

[@StrawberryDeveloper]

Great video, i just started developing in blazor, and i used the webassembly, whats the difference between this and a web app? also i tried hosting it on github pages, but got an error while building static html

[@juliocasal]

I explain WebAssembly towards the end.

[@unamxhego5137]

Great video, I just can't seem to find the link to the backend API

[@juliocasal]

Check the backend video in the description

[@ElburdenBI]

Where can I buy you a coffe? what an amazing course!!

[@juliocasal]

Thank you, already got too much coffee today :)

[@rayt6867]

I have been following your tutorial to the letter and is the best I have seen, I don't have VS Code so I am using VS 2022, NavigationManager throws an error that I can't seem to find a fix. Exception of type 'Microsoft.AspNetCore.Components.NavigationException' was thrown. Do you have any idea why this is happening? VS 2022 is version: 17.9.7, Thanks

[@juliocasal]

It's likely an expected exception. Try without debugging (CTRL+F5) and the exception should not bother you.

[@rayt6867]

@@juliocasal Excellent! It worked, thank you very much.

[@worldoflemons]

Hi, can I know what is he command to build the project as a static web app?

[@juliocasal]

It's not a Static Web App, you need a web server.

[@0x-003]

Do i need to know C# before I can watch and follow this video? and do you have a video for that? before I continues to watch this?

[@juliocasal]

Yes, you need to learn C# first. Here: dotnet.microsoft.com/learn/csharp

[@juanzero10]

I really wanted to use Blazor for our next project but my team saying React is faster than Blazor. Could you please make video of how good the Blazor is?

[@larsp5109]

For sure development time is much higher with Blazor vs. React

[@juanzero10]

What about the performance? I've read some posts from Reddit about the performance issues of Blazor especially the WASM, but that was .Net6. How about the latest .Net8?

[@rnavedojr]

​@@juanzero10react is a few millisecond faster 🤷🏽‍♂️

[@user-lt7cf5qq8j]

Why use VScode when Visual Studio 2022 makes it so much easier to create projects and code?

[@juliocasal]

Here: kzbin.info/www/bejne/fHnRqImpebeoac0

[@ngocphuongle4990]

Hi, Im still newbie with VS Code and C#, I dont know how to enable read underline check error, can you explain to me how to enable it please

[@juliocasal]

Here: kzbin.info/www/bejne/hWXHdJqPnsiiesk

[@LuisPerez-MATB]

Nice video, i'm still at 56:36

[@LuisPerez-MATB]

1:38:54

[@noelninoolvis2433]

can't I use visual studio instead of visual studio code?

[@juliocasal]

You can.

[@mathuchandran1898]

Hi im interested to learn c# but I have MacBook so I can do this course on it.

[@juliocasal]

You can use your MacBook.

[@dr.mohammedmohammed7633]

This blazer webassembly not blazer server course , i am right ?

[@juliocasal]

This is 90% Blazor Static SSR, 10% Interactive SSR. No Web Assembly.

[@dr.mohammedmohammed7633]

@@juliocasal so blazor server?

[@adamv2628]

Can anyone tell me the settings.json values for razor files in VSCode for indenting the new() records as shown under the @code section in the games collection (from time1:08 onwards)? thx. @code { private GameSummary[] games = [ new(){ Id = 1, Name = "Street Fighter II", Genre = "Fighting", Price = 19.99M, ReleaseDate = new DateOnly(1992,7,15) } ]; }

[@juliocasal]

I didn't use any settings.json file. Likely I did tab for proper indentation.

[@kylecollie7813]

I am also having formatting issues. Even tabbing or spacing to format, reverts on save.

[@josuealves7929]

Show

[@juliocasal]

?

[@josuealves7929]

Show in Brazil means wonderful, thanks you very much

[@ForChiddlers]

You seem to be a good teacher... but c# ... please no, please flutter our angular😅😅

[@juliocasal]

Why?

[@comehome4226]

Why is @rendermode InteractiveServer not working. The error says: "The name 'InteractiveServer' does not exist in the current context" 4:02:45

[@juliocasal]

Do you have this in your _Imports.razor file? @using static Microsoft.AspNetCore.Components.Web.RenderMode

[@comehome4226]

@@juliocasal thank you for this it is now working

[@Drake_Pt]

Hi, i am getting this error message and dont know how to solve the problem, "Exception has occurred: CLR/Microsoft.AspNetCore.Components.NavigationException An exception of type 'Microsoft.AspNetCore.Components.NavigationException' occurred in Microsoft.AspNetCore.Components.Endpoints.dll but was not handled in user code"

[@juliocasal]

Known issue in Blazor. Run the app without debugging and it will not happen.

[@Drake_Pt]

@@juliocasal thank you