CRUD w/ Blazor in .NET 8 🔥 All Render Modes (SSR, Server, Wasm, Auto), Entity Framework & SQL Server

🚀 Join the .NET Web Academy: learn.dotnetwebacademy.com
💖 Support me on Patreon for exclusive source code access: / _patrickgod
🚀 Get the .NET 8 Web Dev Jump-Start Course for FREE: dotnet8.patrickgod.com
🐦 Let's get social on Twitter/X: / _patrickgod
🔗 Let's connect on LinkedIn: / patrickgod
Table of Contents:
00:00:00 CRUD w/ Blazor in .NET 8 🔥
00:01:58 New Templates & Rendermodes Explained
00:20:41 Preparations (Entities, EF Core, SQL Server)
00:29:58 Create a Service for the CRUD Operations
00:32:36 Add Page/Component to Get all Games (SSR + StreamRendering)
00:37:52 Add Interactivity for a Button - Create/POST Preparations
00:46:27 Create an Interactive Button Component
00:50:21 Create a Game with the new .NET 8 SSR Form
00:55:49 Use WebAssembly to Create a Game
01:16:05 Quick Look at RenderModeInteractiveAuto
01:17:45 Implement Updating & Deleting a Game
#DotNet #Blazor #AspNetCore

[@christiantricarico]

No hate comments. Mistakes and compile errors come to all of us when trying new stuffs. Thanks for this real dev journey.

[@vivekkaushik9508]

I learn more from Patrick, Milan and Nick chapsas than in my job 😂. Thanks for creating these videos for us Patrick. I wish you channel blow up very soon in blazor and dotnet community.

[@PatrickGod]

Your words mean so much to me, truly! It's an incredible feeling to know that the content is genuinely helping you, especially when compared to your job experience. 😂 I'm honored to be mentioned alongside Milan and Nick Chapsas. Your support is a huge motivator for me to keep going. Cheers!

[@jacobphillips9235]

same

[@rnavedojr]

Ah yeah, they won't take you in a better position than them.

[@sumeshk2653]

exact same 3/4 people I admire. Fourth is "rawcoding". He is good as well.

[@oncalldev]

Don't worry about the video length - watched it all. I enjoy the real time notion of working through a project, errors and all. The one thing I really do miss when going through new concepts on KZbin is a white board approach where you step back from the code and just diagram things out to get a better overall view of how it all works. Thanks for the video.

[@sergevanmeerbeeck9988]

This is a great video. I like the non-rehearsed style of videos where you see mistakes being made. You learn the most from mistakes

[@golosbezdoka]

You are my favorite Blazor tutor. It's very chilly to watch how you learn it making these tutorials. Unlike others try to implement everything ASAP to show off :D

[@AdeyinkaAdegbenro]

Always looking forward to your new video, thank you @Patrick 💯💖

[@PatrickGod]

Sure thing! Thank YOU!

[@jeverydk]

For the love of all thats holy, thank you Patrick ! I wish for chapters in the future. If i get around to doing the tutorial myself, i will post it here for others.

[@pezhmanpiramoun2997]

Thanks God ! Simple, Clear, Helpful & COMPREHENSIVE !!!

[@AmerBakeer]

Thank you very much, Patrick! The information you shared is both interesting and useful... I appreciate it 👏🏻🙏🏻

[@georgebelletty7861]

A great video Patrick. That must not have been 100% fun while you were recording that video!!! These are big changes, good changes. Keep em coming :)

[@sunitjoshi3573]

Thanks a lot for putting this out. Deeply appreciated.

[@leobarnuevo5305]

Watched the whole video and answered a lot of questions. Thank you sir

[@Eric-ix2yl]

This was a great learning resource! Appreciate your patient approach in learning as you go, I was confused at first during the webassembly portion about why you'd include the services in the shared project, but seeing the separate implementation for the client project to use made a lot of sense. Thanks a bunch for the video!

[@TheAstroguypasa]

Thank you for the amazing Tutorial Patrick!

[@michaelsimmons6921]

Your viewing time on this video from me has to be somewhere around 500% right now. I keep using it as a reference, jumping around while I practice creating the same silly little CRUD application over and over again. Thank you!! You will probably be a millionaire just from this video by the time I learn this! 😂😂

[@hippiehans]

