Edit Detail Delete using Modal Popup in ASP.NET CORE

hello everyone welcome to my channel in asp.net core today I'm going to show you added delete and details features using modal pop-up in asp.net core so this that thing is completed in last video tutorial and in this video tutorial I'm going to show you first of all added section and you know very well about the Edit section added have with the ID property in the parameter and by using an ID property you get first of all a single employee and you know very well so X dot ID cuz double equals to ID and the first dot default and here we have that that section will be prepared in a controller section and after that you have to add a new partial view for the added section so underscore added employee model partial that is the partial view for the added section that thing now just change it also in the controller section and just to copy and the paste all such things of the create added create partial view and paste it here you know the whole things are the same name and email is there and action is changed that is the added section also the name of the button is changed okay now in index dot CSS tml file add a button control instead of this hyperlink and that is button control oops just pay and just copy and paste again ctrl C and paste it here and change the method name that is added action name that is added and in which you can pass the ID property so item dot ID oops letting stakes item dot ID okay in side door CS also you have two decoded URL so decoded URL equals to decode URL components URL decode URI components pass the URL and also passed that decoded URL in the gate section okay so that thing is easy to complete the task and done your project for the demo purpose you know that is the create section and that is the added section where you got the single employee name and when we click when after added any fields and press the Update button then site dot JS file that will that code will be generated for the same so just prepare HTTP POST method of the added section where you got employees EMP and just I want to add it employees dot update EMP and context or save changes method we'll call and here we have the employee EMP now update now just again run your project and a simple you have to say when we click on edit and any changes on the field and just refresh it oops another entry because the employee ID is here 0 if employee ID is 0 then another field will be added so just add a hidden field in the partial view of edit employee that is the modal ID that thing is needed and run it again and add it Jakub 12 update and that is capital is updated so the next thing is detail section and the further you can use delete section also okay so in the added section details and in the details section only need another partial view so for the partial view name is detail employee model partial detail employee modal partial okay just copy and paste of the first of all read first of all change in the controller section okay and just copy of the Edit employee in modal partial and paste in that detail employee modal partial that will will be change that way that will remain same so the action method is the detail you know where action method is not needed in the detail section only label is required so the modal ID is there but in the action there is no need in the form tag oops and in years before ID and model dot ID only level is there in that detail section model dot email and input and the spain tag will be related and there is no need of the footer section so that is the completed to save this also change the header part that is the model title that detail employee and also change in the edit of the header section added employee so that is pretty looking good Save Changes and just run your project again to see some changes oops first of all check in the index for CSS tml file for action link that is created a new button where URL first of all change the name that is detailed and also in the added section we have to change details first of all change our details save and run it again okay employees and index your detail will call and all these details are there okay now the third section is a letter to that delete section where you say are you sure you want to delete it if press the delete button then data will be deleted from the database table that is the similar thing with the edit and the delete only prepare a certificate method and the HTTP POST method in the side door Jia's file will be remain same and also create the partial view for the delete section where header and the footer is there header body and the footer is there so here we have the a certificate method of the delete and [Applause] also add a new partial view for the delete in the partial view of the delete section a delete employee model partial and in which you can add the detail section detail employee just copy and paste in the delete employee partial just copy and paste in the delete delete section and in the delete employee modal partial add a to button for the delete and also add a form tag form action attribute that is delete where your I should to be post method will call and add that is that is already available in the edit employee so just copy and the model footer and paste in the delete just you can give the name that is delete okay and also change the name of the header that is the model title that is are you sure you want to delete okay and that is the HTTP GET method of the delete and you will prepare for HTTP POST my post method and in that delete employee model Probab muster to add a hidden field for the ID property so input type because two hidden es before modal ID where ID will pass in the parameter as an employee employee MP dot ID okay so prepare on the basis of the ID you can delete employee so just open controller section and just copy and paste it here and first of all get ID so here we use employee I am B and the ID will get from EMP ID okay after getting the employee you can delete the employee from the database table by using context dot employees store deleted not remove employee okay and after that you you can make some changes by using context or save changes method so just change the partial view name that is delete employee modal partial that's pretty look and simple and after that you you can perform your actions now run it again your project and perform lead action method yeah all things are clear ploy and delete oops I think both the name are same that delete delete so it's not called the details are calling but delete is not calling so oops it's a failed in the a certificate investor to be post so ambiguity is there so just open the controller class and add a certificate and I should to be post attribute in the before your action name I should to be gettin destroy to be post so it's pretty look and you can delete them ploy II so thank you very much for watching this video and keep watching all other videos which is related to asp.net core and I will help you in a project so thank you very much for watching this video

Channel: ASP.NET MVC

Views: 47,179

Keywords: ASP.NET CORE MODAL POPUP, modal popup edit, modalpopup details, modalpop ups delete, JQuery, Bootstrap

Id: zvysBd_mkfQ

Length: 13min 23sec (803 seconds)

Published: Thu May 07 2020