CRUD Operation using Blazor ASP.NET Core & Entity Framework

in this video we are going to create a blazer crude application using entity framework code if you have not checked our previous blazer video do check them in the blazer playlist so to install we will create a new project select blizz application and then we will put the name to laser crude app create now we will select laser web assembly app make sure the asp.net hosted is selected create so here as you can see we have the blazer client project we have the blazer server project and then the blazer shared project so in the laser server project we will add a nuget package so install we will install entity framework core in the browse tab we will type entity framework code at sql server and install then we will proceed to install the design package the design i accept then the tools install accept now in the shared project we will create a model so add new folder then we will put the name to models in it we will add our model which will be echo module so add new clause then we will put the name to call we'll make the close to public so public heat id get set then public string core name get set so this will be our core model then we will create another clause and we will put it to applicationdb context so here in the db context we'll put it to public and then we'll inherit it from the db context so we will call it install package microsoft entity framework go find install latest version so public application db context db context option then application db context the name will be option so we will post that to the base clause now let's insert adb set of go so public db set calls get set in the blazer crude server we will add our connection string add new item then we will search for json then we will select upsetting add here we will have our connection stream and as you can see we have a default connection so we are going to use this default connection the name of the database will be blazer core crude now we will need to be able to read it from our app so we will open our program so open program.cs here we have our configurations so we will add our app settings here we will be able to read our upsetting from our application now let's open the startup.cs clause we will make a constructor in the public clause startup so this is the configuration equal to configuration now let's go to the configure services method to configure the application db context so we'll add the default connection in the get connection string we will pause our name here and then we will call the microsoft entity.go now let's go to the package manager console to configure the entity framework in our application and here we'll run the command add dash immigrate initial restarted here it is build succeeded and as you can see in the migration file we have our build so now we will perform another command update dash database this will create our database in our sql server instance done we will need to create a controller so we will need to create a controller in order to interact with our database using the entity framework code so in the controller folder we'll add a new clause and we'll put it to call controller api controller api slash controller the route api controller means that this controller will be on api public close call controller it will inherit from the controller base then private read only application db context the db context then we will have our public controller application db context db context and this.dbcontext equal to dbcontext let's create the method for creating a call update echo and delete equal now let's create a method which will get a single code from the database now to create go so http post to update go and then to delete go we can now work on our user interface in the client project in folder pages we will create a folder course where we will group all the components related to the core module so in the core folder add a new razer component add new item razer component and name it cause so in the page directory we will put it to slash go insert the component in the nave menu and copy the existing one and change so change the text of the now menu and the href to cause now let's build it guys so to proceed in the code razer component after the add page let's inject the http client http so that we can use http client clause from our component so in the add good block i will create an oracle so call cause get set to get access to this we can import the call clause namespace here or in the input.razer at using laser update shell so i will put it in the imported razer component so we will display the call which has been fetched on initialized async we will load the code we will want to display the array of code on our ui so if core is null then this will be displayed else if code.length equal to equal to 0 then we will display no records found else we will use an html table where we will display the course so tablecloth will be table and in the t-head that is a table head we will have call id and call name in the t body we will loop through the co array and then we will have two button so we will have button update and the clause will be btn success and then we'll have button delete its clause will be btn danger when the user will click on update the call will be updated and when the user will click on delete the call will be deleted and now we will have the code id and codename now let's add echo in the load to test our application because we don't have data in the database let's add go to new go call name equal to honda the api slash cause should be api slash core now let's add a new component in this folder so add new component raise the component and then we'll name it create call that raiser add here we'll have our create color component so on the top we'll add add page slash cause slash create go and then we will inject our http client http then we will create a new call object and then async does create go so here we will post our json async api slash go and then we'll post our core object and then we will call our edit form component so model equal to atco and on valid submit we will add add create so we'll add our div a label and then another div so in the id we'll add input text at bind value equal to atco.conneem now let's check here as you can see it is being displayed in the cause component let's copy the button update and put it inside the div that we have just added then we'll put it as href put the href to cause slash create go and send the text to add new core now let's run it as you can see it's working fine let's open the new get package and search for component model annotations so here it is select it install now in the call clause we will put required for corner and then we will add a validation message position and we'll also inject the navigation manager ui helper which will help us to navigate so button submit it is to create the call now let's let's add the girl guys so we'll put the name to toyota create code here it is so asic does delete await http.delete async then we pause the call after deleting the call load the undeleted cause now let's add the button delete in the component course we will add an on click event which will be triggered on clicking on the delete button so let's run it click on delete so as you can see the code is deleted now let's inject the igs runtime yes so just invoke async confirm this is to to call the javascript are you sure you want to delete the user will see a pop-up javascript box which will notify him if he wants to delete or not let's add a data annotation validator which we can use to display validation error message for required here it is so let's run it now when we click on the create call without entering any name our validation message should be displayed here it is guys let's enter honda click on create go here the kohunja is added to the list as you can see click on delete here it is we have the javascript pop-up are you sure you want to delete the utah okay now let's add another component and we'll put the name to object go now let's close the tabs except for update call and create code tip so we will copy this code and use it later in our components and now let's create another component add new item so we will select razer component and put it to core form this will be our form and then we'll put our parameter in the at code block so we have our code btn text and on valid submit and here we'll pass our value so we'll call the callform component with the end text equal to create code go equal to atco and on valid submit equal to add create and here in the update call we will call the component and here we'll add our route so id to it and then inject our http client http so usability and text will be update call and then on valid submit we will have update set our parameter create new code for our update method we will use http dot put and post our code to update the changes does on parameter set async then we will get the call by id copy the inject navigation manager uri helper from the create core component to the update co component then put the uri helper.navigate to cause to the update method change the button tag to a hyperlink one so href goes slash update go slash go dot id now let's test our application guys so let's run it update call name honda will put it to mazda update loading here it is guys so it's now mazda now let's add a new car so bmw create code here it is about the guide is for and core name is bmw now let's delete the bmw are you sure you want to delete yes here it is as you can see we have our crude application where you can add edit and delete your codes up as you can see we have our route and here you can put the number let's type 4 loading without half 4 here let's type three here it is so we have mild displayed automatically thanks for watching guys if this video has helped you don't forget to like comment and subscribe comment below which programming tutorial you want me to cover and support my channel by sharing my video like it and subscribe thank you

Channel: Blade Programming

Views: 5,417

Keywords: blazorcrud, blazor crud operation, Blazor CRUD, Blazor Insert, Blazor Delete, Blazor Create, CRUD, EntityFrameworkCore, ASP.NET Core, blazor asp.net core, crud operation using blazor, CRUD app, database crud, blazor database, blazor save, blazor tutorial, CRUD in blazor, Add Edit Delete, Insert Update Delete, Read Blazor, crud operation in blazor, blazor crud entity framework, bladeprogramming, blazor tutorial c#, blazor create read update delete, entity framework c#

Id: A2Sea8zPoK0

Length: 38min 18sec (2298 seconds)

Published: Sun Dec 13 2020