jQuery Ajax CRUD in ASP.NET Core MVC using Popup Dialog

All about jQuery Ajax CRUD in ASP.NET Core MVC using a Modal Popup Dialog
In this tutorial, we've implemented jQuery Ajax CRUD in ASP.NET Core MVC using Modal Popup dialog. Today, these types of user interface/ methods are used in enterprise applications so that we can avoid reloading the page to do operations on a single controller.
Context discussed :
- MVC Controller with CRUD Operations with EF Core.
- Open the form in the Modal Popup Dialog.
- Submit the form with the jQuery ajax post.
- Show loading spinner while waiting for request-response.
- etc
📂 GitHub Repository
► bit.ly/33KTJAu
💖 Buy me a Coffee
PayPal: bit.ly/3L36ut4
UPI/QR Code Scan: geni.us/ScanQR...
🌀 Related Videos
bit.ly/36IA1cH : Asp.Net Core MVC CRUD Operations
bit.ly/3dYrVvi : Asp.Net Core User Authentication System
bit.ly/39B6xdh : Asp.Net Core MVC Image Upload
bit.ly/2t0op0W : Asp.Net Core Web API + React CRUD
🔗 Find me in
Udemy : bit.ly/3RtyQSB
Facebook : / codaffection
GitHub : github.com/cod...
Discord : / discord
Twitter : / codaffection
#jQueryAjax #AspNetCore #CodAffection

[@CodAffection]

goo.gl/RFY5C2 : Subscribe to CodAffection goo.gl/bPcyXW : Buy me a Coffee bit.ly/2HcyCLD : Asp.Net Core MVC CRUD Operations bit.ly/3dYrVvi : Asp.Net Core User Authentication System bit.ly/39B6xdh : Asp.Net Core MVC Image Upload bit.ly/2t0op0W : Asp.Net Core Web API + React CRUD

[@kaisonduncan7151]

you all probably dont care but does someone know of a method to log back into an instagram account..? I was dumb lost my login password. I love any assistance you can offer me!

[@emmitttroy8477]

@Kaison Duncan Instablaster :)

[@kaisonduncan7151]

@Emmitt Troy thanks so much for your reply. I found the site through google and I'm in the hacking process now. Looks like it's gonna take quite some time so I will reply here later with my results.

[@kaisonduncan7151]

@Emmitt Troy It worked and I now got access to my account again. Im so happy! Thanks so much you really help me out!

[@emmitttroy8477]

@Kaison Duncan You are welcome :D

[@Max1GameChannel]

25:28 - ctrl+f5 - reloads the current page including the browser cache. It's called Hard reload. It means that the browser will not use the current cache but will be forced to download again all the files (js files, images, scripts, …). You will have the most fresh version of the page sent by the server.

[@argeelearner3978]

Thank you!! Please keep the ASP.NET Core tutorials coming!!! Amazing!!!

[@CodAffection]

Sure, Keep learning and sharing.

[@omarayub1295]

best tutorial I learned all basics of .net from your videos ... highly recommended........ please upload more

[@bolajibello8917]

Thanks for the job well done. your style of handling jQuery ajax is so superb, I have adopted that style from you long time ago. You are surely among the best tutors on youtube

[@CodAffection]

Thanks for your wonderful feedback. keep learning and sharing.

[@waqasriaz30]

Brilliant ! Covered the entire subject in a single video. Professional implemenation !

[@bravedeveloper]

The project has a bug, after updating a record if you press New transaction button the modal loads the last edited record, but to solve it just update the for New transaction passing an Id=0 instead of null. The anchor could be like this: Nueva Transacción Regards. Good content btw!! congratulations CodAffection! 👍

[@faisalfiaz390]

Just an update. It was my mistake as I wasn't referencing the jquery libraries correctly. It is working now. Thank you.

[@meysamghanavati5526]

