BLAZOR CRUD OPERATION USING SQL SERVER. HOW TO CREATE CRUD APP IN BLAZOR USING SQL SERVER .NET 7.0

welcome to microcode if you're new to this channel consider subscribing and watching our previous videos so today we are going to do a very interesting video on a Blazer so Blazer is a.net web system that runs uh in the program and it's mostly controlled by c-sharp and Razer pages so uh we are going to create a new uh Blazer app uh do some crude operation using SQL Asawa so I'm using visual studio 2022 I've already launched my visual studio and to create a new blazer app we are going to create a new project then on on this side you are going to choose Blazer server app so we are going to create a Blazer server app that runs a server-side application in asp.net project so after you have chosen a Blazer then we'll go into next then you can say employee crude operation you can say employee crude Blazer Blazer so then next then you're going to use.net7 then on the authentication type we leave it as none then configure for https leave it as it is then create thank you so our project is created then you'll be able to see a Blazer screwed up so you can see we have our Blazer cruder here we have the program.cs file we have the app settings.json where we'll be linking our application with our database you have the data where we have the classes and the service then we have the pages so we have uh the the index fed data so if we launch this we're able to see our our Blazer app with the default uh pages so it already have the default template so you can see Hello World Welcome to our new app and you can see if you click on the counter you can actually if you click this you are able to see the counter then fetch data able to see the data for a weather forecast so for today's video we are going to create a crude uh operation using uh SQL so we're going to create an application to add employees so on our data folder create a class for employees so we're going to create employee then inside the employee you're going to Define some fields so public hint ID then you can have these as first name first name of an employee last name then you can you can do is the middle you can say this is middle name then this is a last name then another thing that you can do you can do address can also do postal code and close this you can also do let's do email email address you can also do City or phone number phone number then you can also do City then another thing you can also do is uh designation for the employee designation for the employee oh yeah this ignition then here you can do you can have this our as our key so we have created our model so the next thing that you need to do is to create our application DB context that will link our application with the database so we are going to create a folder I'm going to create a folder called context so let's create a folder called can even yeah let's just create a folder called context then inside here let's create a class call application DB context application DB context then add so this one you're going to in let's create our Constructor then here we are going to inherit uh DB context context so this one we are going to install Entity framework course so if you just click that it will install the latest version so you can see our package is here and the packages we have Entity framework already installed so on a Constructor we need to pass DB contexts say DB context options then we have our application DB context then we provide here options foreign [Music] [Music] context so to ensure that our database is now uh created we are going to now have our DB set here then you pass our employee model then the name of our database which will be employees now that is it so that is how you create the application DB context so the next thing that you need to do is to provide some connection to our app settings to our database so on our app settings you do connection stream then that is it then you need to paste in some connections here copy that so we have our so we have our default connection then a desktop then I'm using SQL expressed so this is my instance then database will be server Blazer then the The Trusted connection that is set to allow multiple active result then trust server certificate is set to true so this is what you need to set to a settings.json then we need to remember we are now connecting to our Blazer database so we need to ensure we have that database you know you know SQL Server so I'm using using SQL Server management Studio to manage and write queries so I'm connecting to my instance so on our database so the database called Blazer so I'll just delete this so that we don't have so I'll recreate it new database then I'll say Blazer okay so that is it so we have our Blazer uh database then tables we don't have any tables so that is it for our app settings so the next thing that you need to do is now to create an app employee service that you are you will be using to do the crude operation that is to now get employees records insert employee records and even get uh update and even delete so on our data create Employee Service create a new class then call it Employee Service employee employees service dot CS call it service dot CS so after we have done that we need to provide a Constructor that is it them here we are the next thing we need to do is to inject our vector application DB context so it's a application application DB context then here we say application DB context okay then we'll do here application delete context then application DB context so our application DB context we go to that so that is it so our next method is to pull employee data so you're going to create a class a function to actually pull employee data so task so we say we want a list of employees so this will be a list of employees then we can call this function get all employees so that is it that is a function then inside this function we need to return a list of employees remember so we will do return of it education application DB context Dot employees remember our table is employees then add list so this is the table and you want a list of employees so this will give us a list of all the employees so we can comment this so that you're able to know get all employees list so the next function will copy that so the next function that you need to do is to insert so and in Saturn we want to return a Boolean if it has gone through so we say add new employee then we need to pass our employee model call this employee then on inserting we'll say await application DB context employees dot add say dot add a sync then we add our employee employee then here you say wait application DB context application DB context dot save changer async then we return true so if that is that goes well so what is the issue with this one let's see the definition of getaways publicizing task employee done this yeah this is to sync it says to to list the sync yeah that's fine so this will add our new employee say new employee so this one is say add new employee record so this is a function that will add our new employee record so the alpha function is we need to get an employee by an ID assuming we want to search so it will retrieve we want to retrieve only a single record so it will give us an employee record then we say get employee get employee by ID then here we need to pass an integer which is the primary key of that employee or the employee number then we say so we need our employee model say employee so you need to Define that and we need to assign it to a weight application DB context Dot employees so that is our database so let's clear this so employees then you want to find find fast or default I think then you need to pass the ID so we say where the ID is equals to the ID that you have supplied then this function should return our employee recorder so that is it so this is saying converting I think that is fine so this one is get employee record by ID then the next thing so this one should be get employee by ID so the next function that you need to do is to update assuming we want to update an employee record so so we will do so you want to return a Boolean then this one will be updates employee can call it a bet employee details then we need to pass we need to pass the updated employee data employee then after that we say now we'll do application DB context Dot employee is a update so I want to update it and we pass our employee mode when we say await station DB context to save changes the same okay then we return true so you can get this after that so this one will update our employee data update employee so then final function will be to delete we want to delete an employee record so this one will be deletes employee record so we'll say delete [Music] employee so we will pass our employee data then application the DB context then we will say employees and remove [Music] so we are going to remove the employee then we save the changes so that is it so we are done so we have these functions get all the list add a new employee get employee buy an ID update employee details then delete an employee data so the next thing that you are going to do remember we had already created our application DB context with our database called employees but we don't have the database I mean the tables on our database so what we need to do is to apply migrations so what we need to do before we we do that on our app settings before we do that on our program.cs we need to include some configurations so the first thing that you need to do is we need to add our service form of Employee Service so we copy that then we'll say employee employee service so you need to add our service there then before we do anything we need to have I think this one should come down here then you can you need to have the connection to the database so what we need to do is say Builder under service Dot add DB context then we supplier ID what is the name of our application it is application DB context application DB context then say items item Dot use SQL so we are using SQL use SQL use SQL Server so we'll see why this is not uh showcasing because you have not installed some nuggets then we'll say Builder so you want to get the name of a connection configuration Dot getconnection string then this connection string should be should be what we Define under up settings so this is the connection string default connection string name that is what we are supposed to pass here so after we have done that we need to close this and we'll do this so you can see our user SQL server is not installed because we need to install a certain nugget so if you hover here and do this let's see I can just install the Nugget come here then manage nuggets then say SQL Server so yes I post install Entity framework code.skl7 so we install that accepts that then it is installed so if you come to a program.cs we need to import it so we do that and it should be fine so you can see now connection string is already defined so that is what we that is the only thing that was supposed to be done then the next thing now is to do the migration so we come to tools nugget package manager package console then uh let me just expand these so in our packet manager so we need to add migration we use the add migration command migration then the name of our migration so if you want to so we can just do initial initial migration we can call it initial migration so if you press enter there's something wrong is not recognized so because this is uh not recognized there is certain and I guess that you need to install again so come here then say tools we need to install tools it's called Microsoft Entity framework core tools so install that so if it's already installed you'll be able to see a green icon there so come back to our console so come and get my pocket manager then console then run the same migration so you can see our migration is started that succeeded and uh there's something again it says accessing Microsoft extension nothing to continue without the applications some sizes are not able to be constructed error while validating the service data Employee Service lifetime cannot consume scoped service so our service here you need to do something this one will be add change our service type to add script that's fine so if you come here again and run our migrations it is done so it has completed our migrations and if you can see we now have a new folder called migrations so you can see we have a new folder called migrations and on the file that we created the name we passed on our migration called initial migration it will actually create a file with the name of the migration so you can see initial migration so if we click on it you will see that it is going to create a table called employees with all these fields our primary key there and all the fields that we defined and if it is there then we will need to delete so so let's let's start so we need to update so we'll say update database so this one will update our it will update our our database with the new table but now if you can if you come to our database or our database and refresh it we don't have table steel so this one now will uh enforce the tables on our database so if you press enter so it is succeeded so it is creating you can see those commands so these are the commands create table employee ID this is actually an SQL statement so you can see it is creating then it's done and it is now inserting our on our EF migration stability is starting inserting our migrations that you have done so if you come to tables then refresh you'll see you have two tables you have migrations that keep track of our migrations that we have done so if you run it you'll be able to see our initial migration name with the product version then our table employees which is now empty so you can see we have the first name middle name last name post name postcode address email address phone number City and designation so that is what you have done so this is actually what is usually called confused approach so we have created our models then we have now proceeded to our which will actually Define our database so we are good to go what's next what is the next is we need to create our our views so come to Pages then new we need to create a new Reserve component so as a component then we'll say employees list so we want to to have a paid for employees list so at that page so you can see it is employees a list so on this employee list we need to Define some things so at the top here we need to define the URL of our page so our page will be will be called so so this one will call these employees then we need to use using you need to use employees result later in that folder because we on this folder we have some classes then we need to inject now our Employee Service remember our employee service is the one that will be having the the function to get our employees list so we'll say employees service Dot now we will provide a name of the employee service you call it employees [Music] service so that is it now you need to provide a link nav link call it snap now now link so this is the link to create new employee record so so this is like a button so you provide a button then you can call now link then uh it will have a URL extreme so you can say add employee then inside here we need to provide like an icon spam class call IO or I then Plus Plus when you need to close these you can say area is true then we need to close and you can say add new employee so that is a function so the next thing that you need to do is on our code down here we need to define the we need a list of employees so we'll say list then you define the employee employee model employee let me say you can object so this one will close this let me see these amp objects so on these objects let's say amp of oh gee you can call it then we need to we can close this we need to to create a function that will actually give us the list of employees I think let me say task um [Music] or initialize um initialize on initialize I think so it is a function then you do this then we say we assign our amp object some values so this is equal to the weight then we say task Dot run then inside here we say we want [Music] okay you want the list of Employee Service to give us Jets all employees should be able to do that so this one should be this like this then you should be able to close this so this one will give us a list of employees so this one should be um foreign [Music] so that is the correct wording so that is it so our amp object is equal to 9. you can leave it as it is object so after you have done that these now we'll be having our list of employees so we need now to people to populate so yeah we can say if if our temp objects that we have defined there is narrow is now so what should we do so what we need to do is you can provide some say amp now so that is it now this big keyword I'm looking for it should be m then we do this here we can say give us the quad loading so and um then this thing it will be closed like this yeah so that is fine so else if there is data what we need to do is to populate the list of employees so we'll create a table here you can call table you can close it then our table headers and close it then our table row turbo heater so this one will call um employee number so I'll copy these and it have it here then you can say employee name so this will be a combination of first name and middle name then you can call you can have uh email address then you can also have designation designation and you can have phone number phone number so after you have done that on our table header after Here Without You Want To Define our table body on our table body we need to Loop we'll say at for each variable and in temp object yeah so we need to get all the lists so our tableau then we Define our table data so the first one should be at employee Dot so our first one is number so we will have our ID here so the next one should be our name so our name remember on our employee class we have the last name middle name so we want to provide a complete first name and middle name and last name so what we need to do we'll Define another one and we call it full name so this full name will be a combination of we'll do this combination of so we'll do that then inside here we do this then we say pass name then we also do this is a middle name sorry entry name then and said yeah again we could last name so this one will give us now the full name of the employee so on our view will now have full name full name so the next table data here will be you need to Define email address so this one will call email the next one will be designation so the next one so so this one will be designation the next one will be form number phone number so we have defined our our list so so the act so if you can see on our view now the add page is actually defines our navigation then the injection of the service that you have done is employee service and the code down here you see down here we have the code is where we we are calling the methods to bind all the values inside our razor component so this is where we call all the methods to do that so on our shared folder so if we run this application currently available we are not able to navigate to the employees list so to do that we need to we need to Define our employees list on this navigation side so how we do that you come to our our shared folder then nav menu so on the nav menu you'll be able to see we have now the FED data so we can copy these and create our own we call now employees then list you can call it employees list then on the employees list we'll put the name of our navigation this one you see these are that is what you are supposed to provide here so we'll see employees so if we launch this again you can see we now have our employees list so if you click it you'll see we don't have any data so we have the employees list employee number name email address designation and phone number we don't have any data and we have not created a new laser page for additional a new employee so what we need to do we proceed to add the add new employee laser page here then there is a component then we say add add new employee dot pressure then that is it so we Define our navigation again as we did so we come here we say at page at page so it will be equal to so this one will be our navigation will be add new employee then we need to use using employee razor the data then we need to inject inject our service and injects you need to inject employee service you need to provide the name of the employee service then here we need to inject inject you need to inject The Napping so this one will Define our navigation manager navigation manager then we say navigation manager so that is what we need to do then on our code here so what we need to do here remember we need to add a new employee so we'll Define an object objects a new object employee then I call this new new objects then we'll say we need to now create a function to add an employee so we'll say protected sync the sink let's say void say add new employee details then we say [Music] a function then we need to await employee service that we already created then dots add new employee then remember we need to pass our object so we'll see how we assign values to that object then after we have done that we need to navigate back navigation manager dot navigate to so we need now to navigate to our list so what was the navigation name of our employees list so this is the navigation so you need to provide that here so you do this then you you paste it there that is it so the button for adding we'll call this you can see I'll actually create you can change this to create new employee then we need to provide another function to cancel in case you want to cancel we can call void cancel so this is another function then we do these then on the console we navigate it back so you can copy this and paste it here so that is it so you'll be having to these two buttons so now employees lists so what we need to do now is to create our form so let's break this so to get our form you need to create form then close then div thank you the AV so now our div we need we need so this one you can have a class for Arrow then inside here we can also Define the div [Music] you can say class call MD then eight then you can close this then you want to Now define the fields so inside the IV class from group Home Group then we need to define the label before name and class control level then you need to close this and you can say this is our first name so the inputs we need to Define an input then we'll be reusing this will be just copying input then four and call it last name then class from control so we need to bind it now to our data so we'll be using bind then we need to assign it there the value so it will be at obj dot remember our first name so you need to do that so this is what we need to do so the next thing we need to copy this now and replicate so this one will be so you can have this as fast name so these are in the middle name these are the middle name then here will be middle name then our obj will be middle name we again pressed this one will be last name this one will be last name this one will be last name our OBG as well so this way we'll be getting the input from the user sorry it's amazing should be last name the next thing is I will paste these again should be email let me call this email address for this email address email address [Music] that is it the next one is our call that we can have the phone number phone number then do that then you need to say another another one is let's confirm so you have done first name middle name last name another one is post called postal code and do poster card press the code and postal code next one shall be foreign address sorry this one should be postal record this one should be addressed and press and please the next one should be I have done email address for number City then designation so you'll do City [Music] this one should be safety this one should be then you can have the next one called designation designation [Music] all right signature and this one should be designation let me have a final one now designation so the next thing that you need to Define now is our is our is our buttons to add so let's create our div here Plus wrong let me say div Plus call MD form diary class from group then I need to now provide the inputs which are the buttons input type button Plus BTN vtn primary you close that you can copy this and replicate down here then you can see and one click so on click I want to define the action event so we'll do that then we'll say it should trigger this button see this one so we'll copy these here and paste it here so that is what should happen and you need to provide the value of our button value but our button will be called you can say save employee then we can do the same for our console at one click on click and click sorry equals to we will be using these to cancel so at cancel button then you provide the value of our button can call it cancer so that is it guys on how to define so what's wrong with this [Applause] says yes say protected and change that to avoid a single I think right come out with that tree so that is fine so we now have our ad so you can say these and new employee employee so that is it so this is our form so we need to ensure that our navigation on our employees list is actually referencing the correct you see should reference the correct uh reference so we now have that so if we execute this now you can see employees list if we do that we have this so if we click add you see it is giving us the first name middle name and last name so you can see the UI is not that good so let's provide the first name James test at Gmail 0 7 14 so postcode can provide anything City Nairobi resignation developer so if we sell you see it's not doing anything so there is an issue somewhere that you need to check so let's come here to our form so he confirms something here so on our employees so the first thing class that you need to Define is our table is not looking good so you can call this table table boarded then that should be fine now so if we run this you can be able to see that our table now looks good yeah try to have it just a stable you see let's try to look to see first what is the issue here yeah that's fine employee names or table looks now nicer so if we go to our phone we need to to ensure that also our fields looks a bit good so our form so a class DAV classroom AV class MDS so that is it so then uh our label control label yeah you can see our form controls we did the very wrong so this one should be like these form controls something wrong there so you can correct that let me do that I'm going to do this that is fine then our buttons and confirm our buttons also is type of type button then class is that so you can do some denture so this is to cancel then this one notes that's what the intent so that is should be that way then that is the details then our console it will be like that then you can try again our injection should be fine so employees our table looks fine so if you click you can see now our action here looks a bit good postal code seems you have not altered that yes so you can do this so you can again try to run employee list find our good so you can see the we now have a good input so you can save James tests at email at gmail.com zero seven let me do that Costco code address City Nairobi let me say developer if we click save our data has been saved you can see now we have uh employee number one employee name we see we have the full James Mugo karanja then email test developer and the number you can add another employee foreign gems opium then test two at gmail .com let me do that code do that this city Nairobi then designation software developer save you can see it are saved so that's very interesting so after that guys if you are new to this channel consider subscribing like our video and comment if in case you have any question then we will be good to answer so the next thing that you need to do is assuming you want to edit this data how will we do in our application that is a blazer so let's dive in so on our employees lists page we need to provide an a section for Action so you'll do table header then you can call these actions then at the bottom here we need to provide another table data then you provide the buttons so write the buttons class so we'll call this nav link now blink then extra so we need to provide an a new a new page that will do the editing so for now we can just leave it as it is then you can close this then inside here you can now provide the spam class then icon why all right then these will be pencil mm-hmm then I hear you Eden will be true then we provide the name so you can close this let me provide the name you can say edit so that is fine so you can copy these as well or you can we can have this as different we can say this edit then you can have another one called delete actually delete so here you do this so I will copy our table header then these ones will be trash yes then we can call this delete you can also provide some class and to provide some class you can call these vtm BTN Prime so let's do this let's cancel this so you want some class here we have this as Danger hi so if we run this we expect to see these two buttons so let's run currently we have two records there we are so you can see we have the edit and the delete functions so we need to add now another page so we need to add another page for editing so we'll create a new laser component then we will call this edit employee employee enter so what we need to do we can copy the add employee format let's just copy then paste this on our edit employee phone but now we need to change something so we'll call this edit new employee edit employee edit employee then we need to change our navigation so we'll call that edit employee so you can replace this so we have these as it is then navigation then service that's fine then our form will be the same so the next the what you need to add only is the you need to add the ID so I can do this then you can if you want to see the ID so you can call this id id [Music] employee number so then we come provide the ID here then the others are fine but we need to change the the actions now on our code so remember when you're editing this we are passing a parameter okay if you remember on our functions so we need to Define uh the ID that you should be supplying public which is a string ID so we need to do that get set so this is actually a parameter so you can annotate this with parameter we can close this that's fine then our object as we had defined should be fine so here we will do uh so I'll copy this I need to initialize something here so we'll say task on initialized on initialized async 23. so this will be override over it I think then remove that on initialized I think then we say our object we need to assign some values on these objects you'll get you'll get the record that we are editing test dot run okay you can close this let me say employee oh this one should be employee service and we have defined up there service we defined yes these are you come here this one should be like this employee service Dot we need to get the employee by ID you remember this function then we need to pass hour so we need to convert convert to ins 1032 then we need to supply our ID the parameter that we have just defined then we need to so that should be fine what's wrong here foreign ties so that we don't contradict things like that have you altered anything here it says BJ [Music] obj is a new this parameter of ours called public string ID okay see so these are let's see foreign so first thing our function here you need to pass an ID and call this ID then we'll do this and that is fine this is fine then from obj is an issue with our obj so this is closing that it is closing that foreign that employee okay [Music] let me just copy this and you see the radiation is okay anything I've seen so the issue is here somewhere here so what we need to do we have defined our ID so we need to declare first our parameter on our navigation page so that's fine let's handle this is at the bottom here so we say protected override a sync task then on initialize a sync so this is a function so you close this then employee that service that get get employee by ID then we need to password our ID convert to to inch then we pass our ID and close it sorry let me close it then you do this then our error is gone so I initialize this thing so she protected override I think task so these will be on you need to show nice I think that was the issue then we need to create a function for updating so protected the same void you can say update employee then we need to pass so I'll wait Employee Service dot update so we need to update details we pass our obj we just add details here then we navigate to employees then you in case you want to cancel you cancel with that so there's an error somewhere here we have updated our function now it is not create so you'll take this and replace with this one and replace with this one then here we can change this to update employee so our function is complete with the relevant details so we can proceed and add a delete so add new component appraiser page then you can call it delete employee delete employee then add so for this one we need to provide the details for the employee so you can copy the edits button details then paste these on the delete then on the delete page we can provide the navigation as delete employee then we provide the ID navigation then this will be calling deletes employee then on our row so for the form group we are providing that then the input you are not now doing the input so you'll do labels so for these labels we will provide the details so we'll do this then we actually do that so then we will bind so under the labels we will bind so that is the change that we do so we'll do not binding but obj dots so we'll do the same here level close it remove these others move up to here copy this paste it here remove these ones we'll do the same for middle name label to do that copy this here then you do again label for the last name remove this copy the LBJ paste it there uh label close that is it close this paste it here now it is you do another one here label foreign [Music] foreign [Music] I can't do this so that is it then you now provide a button for clicking so before that we need to do some initialization here so you have initialized our obj uh you get employee by record then you know how to update this to perform the delete action delete employee then on this one you say delete employee let me pass the obj then and say delete employee record then that is delete employee then we navigate back so delete employee record should be called by our functions here then you can change this to delete employee that's fine so we now have our delete employee laser page so we need to bind this to our employee lists actions so that you are able to navigate to these pages so if you go back to employee list remember our references we had left them blank so we need to update it so you see here we had left them blank so we need to now provide the navigation which is uh for edit is employee then we provide the you provide the ID dot ID then we also do the same for delete thank you uh we do that then you provide the ID and ID so that is it for the actions so if we launch our application we should be able to navigate now to these three two pages delete under edit so employee list you see we have a record so if we click edit it will take us to our edit page so you see edit employee our ID is this employment middle name last name just all the data is here so if we change this to test one so that they're able to not test one test one then we save so you can see it has updated our employee record you can update this also there's two test two test two then we update you see it is test one test one test two test two so it has updated so if you want to delete you can see we have our data if we pass delete it will remove if we do that again it will delete so we can add a new employee test one Against One test to this one this gmail.com [Music] foreign Nairobi developer Reserve that's saved we add another employee James Kimani Google case and Gmail delete updates Nairobi [Music] developer the developer save we do again John karanja test gmail.com 07 Nairobi development so that is how you do crude operation in a blazer so if you liked our video comment down below subscribe share and hit that Subs notification Bell so that when we post new videos you're able to get notified so thank you for watching and subscribing to our Channel see you in our next videos foreign

Channel: Macro Code

Views: 12,784

Keywords: C#, AmigosCode, .NET, .NETCORE, Sundeep, Saradhi, freecodeCamp, ProgrammingWithMosh, MikeDane, IamTimCorey, TeddySmith, FireShip, DaniKrossing, Stefan Mischook, ASP.NET CORE, Coder Foundry, Jose Montemagno, .NET 7, Nick, Nickchapsas, Jake Wright, Keep On Coding, QuestPond, Amigos, Developer Filip, TechWorld With Nana, Techworld, GotoConferences, CRUD, BoostMyTool, AUTHENTICATION, JSONWEBTOKEN, Code with Julian, Identity, MinimalAPI, POSTMAN, FLAVOUR, BroCode, CodeWithBen, Blazor, Blazor Crud, Razor Pages, Razor

Id: -nqUIWVhDXY

Length: 82min 52sec (4972 seconds)

Published: Sat Feb 11 2023