How to Call Web API from jQuery [ASP.NET Core Edition]

In my ASP.NET Core Web API tutorial, I created a RESTful Web API with GET, POST, PUT, and DELETE endpoints to perform CRUD operations on Reservation objects. In this tutorial, we will take the next step and learn how to call an ASP.NET Core Web API using jQuery AJAX.

You will learn how to use jQuery AJAX to send requests to the Web API, pass parameters and credentials, and work with the API responses. This is a practical approach for integrating an ASP.NET Core Web API with a client-side application using jQuery. So, let’s get started.

Make sure to keep the Web API project in running state so that the API can be called by jQuery code.

Call Web API GET Method from jQuery

The Web API GET method returns all the Reservations. This method is shown below:

[HttpGet]
public IEnumerable<Reservation> Get()
{
//…
}

Now let’s learn to Call this Web API GET Method from jQuery. To demonstrate this, create an HTML page named AllReservation.html. This page will retrieve the reservation data from the ASP.NET Core Web API and display the results dynamically in an HTML table. This allows users to view all available reservations without reloading the page.

In this html page create a table as shown below:

<table class="table table-sm table-striped table-bordered m-2">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Start Location</th>
            <th>End Location</th>
            <th>Update</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Notice that the <tbody> element is intentionally left empty. This is because we will use jQuery AJAX to retrieve the reservation data from the Web API and dynamically populate it with the reservation records.

Next, add the following jQuery AJAX Code to the page:

