CRUD with Blazor in .NET 7 🔥

for this.net 7 Blazer crud tutorial I created an asp.net core hosted application meaning Blazer web assembly for the client a.net 7 web API for the server and the shared project for our model we will grab products from a SQL Server database using Entity framework we will also create products update them and delete them so all collaborations are covered now let's focus on the clients so now the first step already we can do is create a new page called products where we want to see all our products and well get them read them from the database so in our Pages folder we right click and then go to add and then razor component and we call this thing simply products and since this is a page we can also add our directive here page and this well should be the URL then simply products and for now let's just leave it at that we can also add a new nav item in here in our shared folder and then nav menu and we then just copy this thing here for instance and then again the route is now products and maybe we can just choose another icon here and here we also right products of course and with that we already got our products page Quick Test app is running and here's our products page wonderful and now the very next step already is to create a service at least I would like to do it that way because with that we can then inject a service here in the products page and make HTTP requests or web service calls to our controller here in the server project for that similar to the service project here we also created services and then product service folder so right click the client project and then a new folder services and then in here it's a product a service like that and in here now we add an interface so a new item interface I product service and then implementation class which is simply a new class called Product service and this thing here implements the I product service so now real quick we can what you can already do is add it here to the to our Imports eraser file so we do not have to use the complete namespace when we later inject this service so we add add using and then Blazer crop.net7 client services product service and what we also have to do is we can register this thing here in the program CS so this is part of the magic of dependency injection when we now hear say Builder services and then add scoped similar to the HTTP client here actually but what we want to do here now is in angle brackets we say whenever something someone whatever it is wants to inject the i product service then we want to use this implementation class the product service if you don't know it already you could also create a product service too for instance and in this case then we say if someone wants to inject the iproduct service here this thing then we want to use the i product service 2 instead of the product service here and with that you do not have to change it anywhere you you wanna or you're going to use this product service I hope this makes things a bit more clearer all right so now the iproduct service interface now in here what we need is well first the products because we want to access then the the products from the service on our products page actually and then we need our Crut methods well this would be a method to get all the products then a method to get one single product by an ID and and then create a product update a product and delete a product and when we have a look here in our interface of the server this is quite similar we have get products single one and so on so let's also do it like that but first we need our property which is a list of products and in here now we also at the using directive and real quick this is how a product looks like right we have an ID a title a category and then a price so really really really really simple if little commercial here you want to go really really deep I've got an e-commerce course with a Blazer webassembly so maybe this is something for you thank you very much for considering and now here our products property we add together and the setter and this is everything for that but let me just stop the application because we want to write some more codes before uh we we have a look again so now we do not see the this quickly lines here alright so now the method actually can be done in the very next line so get products would be the method to get all the products then we have a method to get a specific product this thing could be null so we return this is the only method where we return a product and then we call this get product by i d and well we need an ID here as a parameter and then the last ones or the next ones create products with an actual product as a parameter we're not using a data transfer object here just the the model so we could do this a bit differently of course but I hope for this quick tutorial here on YouTube this is enough then we need the update product method intellisense this was a good suggestion but I want to do it a bit differently here I also want to use the ID so we could actually use the the model and then take the ID from there this is actually up to you but um I think this is a better practice to actually add the ID here as a parameter and the last one that's correct we need a delete product method with an ID so let's just save that and now here we add or we enter when we enter we hit Ctrl and period and here we just say Implement interface and we remove the exception here and here and after that we are actually or we can actually implement the methods one more thing we've got this warning here this is not nice so let's change that real quick and initialize this thing with a new empty list products all right and now the very first method I would like to implement is the get products method here because this is maybe the simplest one most simple one is it simplest most simple I don't know please tell me that in the comments and for that we wanna make an HTTP call right so we have to inject the HTTP client here so we go back up and in here with ctor hit tab twice we've got our Constructor and now in here we can inject the HTTP client so HTTP client it is let's call this HTTP and again with control and period or the the light bulb on the left here we open the Quick Fix menu and we create this field here and I would like to add the underscore and I know you can configure this in Visual Studio but somehow with every update I am losing this configuration so I'm too lazy to do this again and again and again and I think this is totally sufficient here all right long story short let's now implement the get products method and this is rather simple we get a result from that method here which is a weight please note async keyword keyword was added automatically here and then we say HTTP so our HTTP client now and then get from Json async because we are getting a Json object and we want to turn this into a list of products so lists products and the routes is API products all right so how do I know that well let's have a look in our product controller here of our server project and in here you see the route okay so it is API forward slash and then in Brackets controller so this convention means that we want to use the name of this controller and that's it all right and here it is our get products method we inject the product service and in our product service then the where is it the get products method it just accesses the data context of Entity framework if you don't know that please bear with me here I'm going into more details and other videos about energy framework so here I really want to focus on Blazer and with that context then we can access the products and then we turn this into a list and as you can see we return a list of products and up here in our Constructor we inject the data context okay but again I really want to focus on Blazer on in this tutorial so this is how it's actually already done but this result could be null so if the result is not now we say products is now our results okay this should be it and to test that now let's go back to our products page here the products Razer file real quick the net Web Academy is now open for enrollment but only for two weeks and spots are limited so if you want to join this four to six week program where you pretty much learn everything you need to land a job in the.net web development World speaking of web apis Entity framework covers migration SQL Server Blazer webassembly gits Azure what not then please check out the link in the video description below because with that link you get a huge discount on this program and you get also Early Access as soon as a new chapter has been uploaded and you get also access to the community of the.net Web Academy so please check out the link thank you very much for considering and now back to the tutorial so now here we can actually inject the product service with at injects and now I product service see I don't have to write the complete namespace I would have to do that if I would not use uh or if I would not have added this using here see this not known now but with that it works and we call this product service and now let's just display the products in a simple table so we create a table here class is also table so it looks a bit bit nicer and this is actually from bootstrap this this CSS class so don't worry about that if you're using the default template here there's now also an empty Blazer web assembly template which is really nice so there is no bootstrap in there no uh no no no no layout nothing at all so if you really want to create a Blazer project from scratch this is something to have a look into I guess so now for the header I just want to show the or display the title the category the price and then one more column for a button to edit this product so this button then will lead to to navigating the user to another page but we are doing that in a minute first the body here so T body then well in here now we want to access the products from the product service remember here in the product service we've got these products here this is an empty list in the beginning but we will call the get products method on initialization of this component here and then the products will be filled and then we can use actually for each two will display all of the products all right so now with bar products in product service products you're getting these products so many products and in here then we can say table row and then products title and then products category product price all right now regarding the button let me do something like that I've got the button here we also add a class button button primary again this is bootstrap and now on click we will call a method with a parameter so we have to use a Lambda expression here looks like that and I want to call this method your product we're implementing this in a second and just providing the ID of the product Here and Now how does this look well let's just use an icon here open iconic icon and then pencil it is alright so now the show product method of course now here void show products and ID and what I want to do here is I want to navigate the user to another page which we will create in a minute again and for that we have to inject one more thing and this is the navigation manager so up here inject navigation manager navigation manager and now down here we can use this thing navigation manager there it is navigate to and this then will be called well let's just call it products and we also need the ID here all right so this is our show product method not page last thing now before we can test this I already told you I want to get all the products on initialization so we're using a lifecycle method here we can actually have a look with override and then it suggests on after render on initialized and on parameter set and we want to use on initialized async here we do not need a parameter here in this page and we do not want to wait until everything is rendered so we really can use uninitialized so whenever this component is initialized for the first time what we want to do is we want to call awaits and then again async keyboard has been added automatically product service and then get products all right so this should be it Let's see we run this one more time reloading and there it is great and also in the console or the network tab let me just reload this one more time and there it is this is our actual call Api product and this is now our response exactly what we found in the database and here all the products are displayed and when I now try to edit one of course I get something like sorry there's nothing at this address because we haven't created this component yet but let's do this next so maybe we can start with the service first get product by ID would be the method that we want to use here so whenever a user enters or accesses the products page product and then with a certain ID then we want to make another call to the web service and get this specific product right so for that again bar results and then here we say await and then http get async now for change because it could be the case that the result is null maybe we are providing an ID that doesn't exist and in this case the web service would return null and not actually a Json uh object and in this case then this would lead to an error to an exception it looks really ugly so what we first do is we use get async stay with me here the URL is Now API products and then the i d all right and now if the result status codes is http status codes let me just add the using directive like that and then okay so that would be a status code 200 okay and only then in this case we say return await and then results we access the content and then we can say read from Json async products and let me actually return this and in the case this thing is actually now then we just return now all right so this is the big difference here and and just have a look here on the server side in the get product by ID you can see it here we either return a product or null right so this could actually be the case and this is what the find method actually does down here you can see if no entity is found then null is returned all right so with that I just want to wanna prevent this ugly error somehow all right of course there are better ways I guess but again for this tutorial I think this is totally sufficient now the next step again the actual page so let's just create another razor component and now let's simply call this product again this is a page so we add the page directive actually we will add two because this one should be used if no ID is provided meaning a user wants to create a new product all right so with that then we will well initialize this thing with an empty product we've got no IDE we do not want to access something or do not want to read an a product from the database so that would be this page and then or this route this URL and then we can of course not a page Jesus we can add another one product and then uh this shall be an ID and we can also say that this should be an integer all right now to work with all that we also again need the product service and the navigation manager actually so inject i product service product service and in here now inject nav almost navigation manager as always it's late navigation manager all right and now first let's move to the code block real quick because we are using a parameter here so we have to add this parameter in our code block as well and this is a property actually nullable integer called ID all right so this thing here and here now we add the attribute parameter so with that now we know that this is actually a parameter and regarding the the actual product that is used here we do something like that this is a nullable product and I think this is the wrong yeah this is the type from the page could have used another name of course but we can also fix it like that so blazercraft.net7 shared product this is the correct model let me just copy this and this product now will be initialized as a new product with a title like new there's a new products all right something like that let me just put this in the new line all right so we've got another product but we initialized this with a product actually and we have to give this thing a title because I'm using the new required keyboard here in C sharp 11 where you can well tell the compiler in essence that we wanna use a string which is not nullable but it has to be provided here if I would remove this thing then I get this warning here don't like that so let me just use this keyword required all right so this just as a side note and now we can actually already also implement the other lifecycle method and in this case this would be the on parameters set method so overwrite and then on a parameter set async why this thing maybe you know it already we are using parameters here right so whenever this parameter then is set or as soon as this thing is set we want to do something with that so first we check if the ID is not null all right then what you want to do first the result is weight and then geez I hate this weight and then product service get product by ID and this now is our ID we are parsing this thing because it is another bill and now if this result again is not null then we say the products is actually the result and otherwise we use the navigation manager to navigate to the products page all right so this may look a bit strange in the beginning but what we actually want to do here is the idea is not now right so that's fine but now we have to check do we actually get a product from that if so we just set the product everything's great but if not then this means that an ID was provided that doesn't really exist the product does not exist so we just say we navigate to this URL now without an ID and this then means that we want to create a brand new product all right so that's that no error message or anything again there are better ways to do this I'm pretty sure about that please write your suggestion in the comments feel free to do that we'd love to read your IDs ideas IDs again it's late and uh now well this is the idea in essence right and now let's just continue with the HTML part up here so first again we check for the ID not the idea the ID if the ID is now in this case again we want to create a new product so H3 create a new product maybe we can also change the page title I mean why not got this with I think blazer.net6 so create create a new products all right and if we got an ID then we say edit and then products title and also the same thing here and with that warning I'm actually seeing that this is total nonsense this thing will not be null this is why we also do all these this other stuff here all right and now this this looks correct uh yeah of course something seems to be not correct we are actually not done anyways because we need a form to make some changes but we can actually test this still uh with the title here right so let's just run this application there we are and now let's just edit the hitch I guess yep it works oh product this is interesting let me just remove this this works and we can go back works as well Ready Player one great what about for instance id5 does not exist create a new product see that and what about ID3 edit Back to the Future and here we create a new product all right seems to work so now let's add some more changes again I am stopping the application to get rid of the warnings that will come maybe so now the next thing is we want to actually create or update the product so we need an edit form to be able to do that so let's just create one edit form all right and now our model for this edit form is the products and we need a new method so on submit we call a method called handle submit and inside the edit form we just add some input text fields and an input number field for the title the category and the price let's also add a label so this would look like that you've got a div with a label for something that is called title all right and here now we've got the built-in component input text with the ID title so this matches with the label and then bind value right so using data binding here we're binding the title of the products and the class for this thing is form control again Blazer stuff and let me just actually close it like that so okay so this looks good so now time for copy paste errors so now we need the category category all right and also here the category great and the last thing already is the price so again price price price and this shall be a number field actually and here as well the price great okay so with that we should get all the data from our product and now the next thing well we can actually already create or add buttons so this will be a bit mixed now the create update and delete functions so first a button for submit so either creating or updating a product so button type is then submit class button button primary and now we will use this form to either create or update a product so we would have to change the text of the button somehow of course we can always call this thing save for instance but what about creates new product or update this product right so maybe you want to be a bit more specific here so what I want to do here is uh just use a string variable here called button text and then in the code block we will decide how this string how this thing will then look like so uh let's let's just do this real quick here down here in the code block we add a string button text and first this is an empty string all right and now actually on initialization we set this text so now we call the overwriter we use the override on initialize no async this time and in here we just say button text is if the ID is null then save new products maybe capital n and otherwise we say updates products all right so now the error should be gone and finally the handle submit method so down here we just say async task handle submit and again we decide is the ID null or not and if it is then we want to create a new product and otherwise we want to update a product so here now again we check if ID is null we call a weight product service create products products else missing the semicolon here and else we call a weights product service updates products with again v i d and also the product and by the way I am already hearing the voices why are you not using these curly braces for the scope I know this is not the best practice that is a better practice really to use these curly braces every time even if we actually do not really need them what is the problem here now all right this looks better um yeah sometimes I'm just lazy when I'm doing this tutorial so creating these tutorials but in a real real world applications I would actually really use the curly braces every single time uh you you you have the the option to not use them it is better for the readability and the other developers will thank you I think what is your opinion tell me that in the comments would be really interesting to read that thanks okay so we've got the handle submit method we're calling the create product method from the service the update product Service as I said this is now a bit more than just one step after the other so now let's just have a look we can actually test this or let's just add one more thing because creating a new product the user shouldn't uh have to add or enter the URL to create a new product in in the in the address bar so maybe we just add a button real quick so down here in our products razor components we add this button button button primary again on click we call create new product we'll add this method in a minute of course and let's just call this also create new products like that and now down here create products and this is then navigation manager navigate to Simply product page all right let's see of course product service is not implemented yet we will do this in a minute but let's just see if this page Yep this worked somehow let me just remove this angle bracket here okay hot reload edits best we see the data okay this is not nice maybe we can change that as well yeah let me just add something like that okay nice oh this is so fast I love this Blazer is getting better and better this is amazing all right so we've got the products list we can actually change a product and see the data here and we see the update product right so this kind of works and we can also say create a new product and then we see new products category price and save new products okay this looks great so now it's time to actually implement this stuff in the service so maybe we can start with the create product method so what we want to do is again a weight and then HTTP and now it's post as Jason async API products product by the way it's not automatically post of course I have implemented it that way so here in the product controller you can see for get products I'm using the get request method same here for get product by ID with the actual route with the ID in the route then post for create products put with an ID for updating and the delete request method for deleting a product all right so to use the post method then we use post as Json async in this case meaning we are sending this product through the body of our call to the service and when this is done I actually just want to use the navigation manager which is not injected yet ha navigation manager navigation manager create and where is it there it is create and assign the fields and also here and we need oh almost manager manager and already here right I think so navigation manager I hope so all right so now the navigation manager with Navy oh Jesus okay now it's there okay virtual city was a bit slow navigate come on navigation manager with our beloved don't know what's going on here some navigation manager there it is all right navigate to uh products all right so this is what I actually want to do here so we create the product and then navigate back to the products list so we see the actual result because here then on initialization again we are receiving getting all the products from the service all right and really similar now the let me just let me not copy and paste it here because of the potential errors so here now we call a weight http put as Json async and the URL here now is API product the products products ID [Music] and then product by the way the uh the code for the complete project of course is on GitHub just have a look in the video description but please do not stop the video now please keep watching and maybe have a look at the complete code later thank you navigate to again products all right so this should be yeah of course something is not correct here but maybe maybe that's not true maybe it works anyways let's just see not sure if this is the correct and restarted application [Music] now we should be there let me change this thing here for instance Ready Player one is an already player two with the price change update Yep this worked and now let's have a look in the database right click in secret server management Studio execute SQL and there it is ready player two right this is great and now maybe we can add a new product finding 84 for instance books price 4.99 save and there it is 1984 books 4.99 can have a look here and here is the new book and if you're wondering why the ID is nine well I tested this already a couple of times and created new books or products deleted them but SQL Server will still continue counting the IDS with the uh if there would be the other products I think you get the idea right okay so this is why the ID here is nine all right so now only one thing is left and this is deleting a product so let's go back to visual studio and let's fix this real quick here in the service this shall be VAR results and then wait http and then delete async with API product and then the ID here and again navigate to products all right and now we have to change the client of course well the components I mean so in the product not CS product Razer we now need a button to well delete delete this product so again we add a button here now make sure to add the type button otherwise this would also be a submit button so that would not be really great and uh regarding the color let's choose a red color here so button danger it is and now on click recall the method delete product I know it's missing give me a minute and we also call this delete products all right now of course I should not have saved this see this is why I'm stopping the application somehow sometimes all right so now the delete product method real quick async task delete products and in here now this shall be awaits product service delete products with the products ID all right delete product and this is the button save everything let's have a quick look there we are we created 1984 so maybe we see our delete product let's just delete it it is gone and also here it's gone and now if you wanna dive deep into Blazer and maybe create an e-commerce application then just click on this video here on the screen for almost four hour preview of the complete Blazer e-commerce course

Channel: Patrick God

Views: 25,511

Keywords:

Id: Jifz9vSSKM4

Length: 43min 35sec (2615 seconds)

Published: Tue Jan 17 2023