🔥 Blazor Server CRUD with .NET 6 & Entity Framework Core InMemory

hey friends it's me patrick god and welcome to this blazer server tutorial this time this tutorial is complete meaning we are implementing all the crud operations create read update and delete but we are not using any http methods like get post put and delete this is done in the blazer web assembly crutch tutorial check it out here please this time everything is running on the server and this is the crucial difference right between blazer web assembly that's the stuff i usually use on my channel and laser server so with blazer web assembly we've got the typical spa the single page application framework we've got a client and the server the client is all the html stuff in our case the razer components for instance and also c-sharp code and on the server we've got our web api with controllers but with blazer server we are doing everything on the server as the name implies there are no http calls instead we've got a web socket and well it's not necessary for the client to download all the data we cover the details then in the tutorial so i think it's not necessary to do everything here in the introduction what we're going to do is we build a little a tiny little video game database using entry frame of core in memory it's the first time i'm using this in such a tutorial pretty neat i think for tutorials like that because it also says in the description that you want to use ef core in memory for testing purposes or if you got an idea in your mind then ef core in memory is pretty great i think now already recorded this and tested it so yeah i think these are all the information you need if you like this video and learn something i would really really really appreciate it if you subscribe and click the like button don't forget to click the bell icon here so you get a notification when i upload a new video thank you so much for that and additionally i can recommend the newsletter of course if you are subscribed to that newsletter you get these videos here earlier in your inbox you get articles more information and also early access to my upcoming courses and one of the big upcoming courses is the.net 6 web developer bootcamp really big one where i want to focus on the skills you need to get a job in the dot net web development world so maybe this is something for you and in this case you might want to subscribe and i promise i won't spam you just send an email once a week usually it's sometimes even less than once a week but still maybe that's interesting for you and the last thing as always guys thank you so much for all the coffee and tea this time it's tea i mean why not thank you so much for all your support let me just take a sip still a little hot okay and with that you know the drill i am able to make all these videos while my little boy is asleep so thank you very much for all your support and now i'm done with the introduction enjoy the tutorial all right visual studio 2022 let's create a new project and this time it's a blazer server app as you can already see right here not as usual blazer web assembly as you can see in lots of other videos on my channel blazer server this time and if you don't find it here you can just look for it not google i wanted to say google for it no not google for it you can just search here enter blazer or maybe blazer server or only server and then you get your blazer server app template so let's choose this one blazer server crotch crotch tutorial maybe or only crud i think that's that's enough okay that's nice blazers overcrowd this is the name of our project as you can see here i've got the.net 6 installed of course and dot net five is also installed and i'm thinking of uh already uh creating some dotnet seven tutorials if you're interested in that then please write a comment down in the comment section below this video for that you need visual studio 2020 to preview the preview edition um but the preview of dotnet 7 is already out there so maybe this is interesting for you please if so write it down in the comments thanks for that by the way now the first thing i already wanted to tell you here is you don't see the option to choose asp.net core hosted right it's it's the same with the authentication types it's the same with configure for https and also enable docker but you have not the option to host this uh or to to check asp.net core hosted as it is the case in the web assembly projects now why is that well everything is run on the server and that's why so what we can see in a minute or in a second is here it is already this was fast nice can be fast sometimes as well that's that's really nice okay so we have only one project right when we again compare this sorry about the comparison maybe if you're not interested in the comparison then i'm really sorry about that but uh we do lots of laser web assembly tutorials and projects here on this channel so i think it makes sense to compare this a little bit and as you can see here now we only got one project in our solution and in the in the um webassembly projects let me let me pull one up real quick got here preparation of maybe the next mud blazer tutorial edit form as you can see here we've got three projects right we've got the client project the server project and the shared project chat project for the models maybe then the server project which is a web api and also the client project then for all the pages the shared components all the blazer stuff in essence now when we do blazer server when we use blazer server everything is running on the server meaning we do not really have actual web service calls meaning you won't see and we will open the the console in a minute and where you can see this on chrome in chrome we see let's open the console with f12 and now we open the network tab and there it is right now let's fetch the data see nothing is going on here now why is that thing is that again let's go to the counter page and then fetch data you don't see any kind of web service call now the thing is and bear with me that now i don't find it directly somewhere there's the uh actual web socket that is opened here it is i think yeah that's the one i think yeah here you see the messages right and when we go to the counter page and then back to the fetch data page something is happening here and i'm not that familiar with that so bear with me please but the important message here is that we don't use typical web service calls no rest calls in essence what we have here is we open a websocket tunnel if you like and with that websocket then all our components are updated so this is not really downloaded the whole page the whole application is not downloaded to the client of the user everything is going on to the server or on the server and we just get all of these messages here and then well just render them on the client but we do not really get the data download the actual data here for instance of the weather forecast so this is in essence the big big difference between laser web assembly and blazer server so not the typical single page application or spa framework if you like it is a bit different here still let's do this real quick and you see here now we already saw the application and now when you see at when you have a look at the files and all the data here you see that we've got a pages folder and a shared folder similar to again let me pull this one up here blazer webassembly the pages folder and the shared folder of the client project but now we also have a data folder here and this is well the way microsoft did it now with this template to in essence put the model here the weather forecast model and also a service right and as you can see here there's no http get or anything as you would see here in the weather forecast controller this is a real controller with http get and so on not necessary at all here with blazer server all right so with that out of the way what i want to do here in this in this example application still want to build all that laser stuff and all the well grabbing data or the crowd operations with the database but this time let me save you some time i don't want to use the sql server not on not a sql lite i just want to use ef core in memory maybe this is also something new to you it was for me actually to just use ef core in memory for testing purposes and i think this is a great way uh to to show you this in a great way to use ef core in memory so this is the first thing we have to do and to be able to do that we stop the application first here's the terminal so close this one and then we need one only one single nuget package and make sure to choose the browse tab and then ef core not ef core but oh there it was yeah in memory you can only you can just search for in memory and this is this is the one in memory database provider for entity framework core to be used for testing purposes although they say in their docs that you shouldn't use this for unit tests but for things like this tutorial maybe and if you just want to build a quick app an mvp may well then mvp a minimal viable minimum viable product maybe this would be still it would need more i guess but for yeah testing purposes where you just want to test some features test an idea maybe maybe even write a prototype then this is this is a great idea and what's that hot chocolate subscriptions i like this this icon here hot chocolate why not contains an in-memory implementation okay a graph graphql okay maybe that's also something for another tutorial all right in memory it is we installed this thing and then we are able to to get and read and update some data i hope pretty new for me the stuff but still let's see how this goes okay hope you're done [Music] now the next thing we have to do is we go to the program cs and register this new data base um but first no that's not the first thing we need first we need a data context still it is just for testing purposes but we need a new class and this is in our data context so similar to the entity framework implementations with the sql server maybe this inherits from microsoft entity framework core and now what we need is a constructor first so ctor hit tab twice this is our data context our parameter no not parameters we need a parameter context options data context we call this options we use the base constructor here options and let's already add a model this time i don't want to use a superhero i want to use video games it's a simple example no relationships or anything because it's really about blazer server here you can have a look at all my other videos regarding relationships entity framework core with sql server and so on so please check out my channel maybe subscribe even that would be really nice thank you very much for that or maybe i managed to add some info cards here so maybe just click the info cards okay so let's add game this is our model here and now this thing gets an id it also gets a name which is string empty at first what i also want to add is the developer of the game also string empty all right and last thing [Music] the release dates so at daytime call this release and this can also be null okay so this is that this is our model now and again in the data context we add this now as uh as a data set as a db set so db set game and we call this games and we can already because we've got this warning here see that let me show you non-nullible property games must contain a non-null value when exiting constructor consider declaring the property as nullable don't want to do that we can actually just initialize this as a set of a game and then this also should work and the last thing here is i already want to see some data and i have to pull up my other project here because i already did this and don't worry i'm not copy pasting i just need a look so overrides on model creating that's the one and to see some data doesn't matter if you use the in-memory data in memory ef core package or sqlite sql surveys i guess it's always the same entity for so for the entity game what you want to do is we tell our context our database that it already gets some data so we add a new game and the idea of this game is almost the id curly braces that was the problem here so ids1 the name please feel free to enter another game here if you're into video games hope you haven't stopped the video already so harder too is a pretty nice game i really like that and the release date was new date time 2004 november 16th 16th and now i'm i'm copy pasting it's called release all right okay id2 and let me add day of the 10 tackle if you're enrolled in my e-commerce course you know that i love day of the tentacle if not maybe you want to enroll and then you know why okay and this was really oh that's not true it was 1993 1993 may 25th okay and something is wrong here now it should be correct okay so we've got two games in the beginning all right hope that's correct and then now comes the registration here so what we have to do is let me just save this first and then builder services add db context and then our data context and this thing gets an option which is option [Music] use in memory database and as you can see now with control period i open the quick fix menu and we need the using directive for entity frame or car here and the only thing we need is not a connection string or anything we just give this thing a name so for instance the video game db for video game database and that's it so this is now our well our in-memory database that we can use for all our data so the next thing i want to do then is add another service so similar to the weather forecast service here we can just create another one so add class and we call this one then the game service all right and now since we want to access the data context it's again pretty similar to the services or the controllers we use in asp.net core hosted blazer web assembly project so first again the constructor where we inject our data context so data context context we create and assign the field context and i have to configure visual studio again so i don't have to add this underscore manually and with that we've got our context and now there's one little thing we have to do when we use the in-memory database and we use or we want to use seeded data with the on model creating method here where was it there it is this thing here on model creating right with on model creating and model builder entity has data we can well give this model this table in essence this is the table then our games table already data when we start this thing now when we use sql server for instance and run a code first migration then everything is okay with that and we've got our data stored persistently in the database but if you want to use it in memory database we have to call this every single time you start this thing and well i think an okayish place to do that is here the constructor of the service for this tutorial again this is only for testing purposes and there is already context database ensure created when this thing is run or executed ensures that the database for the context exists meaning after this method is executed we've got our seed data and we test this already with our get method well well it's not really a get method in the case of an http call so let's maybe just call this not get or we can call this load for instance so public async task and well now it's called cat that's nice a list it's a list of games and let's call this now load games no argument here and we return in essence do we return this no let's let's change that maybe we can just have the games present here you see i still have to to change my kind of thinking here because this game service will be used in the in the blazer components already so it's not the the controller the typical way to do this is i write the controller and the web api service inject the service into the controller and then on the client side i create another service that is then doing all these web service calls but this time this service is already the service that well kind of combines the the server stuff and the client stuff so we can already have our list of games here as well right so for instance we can just say we've got this property here which is a list which is a list of a games model is called game of course and these are our games and this is then a new list of video games and here then only returns a task and what we do is we say or let's say our result is no let's let's just say games is then awaits context games and then to list async okay and we add entity framer core again and with that we've got our games and our get slash load method now another thing i want to do is since we also want to inject this service in the blazer components we add an interface so let's add an interface here real quick new item interface and this is then our i game service and here then we also got our list of games uh which should not be the method first just the games as a property okay like that and now our method task get now load games okay so that should be it and we enter or add the semicolon here and with that we've got our games and the load games method that's nice and here this thing now implements this interface okay everything is already implemented so again maybe a different way first i would or you would maybe create the interface and then the actual service here and then what you also have to do is of course register this thing so builder services add scopes i game service and we want to use the game service implementation class for that all right this should work now and this is the well let's say the data part the server part and now the other part which is also done on the server is the actual page so let's create a new page here at razer component we call this then video games maybe this is a page so we add the page directive with the route call this video games that's nice and now what i want to do is just create a table here so let's just add to the typical table with the class table the class then is bootstrap in this case or it comes from bootstrap is provided by bootstrap now for the header we've got we've got the name of the game we've got the developer let's call this game maybe and we also got the release date okay and now for the body we will use a for each to display the list of all our games but before before we can do that we inject our game service so i game service game service and let's add this real quick in our imports for that we need the data namespace and then yep now the page knows the igame service interface okay that's nice and here now we say for each game in our game service games we add a new row and then say this is our game name and our game developer and then our game release date but let's use too short date string here then it looks a bit better i guess what's the problem here okay no problem here anymore all right so this should be our data then and regarding updating and creating a new one we do that later only thing we have to do of course is we have to load the games in essence from the data context from the database the in-memory database and for that again we use uh well not again again because of all the other tutorials but here we use the on initialized async method uh lifecycle method of blazer so we can just enter overrides and then on initialized async let's get some room here and now we call await game server jesus awaits game service and then load games and add the async keyboard okay already did a lot i hope this works let's see we start the app there is and i forgot one thing the nav menu let's add another entry to the nav menu here let's just copy this paste it down here [Music] like that route is now video games video games and i don't know if there's an icon for that let me let me have a look really quick not really well we've got uh puzzle games so maybe puzzle piece should work that's the one okay let's save that again and there it is already how to reload at its best we go here and it says sorry there's nothing at this address nice why not let's have a look again video games jesus nice oh yeah writing code and talking at the same time sometimes not that easy video games there it is this is what i wanted so we've got our table and as you can see again no call whatsoever we've got our websocket messages here and i was thinking that we can see this a little bit but no not really binary just binary messages nope no idea what's going on here if you know more please write it down and maybe you can tell us well all of us where where we can see what is actually going on here okay and this is already getting so reading all the video games right that's nice i guess now let's get a single one so back to visual studio and first the service or the interface of the service maybe we can now use the get create and so on names so the first method we need is get game or let's call this get single game with the id of the game another one already let's just write them down so we have them is create game with the actual model here of course we could or should use maybe in well in a real environment we should use dtos for their data transfer objects but for this little test here let's keep it simple so update game maybe also with the id here and then delete a game [Music] only with the id like that okay and now here we implement this great and with that now let's yep we rebuilt everything let's implement the get single game method here our game is weights context games and then find a sync id now if our game is now we just throw a new exception no game here otherwise we return our game and i think i did something wrong here yes i did i forgot the game for the return type and let's add this here real quick and this should work then and you know what since we're still at already edit let's just write all the other service methods and then focus on blazer so we've got our get method let's implement now the updates with var db game first because this is the game from the database weight that actually was already yep that's nice but no that's that's actually exactly what we need and now if the db game is now again let's just copy this okay but otherwise we say our db game name is the game name then we've got not the id the developer game developer and the date release date is game release and then we say wait context save changes async and then well what we can do is actually navigating back to the list of heroes because the idea is when we have a quick look at our application we see the list here but what we will add is uh an edit button back here at the end of every row and also a new button create button at the bottom maybe and with that then we navigate to another page with a form where we then create or update the hero not the hero the game and when this is done we can actually navigate back to this list and see the complete result right so let's maybe do it here it's debatable if you should put this here actually because this is well it's the service and it's not really the ui stuff you're doing here so we could also use the navigation manager of blazer here on the page then or you can do it here well since i'm already here let's just do it here as well for that first we need the navigation manager so navigation manager maybe i don't know let's call this navigation manager we have to add yeah you see it feels not that right because it comes from components and be here in the service so maybe you should do it differently tell me what you think please in the comments below is it okay to use navigation stuff here in the service i think i saw one comment i can't remember who did who who wrote this but i think it's a it's a good point that you shouldn't really do this uh on the or in the service you should do this on the page maybe on the page logic but still navigation manager navigate to and the page then was video games not page it's video games okay so this should be the update game method now let's continue with creating a game so we've got in essence just context games add game that's it and then await context save changes async and again navigation manager navigate to video games and last one the delete method is var okay i'm copying pasting now all right so we try to find the game and this is an asynchronous method if it's now we throw an exception and if not we say context games remove db game and then awaits let me copy this as well okay so we save changes asynchronously again and then we say navigate to video games and this is all our service has to do so we've got the load games method get the single game where we just return this single game we've got our create method where we just add the game save the changes navigate back again this is debatable of course and then also updating where we update every property manually of course you could use auto mapper for instance to well make this a bit prettier and then also the delete game method all right okay and now to see all that in action we add another page for the single hero and then we will also add an edit form there so a new razer component we call this now video game and if you're wondering why i call this video game and not game or why i didn't call the model video game it's exactly because of this page here i did this before in the other other solution you saw a couple of minutes ago with mudblazer modblazer coming up soon again and there i called the page video game and the model video game and then the namespaces are mixed and you have to really specify the namespace or the model you want to use not that fun yeah and that's in essence the reason why okay so here our page first thing page directives now please the correct paths not hero it's game i'm really used to uh to to to well writing that stuff with superheroes but this time now it's about games and i want to call this a video game here and this one is video game with the page parameter which is the id now why do i do i add two here the difference is when i have no id we use this page and the edit form to create a new video game and with an id well in that case we get or load a single video game from the database and then we're able to update it or delete it all right so this is everything in that sense and well lasting the game server so i game service okay and now i want to check if the id is null or not and in that case well we display something else but first what we need is we need the parameter down here in the code block so let's add this property here it's an id and don't forget to add the parameter attribute and now we can say if id is null we display something else we do that as well but first here we say h3 for the title create a new video game and here then it is h3 edit and then we need the game because i want to display the game name here so this should look like that then and let's add the game real quick down here we say game game is a new video game okay now this should work great okay and i see this line here and this is absolutely true this is not notable so let's add the question mark here and then this little warning here should go away all right okay so these are in essence already our titles shall we test this well maybe we can test this already first the uninitialized of course otherwise we would not get a game so again overrides on initialized async wait we're using the parameter here so we need the on parameter set actually so on parameters set that's the correct method async and here then we say game and then awaits game service get single game with the given id which can be now so we have to pass this to an integer if the id is not null all right okay all right let's save this and test this real quick so in essence we should see a difference here in the titles let's open it oh okay totally forgot the the the edit button and the create button so we cannot well we can test this actually so let's say video game one should be half left two there it is this is day of the 10 tackle what about three whoops no game here that's correct and no id create a new video game all right so maybe we should add the edit buttons let's do that real quick so back to visual studio and the video games page now we have another column and here as well and here we just add a button with the class btn and then btn primary and on click we call a method but we need a parameter so we need this crazy lambda expression here let's call this show game with the game id i know we need the method and another thing first is we add the likeness so maybe a pencil icon and this should be the button then and also we need a create button for new games so button class is button button primary so we get the proper size and the proper color again this is provided by bootstrap and on click another method create new game and let's give this just this label here create new game and now let's also implement these methods so show game and id navigates and i think i forgot the navigation manager of course so inject a navigation manager navigation manager and now navigation manager navigate to and then this should be a video game with the given id and create create a new game again the navigation manager navigation manager navigate to and then here simply video game and you see now why i'm struggling with the navigate to function in the service right you would actually do that here in the ui stuff and maybe here now in the video game page or component when we have the well the edit or the create methods then we could use of course the navigation manager here as well so yeah up to you how you want to use this but now let's test this really quick there it is button is wrong pencil it should be called pencil there it is nice okay so we can create a new game create a new video game nice and we can edit half-life 2 and day of the 10 cycle maybe we can add some quotation marks here yeah that's better nice okay so this is done and now really the rest of the crowd operation so we can read games and now let's create a new one update one and also delete it and for that we need an edit form so this is a bit more code we have to write here we start with the edit form and this edit form as always needs a model and this is our game and on submits again bear with me i'm not implementing validation here got other tutorials for that or if you want to see it actually want to do that with mudblazer sorry if you i know that some of you want to see mudplayers tutorial with fluent validation but maybe it's also okay to first start with the simple mud blazer form and also an edit form with mud blazer components because this is also another way of doing it and i think that most people would use exactly that way meaning and a blazer edit form with mud blazer components for the input text fields the buttons and so on because they look a bit nicer maybe all right again please write it down in the comments we really love that thanks a lot for all your feedback guys really really means a lot to me okay so we add a label here for what do we have the name and then and by the way with mod blazer then you really don't have to do all that stuff div and label and so on my blazer already got all the css stuff covered for you so in and in essence when you learned mud blazer still learning it it's still new for me but i think when [Music] you know the components of modblazer then in the long run it is easier and faster to write these forms because well they give you so many yeah styling options and so on that's that's pretty nice so yeah i really should should create this tutorial about laser edit forms i guess okay long story short we've got the label now the input text for the name and we now we don't give this an an actual name we only need to bind something so bind value would then be the game name and another class form control okay i think that's it now we copy this add it here for the developer developer id again developer this is the developer all right and then we've got our date time picker this would then be input date first the names here so release release also here release from control and i think that's it okay after that we need buttons after the div so in a new line we need a button to well update this thing [Music] or create it or to delete it so first very important if you don't know this we need a button of type submit because with this button then the handle submit method will be called and we write that method in a minute and now here we say class btn and then button primary and after that we will change the texts depending on if it is an edits one update or actually creating a new game and another button i want to see is the delete button this again very important we need the type button in this case because otherwise otherwise it would also submit the form and then call the handle submit method this thing now is red with button danger and we call this delete game and we call a method on click so on click we call and delete game okay and now some code first on initialization now let's change the button text but first of course we need it here so string button text is string empty at first and then override on initialized async well i don't really need the async one let's just remove this another task it's void then uninitialized we say the button text is if the id is now then we say save new game and otherwise update game okay and then we need placing task the handle submit method so now if the id [Music] is null then we say await game service create game with that game and otherwise otherwise we say we say which visual studio is jumping around don't know why await game service update game with the game and the id and the last thing first we parse this and now our delete method async task delete hero see that it's jumping around i don't know awaits game service and then delete game with the game id okay got an error here somewhere delete game hero nice okay this now should be gone okay all right these are all our implementations we've got the add form got the submit button maybe we should display this only if the id is not now and then we've got our code block with the parameter button text game the uninitialized where we change the button text on parameter set where we change not change where we get the single game handle submit for creating an updating and the removing deletion whatever for the game so i would say we test this now and we have to run this again no we don't there it is okay let's create a new one and this should be the legend of zelda ocarina of time great game by nintendo of course and the release date is actually way back 1998 november the 21st save this this was fast and again no no call nothing right so we just see this game is now stored in the database that's great now let's do something that will never happen half-life 3 we update the game done great and now maybe we could add some css here but let's delete this one also works great let me refresh it works but i think this is part of the or well that's just how the in memory database works when i now start this again there it is see that changes are gone okay so this is everything i hope and i will commit this to push this to github so you got all the code and now we also got a blazer server crutch application all right that's it there you have it now you know how to implement all the crud operations on the server with blazer server and not only with blazer web assembly you see the difference right you've got only one project in your solution and it's not a controller or anything you need to just use the typical service for that in essence it's just a class with an interface where you then get all your data from of course you inject it on or in the in the page or the shared component whatever you use and then get your data from there but still in the service then we are injecting the data context from entity framework so that's why it was a good idea i think to use energy framework core in memory because then you you see how this could work when you're using a real database like sql server sqlite and so on so i hope you liked it and you learned something and if so again please give me a thumbs up really means a lot to me maybe you want to subscribe to my channel and don't forget the bell icon to get a notification for new videos also don't forget the newsletter maybe this is something for you i promise won't spam you but you will get early access to the dot net 6 web developer boot camp and also these videos here earlier in your inbox and more fun stuff regarding dotnet's development and last not least still got my tea this time thank you so much for all your coffee entity whatever it is maybe orange juice it summer is coming so maybe it's time for orange juice i don't know thank you very much for your time thank you so much for watching and i hope i see you next time take care you

Channel: Patrick God

Views: 20,788

Keywords:

Id: ii6QzWudZ6E

Length: 58min 14sec (3494 seconds)

Published: Tue Mar 22 2022