CRUD Operations Using Modal Popup in ASP.NET Core MVC | CRUD Application with ASP.NET Core - Update

hi friends welcome back in previous session we have discussed how to insert the data in jsp.net core MVC application by using model popup in today's session we are going to update the data by using model pop-up when our user clicks on this edit button we have to display the model pop-up and we have to bind this raw data into the model pop-up and we have to update the data from model purple for that I am going to product controller here we have to create two methods one is get method whenever user clicks on this edit button so we have to display the data further here I'll create one method to get the data based on the ID I'll give the action Ms edit here based on the ID we have to get the data for that I am taking input parameter as ID so here I will filter the data from product table I can use the context I'll use the find method so here I have to pause the input parameters ID so once we get the data we are going to return it in the form of Json here I will assign the product this is going to be get method I'll make it get also we need another method to post the data so I'll copy this I am going to make it as update so in this case we will get the data in the form of product model so I'll pass the product model as parameter so this one I can remove it here so this is going to be post method we are going to post the data to the database whenever we are posting data to the database we have to validate the model state is valid then we have to submit the data here I can call context products so I can use the update method here I have to pause the model once it is updated we have to save the changes here I am going to return the Json data after updating the record so this is the message which I am going to display to the user if model state is invalid already be used in the inset port so we can display as model validation field this is the message which we are going to return to the user so our controller side part we have completed we have created two different methods one is get and post here based on the ID we are going to read the data and we are going to send it to the model popup so this data will be fetched in the model purple from the model popup whenever user is clicked on the update button we have to post the data into the controller this controller will push the data to the database and once it is updated successfully we are going to return this message to the user if model state is failed then we are going to display this message so now we will go to the product JS here we are here we are going to write the edit function here already we Define the edit function whenever we are reading the data here so here we are binding two buttons one is edit another one is delete the user clicks on this edit button this function will be called same function which we created here and for this function is expecting input parameter ID so this ID we have to pause it to the edit function here we have to create one Ajax method to post the data so I am going to pause all these parameters to the controller to get the data based on the ID here we have to pause the URL first which is in our case product is controller then we have to pause this method name along with this we have to pause the ID I'm going to pause ID here then we have to define the type we are going to get the data from the controller so I am passing as type get here we have to pause content type here we have to define the encoding method utf-8 and also we have to pass the data type we are getting the data in the form of Json once it is success here we have to get the response from the controller I'll create a function for that so I am going to validate the data here so we will get the response whether if it is responses null or response is undefined I am going to update the data here so I will display the message to the user so this is the message I'm going to display it I'll save so response length also we have to check it here if length is zero then I am going to display it as data not available with the ID which is passed by the user here I can pause ID it's so it will be successful then we have to display the data in the form of model pop-up so if data is available then we have to display the model pop-up so we can get it modal pop-up from here so you can go to the index view from here we can see this is the model purple so I'm going to pause this value here I'm going to display this here model show so otherwise if this is null or undefined or if length is 0 we don't need to display the model pop-up and I am going to define the model title also here this title also we are going to display dynamically since we are using single model pop-up for insert and update we are displaying the model title dynamically so this is the model Title Here update product if it is insert we are going to display as ADD product so in this case we have to hide the save button and we have to display the update button for that so I have to get this save button here ID so this save button I will hide it so we have to display the update button so this is the ID for update I'm going to pause it here so instead of none we have to make it as block here we have to display the values now we will assign one by one response Dot ID then I have to display the product name then price quantity so these IDs we are taking from this model pop-up these are all the IDS we are picking product name price quantity and this is the ID suppose if there is any error we have to handle that so this is the success function if it is any error we have to handle it I'm going to create one function here so I can display same thing here so get bot completed we will run the application and we'll check whether this functionality is working or not run the application here whenever we click on edit button that pop-up should come we will click on edit button so we are getting some error unable to read the data we will check our JavaScript function so this is the issue here so here we have to pause the query string as ID we will run the application again click on edit so this time model pop-up is coming with the data so this is label updated dynamically as update product here we can see the data here we remove the save button and we are displaying the update button now we have to create another function to post the data whenever user clicks on this update we will call the update function to save the data close it go to the Ajax method so here this is the edit functionality so now we have to write a function for update whenever user clicks on this update button we have to call this update function from JavaScript first we have to validate the data for that I will call validate function here in previous sessions we have explained how to use this validate function so by using this validate function we are validating all the text boxes which are is mandatory if result is false then we are returning false so that it will not update the data else we have to submit the data so again I am going to take form data here create a object for this so already we used for insert purpose so I can take it from here so I'm going to take entire function I can reuse it in update here I'm taking ID product name price quantity and here we have to call the update action so I to pause update then method type will be post so whenever we are receiving response null or undefined we will display this unable to save the data if it is successfully updated then we will hide the model and we are going to rebind the products and we will display the message which is received from the product controllers once product is updated we will get this message from the controller so this will be displayed to the user in the form of alert so if there is any error we are going to display this message we will run the application now I am going to edit this record click on edit so product details are displayed so I am going to remove the laptop this validation is working fine and I'm going to add it here just I'll change the price here I'll click on update product details updated so this data has been binded to the table earlier we had one product called Laptop in the ID3 we will execute this query now so this has been updated with the toys so like this we can update the data by using model pop-up in next session we are going to work out on this delete functionality that's it for today if you like this video please like And subscribe to my channel thanks for watching

Channel: CodeWithGopi

Views: 1,461

Keywords: asp.net core modal popup, asp.net core mvc, bootstrap modal popup, codewithgopi, crud operation modal popup, crud operations with modal popup in asp.net, jquery ajax crud in asp.net core with modal popup, master detail crud modal popup, master detail crud using modal popup, master detail modal popup, modal popup, modal popup asp.net core, modal popup asp.net mvc, modal popup bootstrap, modal popup crud operation, modal popup master detail save data using modal popup, sql server

Id: oSAIPsUFZ8Y

Length: 16min 39sec (999 seconds)

Published: Mon Jul 31 2023