Complete .NET 8 Three -Tier Architecture with CRUD Operations using Web API & Blazor Web Assembly

Hello friends and everyone welcome back to  net code hop Channel I am Frederick and I'm   happy to have you here today in this video  we are going to talk about how to implement   three tier architecture in net 8 I've made a  video covering the topic of implementing clean   architecture in net AG now this architecture  it is used for skillable applications or um   large skill applications meaning application for  large organizations campaign Etc but of maybe if   you want to create a simple app for your company  you want to create a simple application do you   have to use the clean architecture yes you can  use that but if you think um it is complex or   complicated for you then you can implement the  3T architecture in in your application as well   3 architecture it is much more is it simple  than the clean architecture why am I saying   that because you know in the clean architecture  it tells about four layers but with the three   tier as the name implies it has three layers and  that is what we're going to have a look today as   usual if you haven't subscribed to this channel  um please do subscribe to this channel as well   and also hit on the notification Bell to receive  an update as soon as I upload new video and when   this video ends and you are happy with it give  me a thumbs up to this video in 3T architecture   we have three layers that is a presentation  layer business logic layer and we have the   data assess layer what does each layer do when  we talk about presentation layer this layer is   responsible for presenting information to the  user that's normally called the UI so your ASP   web API Blazer or any other framework that I want  to use to present and information to the user that   comes under the presentation layer when you go to  the business logic what is it this layer contains   the core logic of the application including  your business rules your calculations and   your validation method it acts as an intermediary  between the presentation layer and now the data   assess layer So within the presentation layer  that is the first one within the and the last   one that is a data set layer business logic layer  set between them because business logic layer it   is independent it stands on its own and the ACC  layer is going to use the business logic also   the presentation is also going to use the business  logic and the data assess layer then what is data   assess layer this is responsible for interacting  with the data storage such as a database or web   service so from Radio UF core having all your  database migration Etc your repositories which   comprise of your interface and implementation all  of these are going to be inherited or going to   be held by the data access layer so at the end  of creating data access layer you just have to   consume the data assess layer by the presentation  layer now this presentation layer could be your   web API okay and if you want to use in the Blazer  web app with the the new one that interactive   server random mod Etc which has it own database  then you need not to you can decide to extend an   end point to it or you can consume the data layer  Straight Ahead in your application so this makes   it what simple than the clean architecture let's  have a look with this a practical aspect for us   to get the concept of this so we're going to  create a blank solution whereby going to add   three projects that stands for the 3 architecture  we need a presentation layer we need um two two   classes first one going to be the logic and second  one going to be the data assess layer let's have   a look so launch a visual CDO and now create a  new project now let's go in for blank solution first and now this is going to be demo thre here architecture so demo. net or TR architecture okay so demo  3 architecture now with this we're going to   click on create to get this um solution created  when we are done we're going to add the three   project together so let's add the first one  now of this maybe you can decide to consume   this with your Blazer and also we a so you  can add solution folder and I'll name this as presentation okay so aside from  this presentation we going to add   the project to this and it's going to  be the web API so let's say this is web API so this is done now let's go in there  and then create the next one so we that   with our presentation we're going  to solution then we're going to add   a new project in here this is going to be  class library and this going to be business logic this is our business layer and now we're going to create  the last layer which going to be the   data assess so add new projects the same  class library and it's going to be data access yeah so this what you need is architecture  that you can follow to create your application   now let's have a look on how to implement  it so with a business business logic what   I going to do we're going to pass in our models  that's where our models are going to reside okay   so we can pass in our model in there and also  saying this business going to sit between the   presentation and the data assess we can pass  in our dto in here whereby the dto stands for   data transfer object okay so let's use some  quick cleanup from the business Logic the   class you're going to um delete this one  now the data access we have to delay to this so we are going to use what we did in  the K architecture to do same here okay now   this you're going to perform let's say crowd  operation on employees um that's what we did   um I did explain with the architecture and I'm  going to use the same thing in here as well so   in the business we're going to have our entity  so we're going to create a folder in here then entities now under entities  we can then add an employee class so there is an employee and we can have some   properties that we um wrote  in that class when we were handling the CL architecture okay so we have this  ID name and address this what you want to have in   here aside from that we said the business logic  can contain validation and Etc right so we can   decide to put in our dto sense is going to add  as intermediary between the presentation and the   data asset so we can put in our d2os in here  so let's let's create a folder and name it as GTO so dto and now what I going  to have in the dto we want to   have a service response that's uh  that's going to transfer a message from the data access layer to the  user so we can create a class in here service response and now in that service  response we're going to make this as record   so we need only two properties in here either  operation successfully or it is not and in case   it is not what is the message in case it is what  is the message that you want to display yeah so   we put them here so we have our models we have our  service response okay this what you want to have   for now in this business logic now once you're  done we going to the data asset layer now the   data asset layer we need to install packages  in here since we going to have access to our   EF core okay so this why I'm going to do I'm  going to right click on the data access then   go to unload project now in the project settings  in here I'm going to add the F packages so with   this we are not going to use mediator because  we've done this already if you want to check it   out check the video playlist or the description  of this video we're going to have it in the how   to implement mediator and cqs and net 8 clean  architecture and you also implement this the   same concept in here okay so check that all right  so we have we are just installing EF core server   and our tools that's what we are installing here  we going to also install the same thing so we can   just grab what we have in here we go to solution  then from the presentation web API we are also   going to unload this project then in here we  going to install this so let's also add this here once you are done we save them together  then we going to reload the dependencies   reload this with dependency so get these packages  installed we can then build the solution together so you can see that you have the project build  successfully and you can see three suceeded now   let's go to the data assess and in here we going  to create an interface for the database but before   that you know we need our um database we need our  FDB contest isn't it so let's create a folder and   name it as data to handle that for us so we have  a data we need to create an appdb contest class   so I click on the data and I click on you're  going to add a class to this this is going to   be appdb contest class so in this class is going  to inherit from DB contest now this DB contest is   coming from the EF call that we installed and that  is what we have framework call okay then employees   this is coming from the reference to the business  because a business logic so we have to include a   name space in here so you can see that the data  assess has in connection with the business logic   isn't it good also once you're done with this we  going to register database connection so we need   to do that inside the presentation layer web API  and uh upsetting. Json that is where we need to   specify a database connection so let's quickly  go in there solution presentation open your web   API then ups. Json and in here we are going to  pass in our connection strings so it's a default   connection and now this is not clean architecture  so this is three tier right so let's make it three tier 3 tier architecture DB and that's all that  you want to have in here for our database con   ction okay so once you done with this we can now  go to program. CS file from the API presentation   and I register the settings in there so before the  app buil we can just register it so abdb contest   you add this abdb contest and now we passing  the use SQL Server from the package that we   installed and now we are getting a connection  string that we stated in the apps. Json we need   to include this so you can see see that the the  presentation layer is also consuming the data   set layer yes and that's what we be using in our  endpoint as well okay so now this is done what can   we do we're going to um build this again they're  going to perform database migration we're going   to perform the migration against this data access  layer because this has our identity contest class   okay so that's you need to provide or you need  to make a migration against by we have to set   the Wei as a St project first so let's see if this  is done yes it is right click on API set as start   project click on package manager console and now  in here you make sure from default project you   do select the presentation the presentation data  access so here add migration going to say this is first so B has se that now it's going to  create a migration file name the class   as first for us after that you're going to  update the database yeah so done then update database we have an issue from here and  I know how to solve this very quick let's   go to web API and now in here let's set this  to force now come back and I'll do it again yeah so this is done so once you're done we  go to our context and I'm going to create a   hosit so we're click on data access and  now we going to add our repo so this is repositories now is it repository let's have  our interface in here and this going to be I   employee we are using this going  to be an interface so I employee So within here we going to have access to our  interface and our interfaces that we need serice   respon so add employee update delete get um all  and I get by iding so this is what we we need   or we want to have in this method okay aside  from that we need to create an implementation   class and the same pirry we're going to add a  class for this and this is going to be employee repo and I know this has to inherit from our employee so we can implement the interface  for this in here okay so from this add a sync   we're going to add employee we have to create a  constractor in Here and Now pass in or inject our   abdb contest class so after injecting our class  you know the first method is here is we need to   add employee and now we're going to check if the  name is there already we're going to return in   case it is not there we're going to add it in  here aside from that the next method is we're   going to delete it from the database so we're  going to take in the ID we're going to find it   and then when we get it remove it and now save  if we don't return this to the user the next   one here is you're going to get all us so get all  as listed and I'll return it to the user the last   one is get by ID so using this find a sync and I  return the ID or return the content to the user   as well okay and we have the last one as updated  so you pass in the payload in here we're going   to update it and I return updated to the user so  this is the simple one the implementation or repo   that we have for the interface that we created in  here okay so once we are done with this we need   to consume this inside our um presentation layer  and that is the web API so we go to the web API   then we're going to to create a controller in  here and I name it as employee controller okay   so we have this employee controller and that is  it we need to inject our repo that we created we   need to inject it in here then start using it so  first of all we can then inject this so we have   our class injected that's the repo and let's  have a look on get so we're going to get all employees so we get all employees so you can see  we call this employee. getet async then you're   going to return it we are also going to get by ID  so if I passing ID I must be able to retrieve it   by calling and a method that we specify from our  repo or the interface here the next one is if I   want to add employee let's also make this possible  so from body we adding employee object and as you   can see from here we add it you call the add is  from the interface and that is it and here delete   to let's make this possible because we have it  in the interface so delete it now there is an   update okay so we can update it and the last  one here it is delete so we can also delete   employee from our database so the interface that  we created that is what we have implemented them   here okay so now our API will be ready as soon  as we run it but the last thing we need to do   here is we have to register it in the program.  CSF we have we haven't done that so let's do it.   Services add scope then in here I employee  and now the implementation is what employee okay so there is the interface  and with eight implementation   um class now this is employee repo not just employee this employee repo okay so this is  now solved I think so let's check it out and   for saying Okay so let's go in there from data  assess Repository employee report this must be public yeah so when you check it again  problem solved okay so now our API is   ready let's give it a try and see so let's  set IP as startup project and let's run this up yeah you can see that the API  is ready now we're going to add   employee to this this so let's  add employee try this out execute this and now let's the response you can see here  is added we can add another one let's add another   one in here execute this added so when you go to  get all employees let's say here we have the two   so we have id1 and two we can also um update this  so id1 passing the id1 in here and I'll say string updated let's click on execute now updated so  let's get id1 and see if we're able to update   it and now we have updated right we can also  delete id1 so delete this yeah and I'm deleted   so now when you get all you're not going to  find id1 in there yeah you have only id2 so   you can see within a short time you're able to  implement the 3T architecture right this is very   simple you may sure the data access layer contains  interaction the database your business L contains   validations and models or the business for your  project and you can have your dto as well inside   the business logic then when it comes to the  presentation You Now consume the data assess   layer but of the if you want to have a second um  client a second presentation layer that's going   to be a web assembly and you want to interact  with an API then this very simple in that in   the C architecture you have to create a service  in the application um layer but here we do not   have any application layer so you can decide to  create a service for that or you can create a   service in inside the presentation layer and Now  consume it to the end point okay so that is what   you want to have now the presentation layer when  you create a Blazer assembly it going to consume   the business logic only and it's going to have  it own service so we are not going to implement   the datais layer we not going to consume um the  data say layer we're going to consume only the   business logic in any of the client that we do  add whether it's Blazer assembly or any other   um frameware that you want to add okay let's have  a look on how to implement this also inside the   client that's a web assembly so let's close this  now that you see an API is working let's go to   the solution and in here from the presentation  layer we're going to add client to this so add   new project and it's going to be Blazer assembly  stand alone and we're going to say uh this is Blazer Blazer Wasim stands for  by assembly now let's create this project you can see that the file or the project  have been added in here now when you go to a   presentation we have two project in here okay  now within this we going to create a service   in here to call and the API Endo here so it is  um present ation to presentation communication   client here is a type and the presentation  layer API the same thing so both of these   are going to communicate together and now  the client is also going to use only the   business layer and the web API is going to use a  business layer and the data assess layer okay so   the data assess layer it is protected or it  is not part of the um the client the client   cannot have access to the data assess directly  it must pass through the web API good okay so   now once you have this we're going to create  let's create a folder in here and I name it at Services now within the services we're going to  also create our employee service so let's add an interface and it's going to be I Employee Service and now we need the same method from from the  interface that we created so we can just come   here grab this then our employee service we  can just paste them here okay this is coming   from the business so we need to include or add a  reference to this business layer yes so this is   set we need to create implementation for this  okay so let's create an implementation um for   this and this is going to be employee service  so this going to be a class and we're going to   say this employee service this has to inherit from  from the I employee service so I Employee Service   then we need to implement the interface for this  so in here we need to create a Constructor and   inject our HTTP client in here aside from that  that when we make an end point to the add async   if I want to add employee I need to use the PST  adj async passing an API SL employee that's the   route you're passing the model and I'm going  to read a response as service respon from the   API when you go to delete you're going to do  same here we're going to use delete at async   so here we pass in the idid of it and now we can  read a response and I return it to the user when   you talk about get a sync so get or employee  we can use this Lambda expression to just put   in one line of code you can get it in the form  of a list of employee since you're retrieving a   list and get by ID all that you need to do here  is to specify the ID of the employee and now we   can have access to a to the endpoint the last one  is update so if I want to update it I need to pass   in the content and I have to use put put ad Jing  and I can specify the route and now the response   is going to be a service response we return it to  the user as well so this what that we need to do   now once you're done we can go to our program so  let's go to program. CS file now in here instead   of registering this URL to the host environment  Base address we going to scrap this off and now   here what I going to do we're going to pass in so  let's go to the end point of the API so this is   an API go to properties line settings and now in  here from dtp PS we going to copy this from here   straight ahead you go to a program and I paste it  here add first slash save it and that is all let's   go to the homepage now from the client section we  go to Pages we go to homepage and in here we are   going to start working it in here so in here we  can have an edit form to handle this before that   we can have an employee and now this employ is  coming from the entities aside from that we need   to create our edit form for this and I learned  here in the other video we use some packages   created by net code H so I think uh we have to  also use the same package as well isn't it good so   we going to save this you go to the solution then  let's unload the client section we unload it then   in here we are going to add some packages to this  and we need let's see validations we need model as   well so in here we're going to add the following  packages created by net code H we need model tost   and our validation okay so save this let's go to  right click on this reload project dependencies   and now this is set you can add this right click  on dependencies and go to add manage new get packages and now when you have it opened click  on this browse Tab and now just type in net code   you're going to have access to all the packages  then we're going to install the ones that we need so we have these packages and uh for now  we have this package is published and we are   using this tost we using model and we using  validations I've made a video on how to use   any of the packages in here so maybe check the  playlist known as a developer tools playlist   you're going to have access to this how to use  any of this but for now we're going to use the   tool the model and the validation okay now when  you done let's build the project together again   and then check if everything is in order  as expected then we can now move on with it all right so three suceeded everything is  in order okay so the next thing that we're   going to do here is we going to add the tost  the employee service and the too Service as   well so let's add this let's go to the home  page home. raer where is it solution then   from here home. Razer we're going to add this  in here at to service is coming from the tool   package that we installed and we need this  I Employee Service okay now this I employee   service is coming from the service folder that we  created so maybe we can include it in here so at using so bm. services and now we can  have access to this interface okay now   once done with this let's go to the program  and register the tooth service and also the   interface and it implementation Cloud that we  created so you go to a client program.cs file   and then in here we're going to add you're  going to add to the scope and we're going   to add the to Service as well okay let's go  back to the home and now we can clear this off so in here um if you've watched the  preious they architecture I build a small   UI here and that'sa what I'm doing here again  so can see we have a diff class of row and   column lg6 we using this edit form as you know  and now in here we have datation validator so   to validate the the form and here we using  this floating text floating text is coming   from the um validations and I think we have not  included this so we need to include this name space component validation. on input so here we're  going to use a floating text so we have this set   in here then we have the label the placeholder  and add is a class have validation message and   the same applies to the address we have the name  this all test we have address as test area okay   then we have a button and submit now there is  a list to display the form or to display what   we have have from the database we looking through  it if employee is not now we looking through it   and I'm displaying this as normal want when you  check here we have button class edit click and   delete it if I click on this passing the content  and now here passing only the ID so we can just   call an endpoint and I'll remove it from the  database so we have this employee setting here   and this everything is working now the method  you have to Define for Save if I click on Save   what should happen but first of all we want to  we can add confirmation um to the toast uh we   want to ask if I want to delete this what can  I do um just having a confirmation and this is   going to be the component that we created uh it is  created already and it's in the model um package   so confirmation to confirm before we delete it so  we create a reference and we say confirmation this   the instruction that you're going to assign you  want to do this there's a handle if I click on yes   what should happen Okay and there's a bootstrap  class and a custom St that you want to specify   okay aside from that we also need a tost now to  in here we need to specify the duration default   one is 3,000 millisecond that is 3 seconds but  here we have writing to 4,000 M 4 seconds okay   then we have a reference here from the to service  okay now a to service is what we have included in   here don't forget so we can get the to component  from here and now we have to set as a reference to   this okay then let's go to if I click on Save what  should I do so if I click on save this is a dual   process so you're checking if the ID is greater  than zero it means you're going to update it then   you want to call this update async else is going  to call this add async from the response if it is   false you want to return this to the user return  the response that's message from the API end point   but in case it is not then here we're going to  show success and I return the mess message to   the user aside from that you are calling the  data again okay so that's what we are doing   then lastly you know we have to clear the context  of this um employee so after adding this at the   end letter part in here let's say this equal to  new so we clear the content that's what we are   doing now let's get a list of employees so when  the page initializes we can call a method here   and I wait get data so this is going to we have  assign list of employees and now where from this   method the me is very simple it's getting calling  an endpoint that is a get async endpoint from the   service and or from the interface that we created  so get async which also going to um call the HTTP   client to the Endo of the controller then going  to return all the users that we have if I click   on edit what I'm going to do remember we created  a button scene here as edit and now delete now   the edit to be pass in the content and delete to  be pass in the content so you're passing only the   ID for the delete now if I click on edit what am  I going to do in here I think this one we have to   we not done get async yes this is a complete one  so with the edits we passing the the object as   incoming employee then we're going to assign the  content that we have in here as employee content   in this to the incoming one okay that is an edit  now if I click on delete to you see we assigning   a delete ID to this ID then what of the delete  ID we have not created any delay ID yet or do   we have this no we don't so we need to create  a variable to handle this delete ID so on top   here we have this delete ID and now the ID that  is coming here we're going to assign this ID to   it then we're going to show this dialogue are you  sure want to do this in case a person clicks on   yes then this method is going to get called as  soon as it gets called what are we doing then   we can check if the ID here is not zero it means  the ID the current content has an ID then we can   now call the delete as from the endpoint then we  can delete it after that we're going to set this   get data set the Del I to zero and now we can  also set this employee call to new cuz in here   we are not even set getting the employee we get  only this so there's no even need for us to do   this we can remove it and it's still going to  work okay so this all that you're going to do   to handle the CR the read the update and under  delete all right let's try this out and check   it out so we need not to let's say the wi startup  we go to the let's run the web assembly we go to   solution then okay we have an error here the name  space canot be found service response so control period so new service response and our  service response is coming from this business so don't d2os that's we  have the response and it is solved   now think so new service yes so let's run this up while this is running we going to the web  API and now from the web API I click on this   debug and I'll start with that debugging  so let's run both projects and now check it out so you can see that our Endo is ready  and I we tested this already so you and I   we know this is working now let's set to and  it is now loaded so let's see we have an error   in here we can check it out and see okay so  we did not add cost so let's register cost quickly so let's go to the projects and in  here from the web API we go to the program   CS file and now if it's under development  this all you want to do you want to add   call to this and now how do we get the  origin we have to go to the web assembly   go to properties then lunch and now what is  the https it is 7147 you can grab this go to   the programming here from the program program  yeah that is this one then 71 which change it   here okay that's what that we need to do we  can now um rerun this again web API debang this I think we cannot do it okay so I think  for now we can do it again so start with that   Bing and I'm just going to solve the issue  so now let's refresh this and I take it out yeah so there's no issue now you can see  we have the data from here so with this   we can edit this so we can add updated  then click on Save and then we have our   tools updated right good so we can  also have access to we can add new one so let's add address in here and now  let's check it out so save and now it   has been added we can also delete this  so delete let's so delete here we are   not having it if I click on delete see what  happens okay so the dialog the confirmation   dialog does not pop up let's find out and  see the reason why it is not popping up   so we go to the homepage and we have our  confirmation and now we have if I click on delete is we do not okay we have delet  clicked we passing the ID and now we   account confirmation do show confirmation but  we did not we have to include the model. JS   file we haven't done that so that's the reason  why we are having that let's quickly go to the   settings and I do that in there so let's go  to the solution we go to the web assembly bwm   go to ww folder index.html and now on top  of this we're going to include the script   and that is a reference that you need to  add okay so that's fine let's run this again okay so this is working now let's  see so delete this and you can see we   have confirm yes confirm and now see  it is off so we can now delete it we   can add another one let's say we add this in  here save we have it delete this yes and now   time delete it so you can see that we've able  to achieve the same um process using this 3   architecture yes so if you're thinking of  having a SM application you can implement   this architecture or you can implement the  CLE architecture as well so that is it for   this video thank you so much for watching and  I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 1,413

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, file download in blazor, file upload in blazor, clean arhitecture, presentation, domain, application, infrastructure, MediatR, CQRS, CRUD, Handler, Query, three-tier archtecture

Id: LpcVFfrQ8_o

Length: 43min 1sec (2581 seconds)

Published: Sun Feb 18 2024