CRUD operations with the HttpClient - Blazor Tutorial

- [Instructor] There are four basic data operations. These are create, read, update, or delete, or CRUD for short. These database operations can be used when making a request to an API. The GET method is used for reading data from a resource. For creating a new resource, the POST method is used. The PUT method performs a full update on a resource. There is an alternative to use the PATCH method to perform a partial update. Finally, the DELETE method is responsible for deleting a resource. In the ASP.NET Core web app, there are a number of API endpoints within the shopping cart controller. Any method that is reading data uses the HttpGet attribute. This ensures that this endpoint will only be rendered when a GET request is used as part of the API request. Examples of this are reading the items of the shopping cart and getting the number of items that have been added. When adding a product to the cart, the POST method has to be used as part of the request and this is shown with the HttpPost attribute. For updating the quantity of a product in the cart, the PUT method has to be used. The HttpPut attribute ensures that this happens. There is also the option to use the HttpPatch attribute if a partial update is happening. Finally, deleting a product has the HttpDelete attribute. This ensures that the delete method is used in the HTTP request. On the product listing, there is an option to add a product to the shopping cart. However, adding it to the cart doesn't work. The shopping cart is still empty. The code for this happens in the product listing item Razor component. The button has an on click event handler that is pointed to the AddToCartAsync method. It's within this method where the API call needs to take place to add the item to the cart. There is a HasProductInCart property. This is set when the parameters are set and makes an API call to see if this product has been added to the cart. An if statement is wrapped around this property. If it has not been added, an API call needs to be made using the POST method. The HttpClient instance has been injected into the component. This will be used to make the API call. Set the await keyword and call the HttpClient instance. Inside there, a method called PostAsJsonAsync exists. Let's use that. The first parameter expects the request URI which is /api/shopping-cart. Looking at the shopping cart controller, it expects a ShoppingCartAddModel instance. Create a new instance of ShoppingCartAddModel which will indicate the parameters sent as part of the API request. For the ProductSku property, take the product instance and use the Sku property within it. For the quantity, the Quantity property is bound to the Quantity text box. Add that in by calling Quantity or specifying one if it's null. For updating, copy the code that is used for adding a product to the cart. Paste that in, but instead of using PostAsJsonAsync, use the PutAsJsonAsync method. Then update the HasProductInCart property. To do that, copy it from the OnParam to SetAsync method and paste it underneath where the product is created or updated. On the product listing page, adding a product now adds it to the cart. If the quantity is increased for that product, it's also updating the quantity in the cart. When clicking through to a product and adding it to the cart, it's not working. Let's copy the code from the ProductListing component and paste it into the ProductDetails component. The quantity is taken from a ProductAddToCartModel instance, so that needs to be prepended, so the compile error disappears. Clicking through to a product details page, adding four of the item to the cart adds it successfully. If four more are added, it increases the quantity to eight. When clicking on the Delete button, it removes it from the cart. However, clicking to the homepage and then clicking back to the cart page brings the item back. It hasn't removed the item properly from the cart when the delete link has been pressed. This code appears in ShoppingCartItem.razor. Once again, the HttpClient instance is being injected but it's not being used to delete the product. To fix that, set the awake keyword, code in the httpClient instance and the DeleteAsync method. For this, only one parameter needs to be added which is the request URI. Set string.format and then set the URI as /api/shopping-cart slash zero. Inside the DeleteProduct method endpoint, it's expecting a Sku parameter. That can be added by calling the item instance. Inside that, it contains the Product property which in turn contains a Sku property. This can be used as part of the request. When adding a product to the shopping cart, deleting it removes it from the cart, and by clicking on the home link and then back to the cart, the product still doesn't appear in the cart. As a result, it means we have successfully used the CRUD methods to make API requests in Blazor WebAssembly.