CRUD Unleashed: Dominate .NET 8 Blazor with Auto Render Magic, Entity Framework Wizardry, SQL Server

hello dear friend I am glad to see you again  you're welcome to net code Hub channel where we   learn how to develop web app mobile and desktop  application with net Magics such as Blazer Mari   and Mari Blazer hybrid you can subscribe to this  channel if you want to learn more on this you can   also click on the notification icon to receive  notification as soon as I upload new video when   this video ends and you are touched with my  lecture and you want to buy me cafe that is   a hot one I'll be glad to accept it and you can  do that through a link in this video description   today we are going to look at how to perform  Crow operation and that is a create read update   and delete operations in net8 Blazer using SQL  server and using the auto render mode the auto   compris of the server and on the web assembly  render if you don't know this I have a video   done on all the rendom modes I've explained them  in the new net 8 Blazer so I'll put that under   the description so you can just go in there and  I'll watch it for yourself and I'll get to know   these render modes but we're going to use one  of these render modes here and that is the auto   as I've mentioned earlier on now what are the  objectives before I talk about the objectives   the source code of this project will be available  at the GitHub so check this video description and   I'll put the link over there now let's go to  this the objectives what are you expecting   from this video or from this lesson at the end  of watching this video you should be able to   perform the crowd operations in net a Blazer and  also you should be able to or you'll be able to   understand the new way of implementing edit for  in net8 Blazer there's a slight change here so   I'm going to teach you how to do that in net8  Blazer and also how to add the C Class library   and share among the server and on the client  projects as usual I am Frederick your lesson   facilitator so the very first thing that we're  going to do here is to create the project so   let's launch our Visual Studio 2022 preview and  we click on the new project to get the project done so we going to create a project here and  I'll click on this new project now the name of   this project I'm going to name it as demo  Blazer crowd operation with net 8 so when   you go to GitHub and try to search for that's  going to be the name for that repo so from this   filter we can just choose um is not Library  no you have to go in for Blazer and can see   we have this Blazer web app so we click on that  and that is a name that I'm going to use so if   I click next the next stage that we are in here  that is where the new things start from you can   see we have this interactivity type now Auto  here means it's going to include the server   and now the web assembly I have a video whereby I  explain detailly each of these interactivity type   starting from the n which is the static one the  server which is um communication between a web   soet through signal R connection from the server  to the client whereby all processes are done by   the server and I'll send the response to the user  okay and so the web assembly that is whereby all   the source resources of the application are being  downloaded into the client browser and that is   where the interactivity happen when I talk about  the auto it it compris of adding the server and   under the web assembly so in such case or here  the web soet is created pres is first done on   the server and now send to the client in the  process of being sending then the web assembly   also take in charge it also download all the  necessary resources and now installed on the   client browser it happens at background so by the  time that the communication is happened on top of   the Bard server Bard assembly has taken over has  cover up and anything the next communication is   going to be handled through this web assembly  that is the client itself so that's all this   and this just a Snappy of it I have a full video  done on this about 30 minutes or so yes so maybe   you can just go in there and check that one out if  you want to do that please the description it is   there waiting for you patiently okay so for now  we're going to choose this the auto because you   want application to render on both the server  and also the client as well now let's include   the sample pages whereby to have access to the  controller and all um other guys that we need   in this project for the authentication type we  leave it to n because we not talking about any   of these right so we want to maintain this  none now click on create to get this project created so if you are familiar with blazer  framework you understand what you're seeing   here here we have two projects that is the server  and now the client but if you're new to this then   in Blazer we have a new two project added that  is when you use the net8 um framework now you   can see from here that we have the client and we  have the server here now what does it do let's   say for the client if you want your application to  get downloaded and I'll install in the client uh   browser then all your components should be inside  this page folder right and all these components   must be um attributed with what interactive Auto  or interactive web assembly when you do that it   means that all the source code of this all these  resources are going to be downloaded and installed   on the client browser so that even when the person  is disconnected from the server communication can   still happen a process can still be performed  right so let's see and that is what this client   is about now the server here is going to handle  you know the server is going to handle everything   so initially when you laun this application it is  a server duty to process the first request that   the client made in the process of um processing  it and communicating by creating web socket I'm   using signal connection to connect with their  client and I'm communicating moving up and down   the client also here that is a a web assembly here  download all the necessary resources and I'll give   it to the client browser to get it installed so  the next visit is going to rely on the client   I believe this is a very simple explanation for  this once we move on you're going to understand   more about this so if you are not okay with this  please don't stop watching this keep watching and   at the end you're going to see a light at the end  of the tunnel right so don't worry let's get it   done so once you have the the very first thing  that we need to do is I keep saying the very   first thing the very first thing was to create a  project now the second thing is to install some   packages that you're going to use remember the  title of this project or this video is to perform   croud operations using the SQL Server so we need  to install some packages that can enable us to   interact with a database es database yes so right  click on this server and here the dependencies   that is where we're going to install all our  projects is a project all our packages that   going to use for database creation so let's right  click on dependencies and now go to manage n get packages so click on the browse Tab and now  in here we're want to search for EF core so   first of all let's search for EF core and  that stands for The Entity framework core   now since this is in a preview mode then we  have to check this include PR releases right   so you can see we have this current one that's  a release candate of 2. 233 and Etc right so   you want to have this let's install this  EF core aside from this we need to install   SQL server and we need to install tools so we  have this SQL Server do you have it here okay   so whoa did SQL light okay so let's go in  for SQL server or tools you have SQL Server that is this one install so let's install tools and that is this one okay okay so now we have three packages  installed so when we check the dependencies   and I go to packages you can see we have  these packages over here from the EF cor   we have EF core server we have tools  so these are the three packages that   we can help us to create our crowd  operation okay so now we have this   let's now build this project so let's build  solution and see if everything is working as expected all right so you can see that the project  is now built successfully so we can just go in   there right click and then close all tabs so now  let's get back to the solution Explorer where we   have our project resources now we see when it  come to this uh Explorer here we have this two   project as indicated earlier on and the next  thing I'm going to do here is to add a class   Library so the first question is why are we  adding the class Library why the reason why   we adding the class Library here is very simple  we want to share the source or the files or any   kind of thing that we're going to put into that  class you want to share for both this client and   now the server if youve used um web assembly  before you can see that web assembly has the   client has a server and it has a class library  now this class library that we're going to add   here can be used by this client can also be used  by the server when we add models to the that's a   class Library this client server here can use  it this a client project can use that and also   the server can also use it now the server will  use that model for database um migration as an   entity now the client will also use the same  model in its edit forms right so if you put   the model inside This Server you cannot get  it into this project because it is limited to   This Server project so when you add a class  Library we can add the references to any of   these and that can help it achieve what we  want today so let's do that right click on   this and let's add new project and in here we  go in for class Library if you can't find it   click on this filter and go in for a library and  you're going to find C Class Library so choose   that and now in here maybe you can give it as  um shared projects right so let's say this is shared Library so you make sure it CH the same  framework of 7.0 oh 8.0 sorry for that I don't   want to confuse you but I near confus you isn't  it so now you can see as soon as you create this   client Library as a shared Library you see we  have this default class and we don't need that   so let's remove it now let's see let's add the  dependencies to any of this or let's add this   project reference to the client and also to the  server so right click on dependencies ADD project   reference then we can now choose this class  Library click on okay let's do same to the client so you make sure you select only the  shared line Library we cannot add a server no   we can't do that so only the shared Library  click on okay now let's build this projects   and see if we have any error we try to  figure that one out before we continue on so now that we have three projects you can see  from the output that three projects suceeded so it   means each of them is working as expected that's  good now let's start with the said Library so this   is what you're going to do let's create a model  here but before that you can put it in the folder   and I'll name this as model so let's have model  folder and now within this model folder let's have   just one model now the name here is going to be  product so I like using product a lot so product   and now with this uh product model we want to make  this as public so we can access it globally we can   also clear this because we don't need any of these  they are chaff so let's remove them now in here   since we're going to have access to database  we must first have an ID and that's going to   use automatically as a primary key now the next  one is you want to have product name so that's   going to be string and we say that is a name and  maybe at the end we can say it's equal to string.   empty initialize it then we can have another one  maybe end quantity so quantity okay so let's say   we have this two this three properties here but  we're going to have only two working one is going   to be for the ID and ID it is Untouchable so uh  we can touch only the the name and the quantity   we can change them like that okay so let's pick  this or let's maintain this for now for the sake   of our time and it's so this project don't want  to confuse you you want to make it simple let's   save this this okay so we have this product and  what we need to do again here is we are going to   let's go to This Server project let's create our  database connection string first so by um doing   this we can add the folder to this and I we can  name this folder as data now let's add a context   class now this contest class going to have access  to our database so we're going to say appdb cont okay so we have appdb contest and now with this  it's going to inherit from this DB contest class   as you know so this DB contest class is coming  from enti framework call and we can generate a   conru here and I'm passing this DB contest which  is inheriting the base or the parent class and   that's going to be the DB contest so where we  have this options let's specify this options   with appdb cont test and now we have to create  our database so in order to create a database   you can just type in p o and now you're going to  use DB set right pass in our product now since   we've added the project reference we see it has  added here using shed library. modos so we have   our product and now we're going to name it as  product so this product is going to be the name   for the database table so we're going to have  database table name as product and the column   of each data of this product data table is going  to be the properties found within this product   so we're going to have um ID column we're going  to have name column we're going to have quantity   column so that is the only the property so  the columns that we need for this practical purpose okay so now we are done with this you can  now save this and let's go to this um up setting.   Json let's specify database connection string and  now on top here we can see say that connection   string let's pop it up and let's give it a name  so we're going to say default connection so if   you watching my videos I like using default  connection so because it is very simple and   easy to remember and here I have my server set  to local so this going to be the local meaning   I'm referring to my machine and I'm going to  have my database set to this is demo okay so   demo um Crow DB okay whoa whoa whoa whoa I'm  going to this Crow operations DB okay and let's   have trusted connection let's set this to true  so trusted uncore connection make sure you don't   make mistake here set this to true and also trust  server certificate whoa trust server see what I   did trust server certificate we right set this  to through that's it so there is a connection   stream that we need to specify it and we have it  set let's close that let's go to the program. Cs   file and let's register database connection make  sure that you register it before the app build so   let's have a now space here I'm going to say  builder. services. rdb contest so do and who   DB contest in this appdb contest class and now  this has to carry on with an option parameter   let's open it specify something in here and we  say options. use SQL Server now let's go in for   the connection string that we copied or we created  so bet configuration. getet connection string and   now what is the name of this connection string  do you remember it is default connection so in   order to make mistake we can just check in case  maybe we make a mistake here like what you've   done it's not equal to what we written so we can  just have if this is now then let's say let's show   new exception so invalid operation exception right  and now in here we can specify whoa so I say whoo   connection string is not found then I can just  close this but this won't work because you're   going to rectify it ourself okay so let's go in  let's copy this let's come here and now let's   space it we make sure it is the same as we use  now let's terminate that that's why so we have our   connection string created successfully now let's  be the project once again and um perform database migration that's fine so you can see that it is  done now to perform database migration we need   to open this package manager console if you're  not finding yours don't worry click on to then   go to n get package manager and you can see  we have a package manager console so click on this so in here let's navigate see we have  two projects now and you want to perform the   migration inside the server project right so  we have to navigate to the server project so   by doing so we can just type in LS to show the  current of the project now let's grab this and   now in here let's make um CD let's open this and  I you see we have LS and we can now this is the   server so let's grab this and now let's change CD  so paste that so LS you can see now we are inside   the project so let's add- migration and I give it  a name so I'm going to say um first I like using   first for the migration name now let's click on  okay first of all it's going to build this after   building then it's going to create a file and  that file is going to handle all our database   um database table name and the table columns that  we specify so you specify two columns that is a   name quantity and an ID and we said that the  first ID as an integer is going to be used as   a primary key and it did it so have the constraint  table the primary key here it is using the ID now   you can also drop the table by using this drop or  down but we don't want to do that because we need   it now let's uh update the database so we can do  that by writing update Das database so that's all   so let's wait yeah so you can see that it has been  updated and now want check our project the server   we have a folder called migrations and and you can  see we have the file over here created that's fine   when also go to SQL Server object and now check  going to have the name that we specified in here   so let me just okay pin this now we can see we  specify the name as demo Crow operation DB now   let's open this database folder and I can see  we have demo CR where is it whoa that is over   here that's it so you can see if I open this  we have just a tables folder and now currently   we must have only one table known as product and  that product table must be empty so I click here   and view data and you can see that the table it is  there but nothing is in here so now let's create   a form so we can add something to this table we  can retrieve and we can also update it and that   will be the end for this video so the next thing  that we going to do here is we going to create   an interface so here this what you're going to do  since we have a client project you have a server   project a client project has to make a request  from the controller so that means we have to   create controller inside the server project and  now the client is going to call the controller   using the HTTP client right so we have to do  some little configuration over here so we can   have access to the controller where inside where  we are in the client section okay but all of them   are going to use one interface so this interface  that's we're going to use to create um our service   so maybe in the server you can just name it as  repository and now with the client we can say   service okay so let's create a repository here  but before that I want us to have um a general   interface repository interface for both so let's  put let's create a folder to the shared project   and I'll add a new folder now let's say this is um  let's say this is an repository for both so there repository so I can say it is product repositories  so since I'm going to have let me add IES make it   multiple so I click on this and I let's add an  interface here so class and I choose interface   don't forget and I'm going to say I product so I  product okay so there's an i product Repository   so that is this one now this ey product first  of all let's make some cleanup and here let's   make this as public so since we are putting this  in in the shared project it means both can have   access to yes it's in the free range now let's  have um our task so this going to be the task   and here we want to return okay so let's return  the product so when you add the product you want   to return the product added okay then we can  say add product async I like using the async   because going to be asynchronous and now here  I'm going to have the product and let me have   a model so that's going to be the payload now  I'm going to have the next one task and I'm   going to have the same product okay and there  going to be an update so update product async   and here it's going to be the same product and  now model now the next one be the same task of   product we want to return all product at all  cost so that's going to be um we're going to   have an update we have create that's an add we  have update we have um delete so that is a delete product I know I don't forget my async and Del by  this time around you want to have just product ID   so we can make a search and I'll get it and  the next one we have um get so we're going to   have task and this is going to be the list of  product so the list of product you want to get   all product for now and we say get all product  and don't forget my async so with this there's   no parameter for that the last one you're going  to have return a product here so return this   product and we're going to say get product by  ID so by ID async don't forget and now passing   in product ID so passing Supply product ID and  it to supply you with the product object this   very simple right so give me something and I'll  give you more than what you give to me okay so   we have these are the interfaces that we need for  this and this will to be the general one for both   the service and also um the repository so now we  are in here let's go to the interface here for the   server let's create can we put in no want let's  create a new folder here and let's name this as   um implementation right so that's going to be  an implementation implementation and now with   this implementation and that's going to be there  you you see when talk about about this we have   the interface and we have it implementation class  so we are having a general interface and going to   have a separate what implementation so this is  going to be for the server let's create a class   and this going to be product repo so product  repository so remember that this is different   from the interface the interface was I a product  repository that is an interface and here is just   a class and this was what interface this just a  class so here it's going to inherit from this i product repository and now control perod Control  Plus dot we can Implement all the interfaces here   and also we can generate Constructor here so  let's say we have Constructor generated and   in here we can specify our appdb contest class so  appdb contest class and I will say appdb so let's   create an assign this fi now before I continue  let me pause this and it might be that there's   going to be a doubt why are you creating the  implementation class here but did not add it   to the repository the reason is you know the  this class this shared Library it is shared   to this client so anytime that you want to um use  the client section on the uh the presence browser   it's going to download the whole repository  here here with this implementation class now   this implementation here it is uh the business  which is getting connected to database okay so   um it is not um it is not important or it is  not um good to add it to the client project   here what we need here it is just a service to  make a call and that's it but for the actual   code must be kept within the server it shouldn't  be out okay because if you have access to this   DB it means you have access to the database and  you know if someone gets access to database you   are doomed isn't it yes so that's why you  have to put it here and for the interface   as for the interface since it's going to be  the general one you can put it inside the   share Library I believe I've explained this and  are you okay with it that's fine so let's keep going so I'm going to let me just put this  here okay now we have ADD product so remember   that when to check our appdb context we have a  table name as product and that's a table name   that has been created in the database so in our  repository we can do something like so if model   is null let's can just make a a check to see we  can just also return now yes because at the end   the payload here that is the the output here  is what the return type is product so return   now but in case it is not then maybe you can  check if the product has been added already we   can check the name so V product V check CK is  equal to a wait appdb contest do product. find   async right so can we use find a Sync here you  have to pass in product um key value but let's   use first or default so product first or default  async or I think we can use where since we want   to check something so do where and here we can  say that and use this do name do two lower let's   convert it do equal to what is coming in as  the model. name. two lower so you want since   here the product is not added yet so do first  or default async so we can have access to the   ID because since the product is not added  there's no ID generated so we can't fetch   the ID we have to fetch the name so sech you  all the product and see if we have the same   product we have a product in the database with  the same name then tell the person that it has   been added already so in such case we can just  do something like return so um if prod not okay   so if is equal to now we don't say it's C to  now it's not so if you have it already return   now else then I wait not okay so I wait abdb  contest dot product do add then let's add the model Okay the reason why we have this error here  is you have to remove this in addition we don't   have add a sync to that and um aside from that  we can just save appdb contest save changes do   save changes async then that is where the await  must come in so we're going to save changes and   now return you the return type here it is what it  is return this model so in here if you return this   model it means the mod is going to return without  an ID so you want to return this so in order to   return this when it adds we can do something  like so new data added right is equal to this   appdb contest um pr. add then aside from you can  have entity okay so this enti is going to get us   the current data updated so return new data entity  return this very simple we are done with that now   let's go to the delete so for delete we're going  to make a SE so V product is equal to await appdb   contest do product do first or default async  and now in here we're going to find the do ID   is equal to who is equal to this product ID so we  say if product is n so if product is null then it   me the product is not found so in such case you  to return now to the person but in case it is   there they going to say appdb contest. product.  remove the current one and here going to remove   this product aside from removing you make sure  you save it so the changes can stick so appdb   contest do save changes then after that this is  the remover one so this is the one that we going   to remove so we can just return this product  although it has been removed but you can still   return it to the user return product that this  what has been removed okay now let's see from get   all product so as for this let's use this Lambda  expression because very simple use this F arrow   and um let's see await right so appdb contest do  um product. two L async if you actually want to   know how to use this Lambda expression also the  Callis operator I've made a video on that under   EF so maybe I'll put the description you can  also check it over there or check this playlist   and check for EF core and you're going to find  that in there but I'll try hard to put it under   the description okay so now we have this get  product by ID so you know we have to get it   first let's get this data and let's first get the  product over here okay and let's see so here must   be an async now we check if this is equal to n  so if Pro that if Pro that is null then you two   return n to the person it's just very simple give  me null I give you null if not return the product   okay now we have the next one that is an update  so for this update we have to make a search here   get the specific product details by the ID then  in case it is found then this what we want to do   so let's see for this I'm going to copy this again  now in here let's paste this and this must be an   a sync as well okay so we're going to search for  this mod. ID so let's grab this and this is going   to be model. ID so the ID coming in if it is now  returned now but in case it is not then product.   name we're going to map it to this mod. name okay  then we're going to say product dot um quantity   is equal to this Modo do quantity now the reason  why we are not mapping um one the ID here ID is a   primary key and primary key can never or cannot  be changed okay so we don't want to change the   primary key the primary key is the same as has  been assigned by the database so we only change   the data record that is going to be the name the  quantity and that's all because we have only two   properties when we check this product model here  because you have only two properties name and   quantity this is going to be the ID so for the  ID it's unchangeable but you can edit the name   and and the quantity Okay so after doing this we  can just also return the product updated but for   this you know this product has now been changed  right have been updated so if you try to return   this product this is going to be the old one or  the new one okay so when return this product it's   going to hold the old data here but this has been  updated so we have to also make a search again and   get the current product so we can say return  return a wa um appdb do product DOT first or default then we can say whereby the ID is equal  to the this model. ID so by this time around the   product has been updated and this can get as  the current one is it do I have to check for   now that is why it is giving as this warning  but don't worry this can handle this okay so   let's return this now let's save that and  that's going to be all for this product   this um service here so the next thing to do  here is we going to create a controller here   and I'll try to call this inside that controller  right but before that let's register this in the   program. CS5 before we forget it and we have to  do that by creating dependency injection so we   say Builder do services do add scope and now  in here we're going to say I product um repo   then we say um product rippo yes so we close  that and that's all now let's go to the same   server let's create a folder and now that's going  to be for controller so add a new controller here   so controller so let's make this as controllers  not just single one so let's edit this and I'll   add the S to that and also after doing this you  know let's make this server aware that it has a   controller that it needs to call from right so  we can do that in the program. Cs file now in   here we have to register or add a service to it  now let's put it on top here and we can say that   builder. services. services. add controller so we  can add controllers and now when it come to this   um Point here this is a middle Weare pipeline  you have to also add the API we have to map the   controllers here so after this htps R direction  we can say app. map controllers okay okay we have   controllers here and that is all so we make this  server aware of that we have to are we're going   to use a controller so hey be alert now let's  go to the controller right click and now let's   create a new controller here and this going  to be for product so choose an API an empty one and the name of this is  going to be product so product roller okay so we have this and now is the  route API SL controller name and that's going   to be the product let's create a Constructor  for this control period generate Constructor   and that is it and we need to call in our  the interface so that an i product repo   and I have our product repo here control  period let's create an assigned field so   it is now set and ready we can use all the  interfaces or all the method that we have   created now the very first one that we are  doing here it is an HTTP get so let's get   this now get so yeah okay let's specify  the route here and now we are saying all product okay so this all product and with this all  product we're going to have public aing task let's   say action results and now this action result  you need to pass in the list of product because   we are getting all product Oh is saying product  controller no it is not product controller I'm   talking about the product model so control period  we need to include the shared library and in here   we say get all product async is very important  then in here we can say that by product is equal   to then we can have a weight um we going to have  our product repo so do get all product then you're   going to say return okay and now the product  so either the product is null or it has data   so return okay because as soon as it turns okay  it means that the connection was active and the   communication were established okay so let's we  can remove this here now that's for the get let's   get single one so this I'm going to do let's make  a copy of this and now let's here so this single   product so I won't say get all product but rather  say single product so single product and at this   single product it's going to come in with it's  going to come in with an ID isn't it so we're   going to pass in ID here now with this ID get  single product I'm going to pass in get single product async then end now make sure that the  ID must be the same as this ID okay good then   here so V product is equal to and you must find  there's a method known as get put by ID and I'll   pass in this ID return okay with the model or  the results here then the next one is going to   have will be so let's say we have now we have  all the get so we're going to add data is it   add data we're going to add product so let's copy  this and we can paste it here and instead of the   add you're going to say this is add data so add  product and now for this the addition we do not   need to specify any parameter it is just a route  and since it is a post method we going to say   http P post Okay add product and now in here add  product async and now the payload coming in must   be a product and related to it model so product  then you're going to have model okay so product   dot we're going to have access to add product  async then passing this model and that would   be all so this going to return an an the added  product so return this product you see this is   very simple now we have two left we have delete  and update so this going to be an update now for   this update it is an HTTP put so let's make this  as put and that'll be all and now here instead of   this add we're going to say update product Asing  the same model and now here we call this do update   product and that would be all now let's have the  last one as delete so it is not put it is not uh   post it is not get it is rather delete okay and  let's say delete product and this product must   also come in with an ID remember that we have to  specify a parameter here as ID so you're going   to say delete product and delete product is sync  and this must come in as an ID not an object so   in and that is an ID so in here let's clear  this and we can have an API known as delete   product and it is accepting an ID so you pass  in this product ID and as soon as it is deleted   you're going to return that object so we can also  return it to the user so we have our controller   set and it is working well although we haven't  tested it but virtually it is working right okay   that's fine let's save this so we have our server  created everything is working now what we need   to do here is to create a client service from  this client so we can actually use this method here so let me also pause this and and say that  maybe you you might have said that okay so why   didn't you create the component or why don't you  create all the component that you're going to be   using inside the server because you see that  the server also has a folder called does it   have pages okay so here okay it has component  folder and it has Pages here so why don't you   create the component here and use a repository  instead of creating controller for this client   service to use now the answer is our aim  is to um create application so that the   user can use it even when the person has been  disconnected from the server when you put it   to the server here it means when connection is  lost the application doesn't function anymore   but as soon as you put all the components  here it means this is the Blazer assembly   so when the application disconnect from the the  server still the files or the resour have been   downloaded already onto the person's computer  so the person can use the uh application okay   so that's why you need to put them here so  in doing so we have to create you have to   pass through these ones these steps create the  controller create our repost create our client   make a call and I return display to the user  and that what thing that we are doing here   okay so now we are done with our controller  our interface and our repost now let's come   here and create our service so here we are let's  close can now close a server and un close a shed   now we are into the client so we I click on the  client now let's add a folder here and I'm going   to say this is services so Services I'm going  to create just an implementation because you   have an interface already okay so this is  going to be a class and here it is product service so product service now with this product  service it's going to inherit from the product   let's see let's make it in here from the product  repo so there going to be i product repo okay   control period we can implement the interfaces  here so we have implemented all the interfaces   let's create a Constructor here so not that  so CT R contractor created now let's inject   our HTTP client so HTTP client and I will call  it HTTP client control period now let's create   an assign field so what we doing here is here we  going to make a call to the controller you know   before you make a call to the controller you must  have this HTTP client initiated or initialized so   that's what we are doing here we're going to use  this guy here to make a call to add this product   delay and perform these crowd operations hope is  simple and clear okay so now we are in here let's   create so product is equal to then let's have  an await HTTP client dot this what this add to   post adjacent see we have it here now we have  to specifi the route and as you specify route   going to be an API controller the controller  it is the product okay and now let's pass in   this model for now when you run this it's not  going to work why I'll explain to you let's   finish with this so let's return so V response  is equal to let's have an await then product dot   read from jnc or do you have that in here okay  so product dot we have to get the content here   read from Json async and that is the down here  and here we can specify this product it must   turn it to this product object and at the end  of the day we want to return the response okay   so that's what we want to do let's make itable  now let's do same to the other ones over here   so from this get we can just have a copy of  this now see we have get all so with get all   it is a matter of making this async and also just  making this product because you know is a plural   so we don't want to say product which contains a  lot a list right so and for the response you can   maintain as it is but instead of the get instead  of this post we are not posting We rather want to   get so get async and I will get async this is  the the rout here okay so there's another one   that is get all product I think so let's check  the controller so the controller here is what   okay so we have and all okay it's all product  so all product there's no get and for the add   it is ADD product I think so so it is not okay  let's see it is ADD product single one we have   get and it put it is ADD product and I update  product and I delete product okay so we have   all product and product slash add product okay  so and that is this one so here return from Json   we have to this must be in the list form because  you're returning a list of object let's make this   as a list okay then return this now get by ID we  have to do the same so no let's copy this because   here it is just a single object that you want to  return so in here and this must be get async and   our API product and this is is it get single  product single product and passing the ID so   product and that's going to be for single product  and in here we are going to specify an ID this   product ID okay so this is a product ID and we  need to specify that here we have to remove this   okay so get API product single product then um  get by this product ID okay now this must be an async now once we have this we are going  to so we have this string here passing in   as a parameter okay now response is equal to  this product. read as this and I return this   response Okay so the last one is an update so for  this update we can also make a copy of the same post and now in here let's paste it here let's  make this as async and now to do that V is equal   to now this is not just a post it's rather  it's a put so put as Json a sync and the API   and that going to be the update update product  and passing this model return response and now   um return to the person over here all right so  we have it set all set and done now um control   period let's remove an accessory using okay so  we have it set that is all so this is the client   service okay let to see so we skip that okay now  let it's the same thing over here from this get   by ID so we can just grab this and now in here  instead of this get a sync it is what delete so   it is delete async and now this delete async we  specify this product ID make this as async okay   so this must be an async and I return the response  of the deleted data to the user okay so this is   set now the next thing to do here is in order  for us to get this API work we have to register   this service also so we have to put this inside  the service folder and that has to come from the   client so in here before the build we're going  to say builder. services. register Etc right so   builder. services so do ad scoup and now this ad  to say I product service so I product repository   then we're going to have product service okay and  that is what we need to do so that is it okay now   the next thing to do here is let's register this  so let's go to the server first let's configure   the server first let's check the properties go to  lunch settings and now let's grab for the https   let's grab that is a The Base address so let's  grab this let's go to app settings. Json so we   have app settings here then on top here maybe  we can specify something like Base address okay   so with this Base address we can have let's p  in our Base address put in comma okay so this   our Base address now we specify this we go back  to the same server U program.cs file and now in   there we have to make some specifications  too so let's use builder. Services dot add add cool now with this scope we have  to specify this now it is a scope so HTP   and now this must point up to you we create  a new HTTP client okay now with this we have   to specify let's terminate this first and we say  we have this Base address is equal to new URI oh   not un is [Music] URI then the URI you have to  specify so builder. services do configuration.   getet section okay now what is the name of that  section we made it as Base address and in this   you want to grab the section value not the session  itself okay and you know this going can return n   so let's terminate or let's make it nullable and  I think this now must come here yes must be here   let's terminate that at the end okay we've done  that this already okay so control KD we can save   this now let's go to the okay so let's check  if this the same as what we made so we can't   we won't have any error in running this so basee  address Base address that's fine okay now let's   go to the server and I also make a configuration  so that when you call a service to this controller   using this product server that we created it can  find the base address and now append this API to   this product controller name and now this the  action method so we go to this client with the   web assembly go to the program then in here we're  going to do the same thing so build out services   services. add scope and now with this adcope we're  going to have access to http then we point to new   HTTP client and now with this new client we have  to expand that terminate at the end and use the   Base address is equal to new URI then we specify  Builder dot host you can have host environment   do Base address now with this Base address this  will give us access to the the address of this   app right so that's what we're going to use for  this Base address so it's going to be like HTTP   Local Host then since we have they're going  to add a port as well now when it come to our   product service we're going to have our API so it  comes to https Local Host and the port slash then   you have an API right we have a then it on with  that okay so now we have everything set what you   need to do here is to create our form now and  this is the form that we're going to use to   update and I'll delete product so let's close  all these close all tabs and now let's close   the server to we can close the shed as Clos  already now in the pages you can see we have   this so let's add a new page here so add a new Raz  comp component and our this let's call as product list so this is product list now with this product  list it's going to display the product and you're   going to have a button against it so we can  actually edit or delete it isn't it yes so   first of all when you create a project that's  a page whereby you do not have any render mode   on top defaultly it is the default one is none  and it's going to render as a static so unless   you specify the render mode and here you want  to make it in such a way that if it finished   communicating the first time from the server we  want to fall back on the client that's the web   assembly so we're going to use the render mode  as Auto and that's what we chose when creating   this project okay so on this we're going to say  here let's first five the page route and this is   product list so product list and now let's have  the set well okay so from this product list this   is the page that we have let's have an attribute  and now this attribute we're going to make it as   render as Auto so that's what I explained now  let's have this so let's have a div class and   this going to be for container that's a boot  uh bootstrap you're going to have a DA class   and that's going to be for row then we have a  Dave class and this going to be for column MD   let's make it six okay we have our div class and  this going to be for card we have our div class   and this going to be for card header so with  this card header you want to have um product   list so product list now here we can have a n div  class as card then you're going to have this card   body and now in this body you want to have table  okay now the class of this is going to be table   and table stripe so this is going to be the is  it striped or stripe well let's see so in here   we have our table head and that going to be the  T head now T head we have our TR now in the T   let's have our th so the first one is going to  be we have ID okay then we're going to have the   next one so th and we're going to have as name  then so let's the third one we going to have quantity quantity now I like  to add products to it to any so products okay so I'll grab this and I'll come  here I'll paste it then product quantity I'll   P it and the last one is going to be th  and here it is an accent so with this   action could be either edit or or um that's  going to be the update or delete it okay now   when it come here so let's come to we have  a t head and down here going to have a t   body okay before we do that here you're  going to say add code then let's inject   so we can inject it into this import file  here so let's say at inject so I product we have a product service so we have i product so here going to be at i product  repository so I product repository repository   so control period let's include this and you  can say this is product service so product   service okay so we can now use product service  now let's go to the product list and we're going   to create um private list of product then we  say this product we have a get and set assess   set then we initialize it or we instantiate it  to equal to new then with this product control   period Okay so we have to use the library  so we can just cut this then we go to the   import and now P it here and it still works  so let's see we have that set okay now when   the page initializes this is what you want to  do so let's have a private um async method and   that is a load product so load product and  this going to have some something like so product products so it's equal to a wait then we  can have product service so product service so   dot get or not get by ID it is get or product so  get all product so here we can say that if product if product is null then do return okay  but before we do that anytime that so   this is an async okay so we going to have  async async is in task okay so return now   before we do that you want to check  if this product has data then clear   it so prepare the container before we  look through if not then for each V product product in product okay then we can say that product do add then we add this product so can see from here that we are looking  through the list of product and that is this list   so every single product found within this  list add it to the list of product that we   have created here now when it come to the tbody  we can now patiently look through this product   list and display them so here we're going to  do something like we have um if okay so you're   not going to use this if here we're going  to use for each okay so for each V product product in product list okay so product then this  what you're going to do you're going to create um   you're going to create um TR and this TR we create  td1 and that's going to be the product do ID so   you make sure the it it follows what we have set  here then we can just duplicate this duplicate   that and duplicate this okay so here you're  going to have the name we're going to have the quantity and the last one supposed to be the  action or it must be the action so the actions   we're going to open um the table data and now  let's add button or we can add Dave then class   so div then let's add class we're going to say  that this is H tack so H tag let's have Gap as two   and in here let's have the first one as I we're  going to use an icon so oi- oi you want to use pencil so pencil you want to have test info and  that's going to be the color right so for test   info and the next one you want to have so we can  just make a copy of this so control D then here   inste of this pencil we can say trash right and  that's going to give us the trash container and   now let's make this as danger okay now that's  what we have now from the whole container when   it comes to this column md6 we have this card  now product list so here we can just this is   a card body so we can just copy this let's cut  this here and now let's write something so if   product list so if product. count is greater than  zero that is where we want to display this okay   so else what you want to do so else you want to  have just a div class and now here this this is   alert you want to have Alert info and now you  want to say um no product found or no product available now let's close this div okay  so that is what we are doing no product   available let's save that so for now when  you run this we going to have access to no   product available because the list has empty  now let's see now we have to call this method   here when the page rended so let's overwrite  then you're going to have on initialize async   and let's call this load product method  so call this and that's going to be an a wait call this okay now let's save this let's go to the  homepage so the server homepage component and   our layout and you can see we have nav  menu so this nav menu we can just have   one here and I name it as product now the  product let's navigate to product list so   that is product and our list I believe that is  a route isn't it check here on top here it is   product list so here too it is product list  okay so that's fine now let's run this and see okay so the app is now ready now let's  click on the products and you can see we have   um no product available now when you right click  let me open this loud and now if I right click   and go to inspect element let's go back to the  home page page now go to network and now let's   see so click on web soet if I click on product  see what happened you could see nothing happen   here because it has been loaded already and  when you go to Wasim it has already loaded so   let's see what happens here next if I refresh  this click on the same network tab web socet   see web has been created that's the first one  but and see you can see there's no data here   for the Wasim but and I'm going to navate to  this page now click on this and let's return   so to achieve this we have to clear the have to  clear the memory so let's clear everything here   from this or this I'm going to do I can just run  this inside another browser so I'll just choose   web browser and I'm going to use Microsoft Ed so  let's run this again so because of the render mode   that we use as Auto it's is going to switch from  the web soet or the server to the web assembly so   the server uses the web soet and the web assembly  uses the wasm okay so let's check that one out so   that's the first load now let's open this well  right click go to inspect element and now let's   see from this network tab this network tab you  can see from this um web socket you see there's   nothing here and there's also nothing here if I  click on console you can see there's nothing here   because currently it is on the server format now  if I click on it let's see what happen so let's   first go to the network tab now the web so if I  click on product will happen so see the product   I click this and going to navigate to the product  now we have this product over here the page has   been navigated to this product list and let's see  you can see we have a web soet created as you can   see this is a web soet and here first rendering  it is from the server that's why the web has been   created and you can see there's a communication  here now if I check this Wasim you can see the   files is also being downloaded background so this  happen background now if I go to console see what   happened you can see now this is for web assembly  and now the file is being downloaded now let's   go to the same network again let's click on the  web soet and if I go to home and now if I click   on it again there won't be any any soet again  created it means this has finished if I click on   console you can see that here the connection is  disconnected so there's no server communication   it is rather now on this Wasim and that's what  you see we have all the data here rendered if   I click on this we have all the data here and now  you can just communicate even offline within the   application so that's the good thing about this  using this Auto and I keep saying that Blazer it   is a feature for web app and mobile app and any  app development right because it has a lot of   goodies that we can Implement and it is fast and  it is easy to also use as well okay so now let's   create a component so we can add data to this okay  so let's do that I'm going to close this and let's   create the next component here so product list  and let me make this as eight okay now here we   can have a bar on top and maybe a button that's  add data so the table this the table here and   the table head this is a product list this is  a table head so the table head we can just come   here and add a button so let's add button and  let's have a class so this going to be um BTN   BTN primary okay now in here let's have an icon  and that is a class so o i oi- Plus and that is   an add okay so add product now if this is unclick  if this is clicked what you want to do you want   to write Navigate to navigate to add product page  okay so here we have to create a method now let's   count down here and I create a private void then  navigate to this page and before that let's inject   navigation manager so inject navigation manager  then make it as navigation manager okay so we   can now go ahead to this list and now we're going  to say that navigation manager navigation manager   down here do navigate you then we can have access  to add product okay or let's say manage product   not even add per okay we can say manage product  and that's going to be add or update okay or we   can say add or update product anyone okay so  let's have manage product so manage product   and it's going to navigate to this component  so we have to create this let's go to pages   and now let's add a component and here that is  manage product so the route for this let's see   so the route of this is going to be at page then  let's say add product or manage product manage product yes so yeah we're going to add product  now let's use an edit form so let's create this   I want us to go to this list and I can see we  have this card and all stuff here let's grab   this let's go to this manage product and now let's  paste it here then let's close them [Music] so we   have there how many four left last one okay so  control KD let's arrange them well now the card   you can see we have da now class and for now it  is ADD uh oh so this going to be the card header   so this card header you're going to add product  let's make it for now add product and now from   the card body so edit o oh oh so you must have a  div class first and that's going to be the card   body now within this card body that is where  you must have this edit form now there's a new   feature in in this edit form that can help us  to use it well now we see that when you create   a page component like this and you refuse to or  you forget to specify the render mode defaultly   it's going to render as a static so meaning that  when you create a property or when you create a   method or a button here and click on it it's not  going to work but it excludes this edit form why   does it exclude this edit form because this  edit form has a new feature added that makes   it possible to exclude it let's have a look to  that and here we have an edit form but before   we do that let's come down here and I create our  private product then we can say this is product model we can have our get and now set and at the  end we can instate it to new one okay now when it   come here the first one is the model okay and here  we are talking about this product model and as for   that one you know we also have on valid submit now  you want to say handle um save okay now there's a   one thing here and that is known as name or form  name so this is a form name so this form name   here going to help you skipe that that's render  mode and this is let's say this is manage form is   it manage product manage product now in here you  want to have a DA class and something like U for   form group now in this form group now on top here  maybe we can decide to specify in case we want um   you want to validate it you can put this on top  of this uh the model so let's do that product and   you want to make this as required okay and we can  also make copy this and in here you want to make   this also as required so when you do that then  inside this form you can put data annotations   viid dator and also validation um summary we can  also put it here okay now within this form group   we can have access to label now the label you're  going to have a class and that's going to be for   form label so form label and now here you're  going to say product name okay and let's have   the button so we're going to have input test now  this input test going to have ad Bine value and   you know the value that you're going for that  is going to be the product model. name because   that's all you want to use you're going to have  a class as uh form control as a bootstrap class   we can close this then maybe down here we can use  validation summary so we going to have validation   message and uh which one is it for so we pointing  it to this product model product model that is   down here name so it should give us a message to  that all right so we have this we can just go in   there make a copy of this and I will change this  to this is going to be input number okay so this   input number so we have product Dot quantity and  now inside of this product name we're going to   say product quantity and here we can just grab  this and now it is making a reference to the   quantity so we have the last one here it is  going to have a button so let's see we have   this button here you know the type it is then  submit and it is the class it is BTN BTN okay primary and maybe you can say save so that is  a button name okay so with this to enable as   this to work okay we have to specify as  a parameter so let's make this as public   and we have to add a new property to this  as Supply parameter from form so supplier   parameter from what from form now let's save  that and when this is hit we must create this   button as so private and that's going to be  an async task and handle save so we can call   a service so we say result is equal to await  product service we can have product service   from here dot then add product so passing  this product model so this product model   it is coming out of the product that has been  updated or inserted so this what we can do we   go to this input and now let's inject so inject  rjs run time so we can and we say JS so we can   display or pop up a message to the user so down  here you're going to say that I wait js. invoke async so JS do invoke void async and  now here it's going to be an alert and   now with this we can just have a look  at this by typing in something like um let's use this then we can have okay  so let's have this string interpolation   then we can have access to um name  so name and this name it is coming   from so you can have access to this name  okay then it's coming from this result   so result. name results. name then we can  have access to the id2 so you can just grab this so you can start from here then this  is the ID of the product and this is going   to be the ID then we can have name that is  going to be the name then we can have the quantity and that's going to be the quantity here   so product result do quantity okay so  with each you're going to have let's   see if can have environment. new  line then with this two let's have environment do new line so environment. new  line so we can put it on a new line okay   so that's all we have now now let's add this  product so let's say this let's run this and see so let's go to product okay then okay so we supposed  to have this icon here let's SE that   out from the product list so oi oi+ we  have at on click navigate to this you   have this product list so let's have this  is a class and let's say float end so let's see all right so the reason why I think we having  this is we see we using this if we taking it from   here so this should have come out so let's  remove it from this side and maybe we can   put it on top here within this card right we can  put it here we can just create a card here so div class and we can have our own  card here then we can have div class and that's going to be for card header then let's paste in that okay so let's  save that and that that will be on top yes so   we have this here now let's specify the name o  i oi+ I think that's is not working here so oi   okay so let's remove this and now let's  have add products okay now we must have   that so add product so if I click on this it  does navigate us to this page you can see we   can add product now now you see this page it  is not taking to this page is not having any   form of rendom mode but can still work let's  see so first product the product quantity here   it is th 2 3 4 5 6 7 and ET click on Save  and now let's see you you see there's an   event here wow so it is saying that invalid um  operation JavaScript cannot be issued at this   time because it is rendered okay so before  we do that it has to come from this on after   render async method all right I get it now  let's go in there and make some change in here okay so we to skip this maybe we can just  comment this for now and we have this result   here right so this result holds the data that we  have inserted so to handle that maybe you can just   write something like private and that's going  to be for product and you say um added product   okay so or returned product something like that  return product now with this return product maybe   we can just create this uh we have the card here  down here we can just create a diff class so div   class and I'll display the the data over there  so let's say you have a class here and that's   going to be for the card fter okay so you can  see we have this is a card okay so we have the   card um there's a card body and we can put the  fter after the card body okay so in here we can   just display this in here right so maybe you  can just something like name then we can say   that so after we've assigned this we can say  results all this product return type here is   equal to the output of this you see this is  very simple thing that we are doing then we   can just open so let's instantiate thisal  to new then here name we can say that this   product do name we can have access to this  product that return BR that. name okay so we   can do BR that dot then you can have name you  see and we can have access to the next one is quantity and it is return product  dot quantity we can have it and   now the ID to we can have the  ID here and ID okay so any one   of this still going to work maybe you  can just use BR a break you can break them now let's reload this page okay so we have  an error here let's check it out so we have this   error yes this should come it should come yeah  and the same applies to this here okay now asset   let's run it so when I click on product it has  navigate your product list you can see we have   the first product here and let's now click  on ADD product navate us to the add product   page so we are in here so you see we have an  ID Z name and our quantity so let's add this   is a second second product now the quantity  here you have 935 or and Etc so let's click   on ADD as soon as you do that you see we have  the data returned so the ID the database is   three that is the name now when you go back  to the product you see it has added here for   us now let's see we must have this icons but  since you're not having this let's let's say   it out and this what we are going to do we  want to or we have to from the product list   instead of having this icons let's remove this  and now let's use span so span and now here we   have a class and that is test info and it is  edit then we have the next one and this is a   danger and we can say delete okay now this I want  us to make it as a button so let's make this as   a button and this is button now with this class  we have this class test info let's have BTN BTN Nan and this must be BTN info so let's  have the same thing over here we can   decide to make it as a button or you can  decide to make it as not button so BTN danger okay so let's save this and let's  see let's see the output we must have this   test here okay so you can see we have the  edit we have the delete the bit and did not work um BN yeah we have BN info so we can  have BNN again uh so let's let's maintain   what we have okay so we have this edit  and now I'm delay but as soon as I click   on it nothing happens so let's wi them  up and with this let's have at on click   so at on click you want to c a method  known as edit right now let's pass in let's pass in edit just edit and I need to pass  in this product product. ID and now we want to   or we can just pass in the whole product okay  because we have the ID as well so we can pass   in the whole product and now with the delete  we need to pass in just the ID so at onclick   then we can pass in delete and here we need  to pass in this product dot ID this must be   a method so let's give an method here for call  back now here let's go and create this so edit   and with this let's have this is private ASN  task and this is is edit and it is coming in   as a product and you going to handle it here in  the model so here this is what you're going to   do we're going to navigate to the other page  so we can have access to this or maybe we can   just copy this and okay so here supposed to be  because I not return anything let's make this   as void so navigate to this and I'll pass in  this U model do ID so this contains an ID but   before we do that this must be like that so stre  interpolation then we pass in the ID so navigate   to this and I'm passing an ID like that okay now  if it comes to delete let's create a method for   delete and so this going to be the private this  the same void then delete and here we need an   ID so end ID and here this must be an Asing task  because we're going to call um service method and   you're going to say product service so product  service dot delete from product delete product   asnc pass in this ID now you know this ID is going  to return so let's have B product is equal to our   wait okay then if it returns we can assign this  maybe if you want to at least display the return   because going to return the deleted data if you  want to um display that well if you don't want   to you can leave it but it going to start over  here and it's going to delete so after deleting   then we can call this method again to get the  current or the the product list again so we have   this set all right so this going to delete it so  if I save this and now run this again let's see   let's test for the delate then we go in there and  now do the update then we call it a day for this video So Pro that now let's delete the second one so click  on delete and now okay so let's check and   see so here what we need to do here to rectify  that issue was to come to this product service   now the product service we did not specify this  um dollar sign here to make this as a parameter   so we did not do that and I re change this also  to delete at first it was the single and that   is all that we need to do so now with this we  have this rendered and now if I click on delete   I think you can see it has deleted it now when  you go to database and check let's check from   the database and there is the table we have one  data if you refresh it you can see it's going to   be you can see there's no more data here let's go  in there and add one and C again so add product   and let's add second product the value is 6780  cck on Save has been saved as you can see from   this now go to product list and see we have it  over here click on delete okay so it is no more   there as you can see it is not here all right so  that is it now let's have a look at the next one   that is the edit so let's add data again and  save okay go to the home we have this now if   I click on this edit what should happen it should  navigate to this component and if navigate to the   manage component let's see okay so you can  see we have 44 meaning this is not found you   did not specify that so let's go in there and  un tackle that and that will be the end so we   go to this manage product and now in here we're  going to make a copy of this and we're going to   specify as id id here and this ID is going to be  integer okay now down here let's have a property   and this property must be public int and that  will be an ID and that's all that we need to do   as a normal step that we we do so parameter and  here we have as this ID okay so I referring to   this ID as a parameter it means that this ID  is going to accept um an ID or this going to   accept an ID as a parameter and that's why we're  going to store it over here okay now when this um   comes in you want to handle this by this override  then on parameter change perimeter set a sync you   want to have access to this so um product model  is going to be equal to a wait then we can have   product service so product service down here  dot get product by ID then let's pass in that ID and that's all that we need to do so when this  save is clicked so when it come here when this   save is clicked you want to check if product model  let's check it from here so if product model. ID   okay is equal to or is greater than zero it  means you want to edit it isn't it then you   can have this return product is equal to a wait  product service product service. update product   then pass in this product model so let's make it  in this form we can just cut this and now put it   here then we say else and we can just cut this  and P it here and now when we are done let's set   this to return res set this product model so after  adding this set this product mod is equal to new   C the container after that's after adding after  updating to set this to new clear the container   as well okay so now let's give a break point um  it's around here let's put it here and now let's   go back and hit this so edit now let's have an  updated click on Save now if you return to the   point let's check the the values here the reason  why I could say it did not change because of this   parameter we are saying that the parameter here  or the values are from this uh edit form okay so   what we can do here is um we can just skip this  so if you want to have only a page where you need   to um add data you can use the by you can see  from here that you want to add at the same time   want to edit with the same form so let's change  this let's remove this and and here we can just   remove this the name as soon as you do this it  means you have to specify an attribute here so   we specify an attribute now this attribute is  going to be render as Auto okay so render as   Auto here now let's save this and let's Okay so  let's let me stop this and now let's run it again okay so let's click on products let's go to the  product list and in here we are going to click on   this edit you're going to edit this product so  let's click on this edit now we are in here so   first product we can update this let's let's  say this is updated let's add this click on   Save and now the method is hit let's check the  model here to see what we have okay so you can   see now we have the first product updated  we have the values here so let's click on   continue okay you can see now it is set so  see we have the product updated when click   on product okay so let's refresh this and see  we are not having the product here let's check   and see if it actually um updated click on  this now let's refresh this and see if you   have the first product updated or we don't have  that so we have the first product it means that   it is not updated let's Che and see let's check  our service and see so from here that we making   an update and API you push to this put adjac  sync so update product you pass in this model   when you check our controller to that's our repo  we have this update and we first going to check   the ID if it is not return if not then set the  name to this product model name okay so we did   not save we did not save changes so that is why  so I wait appdb contest so appdb contest do save changes async so I believe we have to  save um changes here let let's stop this so let's do it this supposed to  be an a wait okay so we save changes   and can now return the product okay so now  I think think it's solved now let's run it again so we click on product then edit updated then save this and I think this must  be saved okay so this is hit now let's click   on continue on and now it is saved so now let's  click on let's return to the product list and   you can see we have it we can also um delete it  here and that is it all right so that's going to   be the end for this video so sorry for wasting  some time at least you've learned something now   what have we learned so far so we've have you  achieved our objectives let's say we have been   able to perform crowd operation we have able  to also explain how the edit form works and   also the new feature added to the edit form and  also we've created the C library and attached and   that is where we have a general interface and  other services have been created and added to   it to make it as a full application this a simple  small one all right so that is it for this video   thank you so much for watching if you like this  please subscribe to this channel if you haven't   done so like this video as well now if you check  the description I'll put a giab link over there so   you can just clone this project maybe you can just  review it yourself and learn something in addition

Channel: Netcode-Hub

Views: 6,056

Keywords: blazor, crud, operations, create, read, update, delete, auto, render, mode, entity, framework, sql, server, database, .NET 8, web, development, C#, tutorial, guide, step by step, how to, learn, setup, build, deploy, publish, host, backend, frontend, client, app, application, webassembly, core-hosted, razor, component, communication, data, state, management, storage, sharing, transfer, passing, sending, receiving, handling, manipulating, updating, changing, modifying, altering, transforming

Id: zv2gdqxZmFs

Length: 108min 32sec (6512 seconds)

Published: Wed Nov 08 2023