CRUD with Blazor WebAssembly & Web API in .NET 5 🔥 Full Course

hi there i'm patrick and welcome to this tutorial about blazer webassembly this is a complete course about the full crot operations about all crowd operations meaning create read update and delete so we are building a full stack kind of full stack blazer web assembly application it is asp.net core hosted this means we have a blazer web assembly client we have a web api server project and we have a shared project for our models and what we do then is we will well make crowd operations meaning we will use the http request methods get post put and delete to create objects delete them update them and read them of course and in this little example i will create a superhero database it's not really a database as you can see in the course that or in this tutorial that i sometimes talk about entity framework but this tutorial was longer than i expected i have recorded it already and now i'm doing the intro and either way sometimes some errors happen because this was completely unprepared i had no script nothing at all so this is really kind of live but still i hope you learned something it is complete the code is uh online on github just check out the the link in the video description to get the complete code and if you want to see how i built this whole thing and where the errors happened and so on sometimes it's it's great to see this you know and you see how an application is is is built and where the errors happen and where we have to debug we have a really short debug session in this course so yeah long story short maybe you want to check it out i hope you learned something if so i'd really appreciate it if you click the like button maybe you even want to subscribe to my channel it does make a difference thank you very much maybe you also want to subscribe to my newsletter in this case you would get emails from me about videos like that and maybe even early access to upcoming courses like the e-commerce course but i promise i won't spam you actually i rarely send an email it's just once a month maybe anyways that's the the newsletter and thank you so much to all my supporters buying me a coffee really need that coffee because otherwise i wouldn't be able to do all this okay enough about that and now enjoy the course all right we start by creating a new project with a visual studio i have version 2019 and that's the community edition this totally works for us and you can also see here already that i use blazer web assembly apps quite often since these this is the recent project template here but if you don't find it at first you can of course either select it here or search for it so simply enter blazer and then you already see blazer web assembly app here and this is exactly what we want not a blazer server app we want a blazer web assembly app so this is a typical single page application where most of the work is done on the client and let's call this project maybe super hero db for a superhero database because this is the example project i want to use here and that's how i want to show you how you can implement all the crud operations with blazer web assembly after that you see that the current target framework is dot net 5 so please make sure that you have the sdk installed 4.net 5 and then configure for https is okay this simply means that when you enter an http address that it will redirect the call or the the route to the https one and we do not need authentication here we won't use authentication in this tutorial but what we want to check here is asp.net core hosted because this means as you can see here it includes an asp.net core host for the blazer web assembly app this simply means that we get three projects the client project the server project which is a web api in essence and also a shared project where we can build all our models then so this is really what we need and with that we can also add an entity framework for instance with a sql server database and so on and this was funny i just updated visual studio and now there's a new update available but i think this also works with this version here all right we've got our clean a project here you see a bunch of files that have been gen files that have been generated for us but let's keep it like that and i will explain all the things along the way in the blazer web assembly full stack boot camp i start with this example project and explain all the files the folders in detail but i think for this relatively quick tutorial i would say it's enough to just talk about this stuff along the way so as you can see we've got a client project the server project and the shared project here and you can already see here this in this example project we've got one model and this is the weather forecast and we will add a superhero model here for our implementations but i would say before we start with the code let's run the application we can either use the run button on top or what i like to do is actually use the package manager console because as you can see in a minute we first have to to be in the right directory so we change the directory to superhero db and then server because the server project in this solution here is the the starting project and then i like to use the command.net watchrun instead of simply.net run because in this case when we change the code we've got a hot reload so we do not have to stop the application and run it again or start it again it simply changes and reloads along the way and as you can see here now it is already here i like to have the developer tools open in chrome here because then i can see what is going on and i think the most important example here or the most important page in this example project is really the weather forecast because here already we are making a call and this tutorial is all about the crud operations and this is in essence already a read operation because we are doing or we making a get call here as you can see this is the url this is the request method gets and we get the status code 200 back with all the weather forecasts but instead of having a look at this let's build this by ourselves now and then we will learn this one step after another together with a blazer of course because this is not only about the web api this is about blazer web assembly as well but again first the model so we right click the share project hit add and then a new class and let's call this class superhero make sure to write it correctly super hero that's okay i guess we make this thing public and then give this some properties i use the built in snippet prop so just enter prop and then hit tab twice and then you should be able to see the property here i'd like to add an id maybe we will make this or maybe we'll create a table with energy framework later or in another episode i don't know so an idea is always good to have maybe because this is an entity in my opinion that can be stored in a database in this way and then i would like to add a first name let's keep this simple then another string which is the last name and then also a hero name and maybe we can also add a list with a team or not a list let's say we add another another class here for the for the comic let's do it like that yeah the comic would be great of course we have to add the the class then here so we've got a little relation and with that we add another model so add a new item which is in the comic we could also call it team or i don't know for the avengers maybe but let's just say we want to use the team the comic here and this is the [Music] either marvel or dc simple as that so we have the class comic we again add an id here and then also a string which is simply the name of the comic like that and there we would have a relationship then okay this is i think enough not only one model a little bit more with a little relationship so maybe that would be interesting for entity framework all right so we've got our models and then the next thing we are still in the back end essentially and the next thing is it's actually a controller here you can see the weather forecast controller and here's the get call which is well the read part in essence of the crowd operations but let's add a new controller for our superheroes so we add a controller here you don't have to select class we add a new controller and then we choose an api controller and we use an empty one because this is in my opinion the best way to learn and we call this super hero controller and in here you can already see some attributes and a class this controller inherits from this is the controller base as it says here it's a base class for an mvc model view controller controller without view support we don't need view support because our view in this case is the blazer web assembly client so this is already great and here the route is interesting this attribute is there to well specify the route of this web service and here it is api and then controller in brackets just means that this will be the name of the controller so the term that's that is before the controller term in our case this simply would be superhero and then api controller as it says here indicates that the type and all drive types are used to serve http api responses so in essence we can use this as a web service web api in essence and now already we can create our first get call to read superheroes but we want to return some superheroes so maybe we just add a list of superheroes here because we do not have a database yet so let's simply create a list super heroes and we have to add a reference here i did this with control period on the keyboard and as you can see here using superherodb shared and then we get the class of superheroes let's call this list superheroes and this is a new list of superheroes and let's say we already add a new superhero here with the first name peter last name parker what's the hero name you know it first i have to click that by the way i have no script here so maybe uh yeah if if you see me doing some weird stuff that's because i do not have a script and this is kind of live so please bear with me if i do something wrong but i still think this is a great way to learn because then you will see what can happen with no script actually uh yeah superhero exactly the hero name is spiderman of course not superhero and the comic let's add some comics i know i could have used enoms for that but let's just use the class here so let's add a list of comics as well but the comics here this is a new list of comics and these are quite simple so the first comic would be with the name marvel and another one is the name dc [Music] and let me think about that now we could have we could add the id actually yeah let's let's keep it like that and uh now here i would like to add the first one yeah this won't work that's true make the static and then this works okay and then let's add another one just two for now and this would be a guy called bruce last name wayne and of course you're absolutely right this is batman and here we see that this guy belongs to dc okay and now the get call this is a public i'd like to make these calls asynchronous already so let's make this a public async method returning a task then with an i action result because the i action result enables us to return an http status code in essence and we call this thing again super heroes maybe like that and here we say return okay because this already returns the 200 okay response as you can see here other options would be something like bad requests or a 404 not found like that but here we can simply say okay and then we return our heroes all right as you can see here asynchronous isn't really necessary in this case i'm just used to implement asynchronous calls here because actually or usually i use entity framework and make asynchronous calls with entity framework because entity framework calls or make calls makes calls to the database and then returns the stuff i don't know and then we use link with asynchronous calls and so on so yeah again bear with me no script i think you get the idea here um and uh yeah again maybe we add entity framework in another episode or maybe in this one i don't know let's let's have a look at the time and then uh we'll see anyways get superheroes return the heroes great this already works i saved this and i hope that when i save this that it rebuilds but it doesn't so maybe we have to save something else but it does not recognize now it recognizes the safe okay so microsoft i think we have to do something here with visual studio the safe was recognized or the change here and now we go back to the browser and let's try to get the heroes in the address bar so we just enter api and then super hero and we get our superheroes isn't that nice of course this doesn't look really nice so maybe we can change this with the help of our blazer web assembly client so let's go back and now we enter the client as you can see here there are some files we've got pages we've got shared stuff these things are razer components and let's have a look at the index razor for instance and in here we see html we see some weird stuff here this looks like html but this is actually a component a razer component a shared component in this case called survey prompts and we can have a look here at the survey prompt component and here you can also see that we've got some c sharp code so it's a mix of html css if you want and also c sharp code and this title thingy here is a parameter and this is already the first way to communicate between components so you see that the parent component the index raiser components with the communicates with the child component the survey prompt via this parameter title and the title here how is blazer working for you is exactly that what you see here that's the stuff and when we change this for instance blazer is working great freaking great okay and it rebuilds you can also see this cute liken here now this works okay perfect but we want to see our superheroes so let's add a new page right click the pages folder add a new razor component and let's call this one also super here rose and as you might have seen here there is this page directive and with this page directive we can already set a route for this page and maybe we can just copy this one for instance from the fetch data component and paste it here call this super heroes and also make a blank here and now we've got our new page already we do not have another routing page routing configuration file or anything like that like in angular for instance in angular you have this routing module but this is not necessary here we've got the pages we've got the page directive that's all we need and now we could already access this thing but what i like to do first is adding a nav link here you see the home link the counter link fetch data so let's just copy this list item here put this to already forgot the name superheroes superheroes like that and also change the names super heroes and i think there's a people i can great like that and this should be it already saved everything and let's have a quick look there is already our nav menu entry that's quick right love this we click this and we've got our page but now we want to make a call right so what can we do here now you see in the fetch data razer for instance we could use uh similar implementations actually you see uh an html table here you see a four each with this add character here and this is how you can really mix c sharp code with html and we will actually do exactly the same but what i do not like is this here this is a the the absolutely perfect way the right way to make a web service call but to organize this a little bit and use dependency injection i would like to create a service so for that i create a new folder here and with that we get a little bit of structure i'd say and by the way you would also do that in a professional application in the server project so we wouldn't really make uh or make a database call here in the controller i think this is sufficient this is okay because we have this list here this dummy list let's say it's not from a database table so we've got this list here in our controller so we can simply return it but what we could also do and what would be the best practice way i'd say is to also add services with interfaces so you get an interface and an implementation class and inject the service in a construct with a constructor here in the controller and then call a method from the service and the service then makes the database call and we kind of do the same here in the client app now so we've got the server folder and then we create a new item first which is an interface and it's called this thing i super hero service let's make this public and then we also add an implementation class with add class and then superhero service again this already implements the i superhero service let's go there and the only thing we want here is again a method returning a list of super heroes and we need the shared reference here get super heroes all right save this and then let's implement this interface automatically and now what we have to do is add a constructor like that and we use dependency injection here already for the http client because the http client we have to add another reference as you can see system net http if i'm too fast please tell me that in the comments and maybe just reduce the the speed of this video anyways http client and it says here it's a it provides a base class for sending http requests and receiving http responses from a resource identified by a uri so okay that was a short break because our baby son woke up anyways the http client all right and what i'd like to do here now is uh use create and assign a field and also add an underscore because this is a private read-only variable and now with that we can say http client and then use the method get as jason i think when i uh i'm remembering this properly get from jason async actually okay so i get from jason async so let's go back here get from jason async and the ass was the i get as it actually posed as jason i think but we will see the post method in a second or not in a second but in a couple of minutes um get from jason async that's the correct one and we have to add another reference here system net http json and here we can actually add a value of the type that we want to receive and this is a list of superheroes again and here now we enter the url and as you can see here in the in the fetch data it's weather forecast and when we have a look again at the weather forecast controller you can see here that the api string is missing that's up to you if you want to use the api string or not some apis use it some not in our case here you can see that the super hero controller is or the default control actually because we didn't really enter this url this route here this was done by visual studio itself or the net sdk so let's simply use it here in our service services api and then a super hero right and similar to the fetch data page again um we get the list here and instead of just setting it we want to return it of course so what we can do is first also add the async and the weight keeper keywords because this is an asynchronous method and we simply return await http client and then get from json async like that and then in the superheroes page we inject this service with add injects another directive and then we say i super hero service super hero service and what i also want to do here is because it doesn't recognize the type here so we can add the name space to the inputs eraser and that would be using superhero database client and then server i called the server why the hell did i call the server i want to call this services like that and also change this here and then of course also here and here as i said no script or anything so let's see imports that's the one and now it actually should know this type yeah that's correct and there's one last thing we have to do in the program cs you see also with add scope that the http or that something is registered here and we have to register our new service here we can do this with services at scoped and then [Music] i super hero service and then superhero service like that and also add the reference here and this simply means or tells our application that as soon as we inject the i superhero service interface we're telling our app that we want to use this implementation class for that this is a really big advantage because if you want to i don't know test something make some changes with another implementation for instance you think the get superheroes method should be different but you don't want to change this thing here or change anything in this class and then you can simply add another class so a superhero service to class for instance and then the program cs you can say for the i superhero service i want to register the super hero service 2 and you're good to go because then the superheroes razer component here would know that you would actually want to use the superhero service to the second implementation anyways that's a little hint or a little information about dependency injection in essence but to make the final call now we want to call the superhero service now and for that we use a lifecycle method what's the lifecycle method you want might ask and here you already see one the uninitialized async method this means that on initialization of a component the stuff you write in there in the body of this method is called and we can do that exactly the same here so with protected override async and here you see three lifecycle methods initialized parameter set and after render async and one difference for instance maybe you you will stumble upon this is here that on initialization the the component renders but it could be the case you might see this in the in my ecommerce series actually in the e-commerce series there it happened here on youtube that we used on initialized async to display the details of a product but can i show you this ah just have a look i i i will insert the info card here and then you can have a look and this does not work for instance we we used a route like product slash and then the id and in there you could click a button and change the url so that another you wanted to display another product but the actual component to display this product is exactly the same and on initialization it grabs the id from the address bar but when as soon as the component has been initialized it doesn't do that anymore it doesn't recognize any parameter changes and parameter is the correct word here because if you are able to change the parameter in the same component on the same page then you might want to use on parameter set because in this case a change in the parameters is recognized by the component and then it re-renders again long story short we can use uninitialized async here and i do not know why the format is that strange when we hit enter here uh but well we can reformat this of course and now what we do is super hero service get superheroes and that's it and let's put them here maybe so we've got our list of super heroes like that and actually the superhero i think client shared oh okay we have to add another reference here so using super hero db shared so now the model should be available yep and these are our heroes this is a new list let's say first but here now we set our heroes to await superhero service get superheroes so now what's going on here async is missing i think yep that was the error so now we do a lot of steps we initialize the component we then go to the superhero service here's the interface and here then we make the actual call to the web api so we jump to the server project the superhero controller and then here we return our list that we entered here in the controller but if we would have added entity framework with the secret server database for instance we would make another jump with entity framework to the database and then the whole way back to the client so be really full stack then in this case and here this is totally sufficient i think and what we can do now is also use a table to display our superheroes first thing that does make sense is if our heroes count for instance is zero then we display something like well let's use a span here loading or loading super heroes and yep and in the else case we actually wanna display a table let me format this jesus format come on yeah i think that's okay we had a table we can also add a class for this the table class because bootstrap is in this solution automatically and let's add a header for that th for [Music] the first name maybe first the table row like that paste this here so we got the first name and then let's copy this we've got the last name the hero name and then hero name and then the comic okay and then in the t body we use the for each so add for each actually there should be a snippet for that but it doesn't work come on where is it for each nope not this time okay so i'm lazy and that's why i want to have a look and here we say about forecasting forecasts and in our case that would be hero in heroes and now let's see we want to display the first name so it's td almost like that actually uh first the row of course so table row and then the column and here now we add add hero and then the first name and again we can copy this for the last name the hero name and the comic and here it's the last name [Music] the hero name and here now it's the comic and then the name of the comic format this save everything [Music] huh did it build i don't know yep it's rebuilding and there it is already that was really quick and it works isn't that great maybe you want to hit the like button because this works that's great okay and what i want to show you well in the console we do not see much but we see something in the network tab let's reload this stuff and here you can see the actual call this is one thing that is great we make a get call so we use the http request method get in this case and we see the superhero call here we get a 200 okay and this is the jason actually and here we display the the list of the heroes in the table time for some coffee okay great now the next thing would be receiving a single hero maybe so how would we do that maybe we can use a button here but first let's implement the the actual method maybe you see here that is interesting i did not add an attribute here an attribute is added but this is not really necessary when you only have one single get call that has also the same parameter but to show you how it's done let's add another method now for a single hero also returning an i action result and let's call this get single superhero and we have a parameter here now which would be yeah let's add the id and then we add the id1 here and the id2 here for batman and then we simply return okay heroes oh let's make this a bit better we save our hero hero and here we want the hero where let's use find uh let's use i don't know just find return now sure about that i'm gonna first element the matching condition for the value let's use first or default because here i'm sure that null is returned if the id is wrong or the uh id doesn't match a hero so in this case we say let me use a lambda expression here so we want to get the hero the first hero in the list where the id matches the given id now if the hero is null we return and not found and we can also add a message like super hero wasn't found too bad okay and maybe a smiley a sad smiley okay otherwise we wanna return our hero that's it okay so this is how this should work now let's try this already again with the with the address bar so we had the api superhero something's wrong here oh yeah okay we already see an error and it says ambiguous match exception so you see now we should add an attribute and a route because now we have to get calls and by the way i didn't say this how did the controller know that this is a get call well we call this method get simple as that this is a convention by the web api and when you call the method get something then it assumes that this is a get call but it does help and maybe it's also a good practice to use the attributes here so for the get superheroes call we just use the http get and here now we also want to provide a parameter for that maybe even a route so we could do it like that we say this is http and http get call and then we could also add a route attribute here and enter a route in in the what's that called i have no idea as a string and now what we can also do is we can combine these attributes like that and then in curly braces we simply add the id here save everything and you see here that this thing is rebuilding and now it works again and with that ah interesting okay oh yeah that's the wrong controller name it's actually like that and when we add an id now one for instance we only get peter parker and with id2 we get batman and what happens if we add id3 superhero wasn't found too bad so this works like a charm but that's not a great ui so maybe we should change that and add another page for this okay so the calls work that's amazing and now let's add another method for our service which would be or which would return only a single superhero like that maybe and also add the id here and now in our implementation class we implement this method and we want to get the super hero which is not a list actually yep also at the async keyword and here now we add the given id like that this is our service already now let's see how can we do this should we add another page superheroes yeah maybe that way i can show you how to use page parameters actually pretty simple so we add another razer component and call this only super hero not superheroes this is super hero now and again we had a page directive superhero and the patch parameter like that again in curly braces and then what we can do we can actually add exactly the same stuff so we inject the superhero service and in our in our code block we also add similar stuff it's actually a single hero now superhero single super hero call this and again on initialization we call get super hero and now i really i have to look this thing up here i think we have to add an id let me have a quick look i have to open another solution first we can fix that get superhero and here's the id let me let me have a quick look here and our blazing shop where is it yeah that's what i was thinking we have to add this and we can also tell this thing that this is an id an integer so we have to add a parameter here actually and we have the on parameter set async here we used this one here so this was the thing i was talking about earlier that we had to use the on parameter set to make the uh change of the products possible actually but anyways let's add this parameter and now we got the id we have to fix this and here we also add the i d what's going on here uh i can't remember the conversation only be shared super hero two circular avengers superhero ah this sucks because these are now called um [Music] so we really have to okay let's do it like that it's super hero deep db shared superhero and yeah okay now it gets it or it doesn't all right okay let's save this and try this out yeah okay let's get back to chrome and i just want to see if this works so we got the url superhero with id1 and it doesn't work why did it not work we got api superhero it did not use the parameter superhero one maybe we have to also add the type did not recognize the change now it did take some time i don't know why it's going on we got an error ah okay can i implicitly convert ah jesus was a stupid name for the for the page ah come on okay maybe i should have prepared this but anyways we can of course change that to super hero db shared and then superhero and also edit here like that and now let's see no error anymore it reloads and what's happening here kind of a call but it does not use the id that's strange okay we've got our super hero razor with the i d here and this should actually just use the id get product id and using the id here cut it there and there and there now this should actually work already don't know why it isn't okay [Music] superhero id okay we can try this of course with uh logging the id in the console it's alright line and then simply the this is the id like that let's see ah this is the call i wanted to see did it ah i clicked the wrong one jesus of course so it worked it worked already and we see here that we get peter parker and here it should be bad man great okay so maybe it was a bit too fast with switching all the tabs so again first just to make this clear the route was okay calling the page superhero was a stupid idea because now the namespace is uh yeah well superhero to be client pages superhero and when you just call or when you just enter superhero here then it assumes this should be of the page type but this is of course not correct i think i could change that by renaming the component but i tried this before in other projects and this can lead to trouble actually because maybe it's fixed when we just restart visual studio but i really just want to i really don't want to get into this trouble now and just to clarify this is how to use page parameters you see that we need a parameter and it is case insensitive as you can see the the i it's a capital i here and it already knows by convention i assume that you want to set this parameter here this id important is that you use the parameter attribute here because this is then an essence similar to the parent child component communication and then it knows or grabs the parameter here it knows the id and then it uses this id for your call in the on initialization okay but again using this with the address bar is not that nice so maybe we can add a button here actually to get to the hero let's add another column and now in here what i want to do is actually let's add another method and uh i don't know show show hero maybe with an id of course and for that what we can do here is navigate the user to this page then and for that we need the navigation manager and this is a built-in thing maybe we get some information here provides a command provides an instruction for querying and managing uri navigation yeah that's it actually so here again navigation manager and in this method we say navigation manager navigate to and then it's super hero with the given id like that okay and now in here let's add a simple button with maybe button primary show and we can bind to the on click event and here we call show hero and this is interesting now with the hero id now does this work let's see we save this we save everything again it already tells you that this is not working so we have to make this or use this in another way with a lambda expression and now it works so we actually have to to write it like that or use a lambda expression in essence to provide a parameter if we if we wanted to to call the function without a parameter then it would work without this lambda expression but with the parameter we need this expression so let's save everything again it is rebuilding and let's have a look here we are and here we see our buttons now let's click show and we are getting to the proper url that's nice but we do not see any information so maybe well that's just a little a little uh how do i say this little design stuff um let's say this is or first maybe i hope you do this maybe we initialize this guy with null and then we say if again hero is null then we say something like a span again hero is loading [Music] and in the else case we say this is and then hero hero actually i wanted to there this hero name i wanted to use the hero name there it is okay great this is spiderman for instance also called hero first name [Music] hero last name this zero let's add a span here this hero belongs to and then hero comic name okay all right let's see it's rebuilding show this is spider-man also called peter parker this hero belongs to marvel and this is the case for batman great okay this works now of course it's not beautiful we could also add an image and show a table with all the data maybe we got some attributes or skills of these heroes but maybe this would be a bit too much for this short tutorial so we got the get call to get a bunch of heroes so a collection of entities in essence and we got the single entity covered of course now it's getting more interesting what about a post call for instance all right so in this case let's go back to visual studio and again we start in the controller and since i'm a lazy programmer let me just copy this stuff we add a post method now we do not need a route actually and here we say let's call this create super hero and i wanna send the superhero in the body and this is i hope the shared one yet okay and let's make this really simple i would just say that we [Music] add this hero now to our collection and then we return all the heroes so that we see that the hero was added to our collection and this is actually already the controller methods and in here now we do something similar but we get again a list of superheroes create super hero and we add here it is the shared one nice and we add a superhero like that we implement the interface again add the async keyboard and now we return now it's time for the post as json async and we post a superhero so this is not the type that we sent to the to the web service url as api superhero and now as a second argument we add our hero and [Music] what's going on here is in post recursion oh yeah sure now this is different of course so the result is something else now it is as you can see here uh http response message but the the actual heroes now are results content then read not a string is there another one read from now it's read from jason async and this is actually here the list of superheroes and that's it this should be it yeah okay all right and now we return the hero so of course this is different now is this not working okay so we just had to well at the await keyboard of course it is an async method so make sense okay so now this is how to get the the the hero actually the heroes when we add them and we could simplify that okay we do not have to use the type here so this also works with create superhero we send a superhero via the body and the result then is again an http response message and with that we have to access the content first and then read from json use this method and use the type then that we expect and then we get the actual heroes so this is all the c sharp stuff in essence and now we add the forum to create a new superhero and now let me think about where to put this so we add a new page maybe or maybe we use a shared one yeah let me try it this way so we simply add a razor component and this would be called edit super hero like that this is not a page now what i want to do now again not prepared this so i'm not really sure how to put this or how to use it but let's let's let's just let's let's do this kind of live maybe i should have done a live stream maybe so this all this this whole thing would make more sense but um add a superhero i want to use this shared component now in the superheroes page and maybe just show the form below the table of course there are other ways better ways maybe but either way we've got the edit superhero component then here and now let's use an edit form where we create a hero first and then maybe we can use the same one to edit the superhero that's why i called it edit superhero and not create superhero but let's see the first thing we need is a property another property yeah a property do we need yeah a property a model in essence it's a model so this thing would be a superhero db shared superhero and this again is our hero and then we use an edit form and this edit form now needs a model that's why i used the term model and this is our hero and then there's also a method called on submit on valid submit and so on i have a video that's already online about forms and validation maybe i i remember to add the info card so you should check this one out if you want to use validation here i'd say you don't so let's just use on submit and add a method called well submit or handle submit maybe that's a better name handle submits like that so we need this method here handle submit and let me first just add a right line so it was called okay and now we use an input component this is now a built-in component in blazer web assembly and here this will be bind to the hero first name first name there are a couple ways to do this but let's try it that way and then the last name the hero name now the comic would be interesting [Music] because this is a relationship so we have the last name we have the hero name and let me have a quick look blazer battles maybe and here in the and then and then the register component where yeah i use bind value here maybe that's the better option yeah let's use this one or we can see what has what is happening here maybe also display the hero first name okay and of course we need a button let me just copy this and down here there's a button and we call this one submit now okay and now in the super heroes razor we add the we add below here maybe or in this case and this is now the edit super hero component all right okay let's have a look we've got an error and this thing says edit form requires either a model parameter or an added context parameter please provide one of these well actually i thought we have this model parameter here and this is not working so let's have a quick look again in the blazer battles got the user register here for instance and maybe we have to add this one a wrong project that's the one ah jesus i hate that this is not reloading every time i say something ah now it's telling us that something different is wrong value yeah this is this is not working find value and now let's see rebuilding again error save this it's not rebuilding now it's rebuilding and reloading and now we got our input fields nice finally jesus okay but this really doesn't look nice so maybe we can add a class here and i also added a div yeah let's use it so in our edit superhero form we add class class class form control could have also added a label of course but let's see maybe we use placeholders this should also work placeholder does this work actually i'm not sure let's try this first name save it it's rebuilding ah placeholder is not working that's that's unfortunate really so let's do it in another way three additive so i really could have copied the stuff from the other uh from the uh the project and the class for this one is form group okay so form group would be the one and then let's copy this again here and also here also at the label here and here and then the closing div here and here let's format this and this is our that's the first name this is the last name and this is the hero name and now it again does not rebuild but now it does we have a look and this looks a lot better let's say tony stark and this is iron man we hit enter submit was called tony great okay so we got this covered but now what about the comics and regarding the comics we can use a select maybe and since i'm already added i can copy it from here here use the radio button yeah maybe i can yeah maybe i can use this again so let's use it here as well this was the start unit but let's add a comic here and this can be removed but i actually really want to use this let's let's use this one that's okay okay and here it's hero comic and in this case yeah we could to well it wouldn't be correct to actually make a call first to the to the web service get all the comics store them in another service maybe in the superhero service and then iterate through these but i'm not really sure should i do it that way yeah of course we can do it or a really ugly way would be to just copy them and then okay let's use the correct one yeah let's do this real quick so we have another get method and then we add the route comics get comics and we return our comics at least i'm trying to get comics okay this would be the controller and now in the service here let's just use the same service get comics and here we get a list of comics implement the method here and this is asynchronous get i mean we get a list of com make comics and actually i want to set them so [Music] uh prop list of comics we have to add them in the interface as well so these are the comics a new list of comics first and then here we say comex is now a weight that's okay but actually do not return them so we can change this in the interface let's go there it's just like that and then we add the list of comics here call this comics and this should be it so we have the comics property in the interface we implement it here it's first an empty list and then we have this method get comics and of course we have to call this method so maybe here also in the uninitialized we call await superhero service get comics like that and then in the edit superhero component we use the superhero service so super hero service but it's not injected so we should do that with add inject i superhero service superhero service and here now we iterate through the comics and then we say this is not a unit this is jesus actually refactor this with comic got the id and the name in this case and now [Music] this should be it actually i think maybe we can do something else we can and check the js runtime uh js runtime there it is js runtime to display the complete object so js runtime invoke void async and now we can call the console.log method with the hero here save everything and now let's try this again tony stark you see the call was made and now we got the comics take some time i have no idea why comics or do i have to enter something ah i see aha that's interesting it's not done on and yeah no wait a sec superhero service superstars comics actually i thought that when we access the page that this thing is called oh but it doesn't recognize the change so we would have to yeah of course we would have to add an event and that's an option to um to to tell the edit superhero component that this thing changed or what we can do too and maybe this makes more sense is actually make the call in the edit superhero component so let's save this and paste this thing here and only make the call here now let's have a look it is rebuilding yeah you see now it's making the call on initialization and we see the comics here and we cannot set them why is that ready group doesn't support the type comic what the heck hero comic ah ac of course this is a complex type so what we have to do here now is jesus but that's that's not nice so we have to add a comic id let's set this to 1 and this is then the comic ide we iterate through this and in the handle submit we uh yeah of course okay we can do it like that we then say that the comic oh jesus that way you would send the idea of the comic well there are again a couple of ways to do this i know i'm repeating myself but it did not prepare this and now i see that there well maybe i should have done this because i see different ways to do this we we do not add a database here so but even with the database of course there are different ways to do to implement this stuff what we can do here now is well one way would be to set the comic here on the client and send it with the complete object to the service another way would be to add a new model actually a dto a data transfer object where we would just use the first name the last name the hero name and also the id of the comic so actually we would not use sorry we would not use the superhero object here we would add another model call it hero create dto or something like that we would just use the first name last name here name not the id and also not the comic but instead of the comic an integer with the comic id that would make sense and then the server does all the does does the job actually does all the other work maybe then map the first name to the first name of the actual superhero object we would set the id but this makes more sense with the database because in this case the id would be added automatically by the database and the only thing that the server would then have to do is add this relation here so it would get the comic id as an integer and then look up all the comics from the database and then match it or find the matching comic and then add the correct comic to the superhero or the other way would actually be that we have another property here called comic id and this would already be enough because with the post or with the creation of this new object uh the entity framework would actually match them well i hope this makes sense so well in essence you just wanted to learn all the crowd operations and here are a couple of more issues more that i was thinking actually so let's just hit the comic and then we are done i guess and here we just get the uh let's say we get the superhero service comics and first or default where the comic id equals the comic id like that okay it is not rebuilding or is it is it is it is it what was that i just wanted to okay i click marble but dc is selected that's interesting now by default dc is selected why the heck is this got a new superhero this is this is actually empty i have no idea what idea what do you know why this is the case if so please tell me in the comments let me try this now i want to add tony stark who is iron man i click submit i see the object that that's nice that this is something i wanted to show you actually uh cog id 0 marvel so this does not work at all it's always marvel what is going on here let's have a look again what am i missing this is the comic id and for all the comics i see the comic id i see the comic name we are binding the comic id here how did i do this in the other project not in this one in this one place the petals i also have a start unit id id and title and down here well it's the start unit id of the user object the user register object and in this case now wait a sec user start unit i d there it is by default this thing is set to 1. so this also just works and in the superhero database now the comic id is zero by default and when we receive the comics let's have a look again in the network tab we see aha why didn't you tell me this of course maybe we should change this id one and two jesus christ okay and let's say the default one is id1 we saved everything again and now we see that marvel is the first one the proper one and now we can change it okay nice so tony stark is iron man submit we see the id of course this is not correct but then tony stark and we see the comic and with dc we see this and let me change something else here again we are not using entity framework in the database so with the creation here we say that the hero id is heroes max id plus one so we get the proper id here and then we can do another thing actually when we get the result or maybe we can make the call now so let's say await superhero service create superhero hero and this now is an async right does this work yet and now i want to make the call so tony stark is iron man we are making the call we get it back with the proper id that's nice but we do not see him here and this sucks as you can see this thing was initialized so i really want to see him or ah okay of course it's not steady wait a sec so we have to do make this static here is it really yep it is let's add tony stark again [Music] hit submit yeah and now we see him okay so this does work this is nice but i actually want to get him or the new hero could of course also be a female hero so we get him or her i want to get him or her as soon as this is done actually and let's say that we want to let's get to the method here we where's the creation we return the heroes but we could actually also set them right so let's do it like that we add them here a list of superheroes unless those super heroes and then when we get them our heroes then is awaits and we also return the heroes yeah why not and now we have to do something wait a sec so we also set them here return them here and also add the property here list of super heroes heroes okay let's see i think we have to add the event but let's see tony stark iron man return yeah so actually this should be set but the the page the superhero component does not recognize the change and for that we have to add an event and again let me have a look here because i actually did this of course already so in the blazer battles project for instance when we well what can we do or what can we use the unit service maybe [Music] a unit service does it have an event nope banana service has an event on change so we can add the unchanged event here let's do that in our superhero database as well and now here of course we implement it again implement interface here's the unchanged event and then when we create a superhero for instance we can call on change invoke like that and then we have to subscribe to the unchanged event and as you can see here when we search for that it's here it's in the top menu where we subscribe to the event and we also implement then the dispose i disposable interface in the corresponding eraser component so that we unsubscribe on this pose and the thing that we want to call then is state has changed and this is a method as you can see here that notifies the component that its state has changed and when applicable this will cause the component to be re-rendered all right let's try this so in our superhero database and in the now in the in the in the in the where is it there it is superior component first inject i disposable and we already got the uninitialized async method and here now we say superhero service on change plus equals state has changed like that and then also avoid this pose and here we say superhero service on change minus equal state has changed like that okay and we have an error here inject implements not inject implements and we still have an error superior's dispose can improve an interest in public public of course and now all right let's have a look the final test i hope tony stark iron man we hit submit and it does not work and this guy is returned why the heck is this not working superhero service create unchanged invoke unchange invoke on change invoke let's see this is actually how this is done unchanged state has changed and really should be re-rendered hmm let's see could change this of course and we could do something like superhero service heroes and change this in this case you wouldn't need this property here just call this go to the implementation i think this still works this doesn't really need the event yeah but on submit ah now it works maybe we had to rebuild the app again so let's reload yeah okay i think that the state was not correct the state of the application maybe it wasn't rebuilt properly something like that but as you can see now this should actually work so tony stark is iron man we hit submit and now it works jesus christ okay so maybe if this was too fast what we had to do here with the post the easy part was the back end right but then what we wanted to do is in the edit superhero we had have this edit form with the model and the on submit i have to uh turn on the lamp here i don't see anything it's getting late really late almost two hours in and with that form we had to bind to certain properties here of the hero object or the hero model and we also need for the radio group it's actually the same with the select box we need an integer value also works with a string but not with a complex type as we know now as we now know and then we iterate through the comics we made another get call for the comics and here now we we grab the id and the name and the value here is important because this is the thing that would be set to the comic id and then in here we uh make the actual call now to to uh create the new hero and then we added an event and subscribe to that event in the super hero razer component no in the super he rose razer component to re-load or re-render the table with all our heroes and it's actually good that we did this because now when we remove or edit a hero then we also want to change the table of course so let me first remove this and then this looks better okay okay great i hope you're still with me even with these stupid errors and with looking up my other code but you know sometimes it has to be that way maybe you're learning something i don't know it would be nice to to click the if you click the like button and maybe give me some feedback in the comments and if this if this suits your needs or if you if you're learning something if you think this is good if you should if i should continue actually or make another um another video like that maybe add entity framework with another episode because i think this is getting uh well it's getting late actually and we're almost two hours in so entity framework not in this episode but if you like this episode and you say um yeah please give me more then then i would be happy to add entity framework here with the secret server database or sqlite i don't know tell me what you want to see but i definitely need more coffee all right so we got the get calls covered get all heroes get all comics get a single hero now we can add a new hero and now maybe update a hero which is the i would say the most difficult part for that let me think about that another controller method maybe would be a good start and for that we use the put request method so this would be http put call this update it's the u in the crud operations so we got the c we got the c for create r for read which is get now it's the update the u crazy huh and here again couple of ways to do this what we can do is we can send a hero from the body with the id and grab the id then from the from the model or another good practice is to add the id here in the url so in this case that this was would be a put call with api superhero forward slash then the id similar to get as to to receiving a single superhero and then we say or we first look for the for the zero here so we can do it like that it's actually exactly the same i'd like to call these things or these objects then db hero for database hero because actually i get this thing from the database and why not let's do it exactly the same way here so this is the database zero and if this thing is null then again you say superhero wasn't found but if it was found then [Music] let's say yeah why not i mean let's just let's just replace it that's the easiest easiest part in the database way maybe we would map them maybe we would use dtos maybe we would use a bit or use more best practices but again it's just about the crud operations and i thought we would be done in an hour and now we got two so let's try to keep this simple and the db hero then would be just replaced by the hero i think that should be it and this would be the call and the controller and now here um we do something similar let's just paste it here call this update again i want to get the complete updated list and here we have the id again and now we implement this implement interface and and and and end now let me copy this we use put as json async now again with the d [Music] it's a nice and call and we also add the hero and the heroes are the result this should already be it and now the hardest part is the form so we go to let me think about that we have the superheroes maybe we add another button um to to add uh to edit the hero and then we put this hero or we we maybe we can use the parameter here oh let's try that so we add another column like that and here we say edit and then we call a method avoid edit hero also with the id now [Music] well the easiest way would be to to use another page i think but what we can also do is we can add a hero here superhero db shared superhero edit hero or hero to edit or something like that hero to edit which is null and then we add a parameter here actually edit hero which has to be a property then so prop superhero db [Music] shared superhero this is the hero to edit and [Music] should i really do it this is the here this is the parameter of course we could use the hero here as a parameter which is a new superhero in the beginning you see i'm thinking i'm thinking i'm thinking i'm thinking let's see let's let's try it let's try to use this guy so this is the hero and this is a parameter now and we set this now to hero to edit which is not so actually poor i have no idea if this is working so by default this thing is null and here we say edit hero with the id and here then we say here to edit is super super hero service heroes find and then where the hero id is the id okay let's let's freaking test this okay it's rebuilding yeah we already get errors i was thinking that um what parameter add context let's see we got the hero here what if i don't set it i do not set the parameter it's rebuilding then it works when i said it and i say this is a new superhero what's happening then works as well okay i said oh nice this is awesome this is really awesome well a sucky way to say uh to to see if this is an an update or a creation we can set the id by default set the id to null to zero and then quite simply when we go to our component and then handle submit we have to decide is this is is this a post or is it a put is it a creation or a or an update and well what we can do now is if the hero id is zero then this really is create and else yeah and else this is an update let's test that real quick um let's not do the call now it's okay this is a create enter anything here again create now make an edit and it's not there oh beautiful this works better than i thought this is great i love blazer i love it so much okay [Laughter] but please this is really it's well it works but in production i wouldn't do it like that maybe maybe i would use another flag or something [Music] actually i think i would use another page for for the form where we then say okay edit or or update and maybe use the url i don't know let me think about that but this is a great way for this tutorial this works this is amazing so we've got the creation here so the idea is zero and that's how we know that we want to create a new superhero but if the id is not zero then we wanna do an update and we do this with update superhero we sent the hero and again we could do it in another way as well and simply or just use the hero object here and um in in that case in the on the server side in the controller we would just grab the id from the hero object but either way it it works and now well maybe i was a bit too fast maybe it doesn't work but let's see i want this stuff to be rebuilt now it's rebuilding great okay let's make this test now tony stark and i forget to set the hero name it was created and now i want to add or let's say i want to edit bruce first and now i want to edit tony and i want to add the hero name now submit and we see that it was making something there's a put call with superhero 3 and we get them back but the hero name is still null now this is interesting [Music] this is interesting and really sad update super here we got the hero here with the id i don't know [Music] hmm let's have another look in the edit superhero again update hero [Music] well we we locked the hero so this is definitely reset this and this should be sent to the servers actually we get the hero here this is what we sent to the okay maybe we have to debug this let's stop this and now in the superhero controller i set it set a breakpoint and start this now that way because when we use the run button we can debug this thing [Music] let me keep that open you see the part is different now go to superheroes hit edit batman 2 hit submit and we are here says batman 2 ideas 2 this is also the id2 so actually ok but it's not uh i didn't do the update jesus so yeah i of course have to reset the uh the object in the list so what we can do is use the index off i think so let me just try this index would you be heroes index off and then db hero and then heroes index is hero let's save this and restart this thing [Music] and i closed chrome so somehow okay let's try this again there it is superheroes edit batman 2 submit now it works great and batman is now part of oh of course uh we have to change that as well but maybe i leave this up to you what do you think okay first let's stop this and run this again with the console and let's have a quick look is there a quick way to fix this in the edit when we go to the edit superhero comic id oh yeah maybe maybe on initialization get comics and then we say comic id comic id is hero comic id should be it already all right let's open the console again superheroes oh comic is now i don't know what maybe let's just initialize it come on give me the object this is a new comic and the comic id by default is one save that again it's rebuilding and now we have no error anymore marvel is the default let's hit edit and this is not working [Music] um yeah it's not on initialization maybe on parameters parameters set i'm not sure if this is an async one yep like that it's rebuilding nice isn't that crazy okay nice so this now works as well we say batman 2 and we see batman 2 here and we can also say batman again [Music] i can edit this one edit this one [Music] show them still of course and can we also say tony stark oh let's try it like that iron man hit return there it is oh there's a typo so let's hit edit now tony stark submit nice one thing just to make this a bit better in terms of the usability uh create a new hero or not hr h3 edit and then we say hero hero name if yeah at [Music] we use the id is null then we create a new hero and in the else case we edit the hero create a new hero edit batman edit spider-man because the thing is or maybe we should add a create button but that's not really necessary now i would just initialize this hero object then this property with a new hero but let's say we have tony stark again here with iron man hit submit and this is still the creation right so you see this would not be an update and that's why i wanted to add this so we see that this is really still the state where we want to create a new hero but when we now click edit we see okay we we edit the hero now well all right only deleting a superhero is left so let's do this real quick this should really be quick and actually let's copy this one again the request method is delete with an id we call this method delete we only need the id again we check if the id does actually exist and in this case now we say db uh heroes actually heroes remove and here we can add the db hero like that and we again return all the heroes and that's already it for the controller and again we add another method in the interface call it delete superhero with an i d implement this stuff real quick where is it here it is implement interface uh where is it here it is and we call what do we call we call we call we call delete async really okay with this url and what's the problem here the async keyword of course okay and this thing returns an http response message read from jason async all right and now in the edit hero that's not true in the superheroes again the last column delete delete delete there it is delete hero the method now delete hero and here we just say superhero service delete superhero id and that's it i think maybe i forgot something i don't know and let's try to rebuild this okay i got the delete button hit delete and it's gone jesus that was quick right oh my god yeah that's the only one left nice okay this works this seems to work let's try to add another one for the last time so the deletion works get works and now we add one and maybe let's add bruce wayne again batman dc submit he's here and now we can did i did i select dc submit no i didn't okay so delete this one can edit this you can say this is marvel or dc it's changed and of course we can display the single heroes as well nice okay now let me let me do one last thing i want to commit this to github so you will be able to to get the complete code create git repository um let's call this blazing super heroes that's nice okay uh not private should be on github and then let's create and push and this should be it then okay that's it maybe it was a bit confusing some errors happened some things i did not know and and i had to to look them up but i still hope that you are kind of satisfied with this video and you learned something if so i would really appreciate it if you hit the like button maybe even subscribe to my channel this really does make a difference and it would mean a lot to me maybe you also want to subscribe to my newsletter in in this case you would get information like these here in your inbox and you would be notified about upcoming courses or course updates currently i'm working on an e-commerce course a really big comprehensive e-commerce course similar to the e-commerce service to the jesus it's late e-commerce series on the youtube channel on my youtube channel here but either way maybe you just want to subscribe i'd really really appreciate it and i i won't spam you i promise i really just write rarely an email actually maybe once a month but apart from that thank you so much to all my supporters who bought me a coffee and maybe you want to support me too as you can see here really need this and that's the only way i can do tutorials like that and the last thing i can say you see the thumbnail in the back maybe if you want to dive deep into blazer web assembly then you want to join my blazer web assembly full stack boot camp and in this case you just have to check out the link in the video description in this bootcamp we create a classic online browser game with a json web token authentication so users can register they can build an army of units of fighters and then fight against other users climb the leaderboard and become the best of them all so maybe you want to check it out there's also a two hour preview here on my channel check out the info card or you already want to enroll i would really appreciate that of course and then check out the link in the video description all right and now this should be it that that was over two hours uh longer than i expected and now it's time to go to bed okay and please please feedback feedback this was really unprepared no script nothing at all i just thought maybe i would do a video that is kind of live and this really was kind of live and yeah now i can just say like jesus christ i can just say thank you very much for watching i see you next time take care you

Channel: Patrick God

Views: 12,641

Rating: 4.9699998 out of 5

Keywords:

Id: 14H9FsD3IVI

Length: 129min 54sec (7794 seconds)

Published: Tue Jun 22 2021