$(document).ready(function () {
    ShowAllReservation();

    function ShowAllReservation() {
        $("table tbody").html("");
        $.ajax({
            url: "https://localhost:44324/api/Reservation",
            type: "get",
            contentType: "application/json",
            success: function (result, status, xhr) {
                $.each(result, function (index, value) {
                    $("tbody").append($("<tr>"));
                    appendElement = $("tbody tr").last();
                    appendElement.append($("<td>").html(value["id"]));
                    appendElement.append($("<td>").html(value["name"]));
                    appendElement.append($("<td>").html(value["startLocation"]));
                    appendElement.append($("<td>").html(value["endLocation"]));
                    appendElement.append($("<td>").html("<a href=\"UpdateReservation.html?id=" + value["id"] + "\"><img src=\"icon/edit.png\" /></a>"
                    appendElement.append($("<td>").html("<img class=\"delete\" src=\"icon/close.png\" />"));
                });
            },
            error: function (xhr, status, error) {
                console.log(xhr)
            }
        });
    }

    $("table").on("click", "img.delete", function () {
        var reservationId = $(this).parents("tr").find("td:nth-child(1)").text();

        $.ajax({
            url: "https://localhost:44324/api/Reservation/" + reservationId,
            type: "delete",
            contentType: "application/json",
            success: function (result, status, xhr) {
                ShowAllReservation();
            },
            error: function (xhr, status, error) {
                console.log(xhr)
            }
        });
    });

});

I created a JavaScript function called ShowAllReservation() which contain the jQuery .ajax() method. With this AJAX method the Web API is consumed.

Notice I am making an HTTP GET type AJAX Request to the GET method of the Web API whose URL is https://localhost:44324/api/Reservation.

The reservations are returned by the ASP.NET Core Web API in JSON format. The response contains the reservation data, which can then be processed by jQuery and displayed in the HTML table. A typical JSON response looks like this:

[
  {
    "id": 1,
    "name": "Ankit",
    "startLocation": "New York",
    "endLocation": "Beijing"
  },
  {
    "id": 2,
    "name": "Bobby",
    "startLocation": "New Jersey",
    "endLocation": "Boston"
  },
  {
    "id": 3,
    "name": "Jacky",
    "startLocation": "London",
    "endLocation": "Paris"
  }
]

Next, look at the success callback of the $.ajax() method. Here, I use jQuery’s .each() method to iterate through the JSON response and dynamically add each reservation to the “tbody” element of the HTML table. This allows the reservation data returned by the Web API to be displayed on the page.

I also added an anchor and an img elements for performing the update and delete actions on the reservations. You will see this in just a moment.

$.each(result, function (index, value) {
    $("tbody").append($("<tr>"));
    appendElement = $("tbody tr").last();
    appendElement.append($("<td>").html(value["id"]));
    appendElement.append($("<td>").html(value["name"]));
    appendElement.append($("<td>").html(value["startLocation"]));
    appendElement.append($("<td>").html(value["endLocation"]));
    appendElement.append($("<td>").html("<a href=\"UpdateReservation.html?id=" + value["id"] + "\"><img src=\"icon/edit.png\" /></a>"
    appendElement.append($("<td>").html("<img class=\"delete\" src=\"icon/close.png\" />"));
});

Check the below image which shows the working flowchart:

Double click the AllReservation.html file to open it in your browser. It will show all the reservation fetched from the Web API and displayed on the table. Check the below image:

Call Web API DELETE Method from jQuery

The Web API Delete method is:

[HttpDelete("{id}")]
public void Delete(int id) => repository.DeleteReservation(id);

In the same AllReservation.html file, I have added a click event to the “img” element with the delete class. When the user clicks the delete icon, jQuery makes a Call to the Web API Delete method to remove the selected reservation. The following code demonstrates how to implement this functionality:

$("table").on("click", "img.delete", function () {
    var reservationId = $(this).parents("tr").find("td:nth-child(1)").text();

    $.ajax({
        url: "https://localhost:44324/api/Reservation/" + reservationId,
        type: "delete",
        contentType: "application/json",
        success: function (result, status, xhr) {
            ShowAllReservation();
        },
        error: function (xhr, status, error) {
            console.log(xhr)
        }
    });
});

I created the click event using the jQuery .on() method for the img element with the delete class. The .on() method is used here because the delete icons are created dynamically by jQuery after the reservation data is loaded from the Web API. This ensures that the click event works correctly for dynamically generated elements.

The first <td> element in each table row contains the reservation ID. I retrieve this ID using the following code:

var reservationId = $(this).parents("tr").find("td:nth-child(1)").text();

Next, I call the ASP.NET Core Web API DELETE method using jQuery AJAX. The reservation ID is included in the request URL as the last URL segment, allowing the API to identify and delete the specific reservation.

url: "https://localhost:44324/api/Reservation/" + reservationId

Once the reservation gets deleted, the ShowAllReservation() function is called in the success callback of jQuery Ajax, and this updates the table.

Click the cross icon against any reservation object and the API will delete it. Check the below video which shows the delete process:

Call Web API POST Method from jQuery

The Web API POST method has the task of creating new reservations which it receives in it’s parameter. It’s skeleton is shown below.

[HttpPost]
public IActionResult Post([FromBody] Reservation res)
{ 
//…
}

I will Call the POST method of Web API from jQuery by passing the reservation on it’s parameter. This means the new Reservation is send in JSON to the Web API. So, create a new HTML page called AddReservation.html and add the following html code to it.

<div class="form-group">
    <label for="Name">Name:</label>
    <input type="text" class="form-control" id="Name" />
</div>
<div class="form-group">
    <label for="StartLocation">Start Location:</label>
    <input type="text" class="form-control" id="StartLocation" />
</div>
<div class="form-group">
    <label for="EndLocation">End Location:</label>
    <input type="text" class="form-control" id="EndLocation" />
</div>
<div class="text-center panel-body">
    <button type="submit" class="btn btn-sm btn-primary" id="AddButton">Add</button>
</div>

<div style="display:none" id="resultDiv">
    <h2>Reservation</h2>
    <table class="table table-sm table-striped table-bordered m-2">
        <thead><tr><th>ID</th><th>Name</th><th>Start Location</th><th>End Location</th></tr></thead>
        <tbody></tbody>
    </table>
</div>

The form contains 3 input controls for entering the Name, Start Location and End Location of a new reservation.

<input type="text" id="Name" />
<input type="text" id="StartLocation" />
<input type="text" id="EndLocation" />

A button is also provided to submit the form and trigger the jQuery AJAX call to the ASP.NET Core Web API.

<button type="submit" class="btn btn-sm btn-primary" id="AddButton">Add</button>

Once the reservation is successfully created, the API returns the newly created reservation data in JSON format. I then use this response to display the new reservation in the HTML table, which is initially placed inside a hidden <div> element.

<div style="display:none" id="resultDiv">
    <h2>Reservation</h2>
    <table class="table table-sm table-striped table-bordered m-2">
        <thead>
             <tr>            
                 <th>ID</th>
                 <th>Name</th>
                 <th>Start Location</th>
                 <th>End Location</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

Next, add the following jQuery code to this page:

$("#AddButton").click(function (e) {
    $.ajax({
        url: "https://localhost:44324/api/Reservation",
        headers: {
            Key: "Secret@123"
        },
        type: "post",
        contentType: "application/json",
        data: JSON.stringify({
            Id: 0,
            Name: $("#Name").val(),
            StartLocation: $("#StartLocation").val(),
            EndLocation: $("#EndLocation").val()
        }),
        success: function (result, status, xhr) {
            var str = "<tr><td>" + result["id"] + "</td><td>" + result["name"] + "</td><td>" + result["startLocation"] + "</td><td>" + result[
            $("table tbody").append(str);
            $("#resultDiv").show();
        },
        error: function (xhr, status, error) {
            console.log(xhr)
        }
    });
});

On the button click event I make an AJAX request to the API URL which is https://localhost:44324/api/Reservation.

Since the API will need Credentials for adding a reservation, therefore I have to Call the Web API with Credentials this time. The credentials are added to the HTTP Header like shown below:

headers: {
    Key: "Secret@123"
}

Remember that the Web API POST method uses the [FromBody] attribute, which tells ASP.NET Core to read the reservation object from the request body.

In the jQuery AJAX request, I use the data parameter to send the new reservation values to the Web API. These values are included in the request body so that the API can bind them to the reservation parameter and create a new reservation.

data: JSON.stringify({
    Id: 0,
    Name: $("#Name").val(),
    StartLocation: $("#StartLocation").val(),
    EndLocation: $("#EndLocation").val()
})

Once the reservation is successfully added, the ASP.NET Core Web API returns a response containing the newly created reservation object. I then use this JSON response to dynamically add the new reservation to the <tbody> element of the HTML table, allowing it to appear immediately on the page. See the code:

success: function (result, status, xhr) {
    var str = "<tr><td>" + result["id"] + "</td><td>" + result["name"] + "</td><td>" + result["startLocation"] + "</td><td>" + result[
    $("table tbody").append(str);
    $("#resultDiv").show();
},

Open the page in your browser and test the functionality. You should now be able to add a new reservation using jQuery AJAX, with the newly created reservation appearing in the HTML table as demonstrated in the video below.

Call Web API PUT Method from jQuery

Now I will Call Web API PUT Method from jQuery. The HTTP PUT method is used to update an existing reservation. In this example, jQuery will send the updated reservation data to the Web API, which will then modify the corresponding reservation. The Web API PUT method is shown below:

[HttpPut]
public Reservation Put([FromForm] Reservation res)
{
//…
}

Start by creating a new HTML page called UpdateReservation.html. Then add the following HTML to this page:

<div class="form-group">
    <label asp-for="Id"></label>
    <input type="text" class="form-control" id="Id" readonly />
</div>
<div class="form-group">
    <label for="Name">Name:</label>
    <input type="text" class="form-control" id="Name" />
</div>
<div class="form-group">
    <label for="StartLocation">Start Location:</label>
    <input type="text" class="form-control" id="StartLocation" />
</div>
<div class="form-group">
    <label for="EndLocation">End Location:</label>
    <input type="text" class="form-control" id="EndLocation" />
</div>
<div class="text-center panel-body">
    <button type="submit" class="btn btn-sm btn-primary" id="UpdateButton">Update</button>
</div>

<div style="display:none" id="resultDiv">
    <h2>Reservation</h2>
    <table class="table table-sm table-striped table-bordered m-2">
        <thead><tr><th>ID</th><th>Name</th><th>Start Location</th><th>End Location</th></tr></thead>
        <tbody></tbody>
    </table>
</div>

The page contains several input controls for editing the reservation details. When the page loads, the existing reservation is first retrieved from the Web API and displayed in these input fields.

The user can then modify the reservation details by entering the updated values and clicking the Update button. This triggers a jQuery AJAX request to the Web API, which updates the reservation with the new information.

When the user clicks the Update button, jQuery sends the modified reservation data to the ASP.NET Core Web API PUT method. After the update is completed successfully, the newly updated reservation values are displayed in the HTML table.

Next, add the following jQuery AJAX code to the page:

$(document).ready(function () {
    GetReservation();

    function GetReservation() {
        let params = (new URL(document.location)).searchParams;
        let id = params.get("id");

        $.ajax({
            url: "https://localhost:44324/api/Reservation/" + id,
            type: "get",
            contentType: "application/json",
            success: function (result, status, xhr) {
                $("#Id").val(result["id"]);
                $("#Name").val(result["name"]);
                $("#StartLocation").val(result["startLocation"]);
                $("#EndLocation").val(result["endLocation"]);
            },
            error: function (xhr, status, error) {
                console.log(xhr)
            }
        });
    }

    $("#UpdateButton").click(function (e) {
        let params = (new URL(document.location)).searchParams;
        let id = params.get("id");

        data = new FormData();
        data.append("Id", $("#Id").val());
        data.append("Name", $("#Name").val());
        data.append("StartLocation", $("#StartLocation").val());
        data.append("EndLocation", $("#EndLocation").val());

        $.ajax({
            url: "https://localhost:44324/api/Reservation",
            type: "put",
            data: data,
            processData: false,
            contentType: false,
            success: function (result, status, xhr) {
                var str = "<tr><td>" + result["id"] + "</td><td>" + result["name"] + "</td><td>" + result["startLocation"] + "</td><td>" + result[
                $("table tbody").append(str);
                $("#resultDiv").show();
            },
            error: function (xhr, status, error) {
                console.log(xhr)
            }
        });
    });
});

The reservation ID is passed to this page through the query string. The following two lines of code retrieve the ID from the URL and store it in a variable named id.

let params = (new URL(document.location)).searchParams;
let id = params.get("id");

I then make the Call to the GET Method of the API to retrieve the reservation details for this specific ID.

Notice that the reservation ID is appended to the end of the API URL, allowing the Web API to identify and return the corresponding reservation:

url: "https://localhost:44324/api/Reservation/" + id

Once the reservation data is successfully retrieved from the ASP.NET Core Web API, I bind the returned values to the corresponding input controls on the page. This allows the user to view the existing reservation details and make the required changes.

$("#Id").val(result["id"]);
$("#Name").val(result["name"]);
$("#StartLocation").val(result["startLocation"]);
$("#EndLocation").val(result["endLocation"]);

When the UpdateButton is clicked the reservation gets updated. See the jQuery AJAX code which Calls the Web API’s PUT Method.

$.ajax({
    url: "https://localhost:44324/api/Reservation",
    type: "put",
    data: data,
    processData: false,
    contentType: false,
    success: function (result, status, xhr) {
        var str = "<tr><td>" + result["id"] + "</td><td>" + result["name"] + "</td><td>" + result["startLocation"] + "</td><td>" + result[
        $("table tbody").append(str);
        $("#resultDiv").show();
    },
    error: function (xhr, status, error) {
        console.log(xhr)
    }
});

Notice that I have put the processData and contentType values to false:

processData: false
contentType: false

Also notice the I send the updated reservation data to the Web API PUT method in a FormData object.

data = new FormData();
data.append("Id", $("#Id").val());
data.append("Name", $("#Name").val());
data.append("StartLocation", $("#StartLocation").val());
data.append("EndLocation", $("#EndLocation").val());

The functionality is shown by the below video:

Call Web API PATCH Method from jQuery

Now I will Call the HTTP PATCH method of Web API using jQuery AJAX. The HTTP PATCH method is used to partially update an existing reservation, allowing you to modify specific properties without necessarily replacing the entire resource. The Web API PATCH method used in this example is shown below:

[HttpPatch("{id}")]
public StatusCodeResult Patch(int id, [FromBody]JsonPatchDocument<Reservation> patch)
{
//…
}

Create a new HTML page called UpdateReservationPatch.html. Then add the following HTML to this page:

<div class="form-group">
    <label asp-for="Id"></label>
    <input type="text" class="form-control" id="Id" readonly />
</div>
<div class="form-group">
    <label for="Name">Name:</label>
    <input type="text" class="form-control" id="Name" />
</div>
<div class="form-group">
    <label for="StartLocation">Start Location:</label>
    <input type="text" class="form-control" id="StartLocation" />
</div>
<div class="form-group">
    <label for="EndLocation">End Location:</label>
    <input type="text" class="form-control" id="EndLocation" />
</div>
<div class="text-center panel-body">
    <button type="submit" class="btn btn-sm btn-primary" id="UpdateButton">Update</button>
</div>

The page contains several input controls where the user can enter the updated reservation details. A button is also provided to submit these changes. When the user clicks the button, jQuery AJAX sends a request to the ASP.NET Core Web API PATCH endpoint to update the reservation.

Next, add the following jQuery code to the page:

$(document).ready(function () {
    GetReservation();

    function GetReservation() {
        let params = (new URL(document.location)).searchParams;
        let id = params.get("id");

        $.ajax({
            url: "https://localhost:44324/api/Reservation/" + id,
            type: "get",
            contentType: "application/json",
            success: function (result, status, xhr) {
                $("#Id").val(result["id"]);
                $("#Name").val(result["name"]);
                $("#StartLocation").val(result["startLocation"]);
                $("#EndLocation").val(result["endLocation"]);
            },
            error: function (xhr, status, error) {
                console.log(xhr)
            }
        });
    }

    $("#UpdateButton").click(function (e) {
        let params = (new URL(document.location)).searchParams;
        let id = params.get("id");

        $.ajax({
            url: "https://localhost:44324/api/Reservation/" + id,
            type: "patch",
            contentType: "application/json-patch+json",
            data: JSON.stringify([
                {
                    op: "replace",
                    path: "Name",
                    value: $("#Name").val()
                },
                {
                    op: "replace",
                    path: "StartLocation",
                    value: $("#StartLocation").val()
                }
            ]),
            success: function (result, status, xhr) {
                window.location.href = "AllReservation.html";
            },
            error: function (xhr, status, error) {
                console.log(xhr)
            }
        });
    });
});

The reservation id is sent to this page’s URL in query string. So the GetReservation() gets this id and fetches it’s data by making the API call with the GET Method.

The HTTP PATCH type of API request is made by the UpdateButton click’s code which is:

$("#UpdateButton").click(function (e) {
    let params = (new URL(document.location)).searchParams;
    let id = params.get("id");

    $.ajax({
        url: "https://localhost:44324/api/Reservation/" + id,
        type: "patch",
        contentType: "application/json-patch+json",
        data: JSON.stringify([
            {
                op: "replace",
                path: "Name",
                value: $("#Name").val()
            },
            {
                op: "replace",
                path: "StartLocation",
                value: $("#StartLocation").val()
            }
        ]),
        success: function (result, status, xhr) {
            window.location.href = "AllReservation.html";
        },
        error: function (xhr, status, error) {
            console.log(xhr)
        }
    });
});

Notice that I used the JSON.stringify() method to send a json to the Web API. This json contains 3 name/value pairs:

1. “op” – contains the type of operation to perform. I passed “replace” value for doing update action.
2. “path” – contains the reservation field where the operation is performed. As you know there are 3 fields – Name, StartLocation and EndLocation.
3. “value” – contains the new value for the field.

data: JSON.stringify([
    {
        op: "replace",
        path: "Name",
        value: $("#Name").val()
    },
    {
        op: "replace",
        path: "StartLocation",
        value: $("#StartLocation").val()
    }
])

Go to AllReservation.html page and change the URL for the edit icon to UpdateReservationPatch.html.

appendElement.append($("<td>").html("<a href=\"UpdateReservationPatch.html?id=" + value["id"] + "\"><img src=\"icon/edit.png\" /></a>"

Then check the functionality which is shown by the below video:

Get a Reservation by it’s Id

Here I will have to invoke the Web API GET method and pass id parameter to it. This method is shown bwlow.

[HttpGet("{id}")]
public ActionResult<Reservation> Get(int id)
{
    if (id == 0)
        return BadRequest("Value must be passed in the request body.");
    return Ok(repository[id]);
}

So, create a new HTML Page called GetReservation.html and add the following code to it:

<div class="form-group">
    <label for="id">Id:</label>
    <input type="text" class="form-control" id="Id" />
</div>
<div class="text-center panel-body">
    <button id="GetButton" class="btn btn-sm btn-primary">Get Reservation</button>
</div>

<div id="resultDiv" style="display:none">
    <h2>Reservation</h2>
    <table class="table table-sm table-striped table-bordered m-2">
        <thead><tr><th>ID</th><th>Name</th><th>Start Location</th><th>End Location</th></tr></thead>
        <tbody></tbody>
    </table>
</div>

The page contains an input control where the user can enter the reservation ID, along with a button that triggers the API request. When the button is clicked, jQuery sends an AJAX request to the ASP.NET Core Web API to retrieve the reservation details for the specified ID.

A HTML table is also included on the page to display the reservation data returned by the API.

Next, add the following jQuery code to the page:

$(document).ready(function () {
    $("#GetButton").click(function (e) {
        $("table tbody").html("");
        $.ajax({
            url: "https://localhost:44324/api/Reservation/" + $("#Id").val(),
            type: "get",
            contentType: "application/json",
            success: function (result, status, xhr) {
                $("#resultDiv").show();
                if (typeof result !== 'undefined') {
                    var str = "<tr><td>" + result["id"] + "</td><td>" + result["name"] + "</td><td>" + result["startLocation"] + "</td><td>" + result[
                    $("table tbody").append(str);
                }
                else
                    $("table tbody").append("<td colspan=\"4\">No Reservation</td>");
            },
            error: function (xhr, status, error) {
                console.log(xhr)
            }
        });
    });
});

Important thing to note is the id value is added to the URL of the API:

url: "https://localhost:44324/api/Reservation/" + $("#Id").val()

Once I received the value from the API I then show it inside the HTML table. Check the code inside the success callback method which does this work.

Open the page in the browser and enter 2 in the text box and click the button. You will soon get the reservation data for the 2nd reservation object.

Check the below video:

Upload Image File to Web API

Now I will show how to Upload Image Files to the Web API with jQuery. The flowchart for this operation is given below:

I will have to invoke the following Web API method:

[HttpPost("UploadFile")]
public async Task<string> UploadFile([FromForm] IFormFile file)
{
//…
}

Start by creating an HTML page called AddFile.html and add the following code to it.

<p>
    <a href="AllReservation.html" class="btn btn-sm btn-primary">Back</a>
</p>
<input type="file" id="File" />
<div class="text-center panel-body">
    <button id="AddButton" type="submit" class="btn btn-sm btn-primary">Add</button>
</div>

<div id="fileDiv" style="display:none">
    <h2>Uploaded File</h2>
    <img id="fileImg" />
</div>

There is an input element of type file that will be used to upload an image file to the API. Once the file is uploaded I will show it inside the img tag.

Next, add the following jQuery code to this page:

$(document).ready(function () {
    $("#AddButton").click(function (e) {
        data = new FormData();
        data.append("file", $("#File")[0].files[0]);

        $.ajax({
            url: "https://localhost:44324/api/Reservation/UploadFile",
            type: "post",
            data: data,
            processData: false,
            contentType: false,
            success: function (result, status, xhr) {
                $("#fileImg").attr("src", result);
                $("#fileDiv").show();
            },
            error: function (xhr, status, error) {
                console.log(xhr)
            }
        });
    });
});

The file is added to the FormData object like:

data = new FormData();
data.append("file", $("#File")[0].files[0]);

And then I make the HTTP POST type call to the Web API, the URL is – https://localhost:44324/api/Reservation/UploadFile.

Once the image is uploaded to the API server, I show it inside the img tag. I do this inside the success callback of jQuery AJAX method:

success: function (result, status, xhr) {
    $("#fileImg").attr("src", result);
}

Open the page in the browser and upload an image to the API just like what is shown by the video:

The link to download the full source code of this tutorial is given below:

Download

This ASP.NET Core Web API and jQuery tutorial provides a practical and comprehensive understanding of how to call and consume Web APIs using jQuery AJAX. Throughout the tutorial, we covered the most commonly used HTTP methods, including GET, POST, PUT, PATCH, and DELETE, and learned how to send data, parameters, and credentials from a client-side application to an ASP.NET Core Web API.

Let me know your thoughts on this topic.