Blazor Server Side CRUD Application Tutorial using ASP.NET CORE

hi there and welcome to my channel in this  video you will learn how to create a brazer   application from scratch and how to do  crud operations on a blazer server app   uh in which you can edit employees you can  add new employees you can update and delete   employees so you will learn all of that in  this tutorial so stay tuned let's get into it we are going to create a new project for  ourselves and we will choose a blazer server   application from here uh a blazer app and click  next uh we would put it on my desktop you can   choose whatever location you want to and i'll  i'll say the project name as a blazer grud app and click create so we will wait for  our application to be created uh from   this setting i would i would choose  blazer server app here and click create do now that our application has been created  and i have successfully built it we will run   this application to see what does dot net core  gives us out of the box for a blazer application and we'll wait for it to run in chrome upon loading i would be able  to see three or four pages   uh it's it's just a normal application  with a counter and it also fetches um   some weather uh reports for us in a page so we can  see three pages home page is like an index page   for us it's empty uh we have a counter page which  has a button which increments the counter we have   another page called fetch data which has a table  of weather results so we have three pages so we   will create another page over here to fetch  uh employee data and we would create it   we would create crud operations for it so we  will we'll create it we will read uh we would   edit an employee and we would delete an employee  so let's uh let's start building our employee   page over here to start doing that in the  shared pages i have this nav menu dot razer   we would use this to have a link to our newly  created page i would copy and paste this list item   and in the nav i would instead of the hrip called  fetch data i would i would call it employees   so that will be the the url  for our newly created page   uh employees and the name of the page to be  called employees as well and that's it over here   we would need to create a pages a page  sorry a razor component basically and   we would do that by right-clicking coming  to add add eraser page uh i'm sorry we'll   have to add a razer component sorry razor  component and we would call it employees there we go uh this is this is the razer page  and you have a mix of ch html pages and razer   components uh this is the the newly uh the new  razer component as part of the the blazer web   app um so we will we will create and write code  uh here so that we can we can do card operations   and we can we basically want to fetch the data  first so in our data folder as we have weather   forecast service and weather forecast model  uh we would create something for our employee   service and employee model so let's  do that uh right click add a class   i will create an interface for it first called i employee service and this will have a few methods  over here and i will create an   implementation of it called employee service employee service inherits from i employee  service and now we will create methods here   for the implies service interface so the first  method we can say is that that will return the   page would basically return a list of employees  so i would say a list of employees and we don't   have employee model at the moment so i will just  say employee but i will create an employee model i will just call it employee and in that i would have  two properties one is a grid   of the name is id and the  second property is a string type   which is the name of the employee and that's  it i would use this employee model over here   and this currently is not the employee model  so i would fetch it from from the data folder it's coming from the data folder so that's good  and the method would be called get employees so that will be our first interface method  and i would implement that method in our   employee service implementation coming back to our startup  we would have to inject this   service before we forget so i will add  a singleton of i employee service and   would say when you ask for i employee  service give me the employee service there we go and here we would basically  create a private uh property a field   so that we can just utilize that those  employees we would create a private list of employees called employees and that will be a new   list and we would populate it with  a few employees so i would say create an employee id would be a new good and the name would be employee one you can add  anything as you like i will just add another one   call it employee 2 and that's it and we  would basically return this list of employees   over here like that so we have created one  method to return employees uh but we are   not really using it anywhere so in our pages  folder we created employees.raiser component   we need to inject the service here like we  do in for example in controllers we inject   it in the constructor but in a razor component we  inject services using the inject keyword and uh   and use the one that we are uh setting it up in  the services so i'll call i employee service and   just say employee service a name for it and now  i can use my employee service anywhere in my code so on load it will basically  call an override method so i would say on on initialized method i would basically have a private field which is list of employees called employees and i would populate  it on the load from the employee service employee service dot get employees and that's it it's throwing us an error because uh it's saying  we need to get employees from the data and not   from pages so instead of using that i would use  this model or you can call it a different name   just to avoid the confusion so now we  have employees model filled this field   has a few employees we need to we  need to have an html so that we   can populate our html with this list  of employees so i'll create a table and i'll just create the structure really fast i will now create a loop and will loop through   the employees that we have so i  would say where employee in employees i would then basically add  the rows for each employee and display the id and the name all right let's try to spin up our application  and see what we are getting on that employee page   because we have defined the route uh we need to  make one more change before this application runs   and that change is basically to define the  url that will match to this component so   the urls can be matched using the add page  attribute and you basically have to give   slash employees here the one uh  that we named in the nav link and tell it as an h1 tag all employees as my heading and let's start  this application now and see if we are   getting those employees back in our employee page so our application has started you can see in  the nav bar you can see employees page and it's   the url is showing is localhost four four three  five seven slash employees that's the one we want   and it went to the employees  url and it showed us the two   employees that we added on the employee  service uh let's give it some styling so we   have bootstrap already installed so i'll just use  the class of table and that will take care of it i might have to restart the  application to see the effects so as you can see we can we we are able to  fetch the employees as part of our employee   page so the next part we will basically work on  the edit delete and add employee functionalities   so now we will uh create the edit operation in  here and for that we need a link which would   basically take our routing from the employees  page to another page which shows just the details   for the employee that we want to edit so  basically in here in our table we would add a header which is empty but we will add   an action over here so we will create another  tt and we basically want an anchor tag which has an href of the new location that we want  the user to send to so that new location would   be employee and along with the routing we want to  pass the employee id so that we can search in the   new page the employee using the id so along with  the employee in the url we want to send the id and and that would be it uh now we also want to  create a new page for our employee uh to basically   add and edit the employee so i will create  a new razer component and call it employee   you can call it edit employee as well and we have  an h3 heading over here we will just say edit   employee for now and give it an h1 tag and see  if our routing basically works or not so in here   in the razer page we have the anchor  we will just call the anchor link edit   and this should basically take it to to the  next page let's see if this is working or not i've started my application and i'll go to  the employees page and just i will try to   edit employee one so i'll click on this and as  you can see in the left hand off of the screen   you can see the route being populated so if i  go to edit they should take it to the new screen   and it says sorry this is there's nothing at this  address and that's because even though the url is   right there's nothing to match the url to the  to our razer component so we have to basically   stop the application and like we did in the  employees.razer component we have to say uh we   have to basically define a route for our employee  dot racer so we will say slash employee slash and   we want to pass the route parameter and by doing  that curly braces and we will say id and in our   code we can now basically fetch the id so we would  say a public string of id and it's a property and we would annotate that with a parameter  attribute and this basically would would   basically capture the route parameter and we can  display that in our page by by just doing this   by utilizing our field uh in the html and now if  we spin up our application again and and if we   route from the employees raiser component to the  employee razer component by editing an employee   we should now see the id of the employee in  the new page and if i click edit i now see   the grid for employee one it ends with  290 which is correct so now on this page   we will utilize this id and fetch the employee  details so that we can edit those details   to do that we will first come to our i employee  service interface and create a method over here   to fetch the employee so i'll say the method  name as get employee and this will return us uh   an employee object back and it  will take a grid of the id so   with that we will now implement uh the missing  method um to our to our employee service uh i'm just waiting for this to  suggest me implement interface and   here we will basically say just return the  employees employee that match uh the criteria i'll say single or default  which because it can be null so once it matches the id just return the single  employee back we will use that in our inner razor   component of the employee and we will  just say on get for the override method on the uninitialized method we will now fetch the single employee  from from the service which we will inject now you will use the service from here and now basically we'll say employee  service dot get employee and the   employee id is this but that's  just a string so we will say the id is quit dot parse i will just do that here i'm not doing  the exception handling at the moment but   uh we should definitely do  that when implementing it and if i say getting the employee back and i will   give it uh i will assign it to a to a local  field like i did it over here to and like   an employee's field so i'll do that similar  thing here so i'll say private employee employee and i will assign this property here  so now that we have our employee here   we can utilize it's listing me an error  i'll say what's it saying cannot convert   uh this type because i am using the wrong employee  this should come from from data so i'll use the   correct employee model this should come from data  so now it should be okay now that we have our   employee model ready we will create a form here  and fill up the form with the value inside it   so that we can edit that later to do that we have  an edit form uh tag available to us from blazer   which is this and we will bind  the model of the employee to   our form and here we will basically  create two divs i'll give a class of   bootstrap class of form group and  inside here i will create label for the id and an input element for the id id is id and the value is  employee dot id and i'll make it read only and the other form group that i need is for the  name so that we can edit that so instead of using   the input element html input element we have  another blazer input element if i write input   i get an input text element i will use that  and and basically say id is name and class   is a form control we'll use the same  class for the input element above give it a name of name and  here we'll give it a name of id   we will now bind the employee.name property to the  to this input text element uh to do that we'll say   bind value and specify the in the property  so employee dot name is our property   and let's see by spinning up the application  if you know we are fetching the employee on the   on the on initialized method and are we able to  fill the form so let's do that so our application   is running we will browse to the employees path  and click edit on any of the employee and we can   see that our id and name have been populated so  now in this view we need an update button so that   we can basically update our employee and and route  back to our employees list so that we can see the   change so let's do that to update an employee we  will come to the my employee service interface and   create a method for our update employee so we'll  call the method update employee and we'll pass   the employee method to it add the employee model  to it and the return would basically be a void   so we will now come and create our uh  the implementation of our interface and in here we will uh we basically want to  update the employee so we want to get the   employee first so we'll say get old employee which  can be we can utilize this method get employee   and pass the id to it now we have the the  employee back um so we would basically it's a good   and it's saying to me that id has let's see  what the id is for employee it's a public oh it's a capital id i'm sorry now that we have  the old employee we'll just update the name   um dot name is equal to the updated employee's  name so we have done that and that's all um   we will we will use this and we will  inject it again in our we have already   injected it so we'll use this here to  submit a form we will use this property   called uh on submit and we will mention the  the method name and we will call it submit form   and we will define this here as a  private method it doesn't return anything and on submit form uh when that is clicked we  basically want to use this injected service   called employee service and call the  update employee method and pass the   employee object over here and once that is done we  basically want to navigate back to the employees   path so to do that we have to inject the  navigation manager over here it is a built-in   built-in service from blazer and we can use  that we will call it navigation and use it   over here as navigation dot navigate to and  mention the employees route so once that is done uh send it to the employees back we'll see   this in action we also have to  include a button of type submit give it a class of button and a primary button  these two are bootstrap classes and give it a name   of update uh let's let's spin up our application  and see if we are able to view the changes   we'll go to the employees route and click any of  the employees this employee to is name is employee   too we will change to something else and we will  call it my name which is sami zayny i'll click   on update and it brings us back to the employees  route and the employee is correctly updated the   name has been changed from employee 2 to semicine  and we can refresh this page to see if it actually   is working or not and we can change employee 1 to  employee 22 and this should work as well so our   application is running and we are able to update  our employees so the next thing we should do is to   uh create a button over here to add an employee  so let's do that we will now come back to our i   employee service interface and create a method  for update adding an employee so we'll say void   add employee and pass the employee model over  here and we'll now implement this interface method and we will say uh we'll create  a new id so we'll say a new grid and we will use this in our employee model so we'll say  employee dot id is this newly generated   thing and we'll add this to the list of employees and this should basically add a new  employee to our list of employees and   in here in the employees raiser component  we will now create a button to basically an anchor tag to say to add an employee and we will give this an href of uh of the  employee route but now we'll just hard code   the id to zero and on coming to the on coming to  the on initialize method over here we will say if   the if the id the past id is or we'll check the id  for being null so we'll say if id is null or empty and is not not empty basically and uh this this id   is equal to zero if this is zero  uh just create a new employee employee is equal to new uh data.employee  and otherwise just fetch it from the employee service all right and in the submit form because you  have created the new employee over here they   would basically check if the employee dot  good which is the id is equal to great dot   that means we are trying to add an employee we'll  call the employee service to add an employee pass   the model in and otherwise we'll say just update  an employee and we will call the navigation action   after that to route to the employees model  employees page so let's see this in action we will go to the employees page and click  on add employee and add a few more employees   here employee three we can see that it gets added  and we'll create one more employee for that gets   added as well now we'll change employee 3 to  employee 5 just to check if we are able to use   the existing functionality or not employee 3 we  can change to employee 5 as well so that's good   um the next thing is to delete an employee so  we'll put a delete button over here and we should   be able to delete the employees from the list to  do that let's go back and stop our application in the employees raiser page i create another  delete action um so for that i'll create a new td   and i'll add a button to it  i'll give it a value of delete   and to this i'll give it an on click action uh of i'll call my method over here i'll call the method on delete and i'll pass  the employee dot id to it so it's time to create   a method over here i'll call this a private  void on delete method and it will take a good the name is id and basically now i have  to just call employee service dot delete   employee which we don't have at the moment  and i'll also pass the id to this but we'll   create that uh we're coming back to my i  employee service i'll create a implementation   the method basically interface method here  it's a void delete employee takes in a good and i will implement this over here in the on delete employee method  i'll fetch the employee by   calling our get employee  method passing the id to it   once we have the employee i'll basically  remove it from the list of employees and that's it uh once that is done we are already  on the employees page so because of two-way   binding we should be able to see our changes  then and there uh let's see this is an action so i'll go to my employees route um we have  a delete button it's not looking fancy but   uh we can fix that easily uh i'll click on  employee to delete action and this should   basically remove it from the list i'll  delete employee one as well i can now add   uh these two pack or any other employee pack we  have employee three we have employee four and   i'll just add a few more i can add empty because  this there's no uh validation for us at the moment   and we can basically delete it we can  change uh update employees uh we can   delete all of it so it's it's working  as expected i'll just quickly fix the   the view uh basically i give this  a bootstrap class of a button   and a primary button and add another  empty td so that the heading looks fine   so yeah as we have it over here our simple crud  operation in blazer in a blazer server app is   working as expected and uh it was it was really  easy from the edit form uh functionality that   that blazer has provided us um with that you can  easily do the crud operations and there's there's   more to it you can uh form you can validate your  form and and do lots of other stuff so if you like   my video just press thumbs up um if you want to  share it with your friends do that uh subscribe to   my channel and and thank you for for listening to  this video thank you so much you have a good day you

Channel: Sameer Saini

Views: 11,068

Rating: 4.9153438 out of 5

Keywords: Blazor CRUD, CRUD application blazor, Blazor server app, Blazor web application, blazor crud operations, web application blazor, responsive web application, blazor forms, blazor turtorial, learn blazor

Id: -nTJqx0t29I

Length: 36min 22sec (2182 seconds)

Published: Tue Nov 03 2020