Blazor Tutorial | CRUD With Blazor, Step By Step | .NET 7

✅.NET 8 Full Course here: • Blazor Full Course For...
💻Get the source code: go.dotnetacademy.io/blazorcra...
Learn how to build an ASP.NET Core Blazor application completely from scratch and step by step.
By the end of this course, you will have a fully functional Blazor single page application, built entirely with C#, HTML and CSS, that will allow users to manage a simple game catalog from a modern, interactive and friendly user interface.
Topics covered:
01:07 A look at the finished application
04:53 Software prerequisites
05:33 What is ASP.NET Core?
10:18 What is Blazor?
12:29 Development environment setup
15:22 Creating a Blazor WebAssembly project
21:00 Exploring the Blazor project files
35:20 Debugging a Blazor WebAssembly application
38:23 Removing unneeded files and code
40:44 Adding an HTML table
43:14 Creating a C# model class
47:55 Using Razor syntax to combine HTML with C#
56:47 Using Bootstrap to style an HTML table
1:00:41 Moving data to a separate C# client class
1:06:05 Populating data on Razor component initialization
1:10:36 Using the EditForm component
1:20:47 Submitting data captured in an EditForm
1:25:24 Using the NavigationManager component
1:35:18 Using the InputSelect component
1:38:35 Adding client-side validation
1:44:34 Adding GetGame and UpdateGame to the C# client
1:48:42 Using parameters in Razor components
2:00:17 Adding an Edit button to table rows
2:05:32 Adding a modal dialog for deletion
2:16:48 Adding a Delete button to trigger deletion
2:25:16 Next Steps
🔥Become a Senior C# 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 #dotnet #aspnetcore

[@AthelstanEngland]

I'm a native English speaker and found running this at 0.75 speed made the English much easier to understand, almost as if it had been uploaded at the wrong speed. Thanks for the video.

[@juliocasal]

Thanks Athelstan, apologies for speaking too fast!

[@AthelstanEngland]

@@juliocasal lol no problem I can barely speak a second language, let alone quickly!!

[@Duelweb]

You are far and away the best! Clear, snappy and no ambiguity! Brilliant!

[@juliocasal]

Wow, thank you!

[@markbennett1237]

Best Blazor tutorial I have found so far. Although I had to change the playback speed to 75%. Good thing KZbin has that feature. You speak very fast!

[@juliocasal]

I'm glad it helped, and sorry for speaking too fast!

[@bennymountain1]

@@juliocasal Sounds good on my end, I set it to 125%, because I was on a deadline 🤣

[@jacobjuarez9950]

You answered all the questions that I had while being thorough yet easy to understand!! Thank you

[@juliocasal]

I'm so glad!

[@derekprieur5258]

Julio, this has been a phenomenal video so far (I am about halfway through). I am normally developing in React but had to pickup Blazor for a bit recently. This video is simple and well explained so thank you 👍

[@juliocasal]

Glad it was helpful!

[@serkiat1]

I am just learning Blazor and find your video so useful. I also liked the bits about Bootstrap, which is a new area for me. Thank you so much.

[@juliocasal]

Glad it was helpful!

[@th3ceo]

Julio, Thank you! I needed a quick into to Blazor and this did the job. Looks like you have a good content. I appreciated No Ads and Happy to send Super Thanks!

[@juliocasal]

Thank you @th3ceo, really appreciate your support!

[@tajudeensalaudeen5594]

Julio, Your style of teaching is awesome, Thank you for the video. I will use this to kick start Blazor.

[@juliocasal]

You're welcome!

[@pavloblyznuk7027]

Nice explanation how to start using Blazor! Thank!

[@juliocasal]

Glad it was helpful!

[@bulent2435]

This is a great video, thanks. I'm also very happybecause someone finally said that I don't have to use Visual Studio. After using Vscode many year, Visual Studio doesn't make me feel comptable.

[@juliocasal]

Great to hear!

[@bennymountain1]

Great video, sir! Also serves as a good intro to VS Code.

[@juliocasal]

Glad you think so!

[@tbunreall]

Great video greatly appreciated

[@juliocasal]

Glad it was helpful!

[@gui2peg]

thank you very much for this

[@juliocasal]

You're very welcome!

[@joaolopes9926]

Thanks.

[@juliocasal]

Welcome!

[@sifisocyprianshezi3824]

Great video. I want to apply this knowledge creating a appointment/ todo portal

[@juliocasal]

Go for it!

[@edinetgrunhed6000]

thanks for this video

[@juliocasal]

My pleasure!

[@user-hw8tn2yd8b]

followed along but using Visual Studio rather than VS code. Got everything working apart from Modal, which would not open until I placed the DeleteGame razor component in a new DIR which I named Components (I appeared to recognise it as a Page when in was in the Pages DIR). Used Fontawesome instead of ioconic as it doesn't seem available to VS. Great little work out, thank you Julio.

[@juliocasal]

I’m glad it worked out!

[@markdickensapdatamigration6283]

Very Good Training Content - Thank You . . . You sound Italian and have100% perfect English but if you could *SLOW* down yout talk by 15% or 25% then this would help me (UK/British/English) and the others on KZbin :-) ... please keep the training coming . . . I am impressed so far

[@juliocasal]

Noted!

[@troyherman4458]

you are aware that you can literally slow him down by 15% in the settings right? I did this and it helps a lot. I appreciate the 15% suggestion, 25% is too slow.

