.NET 7 Blazor WebAssembly Full-Stack 🔥 Full Course Part 2/2 (with a Web API, EF Core & SQL Server)

hey friends I'm Patrick I create.net and Blazer tutorials here on my channel and welcome to the second part of the full stack tutorial for a Blazer web assembly application laser webassembly on the client web API on the server also Entity framework with code first migration in a SQL Server database on the back end side and we've got a shared project as usual for our models there without further Ado let's continue with the second part alright so we see our data here in the quick grids the reads part of the Quad operations is done even with persistence with the database right so now the next step is actually creating updating and deleting a video game and for that what I like to do is create first another page right so right click the pages folder add another Razer component and here let's just call this edits video game I know we can also use this to create a video game for instance because in here we will add a form an edit form we'll use the edit form component of a blazer with built-in components like the input text field but you will see this in a minute and again we can use this to edit the video game as well as creating one and of course we can also add a delete button there to then remove it in the database now what I want to do the way I want to do this is again this is another page right so add page I know here let me just call this uh video game not games it's no video game and also another one that's also one of the many many many beauties of Blazer we just add another route here a video a game and then add a parameter and that'll be an ID with a little constraint so this has to be an integer because when we are doing it like that we can check for this parameter and when the ID is set we know that we want to edit the video game and when the idea is not set then we know that we want to use this form to create a video game we can also do this by changing the title for instance first we need the parameter so here now we add prop int could be nullable so a nullable integer with the name I and d and we also add an attribute here which is parameter so with that we know that this is a parameter that can be set in this case via the route and here now we can ask for that so if the ID is null for instance then we say our what Title Here is create a new new video game and we can also use the page title component here to really set the title of the the window of the tab whatever it is so maybe also create a new video game and then we also got the else case of course so in here now we can say is let me just copy that I'm a lazy developer so here now you can say edit and then actually I want to have the game available there so let's also add the video game which by default let's say is a new video game with the title new game all right so and in here now you just say game title like that actually and same thing here all right and now comes the edit form real quick the.net Web Academy is open only for today yes this is the last day one day left for enrollment in the.net Web Academy after that it will be closed so that's your chance if you wanna dive deep into Blazer web assembly a web API Entity framework SQL Server deployment with Azure designing with Tailwind CSS git for the source control many more stuff and a great Community already and maybe you want to check out the link in the video description thank you very much for considering and now let's continue with the tutorial so here edit form renders a form element that is that Cascades and edit form added context to descendants well in essence this just means that we can give this thing a model so model and then this will be our game in this case and here now we can access the properties of this game so for instance we just add a diff with a label and here we say this label is for the title of the game say title like that and then we use another built-in component from Blazer for all that input stuff you can see it here we've got an input checkbox date file number and so on and by the way if you hear strange noises in the background this is my little baby girl she's well when you're watching this maybe six weeks old so please excuse me please accept my apologies but she's currently in her baby sling sleeping and this is not the only time I can make this video here so I hope that's okay anyways input text for instance for simple text stuff and the ID now again would be uh almost the title and now we want to bind some data here so we say bind value and this now would be our game title like that and we can add a bootstrap class because we've got bootstrap here by default and this is a form control so maybe we can already have a look let's just save that restart the application and now without the yes we see create a new video game and edit new edits where it comes this from there it is restarted again all right and now we see create a new video game because we haven't set any ID right and here now the title we can change the title now if we add an ID like one for instance we see edit new game new game is still the name of the the video game here but in a couple of minutes what we will do is when we get an ID here actually and I open the window there's also some noise out there please apologize but it's really really hot in here anyways what you want to do is when this parameter has been set then we want to make another web service call to our API and then gets the game with the provided ID I think you get the idea and you also see that the the form actually already Works isn't that nice so now what we have to do is actually again copy and paste some stuff for my lazy deaf friends here and the next thing now is the publisher so publisher it is also here publisher publisher really simple examples here right now in the.net Web Academy of course this is different go really really deep in there but here now let's just say this is the release year like that and we can turn this into an input number field actually release a year and release here all right save that reset application and we see the other fields isn't that nice all right and now the next thing is actually a submit button so let me just uh go into another line and here we add again a button type submit all right and the class bootstrap button button primary and you know uh let's say just call this safe all right and what will happen then when the submit button is clicked we will call a methods and this methods has to be defined here on submit we also have on valid submit an invalid submit this now means we can of course use validation here in the edit form meaning when the release year for instance cannot be below 1900 something like that or the title has to be set it is required and then we can use on valid submits because then the form will check if everything is valid if not we can display some error messages of course but I think for this quick tutorial here that's maybe too much so let's just use only on submit typically we can call this handle submits and the function then would simply be async task handle submits all right and in there then what we'll do is we will make web service calls again but here now just to test this right line handle so that's for instance all right so let's save that again restart the application and open the console all right save handle submit so this works in general so we've got our form we've got a button and we also have our handle submit method now the next step would be maybe before actually giving this thing real logic and storing the data or the changes in the database and maybe we can add something to our quick grid here a button maybe an edit button to well open the video game page and also create button to create a new video game right that would be nice I guess now the first thing we can add is a simple create button so maybe on top here you just say button create a video or add video game makes more sense right at the video game and then here we say at on click for the events and here we call a method actually add a video again all right we have this function not yet don't have it yet so here now we can say avoid add a video game and in here we would just navigate to the video game page so for that what we get with laser is the navigation manager so add inject navigation manager call this also a navigation manager and now down here we just say navigation manager navigate to and then simply a video game save that test it real quick or we don't because [Music] and video game yeah without the parenthesis of course let's try that one more time and I don't see the button yeah because it's the wrong page oh my gosh so here now we say create oh no maybe uh actually why not video games and then again let's go back here and put this down here all right and of course we have to inject the navigation a manager all right and now maybe you think well games count just just because I see this here and I'm doing all this on the Fly so with no script and nothing that's not the best solution here right because it could be the case of course that we have no video games and we just want to add some but still we see then the loading video games let's say loading a screen so maybe we can just say if games so now and here we say got another list of video games and this is indeed now at the beginning and in that case we can um no we can't set this all right now when the result is still now then we see yeah we could then of course add something else like really reacting to a null result but again I think for this tutorial you get the idea let me just to reset the application and let's see if we can create a video game button oh yeah beautiful let me just change the class to button and then button primary all right restart and we can add video game last thing maybe Uline please foreign yeah okay now there could be more space as well well I think with Tailwind CSS for instance we can do this way better but again that would be too much for this tutorial save button is there okay let's see but you get the idea we are now coming to this to this page and create is just not the right term I think so here let me just change that to add because we're not really creating a new video game right Okay so bit messy so the second part here maybe of this tutorial but anyways it's late and I'm just happy I can do this find some time to do this here so add a new video game we have our form and we have a create button but now would be great to also create a button or add a button to edit a video game here in the quick grit so what we can do is actually at a template column the template in here we can now add a button so let me just copy this again and now here we call this simply edit for instance and here now we add a Lambda expression where we now say we want to edit the video game with the given ID and in this case that would be the contexts quick Rich uses the term context here and with that now we have the ID of the current video game but now we need the function as well so let's now say void edit video game with the game ID and here now again use the navigation manager with now the ID so here we add the ID all right let's have a quick look here these are the parameters that's that's now let's see if we get an edit button yes that's nice so we can click here we see the two of course the title is not correct but we see edit and here there'll be game number one this is nice so in essence that's the first step for the client of course we have to make the the calls as well and add the delete button but now let's just go to the web API and add the the endpoints there so we have get all video games now we can also create update and delete video games let me just again copy that stuff and let's say create and for that now I would really like to add the HTTP request methods so HTTP post would be the one to create a video game and here now what I like to do is simply say how you do this actually is context video games and then ads and here of course we need a video game uh video game video game and here then come on we we add the video game like that but with that we are not done what we have to do is then say awaits contact save changes async because with the add function the change is only tracked or as you can see in the description here begins tracking the given entity all right but with save changes async we really save the the change here so with that only the new video game will be stored in our data base and yeah what we can then do for this example actually is just Maybe return all the video games so you know we just return awaits and then get all video games like that all right I think this is nice so let's go back to the client and here now we say again if the ID is null then we know that we want to create something else we want to edit something so here we inject the HTTP client GDP clients http and this means that we've got a result actually uh we do not yeah we get a result we don't really have to show it here because we uh right we want to show the result in the quick Grid or all the video games in the quick grid so we could actually do not really have to return all the video games but so let's just do it that way I think again you get the idea here you could Now display all the games or you could navigate back to the uh to the main page where we see the quicker the grids or the list of the video games totally up to you of course so let's just say oh wait http post as Jason async and here now we call API and then also a video game the posts and we sent the game here and that's already it all right and what we can also do already same thing put but there what we will do is we will change the route because here we will add then avid so let's add that thing all right so with that the handle the submit is actually already done so let's just restart this we've got the edit part here so go back and add video game and here now we create breakout for instance also done by Atari actually by Steve Wozniak and Steve Jobs crazy right and that was in the year 1976 we hit save you do not really get any feedback but let me now go back to video games we see breakouts and there it is worked isn't that nice so now Next Step again would be to change that right update maybe so in our video game controller again it's another method already told you that but maybe you use the time code so we are now doing the puts and here on the client I'm using the put as Jason async but regarding the URI it's API video game and then the ID so I'm really adding the ID here and this has to be represented in the API as well so here now it's not only HTTP put now for the update but also the ID in the routes and how could you do that well we can add another route our trip attribute similar to the actual class here right or we combine these two meaning the HTTP request method and the route with parenthesis we can just say I want to see in curly braces the ID here and that'll be the ID here as well so now what we say is we always updates call this add also update video games and ID a video game and the first thing is I'd like to check or get the video game from the database so VAR DB video game would actually be awaits and then contacts video games find async ID so that's the one from the database all right now what we can do just for fun if this thing is null we return are not found okay we can then say this video game does not exist all right but if we get it then what we can do is we just override the properties manually meaning that the DB video game title now is the video game title the given video game title the video game released here is in fact the video game release here and the last thing would be the publisher same thing and in the end again we save everything and if you want return all the video games back but the thing is before this makes sense regarding the UI we also have to implement getting a single video game right and this is where the route and the HTTP request methods make more sense even here in the get all video games and call because we will then have two get calls so when we now copy this and say we only want to return one single video game to display it in the or on the edit page so get a video game with an ID we now add HTTP gets again with the ID here as a route ID it is because if we don't do that again we would have two HTTP gets calls and the web API would not know which one to use when we only say okay we use the route API a video game and then the HTTP request method is get again same routes API doesn't know what is happening so here now what we want to return is actually that stuff so you know wait you know we say give me that one and the DB video game alright I think this makes sense now in the edit video game we use another lifecycle method to get the current game and if you paid attention in the first part now we have a parameter and we want to check if we get the idea we have an ID provided so now we would not use the on initialized we would use on parameter set async all right and in here now we say if ID is not now then our game would be awaits http [Music] get from Json async only a video game with now the routes API video game and again there is the i d that one this could actually be null so maybe we ask if the results null then game is the results okay and let's try that there we are this worked so far this is nice say edit Tetris two save do not really see any feedback again but here we see Tetris 2 maybe we can change that real quick so let's just uh inject the navigation manager again navigation manager and here we say [Music] um navigation manager navigate to video games actually let's do that here as well so just put this here all right restarts and now let's fix Tetris again remove that it's safe there we are and this looks way better right awesome so now only delete is left for that maybe just add another button here but we have to check if again the ID is not now then we add another button very important this is type button not submits I think this is danger and here we say delete and on click we call delete video game and now let's say async task delete video game we have the ID so we just call await http delete async with the route API video game and again the given ID and when this is done we go back here all right and in the controller we copy this and this is now the delete request methods call this delete we only need the ID and if this is the case then we say context video games remove DB video game save changes and everything's fine okay restart all right we added breakout so let's try to edit delete it yeah this is not nice but anyways delete and it's gone all right that's it sorry if the second part was a bit more messy or messy yeah it is really really late at least for me with a baby and a toddler so I hope I find some hours of sleep now three hours would be nice and uh yeah apart from that I hope you enjoyed this tutorial again source code available for all my patrons thank you so so much check out the video description if you like this tutorial and learned something I would really appreciate it if you hit the like button maybe even subscribe to my channel thank you so so much and thank you so much for watching and I hope I see you next time take care

Channel: Patrick God

Views: 4,275

Keywords:

Id: JTaCOvlEKEw

Length: 33min 57sec (2037 seconds)

Published: Thu Sep 07 2023