Blazor Full Course For Beginners

Подписаться 24 тыс.

Просмотров 74 тыс.

50% 1

💻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

Опубликовано:

1 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 198

@adamv2628 4 месяца назад

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

@juliocasal 4 месяца назад

Wow, thank you!

@damianjankov3343 3 месяца назад

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 3 месяца назад

Glad you liked it!

@eatersdaily 4 месяца назад

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

@juliocasal 4 месяца назад

More to come!

@antonmartyniuk 2 месяца назад

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

@juliocasal 2 месяца назад

My pleasure!

@rahulmule2398 2 дня назад

One of the best tutorial on blazor.

@juliocasal 2 дня назад

Thank you!

@paca3107 4 месяца назад

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 4 месяца назад

Thank you, really appreciate your kind words!

@stephanram125 Месяц назад

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

@juliocasal Месяц назад

Welcome!

@Reminiscer0 4 месяца назад

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

@juliocasal 4 месяца назад

Glad I could help!

@ciminoce 4 месяца назад

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

@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 4 месяца назад

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

@juliocasal 4 месяца назад

My pleasure!

@Zephyr_boy 7 дней назад

Lucky enough to swipe your video. Although I don't speak English well, I probably know how to do it according to your explanation, thank you very much, great teacher!

@juliocasal 7 дней назад

Glad I could help!

@melliflousbufo 4 месяца назад

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

@juliocasal 4 месяца назад

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

@pepsiman_official 4 месяца назад

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

@juliocasal 4 месяца назад

Keep it up!

@THEspindoctor84 3 месяца назад

the first 56 minutes are already extremely helpful

@juliocasal 3 месяца назад

I’m glad!

@Duelweb 4 месяца назад

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

@juliocasal 4 месяца назад

I'm glad you are liking it!

@TheDeathknight23 4 месяца назад

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

@juliocasal 4 месяца назад

Glad to help!

@saeedrezataheri2578 3 месяца назад

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

@juliocasal 3 месяца назад

Thank you very much!

@WangAndrew 3 месяца назад

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

@juliocasal 3 месяца назад

So glad!

@joegurriacelimendiz3972 3 месяца назад

Interesting course, thanks Julio!

@juliocasal 3 месяца назад

My pleasure!

@sepidehdalirpour5640 3 месяца назад

Thanks for such an incredible course😃

@juliocasal 3 месяца назад

Glad you like it!

@juanignaciosampedro1930 2 месяца назад

Awesome explanation! Thanks 🙌

@juliocasal 2 месяца назад

My pleasure!

@kevinrambo Месяц назад

Great course, thank you for posting.

@juliocasal Месяц назад

My pleasure!

@benjaminvenezia1944 2 месяца назад

Very nice, thank's!

@ammarahmad6561 15 дней назад

Love your course Julio. Thank you soo much! I learned a lot!

@juliocasal 15 дней назад

Awesome, thank you!

@frederickbazanye-lutu8553 28 дней назад

This is really good Julio. Thank you.

@juliocasal 28 дней назад

Welcome!

@josemariasanmartin6648 29 дней назад

Great tutorial. Thanks Julio

@juliocasal 29 дней назад

Glad you liked it!

@yaoj9407 4 месяца назад

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

@juliocasal 4 месяца назад

Glad it helped!

@vijayarajan-bt5fk 4 месяца назад

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

@juliocasal 4 месяца назад

Welcome!

@martinsilungwe2725 2 месяца назад

Thank you for the tutorial much appreciated🙏🙏

@juliocasal 2 месяца назад

No problem 👍

@shahinuddin4418 4 месяца назад

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

@juliocasal 4 месяца назад

You can do it!

@shahinuddin4418 4 месяца назад

Thanks.

@TheFourthPrince 3 месяца назад

You are the best. Thanks a lot!!!

@juliocasal 3 месяца назад

You're welcome!

@MikePL101 7 дней назад

Excellent tutorial, thank you 👍

@juliocasal 7 дней назад

You’re welcome!

@nicolasgonzalezl 3 месяца назад

Amazing! Thanks a lot.

@juliocasal 3 месяца назад

You're welcome!

@serghei.cupelschii 3 месяца назад

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

