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

hi friends welcome back in today's session we are going to perform crowd operations in asp.net core by using model pop-up for this we are going to use code first approach and we are going to use jQuery and Ajax first we'll see the demo so this is the index page where we are showing the product list whenever we don't have any products in the table so we are going to display this default message so here we can create new product I'll click on this button so without entering any data I am trying to save the data so here the validation is implemented this is client-side validation and server side validations also we have implemented here I am trying to enter the product name plus the details is entered so this text box color will be changed so here I am going to enter the price I am entering quantity will try to save the data saving the data we are displaying this message I'll click on OK so model pop-up will be closed and the data will be binding into the table update the data I'll click on edit so model pop-up will be displayed this header has been changed dynamically we are going to use the single model pop-up for inset and update purpose Here I Am Changing product name I am going to update the data here in update also we have implemented the client-side validation so if you are not entering any values so this red border will be displayed so that this is the mandatory field so user has to provide the data here so I am going to enter the data now I'll try to update data product details updated so this data has been displayed in the table so here we can try to delete the record click on delete so here we are showing the alert for the user confirmation if I don't want to delete this record I can cancel it so that this record remains same so I'll try again I'll try to delete this record this time I will get the confirmation as ok so the record has been deleted so this data is binding into the table so like first we will create a new project here so I am going to use my existing solution here I am going to right click on my solution add new project here I am going to select asp.net core web application and I am going to use the MVC click on next here I will give the project name project is going to store in this location click on next here we can select the latest.net framework I am selecting.net 7.0 created so my project is creating now project has been created I'll expand this I am going to make this project as to Auto project since we have multiple projects we have to set it as startup projects right click on the project set has starter project here we are going to use the Entity framework code first approach for this we have to install required packages for the right click on the project go to the manage nuget packages here we are going to install Entity framework related packages I'll search for Entity framework code so I am going to install Entity framework go first install it you can select the latest version except the license terms so this has been installed now I want to install design also accept it next we have to install SQL Server database we are going to use this SQL so for that I am going to install Entity framework code or SQL Server package also then we have to install tools whenever we are going to use the code first approach we need the tools package for the migration purpose I am going to select this package and install it then we need latest bootstrap version so that bootstrap package also we can install it here select bootstrap and we have the latest version of 5.3.0 install it so this also installed now go to the models here I am going to create one folder called DB entities where we can store all the DB related entities inside this folder here I am going to create a model called Product here I am going to define the properties for product model I need ID this is going to be primary key so we can Define as key product name then price quantity name will be mandatory so I'm going to make it required so we can add required attribute for mandatory fields also I want to change the display name here whenever we are displaying this product name I want to add space between this product and name so this product name will be used to communicate with the database and to display purpose we can change this name so this label will be used for display purpose this will be used to communicate with the database so now we have created our product model now I'm going to create one more folder called Dell inside the project right click on the dial folder add class I'm going to create one more class here here I am going to create on DB context class which is going to inherited from the DB context select the DB context and go to the quick actions and generate a Constructor with the options so this FDB context will be used to communicate between the application and the database server here we have to add the our DB set we have only single table here that is product model here we have to add the namespace which is DB entities our product is available inside this project models and DB entities location so I'll make it as products now we have to migrate this table to our SQL server for that we have to use the connection string go to the app settings.json here we have to add the connection string so here this connection string will be available inside our previous projects I'll copy it from there so I need connection string so this is our SQL Server so we have to provide DB name here so this is my SQL instance name if you have multiple SQL instances then you have to provide this instance name also here database name I'll give it as this is my DB name and we are going to use the Windows authentication that's why I have provided Integrated Security as true now this connection string we have to add it into the program.cs as a dependency injection so this also I will copy it from my previous session so I'm copying this dependency injection and we can go to the program.cs class so here I am going to add the dependency injection so here we have to provide our DB context name so I'll copy it from here this is my DB context name and here we have to add the namespace and here DB connection name also we have to provide so this connection string name will be available here I'm taking the same name so now we can communicate easily with the database so go to the package manager console so we have to migrate this model to the database gold card with model pop-up so we are going to create this database as well as the product model inside our SQL Server so go to the package manager console and here add migration here we have to provide the migration name so I will make it as initial migration enter so when you have multiple projects and show default project should be our current project then only we can migrate our models here so build succeeded now we have to update the database enter so migration is successful now we will go to the database refresh the databases here so our database has been created we can expand this database go to the tables so our product table is created with four columns now we will create a controller for product go to the controllers right click I am going to create a new controller here I am taking empty controller add I'll name it as product controller click on ADD to communicate with the database first we have to initialize the DB context this is our DB context name select the context go to the quick actions generate the Constructor here so now by using this context we can communicate with the database first we are going to read the data from the database for that we are going to use the Entity framework here first I'll create one private method here which is going to return Json result get products so this is not going to create any view that's why I'm making as non-action method here I can read product from the database context Dot products table dot to list so we will get the list of products from the product table we are going to written as Json ascendis products so our method is ready to get the data from the database now we are going to create a view for this right click on the index add View I am going to create a empty razor view edit I'll name it as index first I am going to add model here it is available inside our project models DB entities product so this is our model here I am going to Define title so which will be saved inside the view data so this is my title I will display inside H3 tag so I can reuse this title after this I'll add one horizontal row here I am going to add one button to create new product I'll add the class so here I am defining margin bottom two these are only bootstrap classes I am adding I will give the title as ADD product and also here I will Define one ID for this add button because we are going to use the model pop-up to call this button just I am going to give one ID as BTM and inside next to div I am going to display the data I'll give the bootstrap class as container here I'll Define the table for table I'll add bootstrap classes insert this I'll add table headers and I'll Define ID product name price quantity so here we have to create a table row inside table row our table headings will be there after table header so we will add the table body so we are going to bind the data here so this we are going to bind data dynamically we are not going to fetch it here here even we don't want model also because this data will be binding from the jQuery so for that purpose I will give ID for this table body TBL body so this data also I am going to bind it from jQuery go to the solution Explorer www.js here we are going to create one custom JS file to add all our Logics to bind the data into the table body for that right click on the JS folder add new item here I can search for JavaScript so I'll name it as product Js first here I am going to write document dot ready function for that whenever page loads initially so we have to call a function here to load the product list here I am going to write a function to get all the products I write one function so whenever page loads initially we will call this function here I am going to use the Ajax method to call the data from the controller here we have to pause URL then we have to pass the type whether it's a getter post request then we have to pause the data type then we have to pause the content type here we have to pause the URL so which we are going to read the data so this is the product controller from product controller I am going to get products here I will pause it as product controller first we have to give the controller name then our method name so this is the method which we are going to call it get products then type will be get we are going to read the data from the database that's why I am passing type as get method and data type we are going to expect the data as Json format so here I have to pause Json here content type while getting the data we are going to encode it for that I have to pause content type as Json encoding type also we have to pause here UTF h then here if it is Success we will get the data I am going to create a function here so we will get the response from the controller if response is null here we have to validate this it can be undefined length also we have to check here so if any condition is satisfied then we have to display the message as products not available in the database I'll create a object here I am going to store the information in the object format so here I am going to open the data I will Define the table row here then it will be TD here I have to pause class here called span here we have to use the call span if there is no data so we have to display the default message so here we have five columns will come so here one more we have to add it as action to display the action buttons so I will give the call span as Phi here message will be displayed as products not available this is the default message which we are going to display to the user then we have to close the table row then we have to bind the data to the TBL body so we can take it ID from here to this table body we are going to attach the data you have to pause object of data suppose if response is not null our response is not undefined up if table is having any data and then we are going to display this data here again here I am going to define the object I am going to open the data here we will get the list of products so we have to use the loop for that I'll use the h and here I will get the response here we will get index and item insert this I'll append the data first I have to create a table row here then I will create table data and I can use the then I will use the table data inside this I am going to display the item dot ID first so here we are showing the ID then I have to display other items also like this then product name then we have to display the product name then price then quantity each row we have to display the edit and delete buttons also that also those buttons also we are going to add it dynamically so here I am going to use object here I am appending those buttons also TD here I'm going to use the anchor tag then I'll use it reference here here I'll use the class I am going to display small buttons here and whenever user clicks on this button I have to get the ID of that Row for that I'll use the on click here I will use it edit then I am going to get the item id here item dot ID here I'll give the title as edit and then I'll close likewise I am going to add one more anchor type for deletion this is delete so finally we have to attach this to the table body suppose if there is any error here we have to alert this here I'll create a function alert so this is the message I'm going to display this so whenever document is loaded we are going to call this read method so this is the method which we are going to read the data from the controller this is a controller name this is the method name so we are going to pause which type of request we are passing to the server side so here we are passing the method type and the data type now we can read the data from the database so now we have to link this product.js into the index view because we are going to read the data from the index view for that I have to link it here so I have to link two files go to the Js lib here I need to get the jQuery file also I have to add the jquery.min here so we now need to add all these files so this jquery.min is enough and we have customized one JS file that is product.js also required here now we will go to the layout.cs HTML partial View and we are going to add one nav item here for our product so controller name will be product action method will be index and the title is product save all changes so now we have linked jQuery as well as the product.js run the application click on product so it's getting error like unable to read the data so we have to check what is the issue we are facing here we will go to the application and we will check it here URL product and get products type data type everything looks good so here we linked product.js so we'll debug here will run in debug mode so it's not hitting our debugger here we will remove this now action at a bit because whenever we are using inside any other action method that time we can use in on action so so this may be blocking this again we will run the application in debug mode you click on product still we are getting us unable to read the data so we will change it to public instead of private we'll run this now it is heating to our controller we will we will check the products So currently we don't have any products inside our table so it's showing zero I'll click on F5 so the message is showing us products not available so we have to check on call span it should span for five columns we will check it that so here we have to remove the noun action and instead of private method we can make it as public so here I have to check the call span okay so this is the issue I'll run it again so now it's loading correctly products not available so now we can add few products from the back end and we can test it we will add the products from the back end so we have added two products we will go to our application we will reload it yeah it's loading perfectly and we have to change the design for this delete button alone we will go to our JavaScript Danger we will reload it again so now it is showing correctly like this we can bind the data by using jQuery and Ajax methods so we have three important items here one is product controller index View and product JS product controller which we are going to communicate with the database and we are going to read the data by using the action methods and we are passing the data in the form of Json so this data will be passed to the index view we are binding into the table here we are using the jQuery to perform the crud operations and we are taking help of Ajax methods here this is the function which we created for reading purpose likewise we are going to create another method for insight first we have to create one action method for the insertion I am going to create one action method called inset I'll make it as insert here here we are going to posit data in the form of model that is product model here we have to define the method type this is a post method since we are going to post the data into the database we have to use the post method here before submitting the data we have to validate the model if it is modal state is valid then we have to submit the data else we have to display the error message so I will return here if model state is valid then we have to save the data for that I am going to call my DB context I have to add the product DB set I'll add the model here and I have to save the data finally we will return the message to the user so product details saved here straight away we can return this message if model state is invalid so now we have to design the viewport for that whenever user clicks on this button so we have to display the model pop-up now we have to design the model pop-up for that I am going to create another div so we need model here I am going to import model namespace here so we have to call it our project name here inside this models inside models DB entities here we have the product I will Define the class here it's a model I am going to provide ID product model so because we are going to call this model from the JavaScript that's why I am giving the IDE here we have to define the model dialog inside modal dialog we will be having the model content here I will give the model header I will Define H3 tag I'll give the class for this so these are all the bootstrap Styles I'm applying to the model pop-up if you want you can copy this from WhatsApp websites I'm going to provide ID also model title so I'm going I am going to add model title dynamically because we are going to use this for insert and update so we have defined the model header here after this we have to define the model body and create another div inside this model body here first I will Define the one hidden item for storing the ID I'll use the asp4 here because we can take model items here default I will set it as 0 then I will Define another div I'll add the class motion bottom two inside this I will put label for product name then I have to define the text box here I have to Define input type say text then I have to use the sp4 again it's a product name we can Define class for this text box also we can place folder here closing this I will copy this div I'm going to reuse it for price and quantity price this is going to be number and here it should be quantity this text also number after this divs we need another div to display the buttons for that and giving class as model footer so inside the footer I am going to display my buttons here I'll add the butter so I am going to Define put sub styles again here I am going to give ID for this it's a save type will be submit so here I'm going to call on click so I call the JavaScript function that will be insert here just we have to create this insert function so title will be saved so likewise we need update also update I will change this style so IDI will give it as update here I'll change the IDS update so on click we will call the update function from JavaScript here I'll create another button to close the model popup I'll Define the class here here I am going to close the model on click again I have to call the JavaScript function here so I will create as hide model so I will give the button Ms close so these three buttons will be displayed inside our model pop-up so either save or update will be displayed because we are going to call whenever insert is called that time save will be displayed whenever we are editing the record the time update will be displayed for this we need to add another style here by default save button will be displayed here I have to display none so dynamically we are going to validate these conditions whether either we have to display save or update button that we will decide dynamically so now we have to create a function for hiding this model as well as the insert we'll go to the JavaScript so this is the function which we created for reading the data from the database likewise we have to create another function to insert the data here before this whenever user clicks on this button so we have to display this model pop-up so first we will validate that for that I am going to create on click function here so here we have to pause ID of that button so I can take it from here this is the button whenever user clicks on this button so we have to display the model pop-up first we will check whether that functionality is working or not so here I'll create a function so inside this I am going to call model popup so I have to get the name of model popup this is our model popup ID we have to show this model first we will check whether it's working or not run the application we will click on button so our model pop-up is coming here dynamically we have to display the title the title is not coming we have to add that close this so we will add the title for the model pop-up for that I am going to take model title from here so this is the ID of model Title Here I am going to pause this ID and I am going to assign this text so I will make it as ADD product now we have to create insert function first we have to pause the form data in the form of object further time declaring one variable called form data and I will create a object here I am going to read all the values from the form like product ID product name price quantity I am going to read it from here for that I'll declare form data dot ID required so that ID we can get it from the form so I have to take this ID here this is the ID I have to pause here dot well so likewise we have to get the other values also product name we can get it from here then price we can take it from this item so now we are able to read the data from the View now we have to call Ajax method to post the data here we have to pause URL then we have to pause the data then type so these three items we have to pause first we have to pass the URL that is our controller name slab to pause our action method name in set here we have to pass the data which is available inside the form data type will be post we are going to post the data to the database so once we post these datas we will get the success or error here I am going to create a function for that which we will get the response here otherwise we will get the error here we have to display the alert to the user alert so this is the message I am going to display if there is any error here we have to validate the response if response is null it can be anything so we have to validate this undefined if it is the condition is satisfied so we are unable to save the data so this message will be displayed else we are going to display as response which we will get it so the response will be received from here so this response we are going to display here straight away I will display the response here also whenever the new product is inserted we have to rebind the data so this is the method which we are calling so here I have to bind the data also so we will keep a debug Point here we will run the application since we do not have any data in the database so we are showing this default message and click on the add product now title also added to the pop-up now I will create a product here I'll click on Save so it's hitting our controller so we can check the data here we can check data ID 0 price is 15 000 product name quantity so we will proceed so here we are facing the data type issue system dot double to system dot into 32 so we will go to our models DB entities product here uh we have to keep it as double I think I changed the data type now we have corrected the data type and run the application without debugging I'll save it product details saved so it's binding into our table so so we have to close this model after adding the data and we have to clear this text boxes I'll close this model pop-up close is working fine so two things we have to do whenever data is inserted we have to close the model pop-up and also we have to clear the data for that I am going to create one function to hide the model pop-up guide model this one I am going to create it here so here I have to pause model ID I think we have model ID here this is the model ID motor so here we have to hide so now this function will be called inside this insert function so once data is inserted successfully so we have to hide the model pop-up and then we will be binding the data and we will display the response to the user also we have to clear all the controls for that I am going to create another function because we have to clear the text boxes otherwise it will display the same text again here controls or I will make it as clear data first one is product name value I am making as blank price then quantity so this clear data also I will call it from hide model because whenever this model is hiding that time I will clear the data also we will run the application and click on ADD product I'll click on Save product detail saved I'll click on OK so pop-up is closed and data is binding correctly again if I click on ADD product these values are cleared from the form so also we have to validate from client side so whenever I am trying to click on save so it's going to server set and it's validating so before submitting the data so we have to validate from the client side for that what we can do here we can create a function function validate and declare a variable here is valid by default I'll make it as true here I am going to validate each control if I had to pause product name I can take it these values so I have to check the empty string is there I have to use the trim here if it is empty I to validate this and I am going to return these valid is false so if it is empty we should not allow user to submit the date so whenever the product data is not entered by the user I am going to change the text box color again I am going to take this dot CSS I am going to add it here order color I'll add in print else if it is data is entered then I have to change it to this some other color I will make it as light gray so I'll copy this for other controls like price then quantity so this is the function which we are going to validate it inside the insert and update I will get the result from validate function if result is false then I am going to return so that it will not be submitted to the servo so also we have to validate one more thing here so this will be validated at the time of inset or update only but whenever the text is changed we have to change these colors for that I am going to validate it here so I can take product name first change here I am going to create a function again I am calling as validate function inside that so that we now need to write rewrite this all the Logics so we are going to call these functions so this function will validate and based on the validation it will set red or light gray so these things I have to apply it for price and quantity also price quantity so now when our user is change the value so automatically this validation function will be called and it will be set border color as red or light gray so now everything looks good we will run the application now we'll go to the add product I'll try to submit the data without entering any Fields click on Save so it's going to server so it's not validating from the client side you have to check that so here actually we missed one thing so finally we have to return the is valid it's not written here is valid so if this condition is failed so automatically it will return as true to run the application now I'll click on ADD product I will try to save directly so this functionality is working its not hitting the server so client-side validation is working fine I can close this I can add product so after adding the product it should be default should be Gray I'll click on ADD product again so whenever we are clicking first time this should be changed to different colors we have to change this logic so I'll take it is so we have to clear this whenever we are clearing so we have to call this price and quantity so we have to make it default as light gray we'll run it again product so I will try to click on save so its validation is working close it and I'll try to click on ADD product so this time it's working fine so now I will try to submit the data without entering so now I will enter product name alone this time I will enter laptop so whenever we are changing so this border is changing so now if I try to save so only these two controllers are validating and showing the red border for this text box so I will enter the price now click on Save product details saved its binding into the table whenever 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 pop-up 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 for that 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 parameter as ID so once we get the data we are going to return it in the form of Json here I will ascending product this is going to be get method I'll make it to 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 had 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 insert 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 pop-up 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 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 defined 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 pass it to the edit function till 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 git here we have to pause content type here we have to define the encoding method UTF gate 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 a message I'm going to display it I'll zip so response length also we have to check it here if link 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 and 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 Ascend 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 pod 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 to already be 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 am 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 for deletion we are not going to display model pop-up whenever user clicks on this delete button we will display the confirmation message whether This Record need to delete or not once the user is confirmed for the deletion so we will delete the record from the database for continuing this video please watch my previous sessions which we worked out on how to read the data how to insert and update the data by using the model purple we will go to the product controller first we have to create a method to delete the data from the database for that I am going to create one post action method here we are going to pause the ID before deleting the data so we have to find out whether this ID is available inside the database or not for that I am going to check so by using the find method I am going to get the data here if product is not none then I am going to delete the data so once it is removed we have to save the changes so I'm going to display this message to the user suppose if there is no data available with the ID which is passed by the user then we have to display the message here so here I can pass the ID so we can display this message to the user now we will go to the product Js here we will write the delete function so here also we are going to pass the IDS input parameter so this direct functionality also it will be similar to the edit I can copy this I can reuse it here delete here instead of edit we have to pause the delete action method and we have to pause ID here type will be post because we are going to delete the data and the content type is not required here data type also not required because we are going to post the data so instead of reading I will mention as unable to delete the data same thing I can make it here so once it is deleted we now need to display this data so we have to call get products function which is going to bind the data and we will display the response here we are passing ID once this data is deleted we will get the response here if it is null or undefined we are going to display this alert as unable to delete the data if response length is actually this is also not required so here based on the ID we are going to delete the data we are going to pause the ID as input parameter once data is deleted we will get the response if response is null or undefined we are going to display this alert it is deleted successfully we are going to rebind the data and then we will display the response here this delete function will be called from here just I'll show it that so this is the button click event we are calling this delete function you see this so this is calling from the button click event before deleting the data we have to take the confirmation from the user but here I'm going to pause the message as if it is confirmed then only we are going to call this Ajax method I'll run the application now we have three records I am going to delete this record click on delete so are you sure to delete this record I am going to cancel it so the record will not be deleted again I am trying to delete this this time I am going to click on OK so this product details is deleted once you click on OK so it's rebinding the data I'm going to delete another record here click on delete okay product details deleted so it's binding as per the expectation so like this we can perform the crude operations in asp.net core web application by using the model pop-up that's it for today if you like this video please like And subscribe to my channel thanks for watching

Channel: CodeWithGopi

Views: 5,507

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: 8RA2abuUORM

Length: 86min 16sec (5176 seconds)

Published: Mon Aug 07 2023