What a fantastic guide! I learned a lot! Thank you! :)

[@joaogabrielv.m328]

Great video, as always! Really excited to see .NET 8 final release :D

[@PatrickGod]

Thank you so much! Me, too. 😜

[@Cyphebreux16]

Really helpful video, thanks a lot!!!😁 Really love that you use the newest Web App Blazor project and explain how stuffs work in it!!

[@strategik365]

Thanks Patrick - I learnt a lot from this.

[@bigh1708]

this was great. haven't coded in years, since the first mvc. This was a pretty wild ride. I skipped the web assembly, and coded it all to server and it worked perfectly. Can't wait to try more.

[@joaovictor3883]

Thanks for you, because of you, i am almost getting a real job, i just have a lot thanks❤️

[@PatrickGod]

That's awesome!

[@mohammadmz1058]

Great tutorial! Thanks for your effort 👍

[@Manlyman789]

It would be great if you could create a video on how to handle security, and specifically how the AuthenticationStateProvider should be used when using RenderModeInteractiveAuto. I come from a Blazor WASM background so it would be great to know if there are any caveats to using the AuthenticationStateProvider with RenderModeInteractiveAuto. Do we need to have two different AuthenticationStateProviders for the Server and WASM project or can the WASM project's AuthenticationStateProvider cover both the Server and Client project's authentication states?

[@guillermomazzari8320]

My dude, thanks for sharing such awesome content! It might seem confusing, but I actually like this new architecture!

[@KonradTjaden]

II have been meaning to delve into Blazor & WebUI & your channel is probably the best thing I could have come across. Keep it up & love your videos, all the way from Cape Town.

[@PatrickGod]

Hey Konrad, Wow, thank you for the amazing compliment! It's awesome to hear that you're finding my channel helpful as you dive into Blazor and WebUI. Greetings all the way to Cape Town - your support means the world to me! Take care, Patrick

[@pawekarasinski9135]

Hi, You saved my mental health! :-) This is really good stuff. Thank you very much.

[@PatrickGod]

Happy to help! 😊

[@pawekarasinski9135]

@@PatrickGod My joy was a bit premature :-( No matter what I try, when attempting to call an action in the API controller, I get the message: Cannot establish a connection because the target computer actively refuses it. (localhost:7270) Can You help?

[@dawiemos]

Thank you. Well done!

[@ghaznavipc]

what a mess this Blazor is doing? 😵‍💫 I'm confused. I know webapi, mvc and razor pages but this is another level of complexity! every thing is everywhere! why?!?

[@riskyOriginal]

This was soo helpful thank you soo much

[@marianzurini9715]

your videos are really awesome, thank you🤗

[@MohammadAldefrawy]

Great Effort my friend عمل رائع يا صديقي

[@PatrickGod]

Thank you so much!

[@mohsin6312]

Awesome ❤❤❤❤

[@TheNotedHero]

Mistakes teach problem solving and makes us aware of how designs need to evolve as functionality is added. Great video!

[@MrTommerino]

These videos are really great, I'm learning a lot here! I'd love to see one on how to publish the project to Azure that also covers the publising and updating an SQL database. I've been looking for tutorials that describes migrations but they're all focused on MVC projects and I can't get them to work in Blazor.

[@jsiahaan]

Thank you Patrick!

[@PatrickGod]

Sure thing! 😉

[@happytrackvideo]

I do see much change from blazor 7. I am not sure why blazor 8 template doesn't include api controller, datacontext, server service, shared project with common objects, wasm project with client service template with httpclient factory. They are essential elements of any blazor app.

[@Gabriel-kl6bt]

Thank you, Valdemort.

[@muheebar-rahman8294]

Excellent video as always. I learnt so much from your videos. I got a question. In the new ,net 8 web app, how do I create a main layout which might have some buttons or searches or other interactive elements? because going through the sample template, it looks like main layout is static server resource.

[@xxxxxxxxx3609]

I touch like button on the video. Im not using preview version but 8 will come soon. When it's coming i will watch. Thanks for the give your informations us.

[@DavdOtonielRosarioSerrano]

awesome video bro keep going

[@PatrickGod]

Thanks, will do!

[@ort2803]

goat

[@theblazgm5069]

@@PatrickGod U are the Goat man, thanks for that amazing experience.

[@braylinvasquez7490]

la kbra

[@delfrysgameplays]

The goat

[@etmc_]

Thanks!

[@PatrickGod]

You are awesome!! Thank you soooo much!! 🥳

[@giampaolotucci5897]

Great !

[@PatrickGod]

Thank you!

[@drjohnballs]

Hey Patrick, I think the server implementation of GameService and the EF context should remain in the server project and the ClientGameService should reside within the Wasm project. This would prevent the EF libraries from being included as a part of the Wasm download, right?

[@blazorSQL]

Thanks a lot.

[@Duelweb]

Top class!

[@PatrickGod]

Thank you so much!

[@TheLUCKYONETutorials]

Hi Patrick, your videos are really awesome! Could you possibly make a video about the implementation of the CustomAuthState provider in Blazor .NET 8? That would be fantastic!

[@josephlittle2812]

Best .NET 8 Blazor content on youtube

[@andrewbrink2078]

Awesome, awesome video. This is a nice interactive way to learn rather than those boring completed, edit videos (mistakes and typos edited out). My wife is not happy with me because now I hog the TV. I want to watch my effing programs. Oh, effing is not swearing. It is for EntityFrameworking.

[@bobbastian760]

It would be nice at the end of the tutorial that we have an app that has all the things in it we learned, rather than deleting or modifying them as we go - this could then be a reference project - thanks.

[@sikor02]

How about having service only on the server side, and have all controls/pages in Client project in order to utilize the "auto" capabilities? The pages/controls in the client project would call the api endpoints so you wouldn't need to create another service just for client side. Today I've experimented with having separate class library with controllers and dtos. It was supposed to act like your "shared" project. But unfortunately it's not possible if for example you inject SigninManager in the controller (won't go into details here). I like having one .cs file per controller where I also store DTOs, but as I see I would need to have a shared project with DTOs only and implement controller methods inside the server project, which I wanted to avoid, but oh well...