@juliocasal 3 месяца назад

You are welcome!

@demetrischristopoulos1973 3 месяца назад

Nice tut thanks!!!

@juliocasal 3 месяца назад

You bet!

@stefanobompieri5836 16 дней назад

Amazing video, i'm your fan right now

@juliocasal 16 дней назад

Thank you!

@tinyolympus 4 месяца назад

Excellent stuff

@juliocasal 4 месяца назад

Glad you think so!

@tomekm9 2 месяца назад

Waiting for another Blazor Course ❤

@jasemtechno6218 4 месяца назад

Thanks brother Very nice Tutorial 🌺

@juliocasal 4 месяца назад

Welcome!

@sebastianp2810 20 дней назад

thank you very much!!!

@juliocasal 20 дней назад

Welcome!

@bennymountain1 4 месяца назад

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

@juliocasal 4 месяца назад

Great to hear!

@JoystonLewis 2 месяца назад

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 2 месяца назад

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

@JoystonLewis 2 месяца назад

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

@Mo-ef9yt 4 месяца назад

Great video 👍🏿

@juliocasal 4 месяца назад

Thanks for watching!

@sspykson 2 месяца назад

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 2 месяца назад

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.

@learningfromYT Месяц назад

Thanks

@juliocasal Месяц назад

You're welcome, and thank you!

@chidii 3 месяца назад

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

@aldkdenedik2451 4 месяца назад

Thanks a lot sir..avosome tutorial

@juliocasal 4 месяца назад

Most welcome!

@shawnwu4042 2 месяца назад

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

@juliocasal 2 месяца назад

For reading SQL data?

@shawnwu4042 2 месяца назад

@@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

@eugenekhfs 21 день назад

Hi @Julio! Thank you so much for the amazing tutorials! I would like to know if you could please assist me with the delete button without using Bootstrap?

@juliocasal 21 день назад

@GeirSrbotten 2 месяца назад

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 2 месяца назад

Here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-AhAxLiGC7Pc.html

@evangudmestad Месяц назад

Hi Julio - thanks for the great tutorial! Curious what software you use to draw arrows on the screen? Do you just use your mouse to click and drag?

@juliocasal Месяц назад

Zoom It: learn.microsoft.com/en-us/sysinternals/downloads/zoomit

@yousefmohamedtawfiq9022 3 месяца назад

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

@juliocasal 3 месяца назад

Depends on what you'd like to learn next.

@yousefmohamedtawfiq9022 3 месяца назад

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

@mq9032 2 месяца назад

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 2 месяца назад

Header?

@mq9032 2 месяца назад

@juliocasal sorry, the navbar

@mq9032 2 месяца назад

@@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

@estevves3903 Месяц назад

Incredible course Julio. I made your other course, the Game Store.API, but in this case you build the frontend in a separate project, in other folder. I'm halfway through the tutorial, so maybe you answered this and I don't know, but my question is: can I build the frontend in the same folder as the API? Like have a folder named "GameStore", and inside have two projects, one the GameStore.API and other the GameStore.Frontend, or needs to be in separate folders? Thanks.

@juliocasal Месяц назад

Either way will work.

@estevves3903 Месяц назад

@@juliocasal Thanks.

@himanshudwivedi533 3 месяца назад

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 3 месяца назад

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

@himanshudwivedi533 3 месяца назад

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

@unamxhego5137 2 месяца назад

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

@juliocasal 2 месяца назад

Check the backend video in the description

@StrawberryDeveloper 2 месяца назад

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 2 месяца назад

I explain WebAssembly towards the end.

@nada3131 2 месяца назад

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

@juliocasal 2 месяца назад

No exactly this app, but here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XtWubiUzz-k.html

@nada3131 2 месяца назад

@@juliocasal Thank you!

@worldoflemons 4 месяца назад

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

@juliocasal 4 месяца назад

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

@ngocphuongle4990 2 месяца назад

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 2 месяца назад

Here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-O4dCgYicoDg.html

@rayt6867 2 месяца назад

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 2 месяца назад

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.

@0x-003 3 месяца назад

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 3 месяца назад

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

@Veence7 Месяц назад

