Mastering .NET 8 Clean Architecture : Effortless Blazor CRUD Operations with Clean Architecture.

he friends and everyone welcome back to net code  help Channel I am Frederick and I'm happy to have   you here today in this video I'm going to talk  about one of the architectural patterns in net   and that is clean architecture have you heard of  it before do we actually know what is it then stay   tuned because this video is going to help you a  lot to let you get the basics of it and how to   implement it in your application before I dive  into this I do offer coaching or train session   for people who are interested in net Technologies  talking about Blazer Mari and Mari Blazer hybrid   and also web API Services if you want to write  me check this video description and I have an   email there you can write to me through it the  source code of this project also be available   so check this video description and you can  have access to this so the question is what   actually is clean architecture clean AR is a  software architectural pattern introduced by   Robert C Martin also known as ancle Bob I believe  you've heard of this name before ancle Bob now   what does this architecture aims to it aims to  create maintainable scalable and also testable   software by emphasizing separation of consent  and dependency inversions although this is not   specific to net but we can implement this in net  as well so in this video we're going to look at   how do you implement this clean architecture in  net there are many presentations on this clean   architecture or this um anle Bob architecture in  net now I'm going to give you one now this clean   architecture has basically four layers four layers  so what are the layers we have the domain layer we   have the application layer the infrastructure  layer and and we have the presentation layer   so the domain layer it is an innermost layer that  houses The Core Business logic talking about your   models and your entities the application layer  act as an intermediary between the domain layer   and the outer layer and it defines the use  cases and also orchestrate the flow of data   and the bus logic so the application layer needs  the domain layer to work with the main layer it   is independent application layer depends on the  do domain layer also the infrastructure layer   this contains implementation of implementation  details required to support the application so   with this the infrastructure layer depends on  the application layer the application layer   contains all the the contract the interfaces  and with this interface the implementation can   be found inside this infrastructure layer there  comes in the last one that is the presentation   layer this layer serves as an entry point of  the application and this this can be a web   UI and API um net Mar project it could be um  W API project it could also be Blazer hybrid   project and Etc okay so let's put all I've have  said into practice and now let's uh let's see it   practically all right so I'm going to create  a project get here and first of all I'm going   to create a new blank solution for this then  this is going to be demo let's this make clean architecture okay so now let's click on  create to get this project created okay   so we are going to add these four layers okay  the first layer that we need to add these are   all classes so right click on solution then  we click on add new project and in that we   need a class Library so this is going to be  um domain layer so let's make this a domain   layer let's also create another one and  this is going to be the application layer   solution I click on the solution click  on ADD new project and here the same class and that is application layer now we need to create the next  one and that's the infrastructure layer so we have our infrastructure layer in here the last one here it is a presentation  layer now the presentation layer it could   be that we're going to have a web API we're  going also have a Blazer web assembly or net   Mar or any other um presentation project  right so in that we can add the solution   folder here so we put all of these project  under one and we can say this is presentation layer then let's add this project and we're  going to choose web API so let's say this is web API let's add this then we can also add  maybe web assembly to this so right click   on this presentation now let's also  add so you can add number of project   that you want as a presentation  to this so we're going to add web assembly now let's click on create so you can see  that presentation layer we have two projects which   have been added and now this project are going to  consume the layer that I've been defined here but   the next question is maybe you asking yourself  why is it necessary that or is it a mass that   all the time and I should use this names no you  can modify you can customize this name okay but   it must follow this pattern if you want to use  clean architecture in net you must follow this   pattern but the names could be um changed but  for the purpose of this project uh for you to   get understanding I am just renaming it as  you can see in the layers okay proposed by   the unle Bob yes okay now um with this what  the next thing to do let's assume we're going   to create a database we going to have something  like customer Crow on customer okay so create   read update and delete on customer whereby  we're going to have database um connection   and the whole stuff and aside from that we're  going to look at how to consume this inside   the Blazer web assembly okay so it going to  be a complete one for you all right now you   can see we have some classes default ones let's  quickly clean them up because this we don't need them okay so in our web API we have this web  assembly to we also have this so now first   thing I'm going to do here is we want to run  the web API first so let's set this as startup   project okay so as you can see and now let's  start the this app but before that we have to   uh build the whole project so let's build them so  that in case we do have some dependencies as new   get packages we can just restore them before we  build them before you run it okay so right click   on solution now click on build solution and  let's see if you're going to build all these   four that is five project but you have four  now cuz a folder contains two projects so we   classify this as one project isn't it that's  a presentation layer so four layers by five projects yeah so we can see five  bet um successfully now let's see   So within this we set this to API setup let's run this that's right so you can see that our AP  is working as you can see from here it is still   working now let's close this let's also set the  web assembly as startup and let's run that to and   um check it up so startup now let's run this to  and as you can see it is also running perfectly   so we have the two project um run successfully  as expected okay now let's talk about the   dependencies so we know there are names given to  clean architecture people say we call it heon AR   Ure only architecture and a whole lot Okay the  reason it the domain layer it is a center because   it is independent it doesn't depend on any any um  layer the application layer depends on the domain   layer for for the model because the domain layer  contains the model the entities the application   layer is going to create the contract that is our  interfaces now with the infrastructure it's going   to depend on the application layer so it's in the  hierarchy of for dependency the infrastructure is   going to contain or depend on the application  layer for the implementation because you have a   contract or the interfaces inside the application  layer and you're going to have this implementation   inside the infrastructure and that is where  we're going to provide or going to have our   um um database migration in it the datais layer  that's we're going to have all database migration   in it and now this layer going to contain the  core operation of the interfaces specified in   the application layer okay now the presentation  layer is going to consume the application layer   where about the application layer going to use  the infrastructure okay no no that you know I   don't want to confuse you anymore okay so what  let's let's start to do this so what we're going   to do here is first we go to the main layer and I  this is the the independent okay so this is this   is the core of the project now here we going to  right click on the application layer dependencies   add we're going to add this the the main layer  to this so we need a model to create an contract   our interfaces isn't it now when you're done  creating your interfaces what is the next thing   to do we need to create a contract we're going  to create a contract or interfaces inside this   application and in that you need implementation  so the implementation is going to happen inside   the infrastructure so we click on infrastructure  and I add project references you're going to add   this application layer so the application layer  depends on domain and now the infrastructure   depends on application you see and now when  it comes to the presentation from the web API   right click we're going to use the application  layer so I click on dependencies ADD references   then we're going to use this application layer  because this is going to contain the contract or   the interfaces and I we go to the web assembly  to and we also going to use this application layer yeah so this is the dependency that you  need to be set and now we are good to go okay   now we are done with this let's talk about why  do we have to use clean architecture so that's   the importantance of clean architecture now  with clean architecture it encourages a clear   separation of concent within the code base so  as you can see from here we have the separate   project now each project has what you needs to  do example is the the application and now the   infrastructure the application going to contain  the interfaces and now the infrastructure going   to contain the implementation so we see that we  do not have the interface and together we have   it in a separate form and it also encourages  what we can break it down the application to   layers clean architecture to promote the  stability you can also write unit test for   each layer independently ensuring that business  Logics and functionality are th tested and also   developers can also make changes without re  W in the entire system so let's go to the   infrastructure and that is where we're going to  have our database connection okay that's going   to have our data access in there so I click on  this and we need to install some packages in here   so let's add man get packages you're going  to install the EF core and also tools andq server so we need microsoft. en  framework c. tools let's install this aside from installing  this we need to install SQL Server so we have this over here SQL  server and now 8.0.1 let's install this to and maybe we can install the EF cor itself so these are the three packages that we need  for now so when you go to solution you check   the dependencies you can see that we have  under the packages we have them installed   here I'm going to click on this then as  you can see from here I'm going to let's   say copy this package references let's copy  this let's go to the presentation layer and   inside that going to work on the web API so  we need to include them here so right click   on this web API let's go to unload project save  this project unloaded click on this again now   where we have this let's paste it here because  we're going to definitely need this here for   registration so that's the reason why we have to  include this uh packages as well once you're done   right click on this 4pi and I go to Rel load  project with dependencies since we have these   packages installed already it's going to reload  them after that let's uh build this solution together all right so while this has been  built let's go to solution then we go to   our in infrastructure and in here I hate saying  infrastructure I can say IL isn't it I I and that   is it okay so in the the IL that infrastructure  we're going to write click on this we click on   let's add folder here and we can name it this as  data as you know if you following these videos   you know data what's going to contain so we need  a class and this is going to be the appdb contest class so you have to put updb contest class in   here and this going to be public and  this going to H from um that is a DB contest so we can create Constructor for this let's pass in the options which inherit   from the base okay now once we  have this done let's create our model now what do you think the models  will be you know models are independent   right that is a business logic let's  say with this we want to perform card   operation on customer and the customer we  need customer ID customer name customer   Etc right so all these properties must be  in a class and this class what we call as   model or entity and this must be found in  the domain layer so we go to the solution   I click on the domain now here we're going to  add a new folder to this and this going to be entities so here we need only for customer because  that's what we doing so customer employee well   anyone like make it an employee or customer  okay so employee be okay so we create a class   for employee and now what are some properties  that going to need from employee this going to   be public let clear this up so we need maybe ID  automatically for primary key perpose we need name right so aside from name what do you  need again maybe we can have access to   address something like that okay so maybe we're  going to have a string and that's not address   okay maybe let's maintain this okay you can  add more to this but for practical purpose we   want to maintain these three properties all  right so the next thing that we're going to   do here is we're going to create our service  response and this response to be a dto uh data   transfer object that would send data or maybe  a response from the infrastructure okay so when   operation is being U made now the outcome  of this operation we have to communicate to   the user using this dto so we go to solution  and the question is what do you think is the   best place to put the dto you know presentation  layer is going to access the application layer   so application layer it is the right place to  put all your dto so that it can be accessed by   the presentation layer so I click on this and  in here let's add a new folder we're going to   set this dto now with this DT we can just have  a class in there and we say this say service response now this service response what are we  having we going to have just a public class this   is not actually a class we can make this as  record then let's specify a flag in here to   check the state of the the operation that we are  just um tackling and also let's have access to   maybe an extra message that you want to provide  okay so we have this we don't need any of this   here so we can um clear them off all right now  let's go to solution so once we have our um dto   in the application layer we need to create our  contract that's the interface right so the same   project we're going to add a new folder to this  and you can name it as contract you can name it   as anything at all that you want interfaces  you can do that okay so name is is up to you   contract and now with this contract we're going  to add an interface in here so this is going to   be an interface you make sure you go going for  interface and this is let's say this is an i employee which is an interface  employee interface so this must be a public let's C all this up okay so aside from that  we going to have access to   this is going to be a task and we have a service response then then in here we have maybe  add so this is an employee right so this   add let's make it an async and you know  this is going for this employee from the   the same from the domain since this um layer  that is a application layer depends on the   domain the domain layer so we say this  is an employee we can do same for update async update async and you  can have access for delete async now with delete asnc maybe we're  going to look for only ID let's make   it an ID okay so and ID will be okay for  this and in that we need let's say list of employee so here we can have get a sync  so it's going to get all employees then   maybe you can have access to get  by ID so it's not going to be list so get by ID then what you need to do pass  in the ID so these are the contracts and um it   is a core duty of this application layer  to handle this contract or the interfaces   whatever that you call it yeah okay so  once you have this the next question is   we need to create an implementation and now  we are detaching the implementation from the   interface so the implementation here that is the  the the infrastructure has to happen inside the   infrastructure project okay and that's a layer  so let's go to the infrastructure in here and we   can create another class not class a folder  and we can just write an implementation etc etc so from naming conventions or for  names it's up to you so let's add a new   class and this is going to be an employee  okay so this an employee let's make that   rle so that doesn't look the same as the the  model we have this as public and now since   implementation depends on the application we  can go straight ahead and I inherit from this I employee now it has a method that we need to  implement so using this contol period we can   Implement all interfaces in here you see good  now the same infrastructure that contains our   data that's an abdb contest so we can pass in  or inject abdb context here we can use primary   constructed but for now I don't confusing  here let's do the traditional way so c o r   let's have our abdb context class injected  contest then we say it's an appd contest   control period we can create an assigned field  not properties take note all right so once you   have this we need to go to the appdb contest  class and in here we're going to create a DB   set so DB set then it's an employee from the  domain and we can have a look at this so the   table name maybe employees okay now let's go  to the rppo that's infrastructure and now we   can start using this so from add Ayn what are we  doing we just going to write so appdb contest.   employees. add okay so we're going to add  employee to this then okay so here let's   have a private method in here so private and  this Asing task and let's say commit or save changes okay now this marks to await abdb  contest do save changes async we don't want   to repeat in ourself remember one principle  here is what do not repeat yourself dry so   we want to put it here because we're going to  be using it often then we can say I wait save   changes that is all now out of the delete we're  going to find this in here so employe is equal   to await appdb contest do find no no don't  don't find first do employees do find async   then we need to provide in the ID so if this  is if this is not or if it is null then we can return new service response then  in here we can have something like forse then we can say that user not found  but I'm not sure user won't found user will   be found but me else what are we doing we  going to remove it so we're going to say   iwait appdb contest dot employees. remove  so this remove you need not to employee   will come here and this we don't have to  bring in a wait in here then after that   we call this a wait save changes async  to save it then what are we doing we   going to return new service response and  now here this going to be true and we say deleted are getting the idea now you have to  do same thing to this so after adding we need   to return something like added this depends  on you how you want to do it let's go to get   async so with this get a sync we can just use one  line of code to get it this get list so I wish   we going to have appdb contest dot employees  do as no tracking we have a snow tracking in here okay so let's say dots  then we can have so has no tracking then two list async the reason why we adding this here is I just  return the list of employee and we don't want   the EF to track it because you're not making  any changes uh to release the memory so we   don't want to track it that's why we have to  add this get by ID we can also do same so we   say I wait okay then with this we can have ABD  contest the employees. find a SN then we can   pass in the ID and and here too we can still use  it as no tracking it gets the ID and I returns   it it doesn't want to we don't want it to track  it anymore so get the ID and I return it but you   can maintain this and I update async what are  we doing in here we can have access to appdb contest do update let's specify this [Music]  employee then I wait save changes async then   return new service response this going  to be true then you're going to have updated okay so this what we are doing then  we have so this is the implementation okay   and if you check this this is using the  data access layer that is where we have   access to our database connections the abdb  content test good so this is where we have   the peration inside the infrastructure layer  okay so now with this this going to be used   by only the application layer okay now the  API or the presentation layer I'm going to   use this the presentation layer is going to use  the application layer whereas the application   layer is going to use the domain layer and the  infrastructure layer also going to have access   to the application layer because that's where  it has this interface in so when you call the   interface it's going to call the definition  from this infrastructure and now there you   go so once you're done with this we need  to perform database migration but before   that you need to create a database connection  string isn't it and you know from that you can   do that in the web API go to app setting so you  can see that all that we've been doing we are   not tackling the presentation layer because  the presentation layer it is is a consumer   so it just consumed the service which has been  created okay now we go to app settings and then   in here let's have our connection strings  and in that you know let's have a default connection and we say this  is server is equal to we can   have local we can have database so this is demo clean DB so this is a database don't  worry okay aside from that we have our   trusted connection tror connection let's  set this to through and then TR server certificate set this to through as well okay so we  have this set let's go to solution program.cs file   and we need to register a database connection  before I forget let's register our service in   here so builder. Services dot so add scope now  with this scope we need to we're going to add   the I employee you see from from the contract  in the application layer and in that we going   to use the infrastructure to as well and that's  going to be the employee repo and it is coming   from employee repo is coming from so let's  go in there and I'll add this dependencies   project reference infastructure so as you know  you see that we're going to use the two since   we're going to derive the implementation here the  interface Here and Now within implementation we   have to include this so all that you need to do  here is consume the twool in your project okay   and and that is all for the registration okay  so once you have this employee repo control   period we can now use this and that is all okay  now let's go to Reg our connection so you're   going to have Builder do services do rdb contest  then you call this appdb contest class that we created and in that you have to pass an option  I call it o which marks you o not zero o dot   use SQL server and now in that we need to get  bet. configuration dot get connection string   what is the name of the connection string  here it is default con connection I believe   you remember right so let's close this now we can  just check so we do not make any error here let's   copy this go to the program and let's paste it  again let's ensure it is exactly what we want   okay so now we have the we going to do here  is perform migration M here one thing I have   to take note here is you know we have the data  access layer in the infrastructure and now we're   going to perform migration onto the API okay  so we have to set this as start project from   the API click on package maner console and now  when we get to down here default project set to   this infrastructure layer that's where we have  a data access layer in so let's do this and we   say add migration so this is first now just  going to build the project and I'll start the   migration f so I believe you've seen this file  before so I didn't know to explain much on this   and that is a um the migration file has been  created and you're going to put this into an   actual thing inside the database so we're going to  update it so update database is going to make it work whoa have you encountered this before  and what did you do okay I know what you   have to do here is go to the solution  click on this web API and on this guy   invariant Global globalization set  this to force I'm yet to find out   the reason why it does that if you know let  me know so let's go in there and I'm do it again all right so we wait while it is okay so  I can see that it has finished performing the   migration in here good and we have the done now  the next thing we're going to do here is we can   close all these tabs in here close all tabs  so we have a database we have a data access   we have um the interface and H repository  created and now it has been registered in   the program.cs file so what you need to do here  is consume the application layer and now in order   to consume it we have to create a controller  in the API so let's go to the API right click   on this and we go in for controller and now with  this we're going for um new controller and this   going to be an employee controller right so  API you want to have access to um read and   write action so maybe you can use this and what  you should do here is is going to be employee controller yeah so we have this one now in this we have  employee and now this get so I numerable and   this going to be let's make this as um public  async and this going to be tax of let's make   it I action result and now with this going  to be an employee so we know here is going   to be an employee and that is get okay so this  is coming from the domain so we have to use a   domain model and now what we are doing here is we  can return so I believe we know how to implement   this controller isn't it yes since we are done  with the interface and implementation you know   to work with this okay so first one we are going  to inject this in here as you can see we inject   the interface from the application layer then  we create an instance and we can have it in   here as initialize the next we're doing here is  the get method and here we get the method so we   call this employee there an Theo so this is going  to be from the application layer and we getting   it get a sync which is going to have access to  each implementation in the F structure and now   get it from the database aside from that we  have this get by ID and we also doing same   in here as you can see now the next thing to do  here is um this is ADD so does a post from this   there is the payload and we going to also get add  Asing from the same um API not the API the same   interface and let's see the last one doesn't you  have an update we're doing the same and that the   delete okay so these are the implementation  of this endpoint against the interface that   we have created okay so now this is working  is it working now it's not yet tested so how   come it's working now we've completed this let's  put this on and then check if it is working as expected so it is ready we're going to try it out  and check it out so let's go to the Post we're   going to post let's say there is an employee  we're going to add one so the name is net code up then the address it's in Ghana now  let's execute this and see so execute this yeah so we have the feedback as added  from the dto let's say from get API or get   employees let's you're going to have access  to that employee yes we have a net code Hub   Ghana right now let's see let's go in for the  update so update and we know the ID is one and   here you know this is net code Hub so let's say  net code Hub we're going to add channel to it   and now with the address you're going to say  this is Ghana AC Ghana and we can talk about   West Africa okay so let's execute this so updated  right now let's go again and now check this out get employee execute this yes and  now we have it when you go to get by ID get by ID you're passing the ID of one execute  this yes we have it now let's go in there and I'll   delete it this so we passing the ID of one two one  execute this deleted now now let's go in there now   check it up execute nothing found so when you  go to get all employees you see it is a list   so this working so that's a way to implement  um this layer clean architecture in the web   API service okay now let's see how to consume  consume this in the client that's a Blazer web   assembly so let's close this now if you check  when you check it from the solution you can see   that we've able to tackle one presentation  layer so we can also T the next one but to   do the next one we have to create our service  right and now where do you think this service   will be you know the presentation layer it is  consuming which layer the application layer so   it is appropriate to put all your services in  the application layer okay so let's see from   the you done with API you can close it up then  let's go to application layer we have a contract   in here we have a d2os let's also create one  folder for this and this folder we're going to   name this as let's say Services right it could  be client service it could be any other right   so this services that we are creating here it's  going to be General so any presentation layer or   any presentation we want to consume this can  use this service and now get going so within   the service we have to create an interface  which encapsulate this one the contract that   we created so this is going to be an interface  and we're going to say this is um I Employee Service okay so now this employee service  this is going to be public so we can CL cler   this and now with this we can just go to the  interface from the contract here then let's   grab all this you know we don't want to type  and be wasting time so let's grab this go to   the employee service and now paste it here  so it's exactly what we have in here right   and it is using from the application layer and  a domain layer all right so we can just format   this well let's close this then let's go to  the same set Serv we're going to create an   implementation for this so we going to be  a class then you're going to say employee service so this employee service what do you  think which interface do you think is going   to consume I know you've done it right it's  good I know you're saying that it's going to   consume the interface that we just created  and that is which one oh see why I'm doing   it and that is this one there the employee  service control period and the interface   we're going to create Constructor for this and  now with this Constructor you see Constructor   here we're going to inject the interface so  which interface I going to inject we're going to if you are working with a Blazer server then  we need not to expose an API isn't it but since   we are not and we want this to p message in an API  which is the presentation layer we have to use an   HTTP client isn't it so here we're going to use  an HTTP client to post a message to an API okay   whereby the API from the presentation layer is  going to drive the interface from the application   layer again and at application layer so going to  get the data from the domain using the domain to   access data from the infrastructure so you can  see it is interconnected you see see that good   now here about if I type in HTTP client we have  this one and we can create an instance control   period and we going to create an assigned field  okay so we can format this well now from the ad   async we're going to create very simple one  so we say v um say data is equal to an A W   HTP client Dot so this post adjacent a sync let's  pass in the routing here so that's an API slash employee that is all then we need to pass in the  data employee data now this have you have to read   a response so V response is equal to a wait result  dot um content first see what I've written oh so   so is data do content do read from Json async and  this what you want to read in the form of a model   so which model you looking at service response  then at the end of the day we going to return response so you see this we're going to do the  same thing here so we can just grab this we go   to the delete sync we're going to paste this  in here so instead of post this going to be   delete async Now API SL employee then we have  to specify the ID in here but we have to make   it a string interpolation so use the dollar  sign and that is it this must be an Asing as   you know don't forget it's very important and  then that is it we can this is what get a sync   with this get a sync I'm not sure we can we can  just put just one line okay so let's say I wait   HTTP client dot get from J asnc we can use this  and we can have access to list of employee from   the domain then we can let me put this on  a new line so you can see well so list of   employee in here and in this we need to specify  an API SL employee that's all that we need to   do now okay now the next one here is get by ID  so we can do the same thing you can just grab this the next line and now in here in instead  of list it's just a single model so we can have   an ID then in here we passing the ID you see  this very simple one okay so that's all that   we need to do this must be an async I know  you haven't forgotten isn't it and now this   yes you have it done the update we're going  to do same so for update we have to go in for   this add method now let's come down here let's  space this this must be an async and now here   it is not pushed it's going to be right what  put adjacent async and that is all very simple   so we're done with our service so let's go to  the implementation so we see from here after   creating this that is all now we can change  the presentation Pro we can add project we   can change again but this doesn't change all  that you need to do here is consume this so   let's do as what you've said let's do that okay  so let's go in then and consume this we go to   the we assembly in here and now with this two  we're going to consume the application layer   okay so in this we go to the program.cs file  and then in here we're going to write with the services dot there going to be  ask C then we need I Employee Service our Employee Service then we need  what employee service so you can see that   here we are consuming only the application  layer not the rest of the layers now the   rest of the layer ERS are been implemented  or consumed by the this Ser that we have   created remember that this service is also  consuming what the repo the interface from   the same application layer so now since we are  having different ports we have to register it in   here so instead of using this base um build  the host environment or Base address we're   going to remove this and the next thing that  you going to do here is go to the controller   that is API if I say controller an API go to  the properties L sets and you see we have an https let's grab this we got our app is  running on the htps right so grab that one   come to the program and then in here you need  to paste this okay so this what you need you   s a base address to the API you can remove  this since you're not using the model here okay now we done with this the next that we're  going to do here is so since we are working here   with having different port as soon as register  or we assign The Base address to an external   Base address of an web API it means when you  post a message or request to API we have to   enable resource sharing that's a course  right so let's see you go to the program so solution then you go to  from the web API you go to program.cs this one or this one yeah so this  one now if it's under development we want to   app.use course that is one the development  but maybe you can also extend it when it's in   there but this is the development mode right  so let's enable it here now what is an Port   here we're going to run on https so we don't  want to use this now we going to use 7254 is   so go to solution go to the web assembly project  properties line settings and um this one is what 7135 so program 71 35 that's the address of  the uh the Blazer and now now when you go to   let's see from the web API properties line  settings here it is what okay 7096 so let's   grab this we go to Rob assembly and now 7096  yes and now when you check the program you   can see from here that you're allowing any  method any header um with headers the header   names that content typee okay so we want  to allow the following okay so once we are done the next thing that we need to do is  what again we can create our form and start   using it in the Blazer overi project very  simple one okay so after creating your um   layers consuming it in the Blazer or the pration  layer is very simple isn't it good now let's go   to to solution so from the solution we you  know when check the dependencies from the   project we have the application layer  in the registered right so let's go to component then pages in our homepage  let's have a simple one in here okay   so we're going to have the admod to see so  code and now this is going to be let's say employee and now we say this employee so  equal to new now let's include this from   the entities we need to design our form so  let's is an edit form now this edit form   maybe we can use one of our packages that  just uploaded now floating um dialog will   be okay okay so let's try that so let's go  to solution then right click on dependencies   from the web assembly manag to get packages  then the browse toop type in net code and I'm   going to see the package which have been  um uploaded what you want to do here is   you want to use component validations this  components okay so this package you install this okay so now it has been installed let's  go back to the homepage and now let's use the   name space so at using net code Hub dot  packages. component event dot validations   okay so dot you want to use on input event  so you want to verify this and now in here   in our edit form let's have our data notations  in here okay now within that the first thing   I'm going to do here is at Le we should put  this into diff class and this is going to be   a row and now now in that we going to have  another div class and let's make it column lg6 let's move this edit form in that so  in here we're going to have access to the   first one is we need an ID we not going to  provide ID to this so we need name so this   going to be test so you can see this test the  component from the package now with this test   we can provide value and that's to this  component okay so let's see what are some   of the thing that we can use from this we have  display name value and we want to use floating   test so we have two things here we have the  test and have floating test okay we want to   have a floating div so floating test and now  in the floating test we can provide some ID   such as label so we have label this label here  is going to be um let's a customer full name   and we can have a placeholder such as John do  not John Das John do okay we can make a copy   of this and now we're going to make this  as floating test area so FL you see have   floating number then Flo test area label here it  is customer address so example here is so um Acra Ghana maybe West Africa that's an example  okay and that's what that we need to do   aside from that we we can bind this so  edit form let's have a model now this   model is going to be an employee and if if it  is unvalid submit you want to talk about save it so save then what again can we do we can have  an bind value then band value is equal to what   do you think employee isn't it dot we need the  name then we're going to do same to this one so this going to be address you see now aside  from that I you guys we should just put it in   this form okay think this will be okay so we  can remove this that is one control KD okay   we can also do same thing to this one label  placeholder and now we can close it here and   remove this tail control KD can remove this  one okay now once we are done we need to add   this validation maybe um message now this message  going to have this for pointing up to employee. name then we can just grab this one and  now done here we can also paste this so   instead of the name there's going to be what  good address I know you guys understand this   isn't it okay then we must have our button and  now this button you have our class be BTN BTN   primary and maybe type here since it is a the  form we can have submit then here we can have save okay maybe let's have mt5 mb5 this will  be okay okay so we can also have a CSS class   attached to this if you want to um give now  space between you can also have a CS class   attached too okay so maybe in here let's  see what we can do you can also have CSS class you can have this class in here and now this class you can say mb3 Okay so this also going to work now once you   have this we need to run for this  so save then Asing task save in here okay we have the method now let's inject   the application layer in here  so at inject then I Employee Service then we say this employee so this  we have to include some name space   now we have it so we can just copy this employee okay so we can just make it a EMP to EMP that's fine very simple one  then here we can say that by result is   equal to a wait EMP dot you see so  dot add a sync let's pass in this employee now this going to return a results  okay so the result that you're going to return   we can check if or we can apply two pole  here to check so instead of doing this we   can say flag and message but that's what the  service respon is coming out from so we're   going to say if flag what I going to do then  if message what I going to do okay so before   that let's command this let's also install  one of the packages that have been published   and get.org and this package going to  be um model or yes so let's apply all notification okay is more done  notification which one do you want   us to use let's use the twist twist  notification okay so with this let's see let's go to the same dependencies right  click on this manag new get packages no this   is not the this is not the API you  don't want the API okay careful okay   that assembly so from this we're going  to use tost this one let's install this apply this okay let's go back again and  now where we have this we're going to using next code Hub so using that  code H dot the same packages in   here do component dot then we can  now use this tost okay so from the   tost that we have in here we're  going to we have to include this toast toast so we include this now  here we have the duration so we can   see duration here is in milliseconds so  this duration here requires in what in   milliseconds so we have to specify this  in here so maybe we can have in then duration then we can specify this duration like this aside from that once again  we have an icon CSS class we have you want it to   persist um persist you want to S it through I've  made a video on how to um use this so if you want   to know how to use this very much know everything  check that video out check this video description   and you're going to find it in there now we also  have icon CSS yeah so this what we want to do now   aside from that we need to create a ref and now  this reference attributes is going to be um is it toast toast model see before we do  to model we have to inject this too   service so add inject then we have tost  service then we say this is toast service   so now with this to service we can then  come in here and now say to service dot   to component this one okay now this two Serv  that we have injected you know what happened   we have to register this to service  so we go to the program. Cs then we Services services. add you can add scope or  sing any so then you're going to have thir service okay so this what we need to do and that  is all so very simple steps register it go to the   homepage inject it and I start using very simple  okay now the duration that we have in here we   going to say that when it is being saved and if it  is true then the duration we not going to pass any   duration we want to maintain a default one because  this has a default duration of 3,000 milliseconds   okay so that if it is true you want to just  display the tooth service so we can of say that this TOS this to service dot now this is what  true so is Success so show success tost   now in that we can specify the title  and the title is going to be maybe   say success we can also specify CSS icon  to this but for now we want to maintain   only this so this a title and now the  message here here is going to be this message okay in case it is false so you want  to say if this is false this is what you want   to do I'll do this so if it is false we want to  set this maybe this could be if that is false   this could be warning so we can set as alert  now don't show success so show maybe warning   or show error tost okay before that this  duration we going to say duration is equal   to 5,000 millisecond then show this then  show the message as well after that return okay now this what we have let's  run this up and see so let's set   the web assembly also so let's set  this as startup let's find the web API and now let's run the web assembly so there  is running now let's try the web assembly to yeah you know we having this right it  doesn't look great because we did not   include the the bootstrap class so from  here we have to include this bootstrap class so there's going to be a class I'm going  to say form control so we need to include this and now let's add this form control to this okay now here you can also set MB as three now   this should get the form refreshed  if it doesn't then we have to reload this oh yeah so this what you want to see so  we have this let me in increase it good so   this okay now if I click on the you can see  it's a floating um component so we can have   full name let's say this net code H Channel  and this is NRA Ghana click on Save and now   let's wait yeah so you can see it came back  flash it is off click on this again okay so   you can see we have some notification here but  you can see it is didn't even wait do you see   that so let's edit well then we going to let's  go to the page in here for the duration we're   going to set this to when this is through  this going to delay 5,000 and default one   is what so you can set this default one  to 4,000 milliseconds let's save this let's try this again so I'm going to type in  Frederick andana so click on Save now let's   see yeah so success added right good so you can  see it's been there for a while let's say when we   have what can we even do we did not check if if  the file is already found so let's see let's go   to the rippo let's go to our infrastructure  um layer implementation and now before we   do add in here we want to check so before we  add we're going to check so V check equal to   a wait okay contest do employees dot let's use  first or default whereby by the name let's say lower okay is equal to this  employee do name employee. name. you lower so here we are checking to see if we have   the same data in there so we going  to check if check is not equal to null if check is not equal to null what you want  to do you want to return new service response and   it's going to be false okay now with this false  you're going to say that user already exist else we do this control save now let's  do this again so we have to where run this let's stop I think all this I want  to stop them okay then let's stop the   API too now let's do it again so  we going to build all together bu solution so build we going to  run this web assembly whil it   is running we check and now run the web  API as well so debug this starts without debugging so you can see that our API is ready  now the data that we have been added we click   on get employees try this out and we must  see everything in here let's wait and see   making a qu from the database now let's  check it out yes you can see we have the   same thing the same thing have you see 1 to7  let's go in and delete everything from here   maybe you can Implement B delete right here  you need to delete it one after the another   that's very sad so two we can um delete  this we have three we can delete this I   check the resp response deleted we have  four we can delete this deleted we have five delete this deleted we have six deleted  deleted we have seven execute this deleted let's   go for eight execute this ah these are not found  okay so it means you done now let's try this and   see so when I click on get employee execute this  you could see there's nothing here we're going to   add one so net code H Channel then there's going  to be an AA as you know Ghana as you know Wester   as you know right so click on Save that's what  happen so success added right good when you go   to execute this because now we have this here now  let's click on it again so if I click on this see   what happens alert user already exist now this  going to delay for about 5 seconds before it   finishes Che it again because the reason why  it is doing it is when you check this we set   the duration here we catch the duration from  the home do Razer and now if it is false you   want to set the duration you want to add one  second to it by default is 4 seconds so if it   is true Show 4 seconds if it is false show 5  Seconds okay so now we have this now let's go   for the update and I'll delete very simple one so  that's what we're doing now this is for update if   I click on this if I want to update this is it  possible it means you have to first get the list   right of the DAT of the employees so maybe we  can get the list down here or you can see this   column six so the other six you're going to  display the list in there so we have da class   and this is column lg6 now this lg6 let's get a  list from this so we must have a method to get it   when the page loads so overwrite then can have on  initialize async we can have a list list of this employee so employee then we're going to  say employees is equal to new you see so   you want to have this employee must come from  the domain not not our employee this must be   an employee from the domain yes so we have  this when they page initializes we are saying   that this employees is equal to await EMP oh see  what I've done so await EMP to3 off to EMP do get async so when the page runs Sol those you  going to have access to this then in here   we're going to look through so you're going to  say that if employee do or it's not null that's   you want to perform this okay then I'm going  to Loop through this so for each ver item in   employees you want to have a table so let's  have a table in here so table class and this table table striped then we have our T head and I have a TR then t t head the first one you're going to  have an ID T you're going to have name then th   again we're going to have what again we have ID we  have name we're going to have address then maybe   the last part we're going to have th maybe action  so we can delete it isn't it okay now aside from   the T head we can have t body then with the T body  we're going to have our TR so first T I going to   have a TD okay so inside this TD that's where  this has to come in so this is coming in from   the T body then with the TR from the first row  we can paste it in here contr KD okay so the T   by here we're going to have item. ID we can make  a duplicate of this then we can talk about name   talk about what addresses isn't it good the last  one is uh the button so t d and now with this TD   we must use maybe delete update and delete right  so let's have button or even not button let's use button button so this is going to be class  BTN BTN info and btns SM small and in here   we're want to say edit we can just make a copy  of this again then instead of the info this   is going to be danger and now we going to say  delete you can also use an icon to do that so   when this is clicked so at onclick we can have  access to edit click we have to pass in this item okay but this must be a method that we  can point out to a function and we also going   to do same so we can just copy this from  here then from the delete so instead of   saying edit click what I'm going to say add  it perfect delet clicked okay so here since   we need only an ID we can just pass only  ID or even the model well we can pass in   this item do ID okay so this what we're doing  now let's have definition for this method down here so if this is void if this is  clicked we are accepting an employee   EMP and now with this we're going to  call this by results is equal to await EMP EMP dot so with this okay I'm  not using this let's make this an employee so this is incoming EMP I think  this will be okay incoming employee so I   wait EMP dot then we can have access  to this is edit right so we're going   to edit this but before we edit this  it is unless the person clicks on Save   before you can get this so this is  an edit so we're going to say that employee employee is equal to this income  in EMP that is all then we can just use   this Lambda to handle this okay that is an  when edit is clicked so no need for async what of if delete is clicked so delete  clicked and now this needs an ID so with   this ID we're going to call this so  result or let's use the tupo flag and message so it's equal to await EMP dot delete so EMP do delete async we pass in the ID  okay so when you are done instead of refreshing   the page we can extract this this method you can  extract this method in here and I'll say this is   private placing TP task get data point Ty to this  one like this then when the page loads we call   this a wait get data and that is all we can also  use Lambda expression to point this up to remove   all these bracket bracket brackets okay so get  data as soon as it call it up then I wait get a   data again you see so as get the data again maybe  you can Implement State as change or the page will   just get itself refresh if it doesn't refresh  then we're going to implement status change   that is for delete okay now as for the update now  if I click on Save we first have to check so if   employee. ID is greater than zero it means you're  going to update it then we can now call this okay so in order to handle this one  I think we have to create um so V response okay so let's say V response is equal to new service response so service response service response is find  application layer and yes it has be   found here okay so with this we're going to  say response equal to Okay add a sync that   is if ID is greater than zero then we're  going to add this whoa okay come back yes else then we're going to say  service response is equal to   add async so here we're going to make  it as what do update so EMP do update   a sync then do this then the last  year we can check if response. flag flag in here okay so if this is false then we  going to use response. message very simple one   okay so response equal to new response we  checking new serice response and now this   serice response I think we have to since this is  uh the record class we cannot instan it like this   so maybe we can what can we even do so maybe we  can pass in something that like first defaultly   and now it is message is null okay so you can  pass in like this let's save this okay so we   must have and our response do message here  must work response Dot message okay so now   let's wait let's run this and see so I save  this let's run this again and check it out all right so you can see that you  have the uh the data in here let   me minimize a little bit yes so let's  add one more and this is going to be Frederick then stall in ACA click on save it  has added but you don't see it here do you you   don't because we did not call this let's see so  after I I save this after this working perfectly   what do I need to do if this is false we do this  else we have to call this method where is it get data so we can get the current data from the  database so rebuild and save changes and do it   again so we have it in here now let's add one  more so your name so my dear friend your name   put your name here and your location put it there  for me I'm watching so click on Save and see now   we have in here if I click on delete let's see  what happen so I click on this edit this you you   see I have it in here and if I click on a let  me change to KI and that is in um Ghana as well   click on SA save and now updated but you see it  doesn't okay yeah it has reflected have you seen   so you see that the edit is working the ad is  working now let's talk about delete if I click   on delete yeah I can see it doesn't maybe let's  refresh this and see if number 10 will still be there yeah so it is no more so as  we delayed we should call this to   get notified right now let's  also work on that so for the   delete after deleting this we call this  data and we have to include state has changed now let's see so let's delete the last one so delete  yeah I can see it is off right it is off   let's add it again so net code Hub channel  and this is in Ghana so so add this and it   hasn't added in here added okay but if I  click on delete nothing happen let's see   so let's go up Channel One save this you see  if I on delay nothing happen it just vanishes   if you want to confirm this what can you do  we can also Implement a component in there   that I have created let's see and we want to  confirm I you want to you want to delay this   before it get deleted isn't it let's install  the Moda component from um net you get.org so let's go to solution then right click on  dependencies the same place we have to close this let's do it again manag to get packages and   then here can see we have mod so we  going to um use this model click on install to get it this installed okay now this is done we go back to the homepage and now with this homepage  we going to use this confirmation   component so once let's go in there and  add the name space so at using net code   hub. component the packages. component  dot then model so once you're done what   you need to do here is to include this  mod dialogue so we can just put it down here so we have a mod dialogue let's see so we  have this this bootstrap class this then custom style okay so we making a reference here and  now to in order to do it we have to create a   reference down here so confirmation there is  a component and Confirmation and we going to create you're going to provide an instruction  for this so custom instruction are you sure you   want to do this you can decide to also change this  okay so that's the the instruction and now for the   handle we can um show maybe confirmation I think  so so here we so if I click on accept okay if I   click on confirm this event going to get fired  okay so in order to do this we have to create an   event to handle this let's copy this then down  here we can have void so handle and now this   return nothing so in here if I click on confirm  that is when you want to start working with this   so you know that's delete if I click on delete  what is this one so if I click on delete I want to I want to call this so here the first to  do here is if I click on delete this I must   display the popup isn't it so we can say  confirmation confirmation do show okay so   we have the message specified in here this is  a message I just want to do this if I click on   this this is going to shown now after after this  getting shown it's going to ask you a question   I just want to do this if I click on yes that  is where this is going to get fired this going   to get fired so we going to put this in here  let's see is this an await this is not an await okay so and this must be an async and this will be a task you see so and with  this we have a flag is equal to this and ID   so with this you need to provide an ID for  this very simple one okay so we can have this property and this is going to be uh Delete ID so if I click on this I'm going to  assign this is equal to this ID I'm   going to assign this so when I'm done  after showing up and confirming through   then I'll pass in the ID here you  see then after State being changed   I'm going to clear this or after this I'm  going to clear this ID is equal to zero you see so maybe this one I can do maybe for sake  I can check if ID is equal to zero then I want to return so this is what we are doing very  simple one okay now once you have this we're   going to have a confirmation popup from this  angle after we click on confirmed this going   to get fed when we click on cancel nothing  happen happens it's not to click on confirm   it's going to get fired and it's going to  call this method to delete it okay let's see okay so this is ready now let's see if  I click on delete I must have the popup but   you see I'm not having the popup in here you  see that all right do you know the reason why   because we've left one out let's go to the  solution in here we go to the web assembly   go to ww root for that is that so not that  good to let's see you see index. HTML and   here we need to include the script so put it  in top in here so this is a script reference   so content netod hub. packages. components.  model then model. JS so now save this and now   let's reboot this and check it out all right so  it is ready now let's go and I'll check it out so   I click on um delete oh yeah I have it I want  to do this click on close nothing happens you   see what as since I click on confirm see yeah  it is soft so it have been deleted check it again now when you reload this check it out  there no more I can keep adding the next one   net code H then custom address maybe Ghana as  a whole I click on save this that means added I   can add one more I can also add this to and you  can see it keeps adding now I click on delete I   just want to do this confirm it is off I have  to close this do this again again confirm the   S and have to clear this confirm and a s that  is it isn't that nice yeah so that's a way to   integrate this or um looking at this uh clean  architecture so we've implemented it with two uh   presentation layers that is for the API and also  the web assembly maybe in case you do want to add   another presentation layer a presentation there  going to be a Mario Blazer or Blazer hybrid then   you go to the same folder that is a presentation  folder and I we add it in there so on your project   you're going to have only five or four projects  is it four or five 1 2 3 four projects okay so   you're going to have four projects but within the  presentation layer you going also have multiple   projects in here so that is it for this video  thank you so much for watching this and I believe   you you've learned something yeah so you can  click on the like button to like this video and   help this channel as well you can also subscribe  if you haven't done that check the video playlist   cuz we have a lot of goodies for you I'm going  to catch on the next video till then take care

Channel: Netcode-Hub

Views: 5,499

Keywords: web assembly, .net 8, .NET 8, API, Develop, Blazor, WebAssembly, implementation, controller, .net blazor, nugget package, create package, install package, download, clipboard, clipboard in blazor, copy in blazor, read clipboard in blazor, validation, form validation, editform validation, toast notification in blazor, clipborad service in blazor, modal dialog in blazor, file download in blazor, file upload in blazor, clean arhitecture, presentation, domain, application, infrastructure

Id: _juuvnub04E

Length: 100min 7sec (6007 seconds)

Published: Sun Feb 11 2024