[@broadshare]

As an experienced .NET developer my strong advice for new .NET developers I would be focus on SSR, this can be achieved in asp razor pages, MVC and now maybe blazor SSR. Blazor Wasm can only be used for business management apps not websites or anything that requires SEO. Blazor server on the other side requires that persistent server connection via signalR which comes with a ton of limitations including scalability issue. SignalR should remain a realtime tech for c# via nuget package n not render mode for entire app. SSR just like razor pages and MVC is how websites are typically made.

[@allthecommonsense]

What is SSR?

[@stevelugovsky7766]

@@allthecommonsense server side rendering

[@user-wx4li2ov4f]

Hello, great video I just have a question regarding how the service functions after you switch to Auto Mode. I was initially under the impression that when in SSR mode it was using the server side implementation which avoids the need to call the API controller and directly accesses the database from the component though when you added a HttpClient to the server side raised an eyebrow as that would not be necessary unless the server was calling itself. Could you confirm that we calling from the server to the controller in a API call even with SSR in Auto mode? My concern there is that seems like not a great idea to have a server calling itself. I think it would be great if we could switch between the Service implementations via dependency injection so that it uses the server side implementation of the service when SSR and the client side implementation with WASM although that might complicate the code.....

[@MohammadKomaei]

Will Microsoft add a template like this 3 projects of yours?

[@devsuperman]

Greeeeeeeeeeeeeeeat! Thank you!

[@PelFox]

I wonder how auth will work with the double rendering mode. Blazor Server may use a cookie through oidc with the AuthStateProvider. But how would that work in the client app 🤔

[@ahmetsarkaya9203]

I don't know much about blazor yet but It would be great if we could use rendermode directly in the element like

[@jamesscott6864]

Patrick, a quick one. With the baseUri. Would it still work when you deploy/publish the app ?

[@bertievision]

Great video and thank you... however, when trying to use controllers with .net identity (user accounts template for example). API Calls to controllers return the text of the login page. As if they are trying to redirect. I am fighting this at the moment so any tips would be appreciated.👍

[@dotnetdevni]

Dont forget they did say in standup a bug with some of renders at forms

[@darylg3560]

This video is fantastic - I have learnt so much from it, even things like Services which aren't the topic of the video are much clearer now I've seen someone implement them properly! Thank you Patrick. I do have two questions for anyone who can help: How come the client was able to get the list of Games before the API was implemented? And also, how do you implement this with Identity when you need authorizations/cookies to retrieve/post the data with the API?

