Reusable Web API Solution In ASP.NET

This blog talks about how to design a Web API solution and reuse it in ASP.NET Web Projects.

Scenario

I had a scenario in an ASP.NET Web forms application where the employee details like First Name, Last Name etc., should be populated in the employee number textbox and these textboxes should be disabled after data is populated. 

If the selected employee number doesn't exist in the relevant database then the user should be allowed to key in the details.

This requirement needs to be implemented in multiple .aspx pages.

Solution

As the web application has a common javascript file referenced in the site master page, I have created a common function to get the employee number as input and populate the data using the Web API.

The common function code is as follows,

function GetEmployeeDetails(employeeNo, apiSource) {
    var apiUrl = "/api/HelpdeskEmployee/GetEmployeeDetails?empNo =" + employeeNo;
    $.ajax({
        url: apirUrl,
        type: "GET",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function(data) {
            if (data != null) {
                switch (apiSource) {
                    case "staff":
                        $("#txtStaffFirstName").val(data.FirstName);
                        $("#txtStaffMiddleName").val(data.MiddleName);
                        $("#txtStaffLastName").val(data.LastName);
                        $("#txtStaffTitle").val(data.Title);
                        break;
                    case "security-staff":
                        $("#txtSecStaffFirstName").val(data.FirstName);
                        $("#txtSecStaffMiddleName").val(data.MiddleName);
                        $("#txtSecStaffLastName").val(data.LastName);
                        break;
                } // end switch
                ToggleStaffInputs(apiSource);
                return false;
            }
        },
        error: function(data) {
            // exception handling logic goes here....
        }
        return false;
    });
}

In the above function, the selected employee number and calling input identifier are passed as parameters. The "apiSource" parameter is use to identify for which section of the aspx page the data needs tobe populated. This is useful when we have multiple employee number textboxes in the same aspx page.

The function "ToggleStaffInputs(apiSource)" is written in the individual aspx page script file to disable the name and title textboxes if data is populated otherwise enable them for user entry.

The code for ToggleStaffInputs function is given below. This is available in the aspx page level .js file.

function ToggleStaffInputs(apiSource) {
    switch (apiSource) {
        case "staff":
            $("#txtStaffFirstName").val() != "" ? $("#txtStaffFirstName").prop("disabled", true) : $("#txtStaffFirstName").prop("disabled", false);
            $("#txtStaffMiddleName").val() != "" ? $("#txtStaffMiddleName").prop("disabled", true) : $("#txtStaffMiddleName").prop("disabled", false);
            $("#txtStaffLastName").val() != "" ? $("#txtStaffLastName").prop("disabled", true) : $("#txtStaffLastName").prop("disabled", false);
            $("#txtStaffTitle").val() != "" ? $("#txtStaffTitle").prop("disabled", true) : $("#txtStaffTitle").prop("disabled", false);
            break;
        case "security-staff":
            $("#txtSecStaffFirstName").val() != "" ? $("#txtSecStaffFirstName").prop("disabled", true) : $("#txtSecStaffFirstName").prop("disabled", false);
            $("#txtSecStaffMiddleName").val() != "" ? $("#txtSecStaffMiddleName").prop("disabled", true) : $("#txtSecStaffMiddleName").prop("disabled", false);
            $("#txtSecStaffLastName").val() != "" ? $("#txtSecStaffLastName").prop("disabled", true) : $("#txtSecStaffLastName").prop("disabled", false);
            break;
    }
}

This function will be executed after the success block to enable/disable the textboxes based on the value.

Next is to write the page level scripts to call the common GetEmployeeDetails function.

This script is given below,

$("#txtStaffEmployeeNo").blur(function() {
    var staffEmployeeNo = $("#txtStaffEmployeeNo").val();
    if (staffEmployeeNo.trim() != '') GetEmployeeDetails(staffEmployeeNo.trim(), 'facility-head');
    else ToggleStaffInputs('staff');
});
$("#txtSecStaffEmployeeNo").blur(function() {
    var securityStaffEmployeeNo = $("#txtSecStaffEmployeeNo").val();
    if (securityStaffEmployeeNo.trim() != '') GetEmployeeDetails(securityStaffEmployeeNo.trim(), 'facility-head');
    else ToggleStaffInputs('staff');
});

The Web API code is given below.

[HttpGet]
public HttpResponseMessage GetEmployeeDetails(string employeeNo) {
    try {
        var employee = _employeeService.GetEmployeeDetails(employeeNo);
        HttpResponseMessage httpResponse = null;
        httpResponse = employee != null ? Request.CreateResponse(HttpStatusCode.OK, employee) : new
        HttpResponseMessage(HttpStatusCode.NotFound);
        return httpResponse;
    } catch (Exception ex) {
        // exception logic....
    }
}

The Web API returns an object of type Employee which has the properties like First Name, Last Name, Middle Name, Title.

Using this approach, we can reuse the Web API solution throughout the web application.