Thanks for lecture.. Question: How were the errors in the Program.cs file resolved. 17:26

@juliocasal Месяц назад

There are no errors. Some red squiggles might show in the editor, but the code compiles.

@Veence7 Месяц назад

@@juliocasal True, thanks for reply. It was catching the errors the first few times I built the project. But it's stopped now. Guess it's what they say about vs code being kinda slow, in blazor from what I've read/watched (if that's true I don't know)

@Veence7 Месяц назад

It actually still brings it up when I run the dotnet watch command. Not sure why it ignores only to bring it back again

@L0n3w0 13 дней назад

How did you remove the type or namespace name error in the beginning? Any extensions or way for visual studio code

@juliocasal 13 дней назад

@L0n3w0 10 дней назад

@@juliocasalAfter the project was created, it showed the type or namespace name error in Program.cs and Imports.razor. I did not change anything at all but the projects executes if I run it even with those errros.

@lmao01 6 дней назад

note, Creating instance in razor page with =new() throwed error that it requires Model. (it was already there). The actual solution was creating in OnInitialized() logic

@juliocasal 6 дней назад

Odd.

@ElburdenBI 3 месяца назад

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

@juliocasal 3 месяца назад

Thank you, already got too much coffee today :)

@BAS-64 4 месяца назад

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

@juliocasal 4 месяца назад

Here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-FHnwVsDRu3k.html

@rhinochannel12 Месяц назад

Thank you for your sharing. I learned a lot of knowledge from your channel.

@juliocasal Месяц назад

Great!

@juanzero10 4 месяца назад

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 4 месяца назад

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

@juanzero10 4 месяца назад

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 3 месяца назад

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

@adrianspikes6454 Месяц назад

Unfortunately that can't be truly known by you unless the app is created in both frameworks by urself and you test. Don't rely on others in this area. I'm creating the same app in three different frameworks with clean arch n DDD

@adityabhusal 2 месяца назад

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 2 месяца назад

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

@juliocasal 2 месяца назад

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

@adityabhusal Месяц назад

@@juliocasal I appreciate it ! Thanks

@noelninoolvis2433 4 месяца назад

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

@juliocasal 4 месяца назад

You can.

@LuisPerez-MATB Месяц назад

Nice video, i'm still at 56:36

@LuisPerez-MATB Месяц назад

1:38:54

@LuisPerez-MATB Месяц назад

2:20:12

@mathuchandran1898 3 месяца назад

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

@juliocasal 3 месяца назад

You can use your MacBook.

@paulh6933 Месяц назад

it looks like for vs code u can debug or have hot reload but not both

@juliocasal Месяц назад

Yes, I never thought about using hot reload while debugging.

@adamv2628 4 месяца назад

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 4 месяца назад

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

@kylecollie7813 4 месяца назад

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

@dr.mohammedmohammed7633 2 месяца назад

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

@juliocasal 2 месяца назад

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

@dr.mohammedmohammed7633 2 месяца назад

@@juliocasal so blazor server?

@michaelday6987 Месяц назад

Am I the only one to get errors Namespace GameStore could not be found? I can only get this to work by running this in Visual Studio

@juliocasal Месяц назад

Blazor support in VS Code is not as good as in VS yet.

@estevves3903 Месяц назад

It's a weird bug, try this: - remove extension C# Dev Kit - close the Vscode - open and install C# Dev Kit - close again - Open and see if works

@estevves3903 Месяц назад

I was testing and find this: - Right click in C# extension, Install another version, pick another version - Do the same thing for C# dev kit - Restart Vscode

@michaelday6987 Месяц назад

@@estevves3903 Didn't work, but thanks. I will just continue to use VS

@estevves3903 Месяц назад

@@michaelday6987 Really? Installing another version for C# extension worked for me, in this case it's better VS

@josuealves7929 2 месяца назад

Show

@juliocasal 2 месяца назад

@josuealves7929 2 месяца назад

Show in Brazil means wonderful, thanks you very much

@ForChiddlers 3 месяца назад

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

@juliocasal 3 месяца назад

Why?

@Drake_Pt 3 месяца назад

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 3 месяца назад

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

@Drake_Pt 3 месяца назад

@@juliocasal thank you