Це відео не доступне.
Перепрошуємо.
CRUD w/ Blazor in .NET 8 🔥 All Render Modes (SSR, Server, Wasm, Auto), Entity Framework & SQL Server
Вставка
- Опубліковано 17 сер 2024
- 🚀 Join the .NET Web Academy: learn.dotnetwe...
💖 Support me on Patreon for exclusive source code access: / _patrickgod
🚀 Get the .NET 8 Web Dev Jump-Start Course for FREE: dotnet8.patric...
🐦 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
No hate comments. Mistakes and compile errors come to all of us when trying new stuffs. Thanks for this real dev journey.
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 UA-cam 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.
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.
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!
same
Ah yeah, they won't take you in a better position than them.
exact same 3/4 people I admire. Fourth is "rawcoding". He is good as well.
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
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
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.
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! 😂😂
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!
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?!?
Great video, as always! Really excited to see .NET 8 final release :D
Thank you so much!
Me, too. 😜
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 :)
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.
thanks for showing the backend Network/Console transfer stuff! makes understanding the wasm and socket stuff easier to visualize!
Glad to help! 😊
Thanks God !
Simple, Clear, Helpful & COMPREHENSIVE !!!
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.
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
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.
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?
Watched the whole video and answered a lot of questions. Thank you sir
Seeing how you coded both client and server side CRUD operations was extremely helpful and informative!!! Thank you again for such a great video.
Thanks a lot for putting this out. Deeply appreciated.
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!
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
Really helpful video, thanks a lot!!!😁 Really love that you use the newest Web App Blazor project and explain how stuffs work in it!!
What a fantastic guide! I learned a lot! Thank you! :)
Always looking forward to your new video, thank you @Patrick 💯💖
Sure thing! Thank YOU!
Thanks Patrick - I learnt a lot from this.
Great Effort my friend
عمل رائع يا صديقي
Thank you so much!
My dude, thanks for sharing such awesome content! It might seem confusing, but I actually like this new architecture!
Thank you very much, Patrick! The information you shared is both interesting and useful... I appreciate it 👏🏻🙏🏻
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.
awesome video bro keep going
Thanks, will do!
goat
@@PatrickGod U are the Goat man, thanks for that amazing experience.
la kbra
The goat
Thank you for the amazing Tutorial Patrick!
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.
Thanks!
You are awesome!! Thank you soooo much!! 🥳
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!!!
Thanks for you, because of you, i am almost getting a real job, i just have a lot thanks❤️
That's awesome!
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.
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?
That is also my question
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...
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
Awesome ❤❤❤❤
I don't know much about blazor yet but It would be great if we could use rendermode directly in the element like
Hi,
You saved my mental health! :-) This is really good stuff. Thank you very much.
Happy to help! 😊
@@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?
Mistakes teach problem solving and makes us aware of how designs need to evolve as functionality is added. Great video!
Best .NET 8 Blazor content on youtube
Hope you make a series about using Blazer SSR with HTMX, I think it is better than Auto Mode
The little wtf made me laugh 😂
Will Microsoft add a template like this 3 projects of yours?
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.
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.
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?
Great !
Thank you!
why blazor dont have controllers added by default?
Check web socket connection: Network - WS - Messages
your videos are really awesome, thank you🤗
Thank you Patrick!
Sure thing! 😉
Great tutorial!
Thanks for your effort 👍
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?
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. 😊
@@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.
@@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.
This was soo helpful thank you soo much
Thank you. Well done!
I’m coming from .net framework crud development, and this so insanely more complicated!!
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...
Dont forget they did say in standup a bug with some of renders at forms
Top class!
Thank you so much!
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
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.
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.
What is SSR?
@@allthecommonsense server side rendering
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.
super clear english pronansiation - i face with it rarely in nothern america and g-britain. i am from ukraine. where are you from?
Thanks a bunch! I'm from Germany. 😊
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
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...
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!
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.....
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
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.👍
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.
You can (actually, imho you should), but you do need the interface definition in the shared project
Thanks as always, but the last wasm/server part is very confusing.
Thanks for your feedback. I'll definitely create another CRUD video after the final release. Hopefully it will be easier to understand then..
@@PatrickGod Thank you for the content you bring us!
Thank you, Valdemort.
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?
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
Patrick, a quick one. With the baseUri. Would it still work when you deploy/publish the app ?
28:24 😁 have some sleep Patrick. 😅
I try. 😅
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!!!❤❤❤
Hello from Belgium ! Thanks for your video ! This could be cool to give a link of the final project code :)
Is there a reason for needing to register services on both projects? (The HttpClient service for example)
do you have a video using an autocomplete component?
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
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.
What exactly are you trying to do? Perhaps I can be of some help?
@@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.
@@vivekkaushik9508 The error is Sorry, there's nothing at this address.
Thanks a lot.
Patrick,
Why not have the server call the same api as the client? Seems like it would cut down on some of the redundancy.
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
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.
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?
Greeeeeeeeeeeeeeeat! Thank you!
There is some logic issue when 'Join the waiting list' at academy, better make just big new page with BIG letters you joined ;)
My quckfix menu doesn't offer options to install packages, is that a setting or vs extension? Latest VS 2022 preview.
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 🤔
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.
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?
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.
I just solved my problem (OwningComponentBase)
@@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.
Hi,
What about the flickering stuff ? the @attribute is no more used, how to resolve the problem with @rendermode ?
use this :
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
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
@@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.
@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.
Has anyone tried this out with VS 2022 and the released .Net v8 and up to update 'pre-release' Nuget packages?
Was this video featured in the Community Stand Up?