Bootstrap Modal Popup CRUD operation in ASP.NET MVC CORE

hey everyone welcome my channel asp.net core and today I am going to show you a simple simple steps to create a modal pop-up in esp.net core this is the simplest app actually so first of all search model bootstrap model popup so search bootstrap model pop-up it's not asp.com bootstrap model pop-up only so here we have a getbootstab.com and here we have this is the simple demonstration of live demo of your model pop-up you can say that so here we have a live demo just I want to update these titles okay so just copy these things and paste inside your CS HTML file like that so here you can say just add it and save this okay now save this and run your project first of all okay wait for some time foreign to run this project oops because index method is not found actually so uh in home controller the default index method is there so just copy this and paste it here and the name is index save this and run it again and you will see that your output will be easy we have the some button a single button control name is launch demo modem okay so here we have launch normal demo model okay now uh this is the simple copy and paste from the bootstrap so now just change this ah just create new employee and here we have a employee model you can say that in the model here we have a employee ID name and list of objects is not there it's not actually a required so save this and here we have employee view model so here we have a list of employee and the employee okay and you can say that this is the create a new employee and just open this model for the adding new employee you can say that add new employee okay so here we have a add new employee okay and the next one is and you can say delete employee and just copy this and paste inside it here and you can say that delete Model okay so here we have a delete Model and add a new model and similarly here we have update employee so here we have a employee update model so similarly here we have three models just I want to replace three models with R1 created models so index.cs HTML and here we have add new record I mean to say that I had a new employee oops oops oops okay edit record and delete record so save this and just paste it here okay so this is the add new record delete record and edit the code first first of all about add a new record add new record here we have some changes nothing changes in this only the ID is this example model and you can see that in the header section here we have right add a new employee and in the body section model body here we have bind because in the model section here we have an employee view model in the employee view model here we have uh two things that is the list of employee and the employee so I just I want to bind employee with the name only the single employee I want to take ATM name okay you can see that in the add new record and in the button control save changes and the close and the ID property of the button save changes is about BTN saved okay and uh in the class in the close button in the class here we have BT class we can cancel okay only these are these changes in the delete record here we have the ID is delete Model okay the ID is change of the model and messages delete employee and the you can say that the button is a close button but nothing's tooth changes and here if and here you can say that close button with the button BTN cancel class and the delete method so here we have a ID bit and delete only changes in the body you can say that just write this text are you sure you want to delete the supply so you can take it here that's 2 tag save and the edit record you can say that only ID we have ID model edit record in the edit record here we have in the model body here we have a input classes update ID there we have and type equals to Hidden and asp4 employee dot ID and the name employee.name employee.name employee.name with the validation property okay and in the update changes we have button save that is the ID of the button and you can say that the close button we have button close but you can say that inside the form tag this is our inside the form tag the action is the update you can see action is update and in the save I mean to say that here we have button ID is Method equals to post and here you can say that when we click on the button this is actually save this but uh in this video I'm just going to save BTN save okay so here we have three ah model pop-up according to the boot step only some changes in the ID parameters okay so uh the first thing is to do in the home controller section here we just I want to send the list of employees so here we have a controller action here we have a list of employee so here you can say that here we have a list of employee so context.employ.to list employee view model um and VM dot employee EMP and just send it the list of employees just I want to send it and in the Cs HTML part just I want to show the list of employee in this types in the table just copy and paste inside your table and here you can see that table ID name and actions model dot employee model dot ID and model dot name and here we have two button control with the class SBT and BTN danger and B10 dot danger it's not BTN dot danger it's BTN dot primary okay uh that is the oops delete is danger and edit is primary okay so uh when we click on the edit button so this JavaScript on click event handling is generated and sending the parameter that is item dot ID which is the employee ID and similarly we have the delete the JavaScript confirm uh event handling is an gathered okay so everything is fine you know all about this okay so now just go for JavaScript section and here you can say that two function first of all where edit form so okay just copy all this section script just copy and paste it here and I will show you the one by one okay so this is this is the simple jQuery but here we have two method that is the confirm and the edit form here we have it separate from the document.ready function okay so the first one is the confirm button so when we click on the delete button when we click on the delete here you can say that edit record but here we have a table and here you can say that when we click on the delete just confirm uh JavaScript function with the ID properties clear so here we have and also set the EMP ID with the value ID property so here we have a ID and set the EMP ID as a type of hidden field and here you can see this so first of all save this and delete a model dot model dot show so delete Model is what delete Model this is the delete Model and the ID parameter is the delete Model so that model will be show and the delete employee model and this are you sure you want to delete this employee when we click on the delete button that is the point when we click on the delete button then jQuery function will be called and what function inside your document.ready delete button delete when we delete the ID value is getting from the mpa dot ID and just call the Ajax function type is post home delete that method is inside in the delete but near the button never received here so just use that is the delete action method so just paste it here Json result delete ID value is delete if it is IDE value is fine then EMP is not null then employee delete and it return that result value of the Json that is the true inside it here and you can say that inside ID function return is if it is true then empid that is the hidden field that is value null and window.location.href is moved to the index page if it is not null if it is not delete then oops something went wrong will be generated indirect message but it is deleted and the next button that delete is there similarly if if we click on the model popup that is the model pop-up for the delete if it is when we click on the cancel button close button then BTN cancel of uh in the jQuery BTN cancel this call and here you can see that window.location.hdf thus home page will be redirected okay so close this model if you want to add a new record just when we click on this I create a new employee and this model will be called add a new employee and after filling this employee name you can say that save changes will be called vtn dot save so according to the uh this jQuery function EMP form so just get the form by using the saveform DOT serialize okay so here we have a ID of the form that is the ID of the form that is the save form ID of the form is the saveform dot serialize and after that we just pass the data in the form of serialize and success is window.location.hdf home dot index just call this method home dot create and method is the post so delete index and the post and the method is the post HTTP create okay and redirect to index method so everything is fine so now the new value will be created first of all by using the BTN save button and confirm is clear we can delete is clear now just go for the edit form when we click on the edit button item.id and the JavaScript function edit form will be called and here you can say that home dot edit first of all get the value from edit method so just rename the value get employee the method name is get employee and here you can say that edit function is here and the name is oops get employee so index method is get employee with their ID property so here you can say that ID is pass it from here data ID column ID and if the result is employee in the form of employee then the edit model dot model dot show first of all so the edit model that is add new model it's not edit model so edit model there are ID properties edit model dot show dot model dot show there is the property dot so so first of all show and after that EMP name and update ID EMP name is the ID property and update ID is the name Class Property so by bind the value of the employee.name employee.id and this just is passed from uh from here suggestion result there is time employee okay so after that that property will be bind EMP name and updated ID that is the type of hidden and when we click on the update button then the submit button will be called some form with the action update is will be called so here we have a update method just we can use HTTP post now save this and home controller update button save this now after run your project again and you will see that your output will be easily cleared and here you can see that is the default data Smith and Jacob just I want to create a new employee the name is employee name is ma and save changes and here you can see that m is created just I want to edit MI am a Smith and update changes so Ms Smith is changes just I want to delete this button so are you sure you want to delete this employee so just I want to close first of all and after that delete this employee thank you guys for watching this video and keep watching all other videos which is later to asp.net core

Channel: ASP.NET MVC

Views: 32,921

Keywords: Modal Popup ASP.NET CORE, Modal Popup asp.net mvc, Modal Popup CRUD operation

Id: VF6wlRshzDQ

Length: 19min 9sec (1149 seconds)

Published: Sun Oct 30 2022