[@brettgarnier107]

My quckfix menu doesn't offer options to install packages, is that a setting or vs extension? Latest VS 2022 preview.

[@GarethDoherty1985]

Sorry if I missed your explanation of it, but why do you have to setup the HttpClient on the server project as well? Its only the client that needs to make HTTP calls to the server?

[@muheebar-rahman8294]

That is also my question

[@wusswuzz5818]

Is there a reason for needing to register services on both projects? (The HttpClient service for example)

[@joshtralia]

The little wtf made me laugh 😂

[@dejan.demonjic]

Hmm... just a question. Now, I'm in my mobile, so please understand me here xD In your @page "games" you introduced button and click event just to navigate to edit-page, thus you needed a new button component with server render mode, which resulted connecting to web socket in your games page which is static ssr. My question is: why you didnt made a link except of a button with event and avoided web socket connection in games page? Blazor team introduced enhanced navigation, and I think probably for scenarios like this one. PS. I just started discovering Blazor in NET 8, so I didn't jumped in that train as I should do (yet). Btw, great video. Keep publishing

[@minhgiangho1410]

Hope you make a series about using Blazer SSR with HTMX, I think it is better than Auto Mode

[@AmitSharma-bl1ur]

Great Sir You are truly God for blazor learner , Sir i have a question how we will navigate from controller to server razor page in .net 8 using navigation manager it's urgent sir please

[@kevinlloyd9507]

Hey Patrick, should there be any concerns with using Scoped instance for the DbContext with Blazor Server? Wouldn't that mean every new Game created by a single user of the app would keep building up in the DbContext since it only gets disposed when the SignalR connection drops off? Please let me know how you typically get around that.

[@kevinlloyd9507]

I just solved my problem (OwningComponentBase)

[@jeromiya4673]

@@kevinlloyd9507 Close - you're on the right track, but depending on your scenario, you may need even more control over the dependency injection scope and the lifetime of the DbContext than what OwningComponentBase gives you. In that case, inject IServiceScopeFactory and create a scope specifically for a given CRUD operation. Otherwise, you may unintentionally keep around tracked entities and a single DbContext instance for the lifetime of the component, which is usually longer than what is desired. In comparison, as an example, a client-side component calling one REST API endpoint for the read operation and another endpoint for the update would result in two instances of DbContext on the server side, one per API endpoint. But with OwningComponentBase, you will only get one DbContext, which is not only re-used for both read and update operations, but also RE-USED if the UI allows you to invoke the update/read operations multiple times, further worsening entity tracking state issues. But, if you want to avoid all of that complexity, especially for larger projects, there is an alternative. In this case, I would suggest actually splitting the server side project of the Blazor application into two applications - the Blazor "host" (this is the existing server-side project that's included in the Visual Studio template) and the "api" (a new Asp.Net application you create). Then, both the server side components and client side components would access data in the same way with API calls (such as REST/gRPC/SignalR/and so on). In this scenario, either the Blazor host application itself (say, via YARP), or an external reverse proxy (e.g. nginx) proxies API requests from client-side components (wasm) to the API project. Then the only difference between server-side components and client-side components is how the HttpClient factory instances are registered - depending on which proxy implementation you go with. This sounds more complex, but in truth it's less complex, because now both server-side components and client-side components get to use the same exact implementation of the data service interfaces. You don't need to have two implementations of, for example, the IGameService for server and client (you might have to have two HttpClient factory DI registrations though), and you don't need to think very carefully about DbContext scopes and lifetimes or use IServiceScopeFactory to make sure you're not retaining a DbContext instance for too long when a component is long-lived in a server-side component.

[@Felix-og7pd]

why blazor dont have controllers added by default? Check web socket connection: Network - WS - Messages

[@user-ix4kz7ms2p]

Thanks Patrick for showing how overly complicated it will be to create a simple CRUD in this "mode". I guess no one thought about beginners.

[@asdasdaa7063]

Hi patrick, can you please explain how hosting the new .net 8 blazor web app (with auto rendering, so both client + server), how exactly do we deploy this to azure? its making my head spin.

[@mq9032]