Thank you for this tutorial, please add pagination in table.. (without exist component for example datatable or etc..) - please implement 0-100 in this project. I hope you should so happy :)

[@nursultanmamytbekov8180]

This tutorial is just BOOOM! Thank you so much!

[@mathewbal3990]

көп уақытты айтады гой

[@gholamsoori3595]

Comprehensive explanation. Thanks for knowledgeable sharing.

[@Manithan123]

Excellent tutorial. Thank you!!

[@CodAffection]

Glad you liked it.

[@gabriellemos1124]

Top Top, I work with ASP.NET Core, and create a favorable experience for the user that is being a headache for me, very good and very professional material, I will share a lot with my friends, guys BR thanks, good job !!

[@gramozkrosa2497]

Hi! By any chance do you have any project of Crud form with asp net core I have a project to make but i dont know how. Have a nice day

[@vadhadiyaabhishek1316]

Really amazing 😍, very very useful video 👍👍🎉 Very well explained 🤩🤩

[@ivandzurah7598]

Thank you very much. This video help me a lot in creating my site for student grade. Especially in teachers part of site because teacher has to add , edit and sometime maybe delete grades.

[@ramchandrathakkar2022]

Very Informative. Liked it a lot. During this lockdown will watch all the videos to update my knowledge.

[@lokeshprajapat6449]

result is BOOM! very nice.

[@user-uo9ov5jo8x]

Лучший 🔥 Огромное спасибо 👍

[@ronaldjohnson4470]

Great tutorial, thanks again

[@ulyakrasnopolskaya9542]

Thank you for nice tutorial. It's exactly that I was searching for!

[@SidCod3s]

AWEEESOME..Post thax a lott

[@MdShuvo-ok6qe]

very nice tutorial thanks

[@rafysancheztilogica8587]

Excellent as always !

[@issaseckkane]

Hello sir, lot of thanx for this important tuto in Ajax, every things works normally but i have one Remark in my case After doing an update for one record the add new Buton Open The modal with the last One populated in the form instead of permiting to add new transaction. Thx

[@ahmedmohamed-ti9mc]

Thanks alot ,this is awesome tutorial

[@carlosasanchez8297]

Thank you for this job, it was amazing. Can you do another similiar without using the helpers?

[@aldrinalmia3665]

Thank you for this video. It helps me.

[@osamaaly9988]

thank you

[@kritikyorumer]

Thanks!

[@muhammadraza5108]

Its very nice way of explanation . If you don't mind I have few question which make me confuse 1. is this a good practice to have interface for repository ? or the way you deal with EF please explain Regards

[@jkmalify]

Thank you Sir ! Learnt a lot

[@neameh.karineh]

Thank you so much sir, It was very helpful

[@syedsharfuddin3246]

@codAffection First of all Great Video Sir !!! , There is a Small Bug in it After Editing a row ,It stores the Values Of the row which Edited , so if we Click New transaction its Opening with the filled Value in it of Edited row ... solution = >

[@dustywright2021]

I also had the same issue. The fix worked for me as well. Thank-you.

[@CodAffection]

Thanks for the update.

[@ajaysingh0426]

Great @Syed your solution fixes the bug.

[@lescinqlune]

Thank you Syed for the update, it works!

[@MALITAJ]

Thankz for sharing.. This is what I was looking for 😚

[@codingislife6387]

OutStanding Yaaar..

[@AbdulAziz-vh5ev]

Thanks for this video. May Allah Bless you.

[@anildebata4949]

Very good content man

[@danielngandu2628]

Great tutorial!

[@pookaoza]

Thank you so much my lord, I wish you all the best success and happiness.

[@CodAffection]

Thanks for your wonderful feedback.

[@altravels7426]

Lord?

[@guoweing]

Great tutorial.

[@yalcinbilisim]

Hello, which version of Visual Studio 2019 gives errors?

[@omedeido4855]

