Blazor Server Full CRUD Operations From Scratch Incl. EF Core

hey there and welcome to the Cod wrinkles Channel recently we had a lot of discussions on our members Discord Channel regarding Blazer server and how we can Implement full crowd operations the right way now I have several different videos covering this idea of fusing n framew core and Blazer server the right way and once again I emphasize this there is a right way to actually do this however in those videos I don't walk through a full crowd implementation and that's why in this one I will make it very short and straight to the object and we will Implement full crowd operations in Blazer server using Entity framework cor and of course SQL Server so here I have really the Blazer server template and we'll start implementing crowd operations on a concept of product so let's start by adding a new class here and we'll call this class product obviously for our use case it will be a very simple product implementation which is which will have an IDE for Entity framework core then a string name which is required and a price which is a decimal the next thing would be to implement a d context for this specific application now if we go to dependencies and manage new get packages you will see that I have already installed all the packages that we need from Entity framework core for everything to work and we have installed the Microsoft Entity framework core we have installed Microsoft Entity framework core SQL Server so that we are able to connect to an SQL server and the tool so that we are able to perform migrations and update the database so now the only thing that we need to do is to come here in this folder and add here a new class and we'll call this class obviously appdb context in this case and it will inherit DB context now my GitHub compilot instance already implements me everything that I need to have a functional DB context in this case to wire everything up with a DI container in asp.net core let's move back to our program.cs file and here the first thing that I want to do is simply get the connection string here from my configuration that I have in app settings tojson I have already provided a connection string there so if we can take a look here you can see that I have connection strings and the connection string that is named default next I can simply add DB context Factory and I will use the use SQL server and provide the connection string and here is the very important point or the first very important Point throughout this video when you use in Blazer server Entity framework or DB context you need to always use the add DB context Factory method and we will see a little bit later exactly how we can reuse this for instance in a service but you can do exactly the same thing in the mediator Handler now if you want to find out more why the regular eddb context doesn't work or it's not a good idea to have it or to use it in a Blazer server application I have created a dedicated video on that which is a 30 minutes Deep dive only in that specific topic so I will leave the link to the video in the description of this one and you should go there and check check out more information about that specific topic now that we are one step further let's add a new class here and we'll call this class product service because we want to create a service that helps us to work with products now the very first thing that I want to do in my product service is I want to create a private field read only obviously for idb context Factory of FDB context and we will see just in a few seconds how we will use that but since we have the private field let's also add a Constructor and in the Constructor we will get from the DI container an instance of idb context Factory not an instance of the regular DB context now let's Implement some methods that will allow us to perform crowd operations on the product so the first one that I want to use is this get all products acing and just take a look here on how do we use the DB context Factory so the key point we're using Entity framework with blazer server is to use the factory create an instance of the DB context right when you when you need it and make sure that you wrap it in a using statement so that it will be disposed automatically or immediately when you don't use it anymore and this is the procedure that we will use for really all the methods that we'll Implement for this survey the next method that I want to implement is the get product by ID method and this does exactly the same thing it uses the DB context Factory to create a new instance of the DB context and then it regularly gets the product based on the ID and since we WRA this in a using it means that the context will be disposed right when we don't need it anymore for the update product the logic is a little bit more complicated but it's really nothing to fear of once again we use the DB context Factory to create the instance of the DB context then we check if we have the existing product and if we have it then we just assign a new name and a new price based on the update we save the changes with the context and return the existing product if we don't find an existing product we will just return null now let's Implement also a method for deleting a product and in this case we just want to get a product by ID and if we find a product we just remove it and save the changes of the context and that would be all and last but not least another method that we want to implement is for adding a product to our database and in this case once again we create the instance of the DP context we add the product we save the changes and then we return return the product it's important to return the product because when we return it or after we have saved the change this product will also have the ID that was generated by the database last but not least let's also move back here to the program.cs file and also add this product Service as a scop service to our di container so that we can use it in our Blazer components cool and now we are able to move on to implement the real Blazer components that will handle these crowd operations so what I'll do here is I will add a new folder this time and I will call this folder product now the way I want want to organize or I like to organize my components is to always use folders that describe a certain feature or a certain area of the application and in that folder I will place all the related components at this point there is one important thing that I would like to mention in a lot of different tutorials or videos even on the Microsoft learning resources you will find this idea that for adding a component or adding a product or adding a resource or editing the resource you will have a routable component to that however if you take a look at Facebook or other very big applications whenever you perform this type of crowd operations or products or or on user profiles you will notice that you never get a routable component you are never routed to a certain component this gives certain improvements on the ux level and that's why what I would like to do is I would like to have overlays for edit product and for adding a product that can be triggered from different parts of the application for instance from a product list where I want to uh list the product details and from the product details I want to be able to expand an overlay for editing the the product and the order that I like to create my components usually for crowd operations is first I would like to create my edit component so I'll make sure that I choose here razor component and on the name I want to have it as edit product now let's get rid of this title because we don't really need anymore and the first thing that I want to do in my component is to inject the product service that we have available in the DI container next I will add some markup that will contain basically my edit profile component and right now we have a lot of Errors because we don't have any parameters or properties in our code behind part but we will sort this out just in a few seconds now the next thing that I want to do is because I said I want this edit product component to be actually an overlay that can be closed if I don't want to edit the product anymore and that will also be closed automatically when the product was successfully updated so therefore to create an overlay what I will do here is I will rightclick this edit product component and I will click here on this create isolated CSS now this option is by default not available in Visual Studio I have installed an extensions for Blazer which is called Blaze developed by Jimmy angstrom and this extension is very powerful one of the features that it can do for instance is to just create for yourself isolated CSS files or isolated JavaScript files if you need them now in the CSS file I want to place here some things like okay what I want my edit form to look like and what the overlay actually is now let's go back to the component itself and in the code behind part let's have first a parameter here for this product and this parameter will be used by the parent component to provide us the product that needs to be updated now here you will see once again different approaches because in some cases you will see that the parent component just provides the ID and then what we would have to do in these edit profile components is we would need to go to the database and get that specific product first now the reason I prefer to provide the entire product as a parameter is because I want to avoid unnecessary database calls another parameter that we will need is one that will hold the current state of the overlay like the if the overlay is visible or if the overlay is not visible and now comes another very trick but very important part when you work with Blazer and especially if you work with this type of overlays now the idea is that in the parent component we will have this child component and in the parent component this child component as we will see just in a short amount of time will be wrapped in an if so if the overlay should be visible so if a condition is true then we want to display that specific overlay now this means that besides simply just passing the state of this is overly visible there's another thing that we need to do we need need a two-way binding of communication between the parameter that is provided from the parent component so the reason why we need it is because when in the parent component we will change the state of that is overlay visible for instance variable or property so that we show the overlay but then in the child component when we finish the update we want to close that overlay and we want the parent component to be notified automatically that the overlay can be now closed so this is why we need this type of two-way parameter binding now the trick to use these two-way binding of parameters is that we will also need here an event call back of BU that we'll call is overlay visible change and we will see just in a few seconds when when we'll go to another component to the parent component for this one what the second part of the trick is when it comes to to these two-way binding of parameters the next thing that I want to do here in this component I would like to have here save product acing and this method save product acing will perform an update on the product so as you will see we will use the product service to update the product and if the update is not null we will simply wait and say hey is overly visible changed and invoke this with false and this will actually trigger the information so that also in the parent component the parameter or the property that controls the visibility of the overlay will automat Ally also get this fulse value and the overlay will automatically close now if we take a better look we see that here we have also a button that will just simply close the overlay if we change our might and if we don't want to edit the product anymore so the only thing that we need to do is also Implement a method for that specific part which will be this close overlay async and once again what we'll do here is we will use the ease overlay visible changed and we will invoke this and the parent component will automatically set its own value for the property that controls this overlay to false so the overlay will disappear and that's pretty much it for this edit product component now let's add here a new component and this time we'll call this component add product so this component will be responsible for adding a new product to our database just like we did previously the first thing that I want to do here is I would like to inject this product service and I would also like to create here a dedicated or or an isolated CSS file for this specific component because also this one will actually be an overlay so let's save that and we would be okay now the code for the component would be something similar to this once again we have a lot of Errors because we need to implement all the specific methods and we also need to implement all the specific properties to which we actually want to bind and by the way there is one other thing that I want to mention here usually when when you use when you work with Blazer no matter if Blazer server or Blazer web assembly you would use for forms the edit form component that is provided directly by Blazer now that edit form component is probably worth the video on itself because there's a lot to talk about that but for brevity and simplicity I have just used Here regular HTML and on click events to actually handle form submission obviously if you want to do form validation and stuff like that you should probably better use use the edit form component because it comes out of the box with with a lot of support for usual stuff that you might need to do when working with forbs now when it comes to the code behind part of our razor component you see that we want to bind here to product name and product price so the thing is that we right now want to add a new product but we don't have it already so in that case what I really prefer to do is just use here this type of fields or create even a view model for this specific form of adding a new new product the reason why I would like to do this because when you create a new product for instance we have in our case that name that it is required so when you create a new instance of this specific product you need to provide also a name to it but we cannot simply just create a new product here because we don't know the name so far so this is why I prefer to have the view model then you can perform some type of validation or whatever type of business logic you might need to do to see that all the data that was inserted is correct and only then you create a new instance of that specific product then we need some event callbacks now the first event call back that we will have here is this product added and this event call back will be invoked when a product will successfully added via our product service and the reason why we need to do this is because when we add the product we will need to automatically also update the list of the products like the product list and in that case we need to provide basically the new the newly created product to our list component that we will create shortly the second parameter is this is overlay visible that will control the visibility of the overlay and is we as we did previously so that we have a two-way binding between the parent and the child component on this parameter we need to also provide this overlay is the is overlay visible changed event callback of bull that will automatically close the overlay and will also notify the parent that the overlay needs to be closed the next thing that we'll need to implement is a method to add the product and here this add new product aing we just create the new product as said earlier basically here you would perform some validation before you you do that and make sure that you have all the required data and then you create a new instance of the product when you have all the specific data available from your form submission and then we use the product service that we have injected right at the top and add product Asing so that the product is newly added and what do we do once the product is added it means that it returns a product that will already also have the ID generated by EF core and therefore we simply use this product eded call back and invoke it with the newly created product the parent component right now will be able to get this information or to get the newly created product and we'll see that we will be able to just add it to the product list and the second one is we want to also notify the apparent that hey the overlay visibility should be changed and set to false the last thing that we need to implement here is a method to close the overlay if I change my mind and I don't want to add a product anymore I just want to close the overlay and that's what we do here we just use this is overlay visible change invoke it and set the value to false and we're also done with this component now the next component that I would like to create is let's click here add razor component and I would like to add the product list component so let's just add this component here now right at the top I would like to also inject the product service but I would also like to inject the navigation manager we will need the navigation manager so that we have a way to actually navigate to The View details of one specific product and also this page should be routable so that we can access it via navigation and it should be under this URL of product so when we click on products we should see a list of all the available products here we'll have to add a little bit more markup so first of all I would like to have a title which will be available products but I would also like to have a button before the grid of the product list itself that would allow me to click it and when I click it I want to be able to add a new product so the overlay for the add product component should appear when I click on this button and this already gives us this hint that we need to change the overlay visibility and that's the reason why why we need to communicate this information about of this visibility of the overlay between the parent which is this component and the child component which is the add product component that we have defined earlier so let's go back to the product list now the first thing that I would like to do here is also related to when I click this button and I will have a variable that will control the overlay visibility so this is why I will wrap this variable that will create just in a few seconds in this if so if add overlay visible so if it is visible only then I would like to display this add product component and here comes the second part of the trick of having this two-way binding between parameters when we use a parent component and a child component and the trick here is to not just use the is overly visible name as a parameter but use this bind syntax and this will actually create our two-way binding when it comes to communicating the change of the state state of this specific variable or property now this trick I said is it it has two parts because if we use this bind syntax and if the name of the parameter is is overly visible then Blazer will expect that in our child component we will also have a callback which is called is overly visible change which is of type event call back and in this case of bull because this property or this parameter is actually of Bull type and if you don't have this and you use the bind syntax you will get an error right when this component is rendered so this is very very important if you want to have this or if you want to use this technique of two-way binding a parameter use the bind syntax in the parent component but make sure that you will also have in the child component besides the parameter name in this case is overly visible also an event call back that is called is overly visible change so you see that it's exactly the name of the parameter that we have previously plus this word change that's very important otherwise it will not work and you will get exceptions now let's go back here to our product list the only thing that we still want to do here is since we will use a list of products we want to have a way to show different things if we have no products in the database at all so in this case if the products count is equal or less than zero I want to display these no products available but otherwise if I have at least one product in my products list then I would want to display this very very basic grid that will also use some cards and for each product we will have a certain card now coming to this code behind part we'll have first of all a private field that will hold a list of products and then we need this private bull for for controlling the overlay and if we go a little bit back here we'll see that this is is what we use actually in this bind is overly visible so this is our property our field that will control the visibility of the overlay in our parent component in this component we will also need to overwrite the own initialized asnc method because in this uninitialized asnc method we will use the product service to get all the products and then set the list of the product to our products field the problem here is that we are missing actually a close closing brace so now everything should be fine then we need a method to add a certain product which will essentially just trigger the visibility of the overlay that's what we do here we change the value of this add overlay visible to true and In This Moment basically the overlay will be displayed now in the add product component you see that we have also created an event callback that will return or send us the new product once it was created the reason why we need this callback is because we need to send this information from our child component which is this one that hey we have a new product we need to send it to the parent component because the parent component in this case our list component needs to actually add this to the product list this means that we need to implement here a method that will trigger or will be triggered when that specific callback is invoked and when the call back is invoked as it is a event call back of product we will get the new product here as an incoming parameter to the to the method now the only thing that we do here is we add the new product to our products list and in this case we need to also call the state has changed method from component base if we go back and look here at our component we see that we have a view details button that will essentially redirect us to the component that is responsible to display the product details and therefore what we need to do here is we need to implement a method for the on click event and this method will be this view details we will get the new product and the only thing that we will need to do here is use navigation manager that we have used previously or injected previously and navigate to product/ the products ID and we also have a delete product button on the grid itself so let's add a delete product method that will use this product service to delete the product and if the product is deleted afterwards we just also want to remove it from the products list and that's pretty much it with the product list component the last component that we actually need to update here or to add here in our project is the product details on the product details component we will essentially have two actions or actually one which is editing the product so let's add this new component first of all this will also be a routable page so I will have this page directive and I will say that it should be triggered when we have this products slash and here we can pass in a parameter and we can specify also the type of the parameter that we want to pass through our navigation this means that in our code behind part we will need a property which is a parameter that will have exactly the same name as the parameter that we have here in this page directive and since we are here at the code behind part I would also like to have a private field for the product itself that needs to be actually viewed and I would also like to have this bull that will control the visibility of the overlay because also the edit product component is an overlay that needs to be controlled that we need the same two B two-way binding characteristics here also we need to override the own initialized Asing method because what we need to do here is we need to get the product from the database and assign it to our product that we have here now let's add some markup to this component so first of all I want to see to check if the product is null then I want to display no such product found because this is totally an opportunity and otherwise I might get a null reference exception but if the product is not null then I just want to display a card that contains all the product information which is based on the product that we did get from the database because you can see here we have this product name and we have here this product price now the last thing that we want to control here is the visibility of the overlay so I will say that if overlay is visible then I want to add here this edit product child component I will provide the product as a parameter and just like we did previously we use this bind syntax to two-way bind or and control the visibility of the overlay the only thing that we still need to do here is to implement here a method for showing the overlay this will simply just set the overlay visibility to through and then we need a method that when we receive a new updated product basically we need to update the product in our current component so what we'll do here is on product updated which is a parameter of the child component which is an event call back we set the product to the updated version of the product before we can run this application there are just a few steps that we still need to perform because we haven't added a migration and we haven't updated the database yet so what we will have to do here is come to the package manager console and have here add migration and let's call this add product and this will add us a migration in a migrations folder that will actually Define exactly how the schema of this specific product in our database should look like so as you can see here now we are ready we have all this specific migration here now the last thing that we need to do is come back here and run update database now in my case my database is already updated because I have used the same database for preparation for this video but if you're following along you also need to run this update database in order for your database to be created and for your products table to be added to that specific database so don't miss this step it is a very important one even if I will not run it right now before we run the application there's one more short thing that I would like to do I would like to go to the nav menu that we have in the standard Blazer template and I want to add here another nav link that will direct me to our products component which will list all the avail ailable products so now let's run the application so here we are if we go here on products we will see that we will be redirected to our products component now right now I don't have any product in my database so that's why we say there's no products available because we have an we had an if condition in our component but what I can do instead is click on this add product and this will trigger the overlay to be visible and for me to see the add product component which is like this so let's add here a course name which will be C for beginners and let's here add a price here which will be $48 so let's click here on Save and you can see as you can see we the list was updated automatically with the arriving of this product now if I add a new product here and here I'll CH I'll choose mastering Blazer server here I will have I don't know 89 for this one and we'll see that we have added the product now if we go on VI details on any of the product we are in this part of the application where we can just go on edit and here for instance I want to change this to not be 48 but to be 58 and I will click on close and you can see it has been automatically updated also in the parent component now if we can go back to the product list obviously we will also have here the updated price now if you click the add product and just cancel you'll see that the overlay is closed automatically similarly if you go on view details if you click on edit but then change your mind and you don't want to implement this anymore you can just click cancel and then the overlay will be disabled last but not least one thing that we can do here is we can delete a product and as you can see the product was deled from the list but to make sure that if we rerender this component from totally scratch and get everything from the database that it was deleted from there so we just refresh the page here and you see that we have only one course here so we were able to implement all the necessary crowd operations in our application we have a view product list which is this one we have uh then view product details which are the details for only one product we can edit the product from the product details we can delete the product from our product list if you enjoy this video don't forget to hit the thumbs up button and like this video this would mean the word to me and it will also help this video to be surfaced to other potential users that may find it helpful and if you haven't subscribed to this Channel Please Subscribe and you will get a lot of different content that might be useful for you in the future if you have any question or just want to get in touch with me just head over to the comment section and leave me a comments and I would be more than happy to get in touch with you also if you want access to the source code of this video we have on COD wrinkles membership and if you subscribe as a member to code wrinkles as Ambassador or on Ambassador level all ambassadors automatically get the source code for each video after I have published it this being said thank you very much for watching and until the next time I wish you the very best

Channel: Codewrinkles

Views: 3,609

Keywords:

Id: K2wYnSG0iYo

Length: 30min 39sec (1839 seconds)

Published: Tue Nov 14 2023