Part 14- Insert data into database using jQuery AJAX in ASP.NET MVC application


hello welcome back to Asp.net tutorial and I am ashish so this is part 14 of this video series please watch part 13 in order to insert data into multiple tables ok so now in this tutorial I’m going to discuss about how can you insert data into the database using jquery ajax ok so previously we were just saving our record by directly submitting a form so the disadvantage was that ,it was just reloading my whole page so now here we have an advantage with jquery-ajax so it’s not going to reload your whole page instead it will just refresh the small section of this web page ok so let’s have a look of it ok so in the previous video i have just created this method , which is going to save my data into multiple table ok like in employee table as well as site table is going to insert my data ok so here in this method i’m not going to do any modification instead I will just provide the data using jquery ajax ok so let’s come to the view here i have created this form in previous video let’s have the view of it okay so this is my drop-down which is dynamically behind and these are the textboxes ok so let’s remove the unwanted element in order to make it clear ok so let’s also remove this and just use simple form ok here you go so here what you need exactly you just need to know about the jquery selectors and the AJAX , so jQuery selector is basically used to select the element HTML element and manipulate them ok so i will just provide an ID to this form, lets name it myform okay and then just select this element using an Id ok so in jquery you can access any element by having an ID and if you have mentioned any class name then you can also access this element using classname ok so let’s put a script tag okay so everything you just need to start with the dollar document ready ok so if my dome is ready then i will just call this function ok so inside this i will just write my whole matter ok so if the if this page is completely loaded then only I can call this method or i can just have the access of this ok so second thing is that you just need to know about AJAX ok so at AJAX means asynchronous javascript and xml ok so it is basically used to get the data from the server and post it to the server ok so let’s call the Jjquery-ajax so just use jquery ajax okay and just right ok the first thing is that you just need to use the type equals to post and second thing is that you just need to use the URL so this is the URL you’re going to call this and retrieved it our poster to that ok so the thing is that you just need data and fourth thing is that after success ok you’re going to call the function and do that and there are several parameters but right now for making it easier things i will just do this okay so URL would be my TEST controller and my method name is index ok and the my data would be this form data so i’m just going to use very simple thing like where data equals so i’m going to select that form by its ID so if i have provided the ID then I need to put the hash sign and what is my ID okay my form ok and if I have given this class name like my form and then I need to use suppose dot dot my form so in that way i can access this ok so data might be dot form dot serialize ok so by using this line it’s going to give me the whole data whole input data ok so so my serialized data would be in this data and i will just paste it here ok and after function I’ll just receive the response the response would be anything if I am just sending it through controller ok so i’m just using the error message you are done okay so this is my basic URL so my controller name and my method name and before that the server name it will automatically be received from the server ok so instead of using this submit ,type of submit i just use it as button okay and I i will not make this okay so i hope this is very clear to you and let’s run this project and let’s see whether i will retrieve those data into this as a parameter ok so here you go so the main important point is that you just have the understanding how can you debug your code in jquery so press function f 12 if you have a laptop ok so here you can see the error ok so dollar is not defined so in jquery the placement of link is necessary ok so it must be placed at the right right place ok so just control x Jquery reference and just put above this script because because it’s not understanding what is the dollar is what is the dollar sign okay so you just need before that you just need to put this reference so that this code can understand that what is the dollar sign ok just save it and refresh this now this time you’re not going to get this error ok ok so i have just put this all the code into this document dot ready so that why is that why it was just showing me this error message means my form was posted okay so i will just put it on button click so i will just use on click or you can see i will just provide it on ID ok so BTN submit so i have just given an ID to this and ok dollar this hash because i have just used an ID dot take an on-click i will just call the function control function this ok so now on button click this method will be fired okay so put all thing in this and press ctrl key ok and now just put the debugger here ok so that you can analyze what did I am going to pass ok so let’s select the QA and let’s enter any data ashish and put address London and site name whatever it may be good okay so before that i will just put a breakpoint on my controller so so that i can justify whether i’m getting data are not just on clicking just you can see the debugger so press function f n ok then F so you can clearly see your data Department equals to name equal ashish is London you can see and on posting just continue this so in model you can just have the orders as you can see the parameter dress London department to name ashish site muskoka so you have just provided all the data using ajax and this Court is going to save my data ok so let’s see here I have just a tree courts now let’s continue this ok so you are done means the data has been saved ok now let’s refresh this database and execute this ok so i have my tenth record even 7th record was null and 8 record was a Ashish 2 london ok so in this way you can just call the AJAX method and save your form ok so here one thing I need to do I want to just clear my form so you just need to do one step just use instead of button just use reset ,type equals to reset so just it will just save my form and and before that on loading ok so i will just use a DIV here ok and i will show the loader ok so i will just use this loader here ok so inside give i’m going to use this loader so that i can clearly see the form has been submitted by jquery ok so let’s give it equals 150 and DIV and let’s give a style ok text line center ok so you can see is this ok so here is your loda ok so in the first step you can just hide it ok so display equals ok so right now i have just hidden this controller five and now after clicking on submit button i want to show this and again after completion of a AJAX call i want to show it and just hide it again ok so let’s give this and ID ok so i will just give an ID going to loader loaded if ok and copy and when i click on submit and then I just need to show this so i rushed if not sure and just copy this and after completion of this i will just hide it ok so about the jquery features we will be discussing little variation in the data ok so jQuery is a bar full client-side scripting language okay so it’s a name is saara address New York side name oka okay so i’m now going to submit this form so i have just placed this deeper here ok so now now here you can see the loader and if I just complete this Ajax call and then you’re done ok so my lord has been hide it ok so in this way you can make ajax call and you can save your data ok so in little relation we will discuss about the are basic things of you know JQuery like it has many features so no it has many you can see we will discuss about the selectors and the effects like slide up slide down show/hide and much more things ok so that’s it thank you very much for watching my tutorial and if you really like that give a thumbs up please subscribe my channel aapkanigam and visit my official page that is facebook.com / techno tipstutorial and if you have any way then please comment and of course share my videos okay thank you very much bye bye have a great day