Hello, the submit button updates table and brings it "inside" the modalpopup! I've tried to google and followed everything you did but it seems like I am missing something?? any help in this regard?

[@hadiboukdir386]

Why does my Index page not showing the updated data after I submit the form. I always need to refresh the page then I can see the changes!?

[@abubakaribrahim2676]

Have you found the solution please?

[@faizanhamza9339]

great video

[@user-pc9rz4hg2y]

I just want to know if dapper was used in this video or not?

[@engr.malikmuhammadmubashir6828]

Super awesome video. I had been waiting for this for a long time. One request though. How can we implement jQuery DataTables in this?

[@CodAffection]

we've covered that in one previous tutorial, it should work. kzbin.info/www/bejne/laKsinWdjLmfitE kzbin.info/www/bejne/q2KXaIRmg75ph8k

[@luaikayyali]

Great work and quick. There is a bug, when you add for the second time, it keeps the previous id

[@nandakumar8515]

Thank you

[@kananshanmugam8711]

Thank you very much. It helps me a lot..

[@abdullahfaruquearman1908]

Please upload a video tutorial about server side processing of data table with ajax in asp.net core....keep uploading more videos on asp.net core.

[@AriVenuth]

Thanks for this great tutorial! tried to use in the mobile browser unfortunately do not open popups ...

[@assistantlabourcommissione4496]

I practice this project and i did not add anything new to it but when i click to submit or check the validation , it prints whole AddorEdit file and other information on the browser .... all the code is same as yours... What could be the issue , please help.

[@testingtesting400]

I'm getting a problem when using helper class with "TagHelper". It's doesn't render the page to string and return empty html when a tag helper is present in the returning view . Did any one else encounter the problem ???

[@trungtranhuu3544]

i have same problem

[@sagarutwani4739]

@CodAffection Kindly help me this out if you know about this, i am getting error when i am creating a controller as same you were creating Error There was an error running the selected code generator: 'Package restore failed. Rolling back package changes for 'CrudCoreWithAjax'.'

[@alancameron1478]

modal('show') not working as per the tutorial. Driving me crazy and the online documentation is incomplete. Guess why?!

[@osamaaly9988]

how to make validation errors disappear after leaving the input (as normal ) without posting the form ?? also, if the form has a dropdownlist it lost it's function after posting the form with error

[@carloskanika9466]

Thank you for this wonderful tutorial, I applied these codes in one of my projects, it works correctly but in my views (creation, modification) which opens in modal, the javascript code does not work.

[@donny1098]

Make sure you have a reference to either the Bootstrap JS CDN or the downloaded local Bootstrap JS file in your _Layout view

[@anilkorutla4600]

Validations are not working In AddOrEdit.cshtml

Gerçekten güzel bir örnek olmuş. Ellerine Sağlık.

[@k1army01]

Hello, thanks for your contribution, I have a small inconvenience, the Json response is arriving empty, why is that problem. Helper.RenderRazorViewToString (this, "_ViewAll", _context.Processes.ToList ()). for this reason the index is empty, and I have to refresh the page to show the list.

[@abubakaribrahim2676]

Please have you found the solution yet?

[@orlandojoaobita7876]

Thank you for this great tutorial! I really appreciate your approach to deal with jQuery Ajax CRUD using Popup Dialog in Asp.Net Core. I just have a question. How can I enable client side validation with this approach ?

[@CodAffection]

Glad it was helpful! I've discussed client side validation with same topic in one of my old video. here is the link : kzbin.info/www/bejne/enrCiqOmq7GagJo you might need to make few adjustments inorder to adapt with latest versions. let me know how it goes. hopefully in future if I update the tutorial I will include client side validation.

[@thanghoquoc7624]

Nice, tks video help me

[@vib1336]

Why contentType in the jquery post function is false? It shouldn't be - application/x-www-form-urlencoded?

[@haseenap3592]

In this method how can I use already created table from sql database?

[@muhammadraza5108]

