Using ASP.NET Core and JQuery to call methods via AJAX

Would like to use AJAX to call a method in your ASP.NET Core app / web service? In this demo we’ll walk through all the details – including how to make use of ValidateAntiForgeryToken.

Prerequisite knowledge

I’m assuming you have a basic understanding of:

Problem we’re trying to solve

We are writing a form to collect book details, for a library management system.
We have a drop down list called Storage Location. The options available depend on Hardcover (yes/no).

When a user enters/changes the hardcover option we want to get the storage locations using an AJAX call.

Storage location logic

For the purpose of this simple example, here’s how I am storing the different combinations or hardcover and storage locations (in code).

Example: if it’s a hardcover book the options would be: General Circulation, Backroom and Offsite storage.

ASP.NET Core method

We need a URL for our AJAX call. I’m choosing to add a method to class BookDetailsController.

The code uses LINQ to get the data from my static list of locations. Perhaps in real-life this statement would be a query using Entity Framework.

I chose to use a POST request. I could have used GET, which would have made it easier to test the URL as I could pass a URL such as this: https://localhost:44382/bookdetails/storagelocations?ishardcover=true

Lastly, I am using the ValidateAntiForgeryToken attribute. We will need to cater for that in our AJAX call. Within that form is @Html.AntiForgeryToken(). This is what will generate the token. Looks something like this…

Note that the @Html.AntiForgeryToken() method produces HTML that looks something like this. Note the name __RequestVerificationToken

<input name=”__RequestVerificationToken” type=”hidden” value=”CfDJ8EtPyYIqlaFOgtiW4jAOXuSK5rEvXYi5CM-OFWETtxeW34juJ-ugaxrbR-xb2o5NaqcgjmST_lzBevHVxUQ_2g6ILNkg_5J0mLcQIJMJZxPFK8vBCH3grLwnLjC8UhWB_hAP21me-_1wxdbyFS28__d-8ox4aSIh_CLXMAWT5ejXUqsit6gDyRM8AOsx_eJI2Q”>

JQuery AJAX call

The actual AJAX call will be handled by JQuery, which comes by default in the sample ASP Core project. Here’s what the code looks like:

Breaking down this code, the first thing we need to do is get the parameters. We need to send:

  • isHardcover – true or false
  • __RequestVerificationToken from our form. We need to pass this because of the [ValidateAntiForgeryToken] attribute

That’s what lines 4-6 do.

Afterwards we setup the AJAX call. Note the success function starting in line 12.

Lastly, we want this code to fire whenever the selection in the Hardcover method is changed. Hence the line of code at line 24.

Hope this helps.

One comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s