Use jQuery AJAX in ASP.NET CORE 6? You NEED to see how it´s done!

welcome at tutorialcu my name is janik leismann and in this video you will learn how you can use ajax in asp.net in order to give you the best learning experience make sure to watch the video to the very end because you already decided to click on that video and you should really get all the information that you deserve our channel will make you a better programmer so if you haven't subscribed already make sure to click on the subscribe button right now and without any further talking let's get started if you are a c-sharp developer and maybe even have some experience in asp.net you will definitely come to the point where you will need to use ajax with ajax you can send http requests directly from javascript to a backend endpoint so right here i have a net six asp mvc project setup it's pretty default i just opened the controller went into the home controller and added two new methods right here so one method is just returning some names just a pretty easy string array with some names here returning type of json result which will allow us to take the c-sharp object and map it to json format and then we turn it with a simple ok status result and pass in the names and the other method is the post name method right here also type of json result takes in a parameter and simply we could write that into a database etc so this one is for getting data this one is for posting data all right so let's get started first of all we need to add two attributes so for the get endpoint let's add an attribute http get and for the post endpoint http post all right so that way both methods will now be accessible from the outside let's just set one breakpoint right here in line 47 so that when we finally in the end send a post request to this endpoint that we can check if we have received a valid name so let's leave it like this if you are interested in learning more about asp.net make sure to check out our 13 hour long complete asp.net course where you will learn every important topic such as nvc razer blazer authentication and authorization and restful api development you can find the link in the description below with a huge discount now let's move on with jquery and ajax first of all i want to show you why we are able to use jquery anyway go to views shared folder and open layout and now you can see that when we scroll a little bit down we have here a version of jquery each view that is using the shared layout will be able to make use of jquery right here so let's go ahead into our index page and that one is based on the layout on the shared layout so we can use jquery right here let's go ahead and do that first of all we need to add a section to write some own javascript code right here add a new section let's call it scripts it definitely has to be named like this why pretty easy to explain because when we go to the layout again you can see that we right here have a render section async call which is rendering a section called scripts so if we have in or view a section with the name script it will get rendered right so this is why we have if we want to write some javascript code right here we have to make use of the add section encoded scripts now we can go ahead and write javascript code let's make our first request which is getting the names so let's go ahead and use jquery call ajax now we can really set all the properties that we want to have inside here now let's configure that call so that it's really directing to the correct endpoint the type is as we already said get the url should lead to our endpoint url we can use the add sign here to escape url and make use of c sharpcode dot action let's pass in the name of our method so we can also add a controller but we make use of the home controller and our index view is also in the home controller so he will automatically check that we are in the home controller and will only search for an action right there so if you want to call an action from a different controller make sure to add the controller name here as a parameter too so right now you say get names that's our endpoint now we don't have any parameters which we can set in getname's endpoint so we don't need a data attribute but we expect json as a result so let's go ahead and say data type so equals to json now let's set up two events the first one is the success event so yeah we got our response and the call was successful let's go ahead and configure a function here call that result so let's just write the result into the console we could also use a debugger for sure and the second event is our error event we do the same thing here arrow function request status and error we can go ahead and lock those informations if we like console.log for example status or error whatever you want to do this is simply how you can well handle a success event and handle an error event and make use of it right now it's your turn tell us what you think about this video and if you have any wishes for other programming related videos so go ahead and tell us what you think and dream of in the comment section below so this is forgetting now let's just duplicate that in a very easy way copy it paste it below again now let's configure that for our post endpoint type is post this time action get names we set that to post name because that's the name of our endpoint right in here post name again we have data type json that's totally fine because the object relational mapping will automatically take json and convert it into a c-sharp object but this time we have a parameter right here string name so we need to pass in some data we can for sure extend the url and add it there or we can make use of it and you probably want to later use the request body to send a lot of information so let's make use of that by using data and then create a simple object name is equals to for example yannick there we go now we have the data which is the parameter right name right here should definitely match name right here we have a success call and our error call let's save it like this okay now we are good programmers we go ahead and say document dot ready function now we paste in the calls right into our document ready function and now they get executed as soon as the document is completely loaded let's go ahead and run our application to check if our breakpoint will fire and when we now open the console we should see the result of or get request right here and you can see status code 200 and value clever mark judy the request was successful and got locked into the console and when we check visual studio in the background we can see that the breakpoint stopped the application and you can see the name is yannick so both calls the get and the post request both got executed completely fine so now you have learned how you can use ajax inside of your views for example to make http requests on your asp.net backend and that's it for this video we hope you enjoyed it and that you will stick around again with us next time don't forget to smash the subscribe button right now to no longer miss any high quality programming content and now why don't you go ahead and watch one of our other videos

Channel: tutorialsEU - C#

Views: 38,537

Keywords: asp.net core ajax, asp.net ajax, asp.net jquery, jquery ajax, asp.net 6 ajax, asp.net 6, asp.net 6 mvc, asp mvc ajax, asp jquery, asp javascript ajax, asp.net mvc jquery, asp.net core mvc ajax, asp.net core mvc jquery, ajax, jquery, mvc, jquery ajax tutorial, asp.net core, asp.net mvc, csharp, jquery ajax asp.net core 6, javascript, javascript tutorial, json, jquery tutorial, ajax tutorial, what is ajax, programming, code, visual studio, dotnet, asp net core

Id: dXutAlml_xE

Length: 8min 19sec (499 seconds)

Published: Wed Mar 30 2022