This is very helpful tutorial, Only thing we are not able to convert _viewall into data table ajax call, after save record view is unable to reload, its stuck and once we refresh its appears please advise. Otherwise this is a complete tutorial to implement in real life project. Its a humble request.

[@salimbozkurt9617]

Oussama May 9, 2020 at 4:26 am - Reply When i click update and save new informations, then reclick for Add popup (should be empty), I found weirdly filled with the last element updated… when I checked the html code i find the URL.Action of new(Add) contain in route values the id of last updated… How this is possible? and how i can fix it Salim Bozkurt May 29, 2020 at 2:54 pm - Reply Hi. Same problem. there is no problem when I use just string url. But when if I use Url.Action there occurs a problem. After the any update proccess, New transaction button’s url contain last route values. why ? I think problem is about RenderRazorViewToString helper.

[@marilu9138]

same, did you resolve it ?

[@salimbozkurt9617]

@@marilu9138 No but, I noticed that if I use the url action just like as below, there no occurs problem. I used id=0 instead of null. @Url.Action(“AddOrEdit”,”Product”, new {id=0}, Context.Request.Scheme)

[@marilu9138]

@@salimbozkurt9617 thanks , i was using only 0, i Will try later

[@jimmydavila7196]

@@marilu9138 Yepe. It works. Thanks, I had the same problem

[@Aman-mt2kr]

your an Amazing bro our country does not have any pay-pall so i cant... is there a source code for this

[@alwaysprudvi]

In 37:00 , I am doing my project through ADO.NET connection. Same procedure used to implement. How to write the code in json object redirection in ADO.NET connection. In my project I am using IConfuguration. In your project updated model i.e -context.Transactions.ToList() is used. My project this code not work. After create new transaction then submit it is not redirect to index page. Please reply.

[@CodAffection]

Is there any error message?

[@alwaysprudvi]

@@CodAffection No. But it doesn't redirect. I have used return Json(new {isValid = true, redirectToUrl = Url.Action("Index, Book")}); this return statemet used and also change jquery. Now my code is work.

[@CodAffection]

@@alwaysprudvi Thanks for the update, it might be due to the framework version update. good try. happy coding.

[@alwaysprudvi]

@@CodAffection Thank you for your videos. Upload the more videos on .NET.

[@omarbedoui5292]

Thank you for this wonderful tutorial, download does not exists

[@lescinqlune]

Hi, Thank You for these valuable tutorials. I have one issue in this tutorial, once I edit a form, clicking on New Transaction will pop up the data that I already have updated, Please how to fix

[@codingislife6387]

Every thing is Working just data is coming in table after referesing Page .... don't know whats going on

[@BasmaALMahrouqi]

could you help me I do like this video but I want to add dropdown list from other relation table (rather than display the id Idisplay

[@CodAffection]

did you watch my master detail videos? where I have discussed such topics.

[@redachouiba4862]

Boom .. Good job :)

[@VeasnaMUCH]

That is a very great tutorial. I have learn alot from yours, by the way if I would like to add pagination feature in _ViewAll.chtml partial view, how could we do?

[@tunghinh5954]

I also want to ask???????????

[@lizahargoes778]

Hello i want to query that if we have multiple selectbox in for how can we get value from that in comma seperated ways

[@tsungik]

Thanks for the video. Can you make a video on MVC. Net core using model view?

[@godfreykuboi6809]

This good video, however am getting this error on the POST function. "TypeError: 'append' called on an object that does not implement interface FormData." I have done everything according to your video. Please help get solution to this error.

[@godfreykuboi6809]

Oh boom! Got the solution, it was typo error....Thanks alot CodAffection for wonderful tutorial

[@hitasas]

Awesome!!!!

[@ajayghosh499]

Thanks, i came here for spinner code, when enter without values at "New Transaction". validation messages show with spinner simultaneously. help me with that.

[@followerofchrist1984]