What if i am using web api project in my solution how can i handle this? In webassembly project i just used httpclient in service with custom jwt authentication endpoints. In this new approach i have no idea how to implement both server side and wasm rendering.

[@troubleshootq]

do you have a video using an autocomplete component?

[@46I37]

I’m coming from .net framework crud development, and this so insanely more complicated!!

[@luisc1794]

Hi Patrick can you do a video on how to upload files using the new .net 8 automatic render, thanks a lot, love your videos

[@reikoleci4689]

Coming from Reactjs, Building UI components seems very limiting and difficult to combine components into one another -- anw im learning So I could be wrong

[@bobbastian760]

I guess pre-rendering is best used without the 'Loading' text, in many scenarios users might not realise that more data is coming later. Which is the point - looking ready. Having 'Loading...' text which vanishes totally breaks the illusion.

[@Duelweb]

Just one thing you missed. You did not show adding in the one parameter that allows for editing of the record. The parameter needs to be on both the Listform and the Editform. You only show putting it in on the one form?

[@omarxali]

is it better to use core or entity framework?

[@vivekkaushik9508]

28:24 😁 have some sleep Patrick. 😅

[@PatrickGod]

I try. 😅

[@The-Z-Zone]

Wow this seems much more difficult then what it used to be. Was the only reason for putting the Services / Data in the Shared project was so the client project could implement its ClientGameService off of the same interface?

[@PatrickGod]

Absolutely, Zak. The main reason for putting the Services/Data in the Shared project is indeed so that the client project can implement its ClientGameService using the same interface-and also to use the Game Entity. While it may seem more complex at first glance, the new setup doesn't stray too far from what we had with .NET 7. I'm actually planning on creating a comparison video between .NET 7 and .NET 8 Blazor WebAssembly to clear up any confusion. Stay tuned for that! Take care, Patrick PS. An update for the .NET Web Academy is coming soon. 😊

[@The-Z-Zone]

@@PatrickGod looking forward to the update. The overall video was great but it seems the template needs a bit more TLC I think. I was thinking perhaps the interface and DTOs should be in the shared project and the data and entities could remain in the ‘server’ project. The interface implementations could sit in their respective projects.

[@rustyprogrammer]

@@PatrickGod Unless I miss something I think it is sufficient to have the Entity Definitions and the Service Interfaces (only) in the shared project. The Server an Client projects can than each implement their own version. This also guarantees you cannot accidentally register the wrong implementation.

[@10Totti]

Thanks as always, but the last wasm/server part is very confusing.

[@PatrickGod]

Thanks for your feedback. I'll definitely create another CRUD video after the final release. Hopefully it will be easier to understand then..

[@10Totti]

@@PatrickGod Thank you for the content you bring us!

[@parko1965]

Was this video featured in the Community Stand Up?

[@PixelProfessor]

Has anyone tried this out with VS 2022 and the released .Net v8 and up to update 'pre-release' Nuget packages?

[@scottmarcus6508]

Patrick, Why not have the server call the same api as the client? Seems like it would cut down on some of the redundancy.

[@PatrickGod]

Hey Scott, I totally get where you're coming from; it might seem like a streamlined approach at first glance. However, having the server call the same API as the client would actually add an unnecessary hop on the server side. In reality, using web service calls from the client is essentially the same setup we had with .NET 7. So, we're not really introducing any new redundancy here. Appreciate the thought, though! Always good to question and discuss different approaches. Take care, Patrick

[@kipchickensout]

That was a ride, I didn't expect it being that .. "complicated" I would like to make a website and setting up a pipeline and do all that with blazor, and I still have yet to do much of that for the first time. I want to use blazor because I love C# but also see it at work, not really sure what the site should do...yet. And I spent the last 3 hours just googling what type of project I should create :D

[@drink8686]

Yeah man, I have the same problem. I know for sure that I will need an API in the future, but I don’t want to write the client part in JS, so now I’m just thinking what I’ll do, create just a server-side MVC and write in JS, or take blazor, but without the MVC template...

[@nicocorei]

Hello from Belgium ! Thanks for your video ! This could be cool to give a link of the final project code :)

[@navirbox4913]

Honestly I just need to know why you created GameList on the Server project and not on the Client project. I mean what goes where, and if you're using Auto mode should you be prepared to fetch actual data as if the component was rendered from the server and then on the client? Isn't that double work?

