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

[@christiantricarico]

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

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

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

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

[@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! 😂😂

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

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

[@michaelrafales2782]

I am 46 minutes in and I am learning so much!!! This is fantastic! I appreciate your mistakes. Watching you find your mistakes has really helped me learn how to troubleshoot my own mistakes. Really enjoying this video!

[@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 :)

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

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

[@joaogabrielv.m328]

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

[@PatrickGod]

Thank you so much! Me, too. 😜

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

[@pezhmanpiramoun2997]

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

[@AdeyinkaAdegbenro]

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

[@PatrickGod]

Sure thing! Thank YOU!

[@FeralFluxMusic]

I'm just getting started with Blazor. This was very helpful as an overview. Something I'd be interested in is how to parameterize the CRUD process. Our SQL server has thousands of tables and views and I'd like to avoid manually creating services for each one of them.

[@CleoCat75]

thanks for showing the backend Network/Console transfer stuff! makes understanding the wasm and socket stuff easier to visualize!

[@PatrickGod]

Glad to help! 😊

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

[@michaelrafales2782]

Seeing how you coded both client and server side CRUD operations was extremely helpful and informative!!! Thank you again for such a great video.

[@MohammedMisselmany]

Thanks mate, was struggling all day with my assignment. I ended up with this and one other video and theyre great

[@sunitjoshi3573]

Thanks a lot for putting this out. Deeply appreciated.

[@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?!?

[@guillermomazzari8320]

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

[@leo_b061]

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

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

[@michaelrafales2782]

Thank you so much! I really appreciated your explanation in the first 20 minutes. That was extremely helpful! Looking forward to the rest of the video

[@MohammadAldefrawy]

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

[@PatrickGod]

Thank you so much!

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

[@ahmetsarkaya9203]

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

[@hippiehans]

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

[@TheNotedHero]

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

[@AmerBakeer]

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

[@legolastht]

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

[@TheAstroguypasa]

Thank you for the amazing Tutorial Patrick!

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

[@strategik365]

Thanks Patrick - I learnt a lot from this.

[@scottpeal60]

Would love to see your tutorial on new NET 9 Blazor Server App, Shared, API, and WASM with Auth0 as a single Visual Studio solution. So users could 1) download the wasm to phone/desktop for offline use and data sync, and 2) also access via the browser server side when online. Great videos, much appreciated!!!

[@doaink5169]

Did you ever get a video of a clean architecture using this approach? Server , Client, DAL, ... Thanks again for such great videos!

[@josephlittle2812]

Best .NET 8 Blazor content on youtube

[@46I37]

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

[@richgouette]

was kind of thinking the same thing.. I'm sure there's something grand I don't understand just yet.. maybe performance gains...maybe prettier.. I dunno

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

[@joaovictor3883]

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

[@PatrickGod]

That's awesome!

[@MohammadKomaei]

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

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

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

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

[@tamaslencse3468]

I coded the same project (kinda) while watching the video, and I could not find an explanation for the HttpClient on the server. The app works with server's HttpClient commented out from Program.cs. Anyway, wanted to ask the same...

[@DuncanTyrell-z4x]

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

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

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

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

[@mohsin6312]

Awesome ❤❤❤❤

[@minhgiangho1410]

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

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

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

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

[@ZdeněkGrežďo]

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.

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

[@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.👍

[@jsiahaan]

Thank you Patrick!

[@PatrickGod]

Sure thing! 😉

[@jamesscott6864]

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

[@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. 😊

[@Felix-og7pd]

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

[@giampaolotucci5897]

Great !

[@PatrickGod]

Thank you!

[@joshtralia]

The little wtf made me laugh 😂

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

[@johnstavitiq]

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?

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

[@dotnetdevni]

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

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

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

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

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

[@mohammadmz1058]

Great tutorial! Thanks for your effort 👍

[@n1troo]

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

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

[@dawiemos]

Thank you. Well done!

[@Duelweb]

Top class!

[@PatrickGod]

Thank you so much!

[@rashoElhasa]

Hello, Very cool tutorial keep up the good work.🎉 Could you tell me if it is possible to read data from a view instead of a table? When I try it with Entity Framework I always get error messages. Thanks and keep up the good work!!!❤❤❤

[@brettgarnier107]

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

[@troubleshootq]

do you have a video using an autocomplete component?

[@wusswuzz5818]

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

[@predicasiones1]

why are you using api in the paths for the controllers I don't see any folder name api?

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

[@miyagrace_dev]

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

[@Gabriel-kl6bt]

Thank you, Valdemort.

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

[@jacobphillips9235]

Thanks!

[@PatrickGod]

Thank you so much, Jacob!! Really appreciate it!♥️

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

[@damasake]

You can do this 21:41 without installing entityframeworkcore first? Edit: Nevermind, I wan't paying attention enough

[@PhantasyAI0]

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.

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

[@vivekkaushik9508]

28:24 😁 have some sleep Patrick. 😅

[@PatrickGod]

I try. 😅

[@marianzurini9715]

your videos are really awesome, thank you🤗

[@valghirenghir3791]

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

[@valghirenghir3791]

use this :

[@techsolve9397]

Please can you make a video with 2 tables like one for the category and one for the game and make a dropdown selector to save it ???

[@parko1965]

Was this video featured in the Community Stand Up?

[@ReiInTech]

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

[@DJKav]

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

[@riskyOriginal]

This was soo helpful thank you soo much

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