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!!