45 thoughts on “Part 14- Insert data into database using jQuery AJAX in ASP.NET MVC application

  1. Hello Bro please tell the code how can create student attendance page.how can i send student attendnce of multipal student with reason ,student id properties in to data base using json,j quary and javasacript

  2. Hello great video and great series of videos. Thank you.

    I think the reason you can not delete a row in Employees table is not that you have foreign key from Departments table. Employees is a child in this case and you can delete a child without deleting a parent. In your video N 13 you showed that EmployeeID is a foreign key in Sites table. That makes Sites a child. If you have enforced those relations with primary – foreign key then you can not delete Employee without deleting the corresponding Sites row or rows. I.e. you can not delete a parent row only, as children rows will become orphaned and nothing will point to them and they will become a redundant baggage.

  3. Hi Ashish, can you make video tutorial when user click on button to fill text field with value (in my case textbox have to contain number when users click on button) on form of website? I am trying to pass result of method from my Controller to View using jquery when users click on button.
    Thanks for help!

  4. Hi! i hope I will get a reply sooner.

    I was following your video, and i am also trying to insert into the database. I am not sure why it is not taking the values.

    so when i put the debugger and data="" is always like that. help!

    how do i solve this

  5. salute you for this great tutorial. u are really a great tutor.can u make tutorial for crud using generic repository pattern????

  6. Nice Video sir.But i need to post html textbox data to xml file node using jquery ajax?
    please help me.. Thank you.

  7. thanks sir for this easy and good tutorial …. i am having a problem ..my $.ajax () code is not working .. simple jquery is working but not ajax code

  8. I am working in mvc and angular,shocked to see ur videos,these all are real time videos…good work ashish keeepp it up…and i am willing the angular2

  9. Hi Ashish,
    Thanks a lot for your videos. these are realy needfull. i have an issue while submitting my form in controller model "EmployeeViewModel model" is showing blank not showing the data that i fill in form.

  10. I would have liked an explanation as to WHY using JQuery/AJAX to trigger the save action in the controller is a better method than the one used in the previous tutorials.

  11. Ashish in your Program Form Validation is not working without Input type sumit kindly help me to fix this problem please

  12. i am not able to submit values..its not working

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(document).ready(function () {

    $("#Addbtn").click(function () {
    var data = $("#wardform").serialize();
    $.ajax(
    {
    type: "POST", //HTTP POST Method
    url: "Admin/AddWard", // Controller/View
    data: data,
    success: function (response) {
    alert("ward inserted");
    }

    });

    });
    });

    </script>

  13. Can we reach 1000 likes on this video. Share this video among your friends and Give your suggestions on which topic I should make videos. Thanks

  14. Hi great video, I am trying to populate a dropdown in the modal from another table, can you help me ?
    Thanks
    Daryl

  15. Its not working…i have a problem while submitting my form in controller model is showing blank data that i fill in the form.. why??? this problem is only getting for using ajax ..

  16. I see you adding site property in viewmodel but I missed where you added site table in the database or in EF. Did you add it manually or via code? Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *