CRUD with the Blazor WebAssembly Render Mode in .NET 8 🔥

hello my dear friends Patrick here and there's still one tutorial left to cover all crot operations with blazer we've got static server side rendering already we've also got Blazer server but what about Blazer web assembly now right we need a separate additional project to be able to utilize web assembly with the new blazer in net 8 and this is what we're going to do today so all CR operations with blazer web assembly using the Blazer web app template in net8 well some things have changed right and in this tutorial now you will learn how this works and if you really learned something and like this tutorial I'd really appreciate it if you hit the like button and there's also a button next to the like button and it would be amazing if you could click this button it does help my channel to grow and to create more videos like this one so please guys subscribe to my channel it means the world to me thank you so much for doing that and also thank you so much to all my patrons I love every single one of you if you want to support me to Links in the video description and now let's start with the tutorial all right so we are here Visual Studio 2022 we create a new project with the new blazer web app template this is important not the Blazer web assembly stand loan app I did this in another tutorial here it's all about the random modes and for that we need the Blazer web app template so we hit next and now let's call this Blazer web assembly. net 8 CR or cr. net8 because this is I think the same structure I used for the other projects all right we hit next and now the framework of course net8 no authentication htps is great and now regarding the interactive render mode we already see web assembly here and this is what we want to choose we could of course also choose all Auto because with that we have the same boiler plate code the same configuration that we also need for web assembly but since we only want to use web assembly here let's just choose that the main difference is that when we choose Auto then you will see within the example pages to be more precise within the the counter page we will see the interactive render mode Auto on the counter page and here now with web assembly it's just web assembly so no combination of server meaning websockets and web assembly anyways interactivity location should be per page or component I think this totally makes sense and then we choose to yes include the sample pages so let's create this thing and then already have a quick look how this real quick I'm currently creating a net8 webdev jumpstart course which will be available for free we're going to have a look at web apis and Entity framework there for instance and if you want to be the first to know when this thing is available then I recommend just check out the link in the video description and I will send you an email when you can get it so scroll a bit further down and then you know what to do and now let's continue with the tutorial there it is how this looks so we have our server project here structure is a bit different toet 7 maybe you already know that we uh have a Pages folder and the layout folder now with the main layout nav menu but in essence the examples are still the same we have instead of the fetch Data Page we have the weather page where we well fetch some uh simulated and randomized weather forecast data using stream rendering here again this is something I did already in or I covered already in another tutorial we have we have a homepage error page and so on this tutorial is not about these basic things this Bic basic stuff here we want to have a look at the basic still web assembly Crut operations and for that the client project is interesting because whenever you want to use web assembly for a page or component in Ence it's the same right then you have to move that to the client and as you can see here already random mode interactive web assembly this is the directive we need the render mode directive when you already played around with net8 before the final release then you know that uh we had an attribute instead of the random mode directive but now this attribute is no more so please pay attention there and here is the result and now let's just open the console directly and when we have a look here and go to counter we see that web assembly files have been downloaded and we can go there we we have interactivity awesome and you also see that here when we go to network and then wasm this is all the stuff that has been downloaded right okay so web assembly it is and now how can we Implement Crut this is an easy example right because this is just a button but what about now changing real data creating new entities and so on first thing I want to do here is lots of boiler plate regarding Entity framework again I know I'm repeating myself but I did this in the other tutorials check them out in the info cards or wherever you find them here on the screen so if you already know how to do that just check out the time codes and jump to the actual implementations of the CR operations now I will again Implement all the entry framework boiler plate stuff for that I first have to close the terminal and then I will add another project actually and this will be a class library for the entity so add a new project class Library it is and we call this now when we have a look at at the names it's actually this thing up here is the server project because this has all uh or also all the net web API capabilities so we can for instance create a controller here and we will have to do that anyways this is then the real client let's say and additionally then I would like to add a shared project so the name now would be maybe Blazer web assembly CR Dot net8 and then shared amazing name really so we don't need that class but I want to add a folder now called and entities for instance and in here now similar to the other examples we add a video game class this is the video game and to T and this thing now is public and gets some properties first one is the ID since this is an entity and I want to store that in database table then we have a title which can be nullable I mean why not for this simple example then also the publisher is something I would like to add and the last one nullable nullable int for the release year okay and with that entity now we can create our data context or a database context and we do that now here on the server part so we add a new folder call this data for instance and then also add a new item which is the data context so now comes all the entry framework stuff so here now we inherit from DB context not known yet but with control period we get the suggestion to install the package Microsoft Entity framework core and this is exactly what we want here and when this is done we we add a Constructor so CTO we hit Tab and we need a parameter here of type DB context options and in there we put our data context now with options and here we also call the base Constructor this is nice and additionally I know I'm quite fast here but this is no entity frame of course so bear with me here please additionally we need a database set to represent the video games then in the database so another property it is which is the DB set of the type or with the type video game this is now our shared project here and we call this video games so usually just pluralize the name of your entity and this is then the name of the table now there's one more thing I would like to add and this is seeding the data already and you do that in the on model creating method so protected overrides and then on model creating and for that let's get some space here and here now let me really just copy and paste that stuff because I think this is a bit tedious so there it is model builder entity for the video game we say this has some data and these are the three games that I would like to add with the IDS titles publisher and the release Here great so that's that now the next step would be the connection string meaning I would like to use a SQL Server Express database available for free and even for commercial use so you can get that by simply Googling for SQL Server Express download it install it and then you might want to use the following connection string so first we add the section connection strings and in here now we say default connection and this is then server Local Host back SLB slash SQL Express database is video game DB trusted connection connect is true and also trust server certificate also true all right so that's the connection string and now with the help of that connection string we can register our data context here in the program CS but we also have to tell our application to use SQL Server so for that we add another new get package here and that would be then the SQL Server provider for Entity framework so we can just search for SQL server for instance and there it is already Microsoft SQL Server database provider for Entity framework core so let's just install that thing and then go back to the program Cs and here now we again register the database context with Builder services at DB context data context that's the one this thing gets some options so here now we say options use SQL Server this is now available thanks to the SQ server provider and this thing wants a connection string and we get it with Builder configuration get connection string and then the name default connection all right that's that and now the next thing is I would like to use code first migrations to create our database for that we need another new get package and that would be the Entity framework core tools so here now again we can just look for tools for instance and that's the one Entity framework C tools for the new get package manager console and with that we get some commands like add the migration and update the database and this is exactly what we need and what we use exactly next so here now in the package manager console when everything is loaded we just run add- migration hit tab for instance call this initial forour initial migration default project is the server project in that case we hit return and build started build succeeded and now we get a new migration file it's already open here but you can see it as well that here in the server project that the migrations folder was created we have two methods here up and down when we roll back the migration we see that the down method will be executed in essence and uh this just means that it will drop the video games table but more important for us here is the up method meod meaning when we apply this migration then it will create the video games table with our columns ID is already the primary key Auto incrementing the identity field and we also insert some data here perfect so I suggest we run update and then database and yes even if dat if the database does not exist update database is the proper command here because it also creat creates the database and here you see all the commands like inserting the example data creating the table and so on now to have a look at the database I like to use SQL Server management Studio again you can just Google for that thing and then have a quick look there it is already it's currently loading we connect and here are our databases now blazing blog is from the do and Web Academy enrollment is open in a couple of weeks but for now let's focus on the video game database with the video games table ID title publisher and release year is here and we see that our data is there as well isn't that nice all right and with that we can Implement our Crut operations the first one is the easiest I guess which would be simply getting all the games and for that we have to go to the server project here first because what we need here is a controller so we just first create a new folder similar again to a web API so here now this would be the controllers folder and I would like to add a new controller which is an API controller an empty one and we give this thing the name video games controller that's it we have the route API controller which would then be video games of course we can also enter the name here so this is now the hardcoded name video games API controller is also the attribute we need it indicates that a type and all Drive types are used to serve HTTP API responses and in here now we can inject the data context and access our data but be before we are able to use that controller let's have a quick look at the program CS first because what you see here is that you don't see the configurations for controllers what you do see here is the new blazer stuff like add interactive web assembly components so this is added when you uh choose the web assembly render mode in the beginning when you creating your project with the new web app template the Blazer web template and same thing here here add interactive web assembly rendom mode and also add additional assemblies from the counter assembly one hint here please note you don't have to add this for every single component so when we will add a video game related page uh we can just leave it like that or when you remove the counter Razer page then please replace this thing by the video game page for instance all right that set controller so what we need again is our controllers and we add them like that so Builder Services again add controller so that's the one it adds services for controllers to the specified I service collection this method will not register Services used for views or page well it adds services for controllers this is everything we need and the I service collection is well this thing here Builder services so same or similar to registering the uh database context or any other service that you create here in your application and that's not it one more thing is necessary we also have to map our controllers so here now we add you U map controllers that's the one and as you can see here this thing now adds the end points for controller actions to the I endpoint route Builder without specifying any routes well this just means that when we create our controller here and in a then add our endpoints that they are available all right anyways now first the get method I would say first the data context so in a Constructor or we just start with the data context right away with private read only data context context and control period here and we can say generate the Constructor for this controller so now this thing is available and here now HTTP get is correct this is our first method public iing task returning a list nope first the action result with a list of video games and we call this thing get all video games async for instance and in here now we just return a wait context video games to list async that's it so this is now our controller method that we need we can actually already test that so let's just save everything and run that all right there we are and now let's just enter API video games and there they are see that and here you can see that as well this is our response in the preview it's a bit uh structured so here you see these are our seated games and this is the direct call to our controller and now rest is simple right we just have to create a page that is calling this endpoint well let's see so we go back to visual studio and now our client project and here in the pages folder we just add a new razor component and call this Maybe video game overview and since I'm lazy today do I yeah I just copy something here so from the weather page there it is I am grabbing that stuff we go back to the video game page here and now the name of course is video games same thing here video games don't need that now instead of the forecasts we will have a list of video games so list video game we need a reference here control period not working okay give me a sec video games which is a new list of video games do we get a suggestion here no we don't maybe because of the other errors here but what we can do is we can have a look at the dependencies we don't have the project dependency here so let's just add the shared one all right and now now we're talking see but I don't like that here really I want to put that in the Imports razor because we also have an Imports razor file in the client project of course so that's the one I want with that we have the video game class available okay and here now we say video games don't check for now this time I just check for if the count is zero then we're loading otherwise we've got the following it's the title of the video game publisher and the release year and let's yeah maybe let's already keep that column for an edit button for instance and here now in the video game for each of our video games we simply display that stuff so video almost video game title it is and now let's just copy that for the publisher and also the release year come on that's the one and let me keep that like that for now so these are our video games and now how do we get them well again similar to the weather forecast page where is it there it is here we simulate this DeLay So maybe yeah why not we can grab or do we yeah let's let's just grab that as well so here now what we have very important first the async task on initialized async method all right with that we can make a call to the controller on initialization of that component real quick in Blazer you have three life cycle methods on initialized async on parameters set and then also on after render you can have a look here overwrite and then we should see the suggestion there it is unitialized we already have the async one that's why we don't see it here we have on parameter set and on after render first one that will be called is the uninitialized then the second one on parameter set we will also use this one when we edit a video game and the last one then on after render when the component is finished with rendering okay so this just as a side note but here now okay we have this delay and then we well we have to make a web service call if you already know Blazer web assambly from before. net8 then you might already know that we need the HTTP client for that I forgot one thing we also have to add the page directive here let me just call that video games for instance and then here we inject with at inject the HTTP client call this HTTP for instance and now here we can say HTTP or first bar results is HTTP get from Jason acing we want a list of video games and now the URL is API video games all right should we test that well let's let's have a look well maybe first one more thing is in the navigation menu let's just add another route or another link without an image or I can here now video games video games all right now let's have a look it is hopefully rebuilding let's go yeah there it is great maybe we can open the console I have a feeling that this will not work we go to video games who what's that cannot provide a value for property HTTP there is no registered service of type system. net. HTP hdp clients see that of course because when we go back now to our program CS of the clients this is everything we have so there is really no HTTP client registered and the same thing also here of course on the server we did not even have controllers available so we have to add something here to our program CS file so let's go there and to register now the HTTP client you can actually look it up in your older web assembly Blazer web assembly projects maybe Builder services and then add scoped so we are going to add it as a scope service and then new http client and then in curly braces Base address is now new URI and then Builder host environment Base address all right let's test that now restart the application still this error why is this happening well maybe you we're already wondering when I now go back to visual studio and now go to my video game overview page there's no render mode specified right so actually what we're currently using is static server side rendering this means that this is first going to run on the server and the result would be then sent to to the client although the page and the or the component is placed here in the client project so this is something that might be confusing in the beginning right we put this here in the client project because Microsoft told us to put all web assembly related stuff in the Cent project but you can put your stuff there and still use Blazer SSR or Blazer static server s side rendering so just keep that in mind now let's add random mode interactive web assembly all right now to make this work we have this available uh because of the uh template we're using but if for instance you decide for some reason to start with player static service at rendering and then you want to add the render modes later make sure to also add this reference here static Microsoft ASP core components web random modes then you will or this thing here Will will be available then okay restart this one more time it's rebuilding still this freaking error what the hell is going on here let me try one more thing instead of using it that way by default pre-rendering is enabled so maybe we can disable pre-rendering and then let's have a look at the result so here now what I want to do is a new Interactive assembly render mode with pre-render set to false restart the application something's happening here but of course I made an error or I forgot something video games is now the result if result is not null and of course we have to await this thing okay so now drum roll please pleas we have our games yay isn't that nice so to have a quick look at that again we have our page here our razor component in the client project this is important right we configured the controller also here in the programs we had to add some stuff we implemented the controller great now we had to also add the HTTP client and here to the program CS of the web assembly project the client project great and then in the video game overview razor component we added the random mode interactive web assembly but we also had to specify or to configure this thing in a way that pre-rendering is disabled so we actually had to create a new instance of the interactive web assembly render mode and with that or that way we were able to disable pre-rendering and then if it's not too late at your side and you don't have two k two kids and sleep deprivation then you wouldn't make these well interesting mistakes to uh yeah await the call and of course set the video games then so with that now get from Jason async we see that we get the result and why uh did I leave the delay here well let's just check this out one more time when I switch the page from weather to video games I just wanted to demonstrate that we or the application will open the page and it takes 500 milliseconds to load the data and we see the loading text all right this is just something I wanted to show you because this is something uh Microsoft also implemented with with static server side rendering and the stream rendering all right so here in the weather page for instance you see that the data you first see the loading text then the data comes after 500 milliseconds and this is only possible thanks to stream rendering now we're talking I know we're talking about a web here but real quick when I would remove that and restart the application it it's not the same we have to wait for half a second before we uh really see the page when you now have a look at the address bar I click here the the URL will change and then the data comes after the page opens after half a second so I click now the changed right and then we see the data maybe I can do this one more time see that so we do not see the loading text for instance we just see the data directly but we have to wait for it so this is no the magic of stream rendering and you can by the way do a lot already with static server side rendering so web assembly feels now that this is kind of the last thing that Microsoft wants us to use right it's it really seems that the first way to go is stream not stream stream rendering the combination of aesthetic service side rendering with stream rendering and also enhanced navigation but after that when you need real interactivity because you can already do all the Crut stuff and by the way of course also did a video about that you can all you can Implement all the CR stuff with static server side rendering but when you need more interactivity than server Blazer server would be maybe the next solution or then of course Blazer web assembly this is totally up to you so long story short this now works and the next implementations are pretty straightforward if you already know Blazer web assembly then you know that of course we have to implement the the controller here first or can implement the controll controller first and then we have to add all the other components like using the edit form and so on for the CR stuff but let's just do that together now so we would have now also a method for a single game the route now is just the ID or we add the ID and here get game got yeah get game by ID asnc and ID we want one single video game and here we say video games find a sync ID bar result and let's say if the result is null then we return not found okay not found like that otherwise return okay result now the deleting a game maybe because we also need the ID there so here this would be then HTTP delete delete game async we first want to find this thing and if we have it we say context [Music] remove results and you know we say await context save changes async all right that would be deleting the game now updating is HTTP put as the request method here actually um don't want to return the result just return okay and just an ey action results all right now here updating the video game update game Asing we can yeah give this thing the ID and also the new updated game now the database game is this one here and then we say DB game title for instance is updated game title DB game publisher updated game publisher and the release year as well DB game updated game release this here and then we just again save the changes and return the new database game maybe and the last one is creating so here that would be post no route here to add and we say add game async like that let me call this new game we don't have to find anything here we just say context ad and then new game save that and then again return the game all right so this is the controller and now on the client let's add another page for editing a game so edit game and there we will also create the game and uh if you watch my other videos you already know what's coming next first I add the page directive here with edit game and then another one with edit game but this time also an ID like that and this just tells me if we have an ID this means that we really want to update a game and we if we don't have an ID as parameter then this means that we want to create a game so the easiest uh that's pretty much the easiest way to check what the user currently wants to do so if the ID now is null and yes of course we have to add the ID here as a property nullable int ID and set the parameter attribute because this thing is a parameter all right now if this thing is now another integer then we say title is not hrh3 title is create game and otherwise we say H3 edit and then the title of the game for that we need another property here so for instance prop video game game and this is just a new video game of course okay something like that and here now I just say game title all right let's leave it at that and now in our video game overview I wanted to add a button here so this is now a button let's call this edit for instance and we give this thing a close class like button button primary bootstrap stuff and when the user clicks on this thing then we call an edit function so this would look like that since we have to add a parameter edit game and then video game ID so this would then be our edit button and down here we can add our create button so or add button add a new game and here again class button button primary and on click add game all right so now the methods of course void add game and void edit game with an ID that's that and the only thing I want to do here is navigating the user to another page let's go on here of course no parenthesis right and for that we inject the navigation manager navigation manager like that and here now we say navigation manager navigate to edit game all right same for the edit game function so navigation men manager navigate to and here now edit game with the given ID and when we use this method then real quick here now told you about that before in the protected override on parameters set as sync now what I want to do is get the game so by result is now also the HTTP client so at inject HTTP client HTTP and here I say await HTTP get from Jon async I want a video game and the URL is Now API video games and then the given ID and in the end say if result is not null our game is the result all right I'd say let's have a look restart the application there we are we go to video games again we already see the add new game button so when I go there I get an error again same thing as before so what we have to do is of course add the random mode so let's just copy this thing with pre-rendering disabled like that restart it again and now we see our create game title but of course with an error and that's because the on parameter set will be called either way of course so we have to check if the ID is not null like that and then the function will not be called we can cast the ID here as well to to an integer so let's try that one more time and create games probably not the not the correct text here but now we see no error message create game is what uh is opened let's remove that as well in a second we go to edit we see cyberp Punk 2077 elen ring and The Legend of Zelda Ocarina of Time so one more thing now in the overview I want to remove that all right right and let's also remove the delay I think we got the idea now so here we are already able to get the single game we call this now add game and the next step now is the edit form to well create an update a game so what you're going to do is use the built-in edit form here this thing needs a model and again this is our game all right and we call a method on submit and this method is called handle submit let's call this here or put it here task handle submit all right and now here we have a couple of options actually for instance we add a div with then a label after formatting the div a label for the title call this also title and then again a built-in component what happened here built-in component input text with the ID title now and we bind the value game title and set the CL class to form control all right so this now is our input text field for the title same thing for the publisher and then here this will be an input number for the release year so here now let's just change that and say publisher publisher so here the publisher great and now here import number for the release year like that release year and also here the release almost the release year like that okay and the last thing missing now is a button so here button type is submit by default actually button button primary and we say Simply Save maybe button like that and with that when we click this button the handle submit function will be called and down here now we have to decide do we want to update a game or edit a game uh or add a game so what we do again is we check for the ID if it's not null this means that we are going to update the game here so we call await and then HTTP put as Json async and this is now the API video games controller again with the ID and we have payload now which is well the game so that's that now we can also put that to or into the results and then we just say game is results content and then read from from Jason almost Jason ayc is the one video game all right and in the other case when we add the await keyword here in the other case I know it could be null but I don't care for now we say bar result is a wait HTTP post as Json async pretty much the same URL and payload just not the ID here so like that and again we just set the game like that okay let's try that so we restart the application there we are we can edit cyberpunk for instance let's just say the release Here is different for whatever reason and we go back and we see really it's different now it's 2021 or actually game has been completed just a couple of days ago with the update 2.1 so actually let's just say the final release was 20223 we save that and we see 2023 here and as well here in the database we also see the change great and of course we can add another game like for instance The Witcher 3 Alo CD project 2K15 we save this go to video games and there is our game now the last step is deleting so it's up to you how you want to do it we can do it here in the form or we go back to the video game overview and add another column here and here now we again add a button this time it's a d dangerous button we say delete game all right and here now we say task delete or Asing task delete game with the ID and we already have our HTTP client here so we say wait HTTP delete async not from Json just delete async and then API video games and then the ID and after that let's just reload the games so let's create another method racing task load games and we simply put that there and here we call await load games and same thing here oh wait load games okay last test we have our delete button almost I forgot to change the text there we are we can delete a piure and we're done so here now reload and the game is gone that's it I hope you learned something and like this tutorial sorry for the mistakes again it's late and I have to go to bed because my kids are keeping me awake every single night anyways this is another topic so I hope you learn something if so please guys hit the like button subscribe to my channel it really helps creating more videos like that and thank you so much to all my patrons for supporting me I love every single one of you and if you want to support me too check out the link in the video description thank you so much thank you so much for watching and I hope I see you next time take care

Channel: Patrick God

Views: 10,779

Keywords:

Id: AKiGGtBj1go

Length: 50min 48sec (3048 seconds)

Published: Tue Dec 26 2023