Create jQuery client that invokes the minimal APIs (CRUD Operations)

In the previous part of this series we started build a JavaScript client that invokes the minimal APIs. So far we have developed the Sign In and Sign Out operations. And now it's time to complete the remaining CRUD operations.

Open Index.cshtml file and add the following jQuery code that fills the EmployeeID drop down list for the first time after successfully signing in to the system.

$("#filldropdown").click(function () {
    var options = {};
    options.url = "/minimalapi/employees";
    options.type = "GET";
    options.dataType = "json";
    options.success = function (data) {
        $("#employeeid").empty();
        data.forEach(function (element) {
            $("#employeeid").append("<option>" + 
element.employeeID + "</option>");
        });
    };
    options.error = function () {
        $("#msg").html("<h2>Error</h2>");
    };
    $.ajax(options);
});

The code handles the click event of the Fill Drop Down button. We point the url property of the options object to /minimalapi/employees and also set the request type to GET.

The success callback function empties the drop down list in case it is previously populated. It then iterates through the response data (Employee objects) and fills the EmployeeIDs into the drop down list. This is done using the append() method of jQuery.

The $.ajax() call initiates the Ajax request.

The following figure shows how the drop down list looks upon successful execution of this code.

Upon selecting an EmployeeID from the drop down list, its FirstName and LastName values need to be displayed in the respective textboxes. This is done using the following code:

$("#employeeid").change(function () {
    var options = {};
    options.url = "/minimalapi/employees/" + 
$("#employeeid").val();
    options.type = "GET";
    options.dataType = "json";
    options.success = function (data) {
        $("#firstname").val(data.firstName);
        $("#lastname").val(data.lastName);
    };
    options.error = function () {
        $("#msg").html("<h2>Error</h2>");
    };
    $.ajax(options);
});

Here, we handle the change event of the drop down list. The url carries the EmployeeID while making the GET request. The success function receives an Employee object matching that EmployeeID. We fill the firstname and lastname textboxes with the respective properties. Notice the camel casing used while accessing the firstName and lastName properties.

In order to insert an Employee, you can specify first name and last name values and click on the Insert button. The following jQuery code handles the click event of the Insert button.

$("#insert").click(function () {
    var options = {};
    options.url = "/minimalapi/employees";
    options.type = "POST";
    var obj = {};
    obj.firstName = $("#firstname").val();
    obj.lastName = $("#lastname").val();
    options.data = JSON.stringify(obj);
    options.contentType = "application/json";
    options.dataType = "html";
    options.success = function () {
        $("#filldropdown").click();
        $("#msg").html("<h2>Success</h2>");
    };
    options.error = function () {
        $("#msg").html("<h2>Error</h2>");
    };
    $.ajax(options);
});

This time the HTTP verb used is POST. The POST request needs to carry the details of the new Employee. So, a data object with firsyName and lastName is sent along with the request. The success callback fills the drop down list again because we need to display the new EmployeeID (it's an identity column in the database). A success message is also displayed to the user.

The update operation is similar but there are a few differences. The following code shows the click handler of the Update button.

$("#update").click(function () {
    var options = {};
    options.url = "/minimalapi/employees/" + 
$("#employeeid").val();
    options.type = "PUT";
    var obj = {};
    obj.employeeID = $("#employeeid").val();
    obj.firstName = $("#firstname").val();
    obj.lastName = $("#lastname").val();
    options.data = JSON.stringify(obj);
    options.contentType = "application/json";
    options.dataType = "html";
    options.success = function (msg) {
        $("#msg").html("<h2>Success</h2>");
    };
    options.error = function () {
        $("#msg").html("<h2>Error</h2>");
    };
    $.ajax(options);
});

This time we use PUT verb to indicate an update operation. We also append the EmployeeID selected in the drop down list to the request url.

The data object wraps the employeeID, firstName, and lastName properties that are necessary in the minimal API.

Finally, we can handle the click event of the Delete button using the following jQuery code:

$("#delete").click(function () {
    var options = {};
    options.url = "/minimalapi/employees/" + 
$("#employeeid").val();
    options.type = "DELETE";
    options.dataType = "html";
    options.success = function () {
        $("#filldropdown").click();
        $("#msg").html("<h2>Success</h2>");
    };
    options.error = function () {
        $("#msg").html("<h2>Error</h2>");
    };
    $.ajax(options);
});

Here, the HTTP verb is DELETE and EmployeeID to be deleted is embedded in the request url.

That's it for now! Keep coding!!