Calling an ASP.NET Web API from jQuery

I’ve been playing with ASP.NET Core Web API recently … here’s a quick post on calling one of these APIs using jQuery Ajax …

Creating the API

The API is going to allow clients to:

  • get a list of people
  • get a single person
  • create a new person

Here’s the very simple person model:

For simplicity, I’m going to use a hardcoded list of people and not going to persist the people in a database. Here’s the API controller constructor and the hardcoded list:

The action method in PersonController to get the list of all the people is very simple:

The action method in PersonController to get a single person is below. The person id will be passed in from the URL path. We return the “Not Found” HTTP status code if the id isn’t in our hardcoded list and the JSON represenation of the found person if it does exists.

The action method in PersonController to create a person is below. The person object is passed in from the HTTP body that has been posted. If the body is missing we return a “Bad Request” HTTP status code. If we do have a person object from the HTTP body then the person id is generated, the person is added to the hardcoded list and we return a “Created” HTTP status code with the person in the response body containing the generated person id.

As well as dealing with returning the HTTP status code and the response body, the call to CreatedAtRoute(), also sets the Location HTTP header to the URL that the client could use to request the person just created. This is the reason for the Get action method having the GetPerson name parameter in the attribute and being referenced as the first parameter in CreatedAtRoute().

Creating the frontend page

Below is the HTML markup (referencing bootstrap CSS classes) that allows the user get a list of people:

Below is JavaScript for the getPeople button click handler. We use $.ajax() to call our person API. It is important to set contentType to application/json or our API won’t be reached. We put the names of the people returned in a pipe delimited list into the getPeopleResult textbox if the API call is successful.

Below is the HTML markup (referencing bootstrap CSS classes) that allows the user to get a single person:

Below is JavaScript for the getPerson button click handler. The code is very simular to the getPeople button click handler except it calls the API to get a single person and outputs the single person’s name in the getPersonResult textbox.

Below is the HTML markup that allows the user to create a person:

Below is JavaScript for the create button click handler. Again we use $.ajax() to call our person API but this time we POST to it. We create an object literal containing the name and email of the person and use JSON.stringify() so this can be passed into the data option in $.ajax(). We set whether the operation has been successful in the postResult textbox along with the generated person id. It is worth noting that the data in the success callback is the original data and not the data in the response. The response body can be obtained from jqXHR.responseText.

Connect with me:RSSGitHubTwitterLinkedIn