Thank you very much sir. at 36.38, what if I want to return to a different controller instead of "this", how do I put the controller in place of the "this" keyword

[@cuongnguyenvan9997]

thanks for sharing

[@codingislife6387]

Sir When i add data its not showing in Table ===> after referesing page its coming ===> Please Help me

[@codingislife6387]

sir how to load Category and brand drop dwon Model in this Model getting null dropdwons

[@user-jp8uu5lv3s]

Help, please, how to color the line in red if the value in the column is "No"?

[@qhayiyamgudlwa1428]

Thank you very much sir. Tell me, how do i make sure that my datatable does not go away after adding a new record with the popup?

[@CodAffection]

thanks for the comment. didn't understand your question. could you give the time in the video you are referring to.

[@anbuanbu6591]

Hi your tutorials are very use full. I need your help. please let me know the mvc and web API based project solution architecture for hrms

[@salimbozkurt9617]

How to implement client side (unobtrusive) validation or best fluent validaiton ? I tried but i couldn't run, please help me ?

[@CodAffection]

I've discussed the same in one of my previous tutorial here - kzbin.info/www/bejne/enrCiqOmq7GagJo Let me know if there is anything left explain.

[@salimbozkurt9617]

@@CodAffection thanks. i solved my problem. i implemented fluent validation.

[@erwin_jesus]

¡Buen tutorial! Bien explicado. Muchas gracias

[@CodAffection]

Gracias por las palabras amables.

[@dante85warrior41]

@@CodAffection bro ene l helper a retornar sale error como que no lo reconoce como se genea ese archivo incluso lo pegue en mi proyecto yo hice el crud inmediato desde entity frmaework y solo queria agregarle esa ventna de dialogo que pone con json pero me vota error cuando retorna el json por el helper

[@oguzierembethel1629]

Nice tutorial, why is the source code different from the vidoe?

[@NoorASalam-ik1mt]

Hi... I had a problem with update it's not work every time I try to update it's insert as new record ... I follow your steps and use your source code in your website article ... can you help please?

[@richiebalagot4893]

It would be nicer if you can add a search option within the transaction history.

[@abdalrhmanadel1589]

Thank you for this great effort ^_^ , but how to append a file in jQueryAjaxPost function?

[@erik_lopez_]

There is a bug in the code, when you update a transaction the information keeps saved and then when you clic on NEW TRANSACTION the information saved doesnt let you create a new transaction, please how can I fix this problem???

[@andresviera-ecuador4984]

Hi, I'm learning at the moment so I had a problem with Delete. When I push the button I go to the controller but the value that I have come null and jump and don't save the element I deleted. Sorry I dont Know which is the problem.

[@CodAffection]

did you pass asp-route-id ? try with breakpoints in Delete post action method ?

[@andresviera-ecuador4984]

@@CodAffection I had to put @Html.Hidden("id", @item.transactionId)attribute up and that is the solution for me. Thanks

[@faisalfiaz390]

Thank you for your video. It is very helpful. I am able to add record once however when I try to click second time on button it throw an error on line $('#form-modal').modal('show'); with error "Object doesn't support property or method modal". I am unable to sort it.

[@edgarallanpoe18]

How to resolve this?

[@CodeLuffix]

Anyone know why he unchecks configure for https in the creation at the beginning?

[@citro9541]

Thank you for the tutorial. But I've got problem with adding transaction popup window. Every time I edit existing item and save it, next I open the "New Transaction" I have modal filled with last updated item. Is there anything I missed? I check this tutorial twice but can't find any problem

[@riwisan5391]

Same here, did you ever figured it out?

[@muzammilghani2492]

Will it work in .NET 6?

[@tunghinh5954]

Sir, I use @using X.PagedList.Mvc.Core; @using X.PagedList; for project, But it doesn't work, there is a solution for paging.

[@itrabbi24]

All Ok but when data insert modal not hide auto and after delete page not auto refesh