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

hello my dear friends Patrick here and welcome to the CR tutorial for Blazer in.net 8 boy this was a right I already recorded the tutorial I didn't expect it to be that long but I covered everything all the render modes we've got static server side rendering we are using stream rendering we're using the new form capabilities meaning serers side rendering without websockets or web assembly so no interactivity actually but still we can use a form to for instance create something right create any kind of entity and then we also used the server render Mode web assembly render mode and also the auto render mode which is of course server and then web assembly I will go pretty deep actually cover yeah in in my opinion everything so you can learn a lot in this tutorial some errors happen because it was kind of Life new experiences here but you live and learn right so I hope you enjoy it and learn a lot and if so you know the drill please hit the like button subscribe to my channel it does make a difference so thank you so much for doing that and if you want to support me scroll a bit further down there is the link to my patreon page so all my patrons thank you so so much for supporting me already I will love you forever and if you're still here make sure to check out the link for the 2024 edition of the net Web Academy where we of course cover everything net a related meaning web API and also Blazer now server web assembly SSR whatever you can think of everything with net 8 so this is what we're going to do in the upcoming net Web Academy so make sure to check out the link in the video description to join the waiting list and now without further Ado enjoy the tutorial all right so here we are Vis Studio 2022 it's the preview Edition and I can tell you already this will be interesting because when we now filter for the Blazer templates here you see we've got the Blazer web app and the Blazer web assembly Standalone app this is the new stuff all right so here this is still older stuff you can use but you see that Blazer web assembly well you have the empty application here but for net 8 we actually only have Blazer web app and Blazer web assembly Standalone app Quick word about Blazer web assembly Standalone when we go here just click this through you see that we have no aspnet core hosted option right so when we create this you see it's only one project only the client project big Advantage is you can still use Azure static web apps for that for instance to deploy this but no web API in here so this is somehow what you used to when you're coming from the Blazer web assembly team but the files have changed a little bit structure changed a little bit and you only have the client project here so no web API of course you can still build your or add your web API project here in the share project and then you have the architecture that you probably already used to with Net 7 for instance but what I think Microsoft wants us to use is the new blazer web app template so let's just do that and then I will show you all the random modes so Blazer web app it is and we call this now Blazer cr. net8 all right now I'm using here the preview Edition or the rc2 release candidate 2 but in my experience not a lot will change for the final release so we can still use this version here what we now see is that we've got authentication types or actually one type that we can choose from with that we already get razor components for identity that's nice but this is for another video we configured this for https standard stuff and now comes the interesting stuff and when you have a look here I told you that already in a couple of videos but let's just recap this real quick so when you say interactivity type is none then you've got serers side rendering but not the Blazer server type with websockets you've got static server side rendering so your result your HTM L will be built on the server and the client gets then the finished HTML the finished file finished stuff so no web soet connection and no web assembly downloaded to the client but this is then different of course with interactivity type server which is also called the render mode you will see that when we use the uh the attributes and we also have the interactivity type or render Mode web assembly and then both which is auto now this means this is the Blazer server stuff you you know from Net 7 and before so here we will open a websocket connection that is active and you have interactivity meaning when you click on a button then something will probably happen the server knows that you have clicked on that button this will not work when you select none because then you only have a static website you can add as many buttons as you want but no button will do anything except maybe a hover effect click effect or something webm similar to server you've got interactivity but not with websockets this time you're using well web assembly so we have the code in essence downloaded to the client and you can use your buttons your forms whatever you want to use even when you're offline all right still works this is not the case with the websocket connection here and auto now means that your interactive component or page will will start using a websocket connection but in the background the wasm files will be downloaded and when you then visit this page again this is important when you for instance reload this page then not while you're on that page for the very first time there's not not a switch happening from web socket to web assembly on the Fly this just means that the wasm files will be downloaded in the background and then when you visit this page again and your browser browser knows or sees oh we've got the wasm files already then this will be used instead of the websocket connection pretty nice stuff actually but let's just see how it works for our crot operation still I want to select this thing here because with that I get two projects a Blazer server project in essence which is also a web API if you want all the API capabilities are there and we also got another project for all the web assembly stuff but let's have a look at that in a minute one more thing we can configure here is interactivity location this is also new with uh release candidate 2 this just means when you for instance say Okay I want interactivity type server and then also Global then this is in essence a Blazer server application as you know it from Net 7 and before not totally the case with this configuration here because you got another project an extra project for web assembly where then the Blazer server project is your web API ASP net core hosted right and then also another project for your components I know now it's getting complicated so let's just have a look at all that and I hope that then everything becomes clearer now here include sample Pages this just means that you get the typical weather forecast for instance and the counter example and when you don't check this then you've got the same stuff you got with the older m empty templates all right so let's just add the uh examples so again net8 rc2 in this example auto interactivity type so we've got server and and web assembly and per page component let's hit create and then let's have a look all right we already here real quick the net Web Academy 2024 Edition will be open for enrollment very soon in there we will cover everything net8 related meaning web apis and Blazer web assembly server static server side rendering stream rendering everything you can think of everything. net a related this is what we're going to do there and we will have a deeper look at the architecture there as well so how would you now Build Your solution what projects should you create if you want to be the first to know when this thing is available scroll a bit further down in the video description you will find the link and now let's continue with the tutorial I also want to already want to state because this was important for me I am used to web assembly ASP netcore hosted I loved that architecture because there you had your client project which was well the client the user interface right so you've got all your pages your components there you see now here two projects with blazer components pages and so on and then you also had your web API and the shared project awesome stuff because this is what fascinated me when I saw Blazer web assembly for the very first time you've got your client project your server project everything with net and c and also a shared project you could host everything on Azure and both the backend the server and the client the front end could use the the entities from the share project for instance amazing stuff when you're coming from angular for instance as I am then you know that you would have to create your objects on your back end and for the web web API and stuff and also the same well you should at least I know JavaScript you don't have to but would be nice to create your entities there or your ddl's there as well not the case here here we could use both we can still do it but we have to think differently I know I'm talking a lot about that but it is important to me and I think it is important to state that the the way we will develop Blazer apps in the future may change if you still want to use web assembly if you only want to use server then not a lot will change actually I think bear with me here this is really new stuff not that experienced yet but uh of course I will uh I will try to answer your questions and uh well provide more videos about that stuff anyways let's just run this and then we'll see what is actually going to happen in the browser so there we are and let's just open the console because this is important we have to see what's going on there here now the hello world page the homepage static rendering okay let's have a look at the code here we've got our Pages home and you see nothing is here no rendom mode whatsoever this is different here on the counter page we see this attribute rendom mode interactivity one more hint about that on this official blog post here by Dan Roth release candidate two we see that they changed the uh attributes actually let me find yeah there it is so here now you see the old way is already the old way uh to use the attribute rendom mode and then whatever you want to use the new way will be with the uh release the official release of doet 8 maybe you already have the uh net8 SDK there no rc12 whatever then you see that you can use this thing here right rendom mode and then interactive server but as you can see on here this paragraph above that to be able to use it that way you would also have to add a using directive actually because when me now go go back here and I'm trying to use the random mode and then interactive Auto for instance Visual Studio has no idea what I want to do so what I have to do actually it's not loading at all I have to add it like that and maybe I have to rebuild it all right still no syntax highlighting whatsoever let's try that yeah rebuild failed because it doesn't know what this is so you have to add the uh random mode right or add it using directive whatever you want to use the problem I had with this because you will see that in a minute that I cannot set the pre-rendering flag here I have to or if I want to change the pre-rendering and this is really important again if you're coming from web assembly maybe you used it I didn't because I built apps where it wasn't really important important for me but if it is important for you then you can set the flag here for instance by default pre-rendering is enabled for Server render mode and web assembly as well so if this is important to you maybe you still want to use the attribute here or uh add a little configuration here uh according to the to the blog post here where you can then set the pre-rendering because this has an interesting effect when we build our own pages these are the example pages of course they just work let's have a look at them again all right so here we are again the homepage is simply static rendering when we again have a look at the developer consoles and here then the page this is what we get all right now let's have a look at the weather page you saw that short loading and here we don't see anything let me just try this one more time there it is and here you see we've got the loading screen or the loading text and then after a while we see the data Okay now what's that this is the stream rendering I have to explain this again I don't know if you watched my earlier videos so when we now go to the weather and by the way you will see me wandering around here in the solution Explorer because I'm still not used to it to look for the pages and the components in two projects all right so there are Pages here there are pag is there and I'm still well I'm I I never find them directly but I hope this changes in the future but still here what you see is the stream rendering so this means that we have the static server side rendering meaning everything is built on the on the server we uh can can see the data then but when we would not have that we can set this to F so simply comment this out and restart the application and then you will see that it takes a little while while to get there see that here on the counter and then go back to the weather page and it it takes half a second well why is that they they just simulated this asynchronous call let's say so it takes half a second you can set this to a second of course and then what I want to show you is simply that without stream rendering this means that we really have to wait for this page to load before or the data to load before we can actually go there and see the data but here now you see that the data is already here right and with stream rendering we can well see already let's say the skeleton the shell whatever you name it and uh until the forecast are loaded in this example well we just see this loading text and it comes later nice actually for the user experience and still no interactivity right so still no server side Rend rendering static it's static they call it static serers side rendering but no websockets so not really Blazer server as you're used to it and absolutely no web assembly stuff so in essence and again already very important you can build your applications a lots of your applications just using these two features static server side rendering and stream rendering because if you need a form there's still the option to use the edit form with two more parameters and one attribute where you say Supply this uh data from a form for parameters here in the code block again if you're used to it I hope you know what I'm saying and then and then you're done it it works all right so actually great stuff but now comes the other kind of interactivity so let's just say you want to use a button like here the counter page this is not no form right so what we can do we can click here and we see a result great the counter is increased but when we go to the counter page and you see it here renom mode Auto is used but we are here on our client project which is the web assembly project this is necessary because well with the auto render mode we want to use also the web assembly render mode right after our first load so we have to set this page then in the client project because everything where you want to use web assembly has to be created or set here in the client project this is important now what is this thing doing again let's just comment this out and have a quick look and now no interactivity I can click here as much as I want but nothing will happen well it's just static server side rendered right we have no interactivity here and now let's have a quick look again I have to uh clear the site data and now let me go to there it is uh first disclaimer this here is visual studio and hot reload stuff so this is not the web soet connection I'm talking about when we now uncomment this again we restart the app it will load and this is now the web soet connection I'm talking about right so here now when we go to messages we should be able to see something thing is happening and maybe we also see yeah we see some values here where the user has clicked so this is really the web soer connection but we also see that wasm files have been downloaded and this is what also happens when you use only the the server interactive the interactive server render mode right you have the web soet connection and when you use interactive web assembly then you see that these files will be downloaded and in this case both is here right we have the web soet connection and also the WM files and you can see that as well here in the in the console you see the web soet connection is here great stuff now is when we go to the homepage for instance then after a couple of seconds yep the connection is disconnected this is nice all right love that this is really really great so no web soet connection here because we don't need it of course this is different when you use the global render mode or the global interactivity I'm again still not using to all these new terms but I think you get what I mean here and sorry that we haven't even started with all the CR operations but I think it's important to well to try to understand this before we start with Crut and if you're already bored check out the times codes below because then of course you can jump to the chapter you want to see okay so now we've got the websocket connection but now the question is again we want to have a look here and what happens now when I go back to server not server on also not weather just to counter we don't see here that the web soet connection has been established right same for the console there is no new web soet connection again we go here and back nothing happens and even when we reload the page now we see only websocket all right so this means now this is happening on the client with the help of web assembly okay so far so good these are the random modes you can set them globally you can set them per page or component and now let's try to create our Crut application our Crut operations again you name it so what I want to do is a really simple really really really simple example for that let me just create one folder for our entities and this will be simply one entity entity it is and here I add one item and this should be a video game live Library so it's a bit more fun for me but in essence at least for Me Maybe for you too and I just use an integer for the ID that was hitting tab one time too often and also the name this is great and let's set this required so here now this is our entity all right to keep this really really simple and I want to use also Entity framework here with SQL Server I know I said simple but maybe this is a tiny bit more realistic then when we have a real database behind that application so let's let's add the boiler plate code for that as well we've got our data folder here and we add also our data context inherits from DP context and of course with control period we get the Quick Fix menu and we install the latest version now for that we need a Constructor the data contact Constructor with the DB context options with our data context we call this options and here we use the base Constructor as well and we only need one data set so DB set of type game and we simply call this games all right so these then will be our video games our games table will that be for that we also need a connection string of course so here let's add this call this by default default connection and in my case I'm using secret Server Express if you don't have it installed please just Google for SQL Server Express maybe also for the SQL Server uh management Studio install all that and you're good to go so here now this shall be server SQL Express database name is my video game DB we say trusted underscore connection is true and Trust server certificate is also true hope there's no typo and this should be our default connection now here we set or register DB context so we say Builder Services add DB context with our data context and here we want to say or here we say say that we want to use SQL Server all right so here now options use SQL Server we need a package for that as well well let's install this manually then in a sec but here now we say for configuration configuration get connection string default connection we add two parentheses and then this is the only thing that's left all right now we need in new get package and since I'm using the rc2 here I was a bit confused because I haven't seen that here the official release has been installed from entry F core so what I have to do just in my case and if you want to use a pre-release as well oh not for the solution right click the server project manage un get packages and here now check that include pre-release and first let me have a look here ENT frame core we have to update this actually to then the uh rc2 version because then we are able to also install the other version or the other packages rather so here now exactly first thing Microsoft anti core SQL Server let me make this a bit bigger this is the one this is the provider for SQL Server if you want to use that so let's just install this thing we have it here and also for the codos migrations that I want to use here we need need the design package accept that all right and now we have them here isn't that nice okay so again boiler plate stuff and now we should be able yep to add this using directive here to add this reference all right now the next thing we need we have our packages here we can double check here in the server project file all right is the next thing is theet EF tools so here now we can enter net tool install D- Global and again this is just for Entity framework and the code first migration stuff and when I enter this I see that it's already installed now in my case I can just check with net EF and we see that I've got the rc2 version of net 8 installed in your case again this might be different so if you want to install it in your also want to use the rc2 then you set this to das Dash version then copy this add this here again I get this eror but what I can do is of course I can say let me just uninstall this and install this thing back I hope it is already installed okay wait a sec let me try it one more time oh there was a typo I guess uninstall yeah now it's installed uninstalled and now installed sorry if it's a bit confusing we have two little children at home one of them is a two-month young baby so my nights are well different maybe okay this is boilerplate stuff now migrations we only want to have this game entity in our database for that we can use code first migrations and this is interesting in this little example here what I W will do now this is well this is simple we just run the migrations we find data context here in this project right in the server project we see the data context is registered here the database con context we have the entity here everything's great we will see that a migrations folder will be created here in the server project but later when you maybe you already had this question in your mind if you also want to use the client here with this and services that we will create there then we have to change this a little bit because what if you want to add another entity run the migration but the entity then isn't in another project well it is getting confusing but again once you get the hang of it life is getting easier again I guess so where are we here so now we have to go to the Blazer cut.net 8 folder and I think there's still not enough we have to be here correct so this is the project with our entity the data poer and so on where everything is registered so now here we can say netf migrations at a should be initial but I think this also works anyways so build is started and after a couple of seconds I hope our build failed so let's have a look what the okay let's just try that one more time now I can say in initial okay maybe we should close the project first or uh stop the project rather so now for the third time we succeeded I hope this little arrow help you in your developing process now here we've got our migrations folder all right so here it is and we see I think you know this already if not I'm happy to help but if you know that of course feel free to skip this part of the video we will create a table called games and only with an ID and a name and in uh the down method that would be the roll back case of this migration we would just drop this table so now we can say net EF database update yes it's update the command even if the database does not exist yet we want to use the update command and as you can see here now we see that the database in the table will be created I already opened the management Studio let me just refresh everything ignore the other databases please stuff from the Web Academy and so on but this is now the video game DB with our beautiful games table and here we can see that there's not a lot to see yet ID and name great so again boiler plate stuff we are I think already 40 minutes in something like that and we haven't even wrote our first Crut command okay so here are the operation rather what I now want to do I want to create a service that will use the DB context data context and then the first thing would be to get the games right just read them for that I create another folder and I say Services let's create an interface first for that so here now this is our iame service interface and here also a new item which is our game service this thing implements the I game service and we can already register this thing so here in the program CS we say Builder services at scoped game service that's the one and we use the implementation class game service and this my friends will come in very very handy when we also want to use some of the CR operations on the client but more about that in a couple of minutes so here now I mean I'm talking about dependency injection we will write another implementation class for the AME service interface spoiler alert sorry about that so now here let's just create one method and this shall be returning task list game all right and here we call this get all games and now here we Implement that and we need again our data context so private read only data context context I know the service is also kind of a repository then but it is a repository and uh so we skip one layer and we not using data transfer objects here again sorry about that bear with me here this shall be a quick tutorial although it already will take long I guess but everything's new here right so we should take the time to learn something new also some fun sometimes to learn some new stuff okay so get all games and here what you want to do is just access our context say games and we just want all of them and turn them into a list async all right so here now don't forget the await keybo Asing task all right and these are actually our games so bar games is this and now here we return our almost our games okay so this is now the method all right and now we build a page for that so here under Pages we add a new rasor component and we call this let's say this is now our game list component this is a page so now we say page games for instance and what we can already do is we are on the on the server right you see this is difference to we assembly again I'm coming from web assembly so here now we do not have to inject the HTTP client we don't make a web service yeah a web service call in essence we just use our service directly I know if you're from blazer from the Blazer server team then you're thinking what the hell is he talking about it's so simple right but well not for everyone so inject I game service game service and we need a using director for that and I don't like them here in my components so so let's just add them here in the Imports file and now yep there it is we have games so here now we have uh list of game again this is something else we can use Imports there is and here now these are our games new list of game okay and now on initialization of this component I want to get them all so here now protected override uninitialized async we just say our games is now await okay that's new the visual studio is jumping here when I just write await it adds the Asing keyword but it is jumping to the return type all right await game service get all games isn't that nice now it's getting interesting so here now I say if let's say Let me let me think about that if the games a bit differently so what we can do is also we just say this is null by default if games is null because there is an issue I want to show you games are null so now we just show again a loading text all right else if games count is zero and in that case we say no games found all right and in the other case we just say we add an uned list and for each game in our games list now we just not Span in this case list item with the game name all right again I hope simple stuff looks great right so let's have a look wait one more thing we we need the we don't need it but let's have a look at the uh nav menu now in the components layout folder and here we add another menu entry for one more SEC H is then games games unfortunately the uh or I'm I'm not really sure how they added the uh bootstrap icons here because when I run this I don't see the icon there but we can add an SVG here let me do that real quick see that we can go to icons for instance we we can search for controller dpad also looks nice and here's the SVG so let me just copy that back to visual studio and you know we just paste this here save it restart the app there it is and we have our beautiful icon here okay let's just go there and it it it it takes you don't really see this right it takes a while but let me show you what's going on here so we go now again to our service this and similar to the uh to the weather example here we can actually just copy that all right and put this here let's just simulate a delay so many games it takes 1 second to load them so now let's open the console again and let's just see what's happening here weather is one thing all right and now let's go to game I am clicking now takes a second before we get there this sucks right okay bear with me here this is static Sero side rendering we have the exact same scenario here so we can Now activate stream rendering for our game list I'm really not used to it still game list there it is and now activate stream rendering see that we see the loading text that's nice right this is different now right here's the weather here's the counter go to games we come to the page directly we see the the loading text and then no games found now let's add a game in the database for instance playing that now so all right and now counter games loading cyberpunk 2077 Isn't it nice so again static server side rendering with stream rendering activated still no Blazer server or web assembly interactivity okay but this is coming next now we want to to add a button that navigates us to another page and to be able to click that button we need interactivity and this is getting interesting so the first thing let's just uh add a button to create uh or to navigate to a page that enables us to create a new game all right so again we add a new page raise a component and let's just call this edit because we will also use that to edit or update game game and now here we say page edit game like that and let me add another route here already with a parameter integer uh ID and this is this is important you have to set this to integer here because by default this will be a string this leads to an error because our ID is of type integer so you have to specify this constraint the ID will be an integer edit game does not exist in the in inal studio like that so maybe now he she it it is more happy now okay that's nice but let's let's just implement the create case so create game for that we need well the game here right so the game that we want to create so this is our new game then new game with the name String empty by default let's say and now we can already continue with the edit form so the edit form for those who who don't know this is the typical built-in component of Blazer that is used to well build a form and do whatever you want with that form create stuff update stuff maybe even delete stuff we need a model for that edit form so it knows what's uh going on here and what we want to change for instance and we can add also a submit method also on valid submit if you want to add validation for instance you have to to set the name and can display then an error message all that stuff that we can do in other videos of course in the do Web Academy and so on but for here now let's try to keep this simple because I have a feeling that this tutorial will be very very long I haven't planned this this is kind of life really so we just add a label here for the name and again another buil-in component input text it shall be for the name we bind the name of our game so name the game like that and here we just display it and that's it for the data and then we need a button all right so here button type important this is the submit button we can add a class like button button a primary bootstrap stuff and call this submit and then of course we also need the handle submit method so this will probably be uh also something asynchronous so async task handle submit and now here we do something all right give me a second here first we want to get to that page right so this is actually everything we need we have the uh we have now routes file where we have to specify all our routes this is the beauty of Blazer or one of the many beauties of blazer for instance if you know angular you know what I'm talking about so here now this is everything we need but again now we want to navigate to that page of course we could just use an a tag with an href and so on but let's say you want to use a button so we go back to our game list and here now I want to add a button give it the text create game and also a class so button button primary and in here now with add on click we can say when someone clicks this we call a method called create game and again here we will add a method to navigate the user to the other page for that we need the navigation manager so let's inject this thing real quick manager navigation manager and now down here create game navigation manager not the context the manager manager that's the one actually yeah there it is and here we say edit Dash game Let's test that so have so many tabs open now okay it is rebuilding we see loading 207 cyberpunk 2077 create the game oh no we forgot something we need interactivity well of course let's just add attribute and then render mode interactive server right restart what's that it's loading twice what the heck okay go here back loading twice why is that let me go to cre okay this is something else I forgot but this is not important for now important thing I wanted to show you is that it loads twice so this is already one thing to well be careful about we edit stream rendering and also interactive server now interactive server render mode does something similar to stream rendering but just to show you again what is happening here I want to comment everything out so restart the application and here now again when we make the switch from the counter page to the games page we get directly to that page right I click and the page is there loading great now now let's try it the other way only interactive server mode all right but now when I go from counter to games takes a while I already clicked and you've seen something has already been rendered there somehow and maybe we can already see it also see it in the console so we go to games well not really in the console but again we go to counter then games there's some flickering something is happening there and I'm not sure what is happening there but I can tell you that what I do know thanks to the Twitter Community really or ex Community sorry pre-rendering is enabled by default all right so what you have to do if you don't want that flicker and only want to use interactive server uh maybe together with stream rendering then what you can do is something like that with that we disable pre-rendering just for that component and you see no flicker anymore we can get directly to that page it is loading so this is the stream rendering action and then comes the interactive server stuff what I'm not sure about is why we also see the oh that's because of the counter sorry maybe I should uh choose the homepage for the switch so now here we see that uh it has been loaded it and we have no Flicker at all and we can go to the create game let me just fix that real quick in the uh edit games Ed a game there it is and here we just add real quick the int ID let's make this null as well and this is a parameter format everything and now this should work games create game I made another mistake oh my gosh that's what we're talking about okay so now home games create game no flicker we can do anything here connection has been disabled again we can come back here connection is here again and so on but is it the right way maybe we can do this a bit differently well maybe but again just in case you want to do it like that maybe since we only need this button here actually that should be interactive maybe we can create another component and just make this component interactive and this component is also just a button I know what you're thinking Patrick really just the button really just only create a button component yeah sometimes it might make sense but of course there are many more options now to realize this functionality here but let's just go with the idea of creating this button now and I'd say we add a new folder for that and call this folder maybe shared because maybe we need this button at some other page as well and here now we just say this is a new eraser component and we call this thing create game button because the thing is you cannot simply say on click we we use a parameter for the uh for this button here and say okay with that parameter then we set a a function like the navigate 2 function this will not work because the code then is still here and we need that code actually in the component that needs the interactivity because when the code is here this component then would not be interactive right again we we don't want to use that here here we just want to use stream rendering to display the list of our games and then we want to make only this button interactive and whatever is happening within this component so inside that component this shall be interactive but for that the code has also uh has also to be inside that component so in essence you just grab that thing here like that and go to our create game button put that here also add the navigation manager of course inject navigation manager navigation manager all right and then the game list grab this thing and put this here all right and we set the random mode so here know again from the game list let me just grab that like that and uh let's just say screen rendering is fine let's see how this looks then and here in the game list now we say this is our create game button but maybe we can grab that put that here so add using like that so now on the game list page we have stream rendering navigation manager is not necessary here and now we have our create game button here we have interactive server random mode uh that should just navigate us to the edit game page let's see if this works okay I think that's it let me go to the homepage reload go to game games okay we have a web stock connection now here create game we get here and we see we we get to the page directly and then after a couple of well two seconds one second whatever it was we see the list of the games okay so far one way to do it again there are so many ways to do that okay now CR meaning create we have the read for all the games now creating a game let's now say maybe we don't want to create a game here on the server because we've already seen this actually works here on our game list page we see we can inject our game service and call the get all games method but now we need another method to create a game and maybe this is an opportunity to use that do that on the client so how would we do that first we have to add something to our server right uh to our service that's the one so here now another method returning the new game and call this add game because we're not really creating a game we adding a game all right so here let's Implement that method as well and simply say context games at game and then wait no it's not jumping to the return timee that was interesting and here we return the new game because with that when we save that this thing here gets an ID because secret server will create our en framework is it secret server it's secret server right yeah secret server is creating an ID automatically for our new entity and with that then we get this ID so when we return that thing we have the name of the game and also the ID beautiful stuff so we could simply do that on the server for instance here now we just say again we inject I game service game service and say wait game service at game game all right now the thing is again no interactivity here so even when we have implemented all that we can go to games or maybe here also go to games loading create a game and now let just let's just say The Last of Us submit it's telling us the post request doesn't specify which form is being submitted ensure form elements have a form name attribute with any unique value or pass a form name parameter if using edit form okay so this is something new right so before we jump to web assembly or adding interactivity here maybe we can do something else so a form name let's say form name is here well edit game and then we also need this thing here and we can add another attribute Supply parameter from form okay let's save that and try that one more time nope it's not working what's that this has to be a yeah of course this is a parameter right so this also has to be a property now so let's make this a property real quick uh get set like that let's try that now let's start with the game list we create a game and now the Last of Us submit something was happening we go to games we have our game okay not bad not bad so again no interactivity here on this page it's still only serers side rendering but we can use that form that's nice and now actually what we can do is we can do the same thing for updating a game but what about deleting for instance well leeting would be then a button in essence that we can put here or on the game list again so this could be similar to actually the stuff we have already implemented right so here for instance in the uh in the game list we can here that's something I wanted to implement anyways an edit button which is again uh a separate component and then also a delete button which can be a separate component and this then has the interactivity for instance well the edit button can also be a link but the delete button really has to make let's say a call to a service then and the service then grabs the ID and deletes the game then uh on the database well again so many options so many possibilities so how should we do that now well this is an example tutorial so I want to show you something else again we go to edit game we see this form works but now let's forget the the new form with serers side rendering although it is great that it works that way right again I have to repeat that this is server side rendering with a form enabled so we kind of have interactivity without web sockets and without web assembly actually great stuff but now let's say we want to use that on the client we want to download this form and enable the user to use that form on the client when the US user is offline for instance maybe we uh well it's a big form where the user enters lots and lots of stuff and then we want to make use of the local storage as well to store that maybe temporarily and uh well for that we need web assembly right so how would that work well Microsoft T we can simply use attribute and then random mode interactive web assembly all right almost like that let's save that now and have a look it's loading create game okay this does not work couldn't be found in the assembly blazer. net8 yeah of course because maybe you paid attention at the beginning and you haven't skipped the video right when we now want to use that on the client we have to move the the whole compon component or page to the client as well so what we have to do is we just move it almost here down here now we've got edit game on the client and we can actually remove that to be able to make this work we have to pay attention to the program CS here because it says uh regarding the services and razor components all right then interactive server components and also interactive web ass components this is in essence the important stuff when you're starting with the auto interactive render mode template option it adds these two lines right server interactivity is this line web assembly this line and also down here this is also important server render mode interactive web assembly server mode and you need the assembly uh from the client project and this is just one way to do it you just get the assembly with the uh help of the counter so when you remove that I think you have to pay attention then uh that this still works you don't have to do that for every component or every page you just need the assembly once and this is just one way to get the Assembly of the client project so now you have this here on the client but you see already wait a second there's a problem here we want to use that service we want to use that entity so what can we do well actually um can we no we cannot really reference the the project now right because here you see that the the client project is referenced when we now try to do it the other way this cannot work right let me just add a project reference here this is the server project no of course it doesn't because then we would have a circular dependency does not work so what do we have to do OG I implemented so much stuff now I have to grab everything the entities the services maybe even data data context and stuff and put that in a separate project and when you see that then you see again when you're coming from the web assembly world it's pretty much the same thing right the Blazer server project then is the web API the client project is our bler web assembly client and then we add a class library for all the shared stuff it's well it's almost the same not really but let's just continue here we add one project and I really wasn't thinking that this tutorial is getting that long a class library and again bear with me here regarding the architecture we can do that way better and I think I will also make a video about architecture now because it's really getting interesting with the new blazer the web template but for now let's just create a shared project all right I called it Blazer uh cr. net8 and now shared okay you could of course also add a domain project using a layer architecture then maybe a data access layer business logic layer for the service and so on or maybe even use clean architecture tell me in the comments what do you want to see uh I am happy to create it then we have the persistence layer the uh infrastructure and so on but for now let's just use this shared stuff we remove our example class and now oh my gosh we need the services so let's put them there and delete them here so we have to change the the usings or the name spaces we need the entity let me just close that data is something we need we also need the uh entity that's what I was talking about entity here migrations is now also very interesting because we register data context here but the entity and the DB context is here in the shared project so you have to pay attention then when you use Entity framework with code code first migrations the easiest way to do it is you go to the shared folder and then set the the startup project right so for instance if you do like that and see the help command then you have also this attribute this option here and and with that then you can set the startup project so you just do the same thing you say migrations add initial for instance but then set startup project is this thing so you really have to navigate then to this folder but you are set you run this command in the shared folder then this should work anyways so here we have now our components still in the server project create game button great stuff and the migrations as well but now here what we actually need is the data context here the game here the entity and the services again you can even separate the concerns even further so that you would have again a project for just the data context for the entities for the services but for now I think for this tutorial it's already long enough so here now we have to change that let me fix the name spaces first so now this is shared so this has to be correct right so let's make this correct here shared shared and here as well this should be that and that and here as well nope that was not the correct one that's the one but as you can see here we have to also install the package yep that's the one okay so here know the entity and also the service wait a sec that that's the name space for that okay so this should be set and now let's have a look here in the program CS shared okay of course we have to reference this but the client needs it as well so maybe we can add the dependency here add project reference Shar folder all right and with that then sure about this what's going on here share data yep okay we've got our service this is correct and now regarding the dependencies you can see that we've got the shared project reference here in the client project all right and with that then since the service references the client project we also have the shared project referenced okay so now this should at least build right let me just rebuild the solution well I already see an error here uh yep there was something missing uh okay and now let's try that one more time okay the game service I game service so now here we are yeah of course we need this thing here now in our usings and also the entities entity should be called entities right anyways so also let me have a quick look here in the Imports this should actually also be shared and here as okay let's have another look well there's a lot to think about okay now these are the migration files shared shared okay at least it's building now can we run it yep it also runs so now let's go back to the homepage we moved everything we go to games okay still works no create game disconnect oh still not working one of more errors game service we don't have game service yeah know now this is getting really interesting because when we have a look here one well at first one might assume okay so now we have the option to use the rendom modes uh whenever we want them to use right so meaning when I want to use web assembly here I can just use the web assembly and everything just works right well not really this is the client when you have a look here at the Frameworks you see microsoft.net well it's microsoft.net cor. app when you have a look here Frameworks we have the same one but also aset core so again this means this thing has all the web API capabilities we are on the server here now the service us uses the data context and this canot work on the client this only works on the server so what can we do here well in the end this means that still of course with the new blazer I'm calling it new blazer because we're not allowed to say Blazer United anymore because it's it's not called Blazer United it's let's just say8 Blazer and the web assembly render mode we still have to make an API call right so in essence the same we had with net heaven and before so now when you really want to mix that stuff you can use the service directly in a component that is placed on the server and uses the server interactive mode but if you want to use the web assembly render mode you still need an API call so how the heck are reimplementing this well I told you that already and that's the reason why this is a web API here this project so what we can do is we can simply say add a new folder call this folder controllers and here now we add a new API controller so API controller standard stuff this is now our game controller and in here we add our Constructor and we add our game service so iame service game service almost like that we create and assign the field at the underscore here and then we add an endpoint to create a game okay so that should be HTTP post public async task action result game we need the entity add games and then again did not add a dto here just for this tutorial it is long enough VAR say edit game then is await game service at game and re return okay edit game so here now first implementation of our controller but now we also have to register the HTTP client and we have to do it on both projects so here we have a program CS you see nothing is registered and I know maybe you thought well maybe we should first try to register the game service and it will work it doesn't all right so of course we can build our services and we have to but give me a minute I know lots of complicated stuff at scoped iame service game service and also HTTP client so that would be Builder services at scoped and then let's call this HTTP is a new HTTP client with a base address and this Base address is a new URI with Builder environment based address and we have to do almost the same stuff on the server so actually maybe we can just copy that go up to here and now here we say well we could hardcode this or say configuration so we put this into the uh app settings get section and I will add something like base URI like that and from that we need the value all right yeah there is a value I'm sure about that okay and now in the app settings here we say Bas URI URI and no this is not a section this is just a string and let me have a quick look in our launch [Music] settings that's the one so we just paste it here and we should be good to go right one more thing is missing we have the services here in our shared folder we are using actually already this service here wouldn't it be nice if you would be really able to use the service and we do not have to add the or inject the HTTP client here and make the API call here well let's have a look again maybe you want to see that we have injected the service here already we can load this but you see still doesn't work unable to resolve now it's the data context well you can try to to go down this rabbit hole but in the end it does not work thanks to dependency injection though what we can do is we can implement or add another implementation class actually for the AME service and call this maybe client game service and this client game service then makes our API calls so we can really use the same interface the same service in the end also on the client but it is not using the database context directly or a reposit or whatever it is going to use it is making the HTTP call great stuff right so add new item call this client game service I game service we Implement that this is a public class we have a private readon HTTP client client http client we create a Constructor out of that and here now what we do is we say V results is wait HTTP client post as Json async our game the URI now is API game maybe we can put this in a new line fine and here game is our object and we return await results content read from Jason Asing all almost like that and that's true we can remove that let's just see but of course regarding the registration now here we say not the game service this is now the client game service and save that and have a look go back to home reload that now we go to games we want to create a game no error website connection is closed we have web assembly and now let's add all of P for instance and it does not work because of course I forgot one thing I already see all the hate comments we have to add the controller capabilities here of course because this is no web API by default let's say so what we have to do is here first Builder services at controllers right and down here we also have to add the middleware so use uh not use map controllers like that and now drum roll lies of P nothing happens do we see that here well let's just go to the list of games there it is is we should add some feedback maybe right so then we would see that it works but now we have covered all the random modes already I know Auto is not covered yet but in essence this just means that here now in our not shared it is here in the edit game we could of course say here instead of web assembly want to use the auto mode you restart the application and and then also remove everything here clear side data we go to the console and of course here for the button this is the web s connection then we say create game and now here it should use the uh websocket actually see that we still have this connection so when we now say lots of the for Fallen okay see some messages here say submit something is happening right don't know if we see that here I'm not a web socket or signal expert but something something was happening here right anyways so now we see this game here as well and again let's have pay let's pay attention here too the console and we now reload that no websockets whatsoever right now we have the uh uh the wasm files downloaded so here we also see no websocket connection for that all right this is great so now in essence we covered everything already but let's just finish up the CR operations meaning only updating and deleting is left so it's up to you do you want to do that with the server or do you want to do that with the web assembly render mode again we have our game list here what I would like to do is add an edit button here as well so similar to that stuff maybe we can just copy and paste this here and this is now an edit game button so let's continue with the editing or updating of a game and now here we just say edit game method is called or actually we need an ID so this is going to be interesting so let's add a parameter here in ID this is a parameter and here now we say edit game it's that method here edit game well we can do it like that then actually edit game and and here we say edit game with the ID all right this should be our button we have the HTML button with this function we have the ID parameter here navigates us to edit to the page edit game with the ID parameter and now when we go to our game list we just add this button here so add game that's the one but uh let's have a look edit game why is it game button that's the one yeah with the ID game ID this should be it random mode server all right and now since we are here here already on the client client game service edit game we well we need to implement also the API call again and well just grabb the ID right so we have it already here in our route and here's the corresponding parameter now what we can do is we can check if the ID is null then we display this title here but otherwise we say this is edit and then we have a game we should have a game because on uh when when the parameters have been set then I just say game name all right so this would then be our header okay and here now let's say protected override on parameter set async we say well could be the case that the game does not exist but let's just say game is now game service actually get game by ID do not have this method yet but let's implement it real quick so here now task game get game by ID int ID and now we have to implement it here as well so here this should Simply Be return wait context games find async and then simply the ID yes could be now but again don't care for now and now regarding the client similar stuff you now we say get game byy ID we say B results is await HTTP client get from Jason async and this is Now API game but we need the ID so id id id here this is the ID then all right this should be a game like that and we return the results like that okay and now here we say wait async and turn the ID into an integer okay I'm sure I forgot something just want to check if we get the game with the title so now here we go to games we see our beautiful buttons here edit game we see cyber Punk again let's have a look at the console and just refresh this thing and go to oh we already have an error that's nice because yeah controller yeah we have of course we have to add the Endo here as well so many stuff to think about now HTTP get well I think when we used to it then it's okay get game bu ID in game uh not game ID get game by id id and this is just the game right so one more time yes now we get the game okay so Last of Us Last of Us games edit game and it's every time it's disconnecting the websockets okay interesting stuff really so now we can we can uh well get our game and now we need the updating the editing so here we need another method first to uh edit the game task and maybe also the ID and let's also already Implement deleting so here now I just say uh maybe return a Bine value delete game with the ID and now let's Implement that now first the server service so here now delete would be first of our DB game async if DB game is not null then we say context remove DB game and await context save changes async return true else we return false and now updating where is it game same stuff in the beginning we say this and then here we say um well if the DB game is not null then we say simply the DB game name is now the game name this the updated game all right and then again await context save change say sync and we return the new DB game and if it is null then we again just throw a new exception with game not found something like that and now here regarding the client and we have to also add the end points of of course now here that would be the results wait also HTP client delete async with API game and then the ID return results and edit would be await HTTP client put s Json Asing and that'll be API game then the ID and here our game and we return results content actually where is it no we return there it is this stuff and here yeah all right now the end points game controller we have a post we also have a put so the put would be add game and ID game updated game and here of course the ID and now here delete also with the ID and ID and we have delete game ID and this is actually let's just call that result oops all right show me the typos well I did all the server stuff but it didn't Implement anything regarding updating or deleting on the client so what I actually wanted to do is you now handle submit if the ID is null then of course we we edit but else we call edit game with the ID here and this should be then an integer and let's also say Asing task the lead game with an ID is then wait game service delete game with the ID well that already is an integer okay and now we should be able to add the delete button here as well maybe inside the form so add if ID is not null then we add this thing here and this is now type button not submit there's something like danger I guess delete and on click we call delete game actually do not need the ID we already have it so int ID not sure if this works but let's see restart the app we have the delete button here no error is it this nope no error so far this is nice let's just start from the beginning we have hello world we go to the game list we go to The Last of Us now it's last of us too we hit submit did something happen I should really Implement feedback yep last of us too this is nice again let me go here here this was the put this now the payload preview nice and now again I don't know L of or The Last of Us deleted and now we go back delete okay go back to the games it's gone all right I think we're done this is enough and if you're still with me thank you so much for watch watching I really didn't expect this tutorial to be that long but I guess we covered lots of stuff and well this is the direction we are headed with Blazer and net 8 headed heading you know what I mean if you have questions and I'm sure you have questions please drop them in the comments and also what are what what is your opinion about all that now please again drop that in the comments show me what you think about all that and what are your questions what do you want to see I hope I can answer your questions maybe even with more videos so again please just write it down in the comment section make sure to check out the links in the video description for the source code supporting me maybe thank you so much again and uh also the do and Web Academy there is something big coming for the 2024 edition of the do and Web Academy of course we will cover everything net 8 and net 8 Blazer related so make sure to join the waiting list there again links in the video description and yeah last thing again please hit the like button subscribe to my channel for more net8 and net8 Blazer content thank you so much and thank you so much for watching and I hope I see you next time take care

Channel: Patrick God

Views: 47,955

Keywords:

Id: w8imy7LT9zY

Length: 92min 39sec (5559 seconds)

Published: Tue Oct 17 2023