[@SIBUK]

Why do we have to put all the services in a shared project now? Why can we not just have the client services on the client and the server services on the server like before? I dont understand.

[@rustyprogrammer]

You can (actually, imho you should), but you do need the interface definition in the shared project

[@Felix-og7pd]

None - interactivity type, is client side rendering f SSR vs stream rendering, simulate async js loading vs fast but on page reload CtrlShiftC - Network - WS - Wasm webserver - WebAssembly

[@gareth6052]

Hi all. Anyone know why the services namespace won't 'auto complete' when adding it to the _Imports file? Says it's missing from the namespace despite the folder structure matching the namespace name, etc

[@gareth6052]

The problem I had was due to the fact that I added the 'view' / 'layout' to the wrong project. I created it in the Client and not the server project.

[@shawnstaggs5254]

I was trying to replicate your example and it looks like the latest version of vs2022 or dotnet 8 rc2 changes the project template to move the pages folder into the client, without it being in the server project. When creating the project I selected Authentication type = None, Configure for HTTPS, Interactivity type = Auto, Interactivity location Global, Include sample pages. The result was a different layout to what your steps produced. May already need some updating.

[@user-rv7lj1fv2o]

I thinking different is Interactivity location is per/component not global. Global have something wrong.

[@PatrickGod]

Indeed, could be that there's still a tiny error in the global interactivity mode in the RC2 template. With the final release, this should be fixed!

[@valghirenghir3791]

Hi, What about the flickering stuff ? the @attribute is no more used, how to resolve the problem with @rendermode ?

[@valghirenghir3791]

use this :

[@honestcommenter8424]

Can you please make an example on Blazor app with entity hosted in Azure, I am not getting that to work no matter what I try.

[@vivekkaushik9508]

What exactly are you trying to do? Perhaps I can be of some help?

[@honestcommenter8424]

@@vivekkaushik9508 I am just deploying a plain blazor server/client with added identity and google auth. When running locally, I get the google button on register/sign in page, but when deployed to Azure, the page loads but shows a message saying "no link" or something like that, I can try and get you the correct message if you like.

[@honestcommenter8424]

@@vivekkaushik9508 The error is Sorry, there's nothing at this address.

[@AMIRKHAN-dm2fm]

is that possible to have a session with you for a complex problem in blazor wasm?

[@PatrickGod]

Hey Amir, I appreciate your interest in seeking my help with your complex Blazor WASM issue. Unfortunately, due to my current workload and commitments, I'm unable to offer one-on-one sessions at this time. However, feel free to leave your question in the comments, and I'll do my best to address it in future videos or community discussions. Take care, Patrick

[@pashadjoystick]

super clear english pronansiation - i face with it rarely in nothern america and g-britain. i am from ukraine. where are you from?

[@PatrickGod]

Thanks a bunch! I'm from Germany. 😊

[@TheMezanine]

Thanks you Patrick for this great video as always. But the new "breaking" architecture is very confusing for those who used to play with blazor wasm hosted. This new architecture seem to me like a roolback

[@JollyGiant19]

It’s ultimately a unification. WASM is still there and useable without invoking any of the other Blazor bits but if you ever want to bring them in, you can

[@TheMezanine]

@@JollyGiant19 yes I know, but it's to confusing and seem like not well designed. I hope they will bring back the server side boilerplate API implementation in the final release to avoid us having to implement all thoses stuff by ourselves.

[@paulgehrman]

@TheMezanine I agree with you, but also agree that this is a step towards unification. For now, I don't see much reason to deviate from the wasm app, at least for LOB-type apps.

[@rwxzig]

Is there a github repo for this code, or did someone follow the tutorial and has a repo for it?

[@n1troo]

There is some logic issue when 'Join the waiting list' at academy, better make just big new page with BIG letters you joined ;)

[@browaruspierogus2182]

the real question is if SSR code for client is exactly same as for wasm so we can share it like a dev with normal brain between render modes I don't know why you would mix those modes in global project - SSR is more secure according to MS because it exposes less

[@mq9032]

siema, rozumiesz moze jak to dziala bo mnie popierdoli z tym zaraz. jak to moze byc az tak skomplikowane?