CRUD with Blazor in .NET 6 🔥 Full-Stack with a Web API, Entity Framework Core & SQL Server Express

hey friends i'm patrick god and welcome to the blazer webassembly full stack crud tutorial full stack means we are working with the blazer web assembly clients we've got a web api for our server project and additionally we will also add and use entity framework core with a sql server database this means you've got the well the complete stack the whole way from the client all crowd operations to the web service with controllers of course the web api and then we will put that data on or store the data in a sql server express database everything is available for free so don't worry about that and well what you're going to do is we will build a kind of superhero database maybe you know this already from my other videos in the last video where i did this with net5 we only covered the client part with mock data in the controller and the web api controller then i added another part part two with entity framework but now we've got everything covered in this single video and that's why i also stated this full course because with this little video here and i think it will be two hours you know more than me now while i'm recording this we will see that we've got everything covered all the crowd operations means create read update and delete we will use the http request methods get post put and delete of course there are more but with that i think you get a great foundation for everything you wanna build with blazer webassembly and the dotnet 6 back end additionally i want to say thank you so much again for now even 9 000 subscribers means a lot to me thank you very very much this is great we are on our way to 10k and then maybe 100k let's see if you want to become part of this great community then maybe like and subscribe thank you very much and don't forget to click the bell icon of course additionally i really recommend the newsletter i promise at most i send an email once a week now the blazer ecommerce course is out there i'm telling you this because everyone who was subscribed to the newsletter got early access to this course but of course now after the blazer ecommerce online course is before the next course so i want to focus on a really big one that should help you getting a job in the blazer and dot net six world got some students who already got a job thanks to my courses but now i really focus on that stuff meaning we will cover blazer we will cover dotnet six also some other stuff like interview questions and project management methods like scrum so this hr stuff everything should be covered in this course now it's really in its early stages but if you want to get inside information let's say and early access and more then maybe it's a good idea to subscribe to that newsletter if you can't wait to enroll in a course by me then i really recommend the basic e-commerce course thank you everyone already for the great feedback really appreciate that and really happy about that that you like this course that much was a lot of work but now for the next course maybe you want to subscribe to the newsletter and the very last thing here i got my well it's not the typical cup let's say but i got my coffee so thank you so much for everyone supporting me getting me some coffee as you will see in this tutorial video i had to to pause it because my little boy was awake and then i had to get back so yeah by the end it's getting a little a little maybe a little confusing at least for me it was a bit confusing but when it's edited i think you will get along just fine okay so i think i talked enough thank you very much already for staying with me for such a long intro and now enjoy the course alright here we are visual studio 2022 and we create a complete new project and this should be a blazer web assembly application we click next and let's call that for instance blazer full stack crud because we really want to cover the full stack here hit next and since we want to cover the full stack we select asp.net core hosted meaning we get the three project projects the the blazer client the web api server and the shared project as already mentioned in the introduction we want to really implement the complete stack even with the database in the end the sql server database using entity framework core as object relational mapper and there we are already that's nice so we've got the client project here the server project and also our shared project now in this tutorial i re i really don't want to dive deep here there are other videos made by me of course where i uh go a bit deeper and explain what these projects are what you can see there and of course there are my online courses by the way um maybe you want to check them out then again please have a look in the video description but now let's focus on our crowd implementations the very first thing we need is of course a model or several models that we actually want to create read update and delete and since i want to build kind of a superhero database similar to the one i built with the net 5 version of this video here i will change it a little bit for instance dealing also with a sql server and entity framework in this single video now and not make a two-part series of out of this uh yeah let's add our models here long story short so we add a new class and the first thing here now is our super hero all right there it is let's make this public and let's also already add some properties here the first one is the id and then we got some strings so the first name let's make this an empty string by default and let me just copy this for also the last name and the hero name so the last name and then let's call this hero name so for instance peter parker would be then a spiderman and then i already wanna add a relationship to a comic so peter parker spider-man maybe you know this is part of the marvel comics and bruce wayne batman would be part of the detective comics or dc so we add another thing here we will add the comic type in a sec but let's call this comic for now and also we add the comic id and this is pretty pretty neat when you want to see data and also we need that we don't really need the comic id for the actual relationship but when we want to see data again then this comes in quite handy and we actually really have to use the comic id then here but you will see this along the way so let's keep going and add the comic class now all right also public again we add an id almost it is an integer that's true but it's called ide and now we add another string simply for the name and by default again this is an empty string all right and now we already or also know the comic type here so what we can also do is we can actually yeah let's let's make this nullable maybe let's see what happens here i am i'm prepared a little bit but we'll see how this works out okay so we've got our types and now we have two options actually we can start already with the client here add some mock data there or we start first with the server and maybe this makes more sense now now again if you're an absolute beginner here to blazer i've got other videos i've got courses about that and if you do not know what this whole structure here is we can have a quick look at the example codes and the application but after that i'd say we really focus on all the crowd operations and build our stuff without talking too much about about the example application but for now you see here the weather forecast controller so we've got a web api controller here already that provides some data and we have a get call here and we will build something similar one more thing i want to mention here is already that this is a so-called fat controller meaning that we've got all our logic here typically what you would build is a service on top of this using the so-called repository pattern here meaning you would then inject with dependency injection the con the the service here in the controller with the help of the constructor similar to this thing here there you can see the logger which is injected in essence and then the controller would be not that fat rather i wouldn't say stupid but rather simple maybe because then a get call would only consist of well calling the service and giving the service in essence the data or the the the request and then the service would do something with that request and then returning the data to the controller and then back to the client either way this is where the forecast controller so this is what we do here and where i'm where am i telling you this i don't want to build the the repository or the services here as well because it takes more time and maybe you just want to focus on the crowd operations so let's do that and now with that weather focus controller this is actually called here in the pages right so you see the fetch data example page and down here you see the actual http call and this is already the read operation in essence this is how you get data from a web api with this call here get from json async and we include or not include we inject the http client here you see that and this is in essence the same as i already told you in the in the controller and the services it's using dependency injection here we have the http client and you can do in essence the same within the client with the service and this is what i want to do using a bit better practices here so not calling everything here in the code block not running all the crowd operations in the code block but we will also use a service a client service if you want to call it that way that then makes the web service calls okay i hope you get the idea so let's start by creating a controller and only implement the get calls so the read operations for a list of heroes and a single hero and then we will use i'd say already entity framework and move our data the mock data then to the database so that we can then continue with all the other operations so first a controller here it's not well it is a class but you can use add and then this menu entry here controller and what i want to do here now is we add an api controller not mbc an api controller that is empty best way to learn in my opinion and also if you already know this also the best way because then you have full control you can do whatever you want and you do not have to remove some generated code for instance but of course if you want feel free to check these two options out but i really like the empty one and we call this thing since you want to get and create and so on superheroes then this should be the superhero controller real quick again check out the web api and ef core video here on my channel maybe i will display the info card otherwise i already did that we inherit from controller base this is an mvc controller without you support without it's important if you need view support then you would use controller here but this is totally sufficient we have the attribute attribute api controller and if you hover there then you see it indicates data type and all derived types are used to serve http api responses so we can really do all our crowd operations here using get post put and delete for instance and of course there are also other http methods we could use here and the last important thing is the route which is here with the generated code api forward slash and then in brackets the controller meaning we use the controller name here so everything that comes b for the controller term and that'll be super hero one more hint here it's just the controller i don't know why microsoft did this but well here it generates the code with api totally up to you i think api makes sense here so we just leave it at that and now the first thing we need is some mock data so we need mock heroes and mock comics and for that this is what i actually got prepared so let me look this up real quick so we've got a public static list of comics first and this is a new well we call this comics of course so comics and this is uh that may be new list of comic and we also initialize that and of course we need the type here or the reference and since we are here on c sharp 2 let's paste it here and add our global keyword now that's nice and now we also know the type in here isn't that great okay so one comic should be yep id1 is nice and the name then would be marvel and now let's copy this and paste it here and this thing now is called dc for instance and now we do the same for our heroes we've got a list of super heroes call us heroes maybe like that fix the id of course and now we've got the first name which is peter and let me put this in a new line yeah i think that's better so we've got peter last name then is parker and the hero name that's what i wanted is spider-man and just for these mock data lists we use the comic mix zero all right that's nice okay so this is our first hero and now the second one would be again bruce wayne and that'll be batman and this is the comic here all right so we've got our mock data already and now we write already the calls so for that we say this is a public async task and then as you can see here it is suggesting let me just finish this get super heroes it's suggesting the return type i action result and this would totally work alright but the thing is that if you want to use swagger ui for instance if you don't know swagger this is a great tool for your api documentation and you can already test your api with that meaning you don't have to use any other rest client like postman for instance although i like postman and all the other thing or tools like the extension for visual studio code for instance but if you don't want to use that and just use swagger then what you have to do is or what i would recommend here is you specify the exact type meaning don't use the interface action result you would use the implementation class in a sense action result and then you really define what you want here and this is a list of superheroes and additionally this is still not enough you really have to specify the http request method that'll be http get although it's not necessary for the web api or for the controller here because if you call a method get superheroes and now i know what's missing here that would be the angle bracket if it's called get and then anything else then the convention says okay this is a get method and the controller here knows what to do as long as you only have one http get method here if you have more then you have to pay attention maybe you have different parameters then it's okay it works but for swagger you definitely have to specify this even if you only have one method similar to the weather forecast controller what they did here is they just say this is an iron numberable with weather forecast you can also do that but i think the better way is to really return an actual result because with that you can also return the status code like 200 okay and that's what we do here now so with return okay heroes i know that this is not asynchronous but it will be when we use entity framework very soon with that we say we return status code 200 which means everything is fine we could also return something like a bad request for instance is 400 or not found which would be 404 everyone knows that so you see lots of possibilities here but we just want to return our heroes with that we can already add another get method and this one now would be for a single hero so get single hero for instance with the id now of that hero we only return one single hero in that case so not a list like that very important here is i know that's already maybe pretty much but uh well we have to do it quick here it's for youtube you know quick and dirty stuff if you need more and deep more comprehensive stuff please have a look at my courses but again stay with me please you will learn a lot in the next couple of minutes or hours let's see very important here we've got an id here so we also have to specify the id here as well or to show this first it is an http get and then we also have to add the route attribute and then in quotation marks we and the curly braces we say okay this is our our argument here we have to set but you can also combine these two attributes http get and route and edit like that and then you're also fine right and now let's say we want our hero and this is not the hero's id we want to use find or let's say first or default exactly intellicode at its best where the h for hero id equals the given id and now if the hero is null we could say and there you have it we return and not found let's say sorry no hero here and otherwise we return our hero alright and we can actually test this already so let's start that if i didn't make any mistake here but let's see we start our application build succeeded nice and there it is on my other screen so this is our example application you see it's making a call here and now what you can also do is you can really access the data at least for your get calls now let's say we want to get all our superheroes see that we get well all our heroes already and if you want to get spider-man for instance we just add our id and there's spider-man and with f12 or you open the developer tools here with the more tools developer tools or ctrl shift and i and we go to the network tab we see that as well for now we have to remove all our filters let me just run this again and here you can see this is our hero comic id is not set but that's not important for now and here are all our heroes and you see it is in a great format everything works just fine okay and now we want to see exactly their data let me add this filter now for xhr meaning xml http requests we want to add this or see this now in our blazer client application so let's go back to visual studio and for that i would say we add a new page so right click pages and and then really important razer component not razer page it is a razer component and this will be a page so let's first call this super heroes maybe and since this is a page we can add the page directive here and give this thing a route super heroes for instance the title is great already and we can also make use of the new page title components and also set this to super heroes and to be able to access this well we could just enter superheroes for instance or we add that to our navigation and this would be here in the shared folder we've got the nav menu and this is a shared component meaning this is then used in the actual page i think it's in the main layout yep there it is you see the sidebar and there is our nav menu component now and here let's just copy the last entry now let's say our href is super heroes with people if there's a better i can please tell me that in the comments and call this super heroes we save that and uh just make sure we restart our application all right there we are our superheroes and you see the superheroes page great and you see also the the title of the tab changed as well that's nice okay so we've got our page already and now i'm afraid we have to add some html so let's add a table and this table first has a header then we need a row and then for the actual headers we've got again the first name and since i'm a lazy coder i copy this and that's a reason a big reason for lots of errors all that copy paste stuff then also the comic comic and one more for a button to edit or first show the actual hero okay this is the row now now regarding the body we need our heroes so we need a way to access them right but let's let's write it anyways t body all right and now there would actually be a for each loop where we would access the heroes from our controller from our web api but before we can do that we have now to write an http call now again we could do it like or similar to the weather not the controller to the fetch data page that's the one here we are creating this call but again a better practice would be to add a service here so we've got a superheroes page and instead of injecting the http client then we inject this new service then and this service looks like that we create a new folder here so new folder called the services and then again another folder i call this super hero service and this thing now gets an interface and we call this i super hero service and also an implementation class super hero service right and this thing now implements the i superhero service and to make this work we also have to register this thing and we do that here with builder services and then add scopes and then in angular brackets we say whenever someone wants to inject the i superhero service you want to use the super hero service implementation class and this is the magic then of dependency injection for instance if you want to build another superhero service call it superhero service 2. just do that change the registration here and then all of a sudden when we inject the i superhero service in the superheroes page lots of superheroes i know then you would get the superhero service to implementation and since we need this service i think on other places as well let me put that on top and use the global keyboard here and not sure if you really need that because the other way of course is for the page at least or the razer components at least is to add the using directive here so blazer full stack crud client services and then superhero service and now what we can do is we say inject i super hero service superhero service and our page knows this thing if we would not add it to the imports you would have to use the complete namespace right so we really would have to write blazer full secret client services and so on i think you get the idea now okay so we've registered and injected our superhero service but now we have to implement some logic of course so the first thing is the interface there it is and well we also need the heroes and the comics and with that i see i forgot the comics but let's add that this is great so we see how this application is built one step after another but first the list of super heroes do we have to type now we don't have the type let me add it here global using blazer full stick rod shirt no we should have yep there it is great okay so we've got our heroes which is a property in essence and then also the comics ah there it was all right and then we need some methods again the the ones from [Music] the um controller so get superheroes and get single hero and now let's already also add the getcomix method because we need that for our um for our update or create operations because then we will create a form which would be an edit form and for that of course we would need the comics because we want to create a hero where we can then select from the list of comics so let's say when we create a new hero we want to say is it a hero of the marvel comics or the detective comics so task get comics not returning anything because in this method we will set these comics here and exactly the same happens with our get superheroes methods alright and the last thing for now task superior that's correct but that would be then get single hero with an i d okay and now here we have to implement our interface there is everything if you don't know if you don't know what i did ctrl period and then the magic happens you get the quick fix menu or you use the light bulb click on it and then you can say implement the interface and you get all that stuff sometimes even more than you want because i don't want these exceptions here all right okay now let's also initialize this as a new list of superheroes and here a new list of comics all right and now already our calls and for that we have to add a constructor let's do that on top with ctor and we hit tab twice and here now we inject the http client so again to recap the thing that is done here in essence in the page is now done in the service and that's the http client class we call this http and again control period and then by default you can choose create and assign field called http and i already configured actually visual studio to not use this instead it should use an underscore for these private fields but as soon as you update visual studio this config is gone and this is not nice but anyways for our little tutorial here this still works so we've got our http client and now we can use it for instance to get all our superheroes we say results and then wait http saw that async keyword was automatically added when i typed wait that's nice so http and then get from jason async and we need another reference here system.net.http.json so let's add this one and then we define the actual type we expect and this is a list of superheroes like that and then we need the routes and again that'll be api and then super heroes and you can see that to just double check here again right so api and then the controller name doesn't matter if you use capital as an h here or just write it in lowercase this works in any way and after that we just check if our result is not null then we say our heroes are the results right so with that we get our heroes okay and now with that we can finish our superheroes page because we only need the get single hero and get comics implementations for then the edit form which would be another page but again one step after another so let's go back to our page here and now we say add for each there it is for each hero and now superhero service and then heroes all right and for each hero we add a new row and what's the problem here no there is no problem okay great and now regarding the column we say at and then hero and then the first name for instance name hero name and for the comic we just display the name of the comic so here it'll be the last name then the hero name and here now comic and also the name and then in the last column we will add a little button but let's save that for later and then that should be the html yes this could be null but i don't care here for now more important is our code block now because we have to initialize our heroes so for instance if i save this and restart the application it is rebuilding you see that cute icon here yeah this is our table but we get no data right so let's now make the call and for that we use the lifecycle method on initialized async there are three lifecycle methods let me show them to you with protected override and then async yeah there they are so uninitialized this is the one that's used when this component well is initialized then on parameter set when the parameters are set and then on after render so when the component is rendered and if you want to use this one pay attention to the to the boolean flag here as you can see first render so there's really a first render and if that's the first render only when this component finished rendering for the first time you want to do some stuff but it could be the case that it renders some more times and then you would call whatever you want to call there lots of times so pay attention to that but in our case now on initialized async is the one we need and in here now we write await super also edit the async keyword that's nice so super hero service and then get super heroes all right that should be it let's see not rebuilding okay let's also open the console here with the network tab so let's restart it ourselves and we have an error nice okay what's the issue [Music] here okay let's have a look at the network tab again super hello and another error all right interesting interesting [Music] urls api superheroes that should actually work of course yeah the double check did not really work right so we've got actually it's called superhero y now that's interesting superhero let's try that again but it's giving me a 200 okay okay if you know why please tell me that in the comments let's restart this and now we got our heroes nice okay this is what i actually wanted and one more thing to make this a little bit prettier maybe we go to our page again and also add the class table and maybe if we have to really restart this again and again and again okay now this looks better this is what i actually wanted okay so now we got our heroes call is also working but it's really interesting that we get the uh the um 200 okay here what happens if i i don't know i don't know this superheroes123 for instance restart the app superheroes123 200 okay all right okay but this should not be part of this tutorial so api superhero make sure to use api superhero jesus christ okay and now we see all our heroes okay that's nice what happens if i hit read no not okay i'm very confused by the new hot reload feature or not only the hot reload but also the the automatic restart should actually work when hot reload would not be enough but somehow since the latest update it doesn't work which is let me show you version 17.0.5 in my case okay anyways let's continue with the single heroes i'd say for that matter i want to add another page where we simply navigate to when we add our button here and also when we add a create button because in that case then all the fields are empty in the form but if we hit the edit for edit button for instance then we navigate to the other page and every control has a value of course and then we can change this or even delete the hero so for that we add another page it's a razer component and we call this hero razer and this now gets two page parameters why is that if i want to create a hero i want to use the first parameter here and if i want to edit one we use this thing here a parameter the directive so page directive first page directive with the route hero and the second one with hero and then the parameter id which should be an integer and then in the case we only got hero this is the creation of a new hero and in this case this is telling our page okay get a hero with this id or at least try to get it and make sure to use the correct controller name and then we are able to edit this guy all right we have to do some stuff of course to make this work again we inject the superhero service so superhero service with the interface superhero service all right and then let's say we check if the id is null but first we need the parameter for that so whenever you want to use a parameter like this you need a parameter here in the code block and use even the parameter attribute and this would be then now another integer called id again the case doesn't matter you see this is your lower case here with a capital i works so get set and not pulik it's public with a b all right so public int ied and this is this thing here now we can check for instance if our id is null then we display a title like h3 creates a new super hero maybe also the page title why not all right and otherwise we say we want to edit a specific hero so maybe we then say edit and then we need another another um another field here in essence we will call this thing hero lowercase h in this case hero and then hero name okay and we use that as well for the page title and now our hero which is a superhero new super hero alright and let's also initialize the comic here because we need that for a select box we will add to our edit form in a minute okay but with that we at least got our title right okay now quick recap because this is uh maybe a bit too fast not sure about that but there are actually some things we also have to to implement of course to make this work we've got our superheroes page and now actually since we now got our hero page we can add our button here so let's do that real quick button [Music] classes button for instance like that and now let's also give this an icon so i class would be o i o i pencil for edit maybe yeah why not and now pretty important of course a function that should be called on click now since we also want to use a parameter here we have to add a lambda expression here so add on click so with the on click event and we will write a method called show hero show hero like that and this would work again if you do not want to use a parameter but if you want to use a parameter in our case this is the hero id we want to give this method then we have to do something else and this looks like that and here now we can say hero i d and down here we write our method void show hero with the id and now we want to do something with that and actually want to navigate the user to a new page and to be able to navigate the user we need the navigation manager and this is stuff of blazer so we inject navigation manager up here call this navigation manager and now here we say navigation manager navigate to and that would be hero with a id so hero and then uh id okay this should be it for now let's see our button is here great and let's edit peter parker and we have no hero name of course not yet okay but we you see the id here right so hero and then one and hero id2 perfect this works and now we have to get our single heroes so we've got the controller method already so superhero controller here we get the single hero and now it's time to do this stuff and this looks pretty similar in essence so we've got our results with get from jason async but now it's just returning a superhero [Music] and we need another id here make sure to use superhero not superheroes don't know why you would do that but some people well i don't know do this the id important we have to add our async keyword get get and now we return our result instead of setting a hero okay well and in case this guy was not found we well let's just throw a new exception why not so hero not about ha okay so with that we get our single hero and now let's add this method now to our hero page okay and now let's use on parameter set so protected overrides and then on parameter set async and here now first let's check if the id is null in this case we would create a new hero we do that in a sec but here now we set our hero to await super hero service get single hero with the id okay and you have an error here yeah let's cast this to an integer and then this should work restart it is restarting i go here edit spider-man edit batman and we see [Music] all right show me the calls there they are okay great so this works kind of almost an hour because i talk so much but with that now we've got the read kind of covered we need our edit form of course so maybe let's add this first and then after we get our edit form we move to the database we move our data mock data to the database and then complete the other operations you see this tutorial is a little bit longer but well you clicked the video and saw the time so i'm still in the process here so you know more than me although you are from the future isn't that crazy not although you know more than me because you are from the future this is interesting okay our edit form if you don't know this this is a built-in component of blazer web assembly and this edit form here is there well to create a form and this edit form always needs a model and what a coincidence we already got our hero here so this is the actual model and also what this method wants is a method that should be called on submits we also got something like on valid submit or in ballot submit but validation is not part of this video if you wanna uh if you want a video made by me covering edit forms with validation for instance please tell me that in the comments and then i will do my best to create this video but for now let's add a method called handle submits and this method then will be called when we click the button that is part of the edit form and handle submit will in essence it will call another async method so let's also return here but this will be done for creating and updating the hero so let's not focus on that now now what we want is actually we want to see all the the properties of our hero so let's start with a little diff maybe so div and then label for the for the first name call this first name and then this is simple we use the input text built in component id for our label is first name then we bind a value that's important right so with that we can display the first name and also if we change that then we know that we want to change the first name of the hero and we can also add a class to make this look a little bit prettier and this would be form control and this is part of bootstrap five just for your information in case you didn't know okay then we have two more last name last name as well here and also the hero name hero name and also here the hero name and of course here and then we got the comics and now you can see we need something else we need another call for our comics because what i want to do is i wanna use a select box here or the input select component of blazer and where we can then choose which comic we want to use but we can actually already implement this although the comic list will be empty the label is comic or com comic comics correct add a new line here and then we use again the input select we bind the value so this is quite similar but this would then be the hero comic id and the class is form selects and in here now we add a for each but this time for the comics so bar in uh superhero service super hero service comics all and here now option value is comic id and we want to display weight id like that and we want to display the name so add comic name okay and then the last thing [Music] is a button so let's add a new line here and then the submit button pretty important type submit so please enter type and then submit and if you have other buttons here inside this form make sure to type or to use type button otherwise if you don't add the type every button will submit this form got this couple of times i can never remember these these errors and their solutions so i have to learn the hard way so button important primary is okay i guess and here it depends if we want to create or update the hero so let's also add or use a variable here or a field for the button text string button checks this first string empty but now on initialization actually so let's add this method we need this anyways for the comics so async task sync yep and then we set button text to if the id is null then we say save new new hero and otherwise we say update hero okay and additionally we can actually already call await superhero service get comics okay and now to make this complete let's do that really here in our superhero service we call i can copy this actually get comics we expect a list of comics at the async keyword we will add the comics routes and now our comics are the results and now real quick to the controller and in here now we add a new method this one here [Music] at comics expect a list of comics call this get comics and we return our almost yep that's the one all right let's restart and test this so we're building go here okay almost so we've got the first oh yeah i know why i think because of the mock data the comic id is actually not set so let's say coming id here is one and here the comic id is two [Music] let's see uh-uh still not working let's see restart no it's working this is what i wanted nice all right okay so you see we get the list of heroes we can display a hero here and we also see the right comic here in this select box that's nice right okay but update hero does not work of course but with that we got the read operations not completely full stack actually we got that we got it done in the controller with mock data and now after one hour let's use entity framework okay so we stopped the app for that now i assume you already got sql server express installed don't really want to show you how to do that but what you can do is simply google for sql server express just did that on the other screen and there you see it and here you i guess it's the first hit sql server downloads and then you see secret server express here that's the free version can do or use that absolutely free for your applications and additionally what i like is the sql server management x not management studio that's the term i was looking for so sql server management studio yeah maybe i should google it here that's the thing i wanted to show you download sql server management studio and with that you can well manage your sql server express database of course you can also do that with visual studio but i like this thing so maybe you want to do that too so please if you haven't already download and install sql server express and also maybe the secret server management studio and then we can have a look at the database and apart from that we have to well do some entity framework magic now for that i already closed the app very first thing we need is entity framework itself we could add a nuget package here or we could add a class where we then need the package and virtual studio would recognize that install the package automatically how you want to do that is up to you but maybe let's just add it here already so right click the server project and then manage nuget packages and then you go to browse not installed i'm always at installed and don't know why it doesn't find any packages so what you need is microsoft and there it is already so microsoft entity framework core that's the first one you see 350 million downloads wow so install this one please all right i accept and since you want to use code force migrations you also need antiframer core design 176 million downloads also not bad not bad and the last one is sql server there it is 182. for instance just for your information if you want to use sql lite for instance that's also the option of course and then you would need this package all right but we use sql server in this example so install this one and the last step then now in the package manager console you can open it with view other windows and then package manager console here we have to install entity the entity framework tool and this command i also always have to look up give me a sec all right so first if you already have it installed you can check that of course so with net dash ef you can see the actual dotnet entity or entity frame record tools that are installed let me try to open or make this a bit bigger here so you see entityframercore.net cll now command line tools not interface cl command line tools 6.0.1 is installed now if you have that already you'll find you can use it perfect but if you have to install this if you need to install this then you do the following so dot net tool and then install and then dash dash global or dash g would also work and then net dash ef now telling me i've already got it installed so what i can do is i can uninstall it just for you guys that need to uninstall see that was fast and then i can install it again and i get version 6.0.1 okay this is the latest one and again with net dash ef i can double check similar to the super hero or heroes controller but now really double check and it is installed okay this is everything you need for entity framework or to make it work but now to be able to use it we need a data context or a db context database context now the typical way to do this is you add a new folder in your server project call it data and in here now you add a new class so there is some boilerplate code you need but you can again have a look at the web api and ef core tutorial or we're getting blazer i've got check out the info card i've got the blazer walking skeleton tutorial there and there you also see all the information regarding using blazer web assembly with the web api entity firmware core and sql server express but in essence we do that here as well but maybe just a bit quicker so maybe it's also interesting for you to check out the other video anyways we add the data context class and inherit from db context and now you will see it is using microsoft entity framework core and at this place if you haven't installed the nuget package already then visual studio i guess it would well in my case it was the k it was the case in my case it was the case great english in my situation there was the uh the option to also install the uh entity framework core you get package from here but now we've got it already and similar to the thing i did earlier let me just add this here make this global because we need this one definitely on another place and go back now all right this works great so we've got our db context you see it here the information is a bit bigger it is uh an instance that represents a session with the database and can be used to query and save instances of your entities db context is a combination of the unit of work and repository patterns now what does this mean well the next paragraph is a bit more specific uh i guess being around in centers includes both parallel yeah ace inquiries and so on well in essence you can access your data from the database right and we will also inject the data context to do that so lots of magic here that is really awesome but to make this work now we need some configuration still some boilerplate codes first thing is a constructor so ctor data context and this thing needs a db a context i can never remember this options and then data contacts this is called options and very important we need the base constructor here as well and then since we wanna see data or i wanna see the data i don't know about you but i want to see it here we use the method protected override voids on model creating and we add the model builder here call this also model builder and now regarding our data we say model builder model builder entity comic has state uh we need the parenthesis here has data and we will add the data here in a second and the same for the super hero entity and now let's yeah here it is so go back these are our comics formatting does not work as always all right and now the superheroes okay [Music] go back to the data context there we are and actually we don't need the comics or the comic property here comic id is totally sufficient okay i think this works and the last thing outside the model creating method very important the db sets the database sets so whenever you want to see an entity represented as a table in your database you have to add the database set it is a property again with the type db set and then you add your entity here and usually the name would just you would just pluralize the name of your entity for the database table name so superheroes this time it's correct and here we also add the comics with the comic type all right and now two more things are left first the registration of the data context that i set but before we can do that we need a connection string and we do that in the app settings and the connection string looks like that first we open this new connection strings section at the default connection and this thing now looks like this we've got our server which is well at least in my case localhost localhost backslash backslash sql express i think again lowercase uppercase doesn't really matter sql express but this should work and then the database name this is totally up to you let's call this superhero db and then trusted connection is true assuming you're using your local machine for all that stuff okay so server local host sql express database super hero db and trust connection true and now finally the last thing in the programs yes we register this thing with builder services and then add db context that was already great data context and this thing gets options and wait a sec need a reference here options let's add the global keyboard again why not and in here now we say options use this is important now sql server now if you're using sql lite for instance this is different you don't use sql server you use sql lite but both of them need the connection string so builder configuration and with sql lite i think it's just the file so you really have the path to your file then and then get connection string defaults connection all right there's a parenthesis missing take a deep breath and let's try to run a migration we do not start the app we want to run a migration so let's get some space here and then important you have to go to your server directory so cd blazer full stack and then server and then we say dot net ef for instance and with that again you see the commands database db context and migrations we only need two of them which would be database immigrations and again with dotnet ef migrations we add a migration at initial for instance and fingers crossed i hope this works okay i am a bit skeptical but let's double check these are the comics well let's see let's see if this works so here you see now this is important we've got a new folder migrations with this initial thing here creating a table comics with an id and here in the name and the superheroes table also id and so on primary keys foreign keys yeah i think this should work and now with net ef database update although we haven't created the database yet we still use the update command and now you will see hopefully that yeah it will do some stuff and you see the insert commands here for our seated data and also the create table command and so on and now let's open sql server management studio and there it is it takes some time need some patience here okay we connect got some databases i guess why yeah already got a superhero db interesting okay see walking skeleton blizzy commerce yeah and so on some stuff from the tutorials and we see our tables and here we can access the actual data and we see our two heroes isn't that nice and also the comics all right so with that now we can get the data from the database and this is done in the controller here and you know what let's remove this we don't need this anymore but we need a constructor so we add a new constructor and now inject the data context here call it contexts at the field again i configured this actually but it is gone after the update and now here we say our heroes are context hero superheroes this is our table right so with context period and then superheroes we get our superheroes and we could also get the comics for instance so superheroes it is to the list async now and these are our heroes and we do the same with the comics so our comics are the comics and now regarding the singer hero we actually say context superheroes now first or default async but this is also done and explained a bit more deeply i think in my all relationships tutorial maybe you see the info card by now we have to include the comics so include hero comic so with that we only got the relationship to our comic and see the comic then in the result on the client otherwise if you would not use the include function here the comic would be null so keep that in mind now if our hero is null we return the same thing and then this should be it actually we just return our hero and we are good to go let's try that save this and start the app so you see this was lots of uh back-end stuff and actually i would like to continue with the back-end because then this is done and after that we can focus on the client so and we get an error that's great okay so what's going on here this can be due to a cycle okay interesting okay so it this is embarrassing took me a while but this is the actual era here i forgot the awaits telling me that there are some cycle issues but if you add the await then there we are these are the heroes from the database and of course we have to fix it here as well so just add the weight and then this error should not appear and i restarted visual studio and now also the automatic restarting feature works you know sometimes maybe you can relate i don't know but now we can edit this we get the hero from our database this is great right and also the comics and so on and now real quick let's also implement the update delete and create functions and for that let's do that in the in the controller first and then we're done with the back end stuff and then we go to the blazer client and then we should be done real quick so let's start with maybe create a hero right so let's copy some code here and now we use the http post method here we don't need a route so let's remove this one real quick it is called create superhero parameter now is a superhero and since this is a complex type the controller or the web api wants this request object from the body or in the body and one more thing we have to do here is we have to set the comic actually to null don't know about you you can test it without doing that or without adding this line but in my case entity framework wanted to insert this new comic then into the database and this did not work of course because the id was already there in the database so test it that's up to you don't set the comic to now maybe it works but in my case i had to do this okay and then actually we can remove all that here because what we want to do is we want to say context super heroes and then and this is not asynchronous so we do not need the await keyword here we add the hero but then since we made a change to the database we add a wait and then context save changes async there it was already saved changes async and then we are done and actually let's return all our heroes then to see the change in the database and then when we are implementing the client we will navigate back to the list of all our superheroes all right so for that we add another method and this is just a private async task returning a list of super heroes like that let's call this get db heroes for get database heroes and this is pretty simple return awaits and then context superheroes we include our comics and then turn this into a list to list a sync all right and leave the s here all right that's it and you know we call get db heroes okay and this is our create superhero method and now the update and the delete let's copy some code again for the update we use the post method http not post put method and again we need a route here using the id so the actual hero we want to delete this is again up to you how you want to do it we can actually send a superhero object as a request to the server and then say okay from that object we take the id or we grab the id and then try to find the hero from the database with this certain id or another typical way is that we send the request object and also so additionally we send the id and then take this id to get the hero from the database and then overwrite all the properties so how you want to do that it's up to you but let's do it the way in that way that we use the additional id and first call this update super hero and this one thing of course copy paste arrows as i told you we return a list of superheroes actually all right and the same now here yep that's it and now the id okay now to get the hero let's call this one now db hero because we already got the parameter hero so awaits context superheroes again we include the comic all right and then first or default async where the hero id is the given id if the db hero is now again we return a not found say sorry but no hero for you and we add the other equal sign here [Music] and after that we just overwrite all the properties manually so our db hero first name is the hero first name and we do that for the last name as well as for the hero name alright and then the hero name and the last one the comic and for that we will just use the comic id so hero comic id and after that again we save our changes asynchronously and if you do that remember to use the await keyword otherwise you might run into some trouble okay that's the update i hope and now the last thing delete a superhero again we copy this paste it here this time it's http delete we need again the route for the id but no request object we just use the id similar to the get method call this delete superhero we return the complete list again and we can actually leave that here so we get the db hero and in the end instead of overwriting everything we just say context superheroes remove db hero that's it alright and with that the backend is done and now i'd say let's move to the client and first we cover the service so in the interface we need three new methods create hero update hero and delete hero no method of returning anything create hero getting the actual request object then delete hero okay intellicode let's do that one first and also update hero again with the the actual request object so superhero right and we will use the id then in or add the id in in the method itself we do not need it here already so let's go to the implementation class and implement that interface all right create hero delete hero and the update is down there don't know why but that's how it was generated for us all right first create hero now what we want to do here now is get the result by using now a different method not get from json async this time you're using the http request method post so we use post as json request so await http post as json request the url is api superhero and the hero and then as you can see here the result is an http response message so we do not get the list of the superheroes directly like here in the get from adjacent for instance here we get the comics but we get an hd http response message and to get the actual result then what we can do is we can say ponds for instance is await results content and then read from jason async and here we also add the type so we expect a list of superheroes and in the end we say heroes is now within capital h heroes is now the response okay of course this could be now but i don't care for now otherwise you could of course check first if this is not null and then do all that magic all right next then the update so down here let's paste this and we use put now so put as json async with the hero but now we also add the id here so api superhero forward slash then hero id add the async keyword right and the response is in essence the same and again we just paste this for the delete and this is delete async and we only add the id here api superhero and then the id add the async keyword again all right and that's it and please bear with me or you know what let's extract this and then we do not have duplicated code so set heroes it is copy this now paste it here and also down here all right and these then should be the service methods for the client and now let's go to our superheroes page we have our show hero method here [Music] although one more thing one more thing i forgot one more thing i told you that i want to navigate the user to the to the complete list actually so let me first change that this is not the result we want to set the response wait a sec set heroes that's wrong that's just wrong [Music] which this is a list it is late it is really late almost 11 o'clock you see i really need that coffee so we've got our heroes here oh it was actually oh come on now that was correct that's the result we see the result here where is it ah jesus copy paste arrows you want to set the heroes to the response that's correct but here we want to cause it heroes same here and same here okay and now after that i want to navigate the user to the to the superheroes page again so let's inject the navigation manager here as well you can totally do this so navigate navigation manager call this navigation manager one thing we have to add here is this reference microsoft asp.net core components and we add the fields almost that was the correct one add the underscore and now in our set heroes method what we can do is we say navigation manager navigate to and then superheroes all right and now let's go to the client because here now what i want to do is we've got the show hero button that's correct and from then from there we go to our hero page we see the submits for creating a hero and also updating a hero and let's implement that now so first create a hero maybe here on parameters async there's one thing we have to prepare so the hero comic should be let's just initialize that with the first one so super hero service comics 0 then and let's just assume that there is one available and after that we also say the hero comic id is hero comic id and now in the handle submit we also have to check if the id is null then we want to create this hero so we say await super hero service create hero and otherwise we say await superhero service update hero and here now we can already add our delete method so async task delete hero would be awaits superhero service delete hero with the hero id update hero needs an object of course and now we've got the delete button missing so let's add this one here and this is not bottom it's button okay and here we say delete hero [Music] maybe use danger so it's red okay and now here on click we call delete hero and this is of type button that's important okay this is delete and then also create a hero this is what i want to do here so we add a new button classes button [Music] button primary and on click create new hero and this is of course another method we have to implement so let's do that real quick avoid create new hero and in essence we also only navigate the user here so navigation manager navigate to and then just to hero but you see without the id okay still have an error here name on click yes that's correct now it should work no issues found great so let's start the app and test this so let's reload all right we've got our heroes got our buttons now same here what happens if we create a new hero okay that's great okay you know for spider-man let's update for instance the name to amazing spider-man we get an error of course cannot access a closed stream let's see results at heroes [Music] okay we actually do not need this line here and i think this is the issue so let's reload oh but it saved the change okay now this worked so when we go back now amazing spider-man let's change that back remove amazing hit enter or return yep this works now okay great so that works now let's create for instance tony stark iron man is marvel bruce banner hulk is dc of course and there we are these are our heroes we can also see them [Music] in the database that's nice and now let's try to delete the hulk same problem here yep see copy paste errors best ones but it was deleted and now the final test it's really sad but let's remove iron man just to test it and this works okay now this was a little bit harder than i expected but let's push this now public repo blazer full stack rod get the code if you want and i hope you learned a lot and we're done with that so we are done as i said it now you know everything regarding crotch in a full stack blazer web assembly application we covered the client we covered the back end with the database and also in the middle the web api so i hope you learned a lot if so i'd really appreciate it if you click the like button and subscribe to my channel thanks a lot don't forget the bell icon and additionally again if you wanna see a course where we cover the the well lots of stuff regarding blazer and dotnet six and also stuff you well should need and know if you wanna land a job in that world meaning interview questions of course but also agile methods like scrum and other stuff devops a little maybe then i really recommend subscribing to the newsletter i will do my best to make this course awesome again and additionally well what can i say i really don't spam you i write an email at most once a week and usually it's not even once a week it's rather less and last thing thank you so much again for all the coffee really appreciate it can really use it and now i can only say thank you very much for watching i hope i see you next time take care you

Channel: Patrick God

Views: 89,019

Keywords:

Id: K_P-qJj_8Bg

Length: 99min 42sec (5982 seconds)

Published: Tue Feb 08 2022