[@mrdl9199]

This is a great video, thanks.

[@juliocasal]

You're welcome!

[@anishjoshi1999]

love from nepal

[@reipalacio]

o tanks. i am understanding finaly

[@juliocasal]

Great to know!

[@pepsiman_official]

now starting to this one

[@juliocasal]

A .NET 8 version of this one is coming soon. Stay tuned!

[@pepsiman_official]

@@juliocasal Roger-Dodger, big brother

[@moranmono]

Thanks!

[@juliocasal]

Ohh wow, thank you @moranmono!

[@evaristegalois7378]

I'm following along, but building it in Visual Studio rather than vs code. If i come unstuck, it doesn't matter. Might try at 0.75 speed though, sounds like a good idea!

[@waleedbensumaidea3947]

Thank you so much Julio, Would you like to create a Video about Blazor in NET8 with the new Template? We see that there are some changes in the project files structure. Also, there are multiple render modes for each page so that makes it hard to decide which render mode to choose. Plus if we have to install a UI template like MudBlazor how installing the template would be with the new project structure, because in the client project, they had removed index.html and its layout

[@juliocasal]

I would love to, but a bit constrained on time right now. You can still do dotnet new blazorwasm in .NET 8, and the layout should not be too different from what I did in this video. Is it?

[@robherto6260]

Dear Julio. Thank you so much, this topic is really interesting. What about micro-frontend using blazor webassembly. Is it posible to work with?

[@juliocasal]

I think it's doable, but I have not tried it yet.

[@user-ff1uw2ud3x]

Hello Mr. Julio , I love your tutorial so far, very helpful and informative! I am facing a problem though at 1:29:33 when i try to run the project it says " error CS1061: 'List' does not contain a definition for 'Id' and no accessible extension method 'Id' accepting a first argument of type 'List' could be found (are you missing a using directive or an assembly reference?) " Why is that, i followed your tutorial closely , did i mess up somewhere? Thanks

[@juliocasal]

Care to share the code snippet where you are getting the error?

[@dilipnair4762]

Great video for beginners. Where can i get the source code for this project.

[@juliocasal]

Thanks! Source code here: www.patreon.com/posts/source-code-crud-82351048

[@Ork-Schamane]

Nice Video. What is the Name of the mouse Highlight and arrow making prog?

[@juliocasal]

Camtasia.

[@zedshockblade7157]

Do you know any good code formatter for razor pages in vscode?

[@juliocasal]

None other than the default that comes with the C# extension.

[@valterekholm375]

Hello. How can the VS code intellisense work for PHP?

[@juliocasal]

No idea.

[@2005Azm]

Thank your Sir for your great tutorial! I have one question! how to change sidebar color of the default Blazor server? Let's say I want it to be Green!!

[@juliocasal]

Azim, that's defined in MainLayout.razor.css, in your Shared directory. Look for the sidebar class in that file and update the colors of the background-image property, like this: .sidebar { background-image: linear-gradient(180deg, rgb(5, 103, 20) 0%, #a09e65 70%); } Hope that helps!

[@2005Azm]

@@juliocasal Thank you so very Mach Sir!

[@JhimmyDev]

Hello Julio, which color theme do you use in vscode?

[@juliocasal]

Jhimmy, I use the VS Code Icons extension, which whichever defaults it comes with: marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

[@JhimmyDev]

@@juliocasal thank you.

[@duartelucas5746]

Julio, five stars!

[@juliocasal]

Thank you!

[@ThemisTheotokatos]

I Noticed that when I right click "view source", I don't see the html code that was created with razor rather I see the content of intdex.html. However when I click on developer tools, I can see what is rendered. If I crawl with my web spider the url I don't see the table. Can you explain why this might be the case?

[@juliocasal]

Yea, that's expected. Check this SO answer: stackoverflow.com/a/70772352/6105076

[@morgtv1023]

Hello Mr. Julio, is there a way to integrate Blazor with Django? Thank you.

[@juliocasal]

I'm not familiar with Django, but if it is a backend web framework, it should be straightforward to integrate.

[@xodusgraphicdesigns3384]

how would i connect this to a database

[@juliocasal]

I go over that here: juliocasal.com/aspnetcore

[@cristianconrads9109]

:( I dont know what did I do wrong but the X button does not display the message to confirm delete Thanks a lot for the code, my dislexia did't help, had lots of misspellings.

[@juliocasal]

Check out the included source code download. Should help point out what's missing.

[@dobetter5433]

my blazor application in visual studio consume 100% cpu ! how to solve it !

[@juliocasal]

Which specific processes are consuming 100% CPU in your box?

[@dobetter5433]

@@juliocasal visual studio 2022 project 3300+ mb

[@juliocasal]

@@dobetter5433 Try using VS Code instead 🙂

[@harrisonwell1719]

how to format decimal as currency

[@juliocasal]

Harrison, like this: @game.Price.ToString("C2")

[@harrisonwell1719]

@@juliocasal I need the format to be like this while editing the input numbers not only when loading data

[@sadokabdelbasset3226]

Thank you so much for the video, but please can you speak slower because it is very hard for us to understand, thank you again

[@juliocasal]

Noted! Also, new Blazor course coming soon!

[@user-lt7cf5qq8j]

It seems to me that working in Visual Studio is much more convenient. Is'n it ?

[@juliocasal]

Not quite, Abo. Anything specific in the video that makes you think so?