User.js

//Load Data in Table when documents is ready
$(document).ready(function () {
    loadData();
});

function ShowApi(){
    $.ajax({
        url: "api/User",
        type: "GET",
        success: function (data) {
            alert(data[0]);
        }
    });
}

function loadData() {
    $.ajax({
        url: "http://localhost:50167/api/User",
        type: "GET",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            var html = '';
            $.each(result, function (key, item) {
                html += '<tr>';
                html += '<td>' + item.UserId + '</td>';
                html += '<td>' + item.UserName + '</td>';
                html += '<td>' + item.Password + '</td>';
                html += '<td>' + item.IsActive + '</td>';
                html += '<td><a href="#" onclick="return getbyID(' + item.UserId + ')">Edit</a> | <a href="#" onclick="Delele(' + item.UserId + ')">Delete</a></td>';
                html += '</tr>';
            });
            $('.tbody').html(html);
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}

function Add() {
    //var res = validate();
    //if (res == false) {
    //    return false;
    //}
    var usrObj = {
        UserId: $('#UserId').val(),
        UserName: $('#UserName').val(),
        Password: $('#Password').val(),
        IsActive: $('#IsActive').val()
    };
    $.ajax({
        url: "http://localhost:50167/api/User",
        data: JSON.stringify(usrObj),
        type: "POST",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            loadData();
            $('#myModal').modal('hide');
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}

//Function for getting the Data Based upon User ID
function getbyID(UsrID) {
    $('#Name').css('border-color', 'lightgrey');
    $('#Age').css('border-color', 'lightgrey');
    $('#State').css('border-color', 'lightgrey');
    $('#Country').css('border-color', 'lightgrey');
    $.ajax({
        url: "http://localhost:50167/api/User/" + UsrID,
        typr: "GET",
        contentType: "application/json;charset=UTF-8",
        dataType: "json",
        success: function (result) {
            $('#UserId').val(result.UserId);
            $('#UserName').val(result.Name);
            $('#Password').val(result.Age);
            $('#IsActive').val(result.State);

            $('#myModal').modal('show');
            $('#btnUpdate').show();
            $('#btnAdd').hide();
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
    return false;
}

//function for updating User's record
function Update() {
    var res = validate();
    if (res === false) {
        return false;
    }
    var usrObj = {
        UserId: $('#UserId').val(),
        UserName: $('#UserName').val(),
        Password: $('#Password').val(),
        IsActive: $('#IsActive').val()

    };
    $.ajax({
        url: "http://localhost:50167/api/User",
        data: JSON.stringify(usrObj),
        type: "POST",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            loadData();
            $('#myModal').modal('hide');
            $('#UserId').val("");
            $('#UserName').val("");
            $('#Password').val("");
            $('#IsActive').val("");
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}

//function for deleting User's record
function Delele(id) {
    var ans = confirm("Are you sure you want to delete this Record?");
    if (ans) {
        $.ajax({
            url: "http://localhost:50167/api/User/" + id,
            type: "DELETE",
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            success: function (result) {
                loadData();
            },
            error: function (errormessage) {
                alert(errormessage.responseText);
            }
        });
    }
}

//Function for clearing the textboxes
function clearTextBox() {
    $('#UserId').val("");
    $('#UserName').val("");
    $('#Password').val("");
    $('#IsActive').val("");
    $('#btnUpdate').hide();
    $('#btnAdd').show();
    $('#UserName').css('border-color', 'lightgrey');
    $('#Password').css('border-color', 'lightgrey');
    $('#IsActive').css('border-color', 'lightgrey');
}
//Valdidation using jquery
function validate() {
    var isValid = true;
    if ($('#UserName').val().trim() === "") {
        $('#UserName').css('border-color', 'Red');
        isValid = false;
    }
    else {
        $('#UserName').css('border-color', 'lightgrey');
    }
    if ($('#Password').val().trim() === "") {
        $('#Password').css('border-color', 'Red');
        isValid = false;
    }
    else {
        $('#Age').css('border-color', 'lightgrey');
    }
    if ($('#IsActive').val().trim() === "") {
        $('#IsActive').css('border-color', 'Red');
        isValid = false;
    }
    else {
        $('#IsActive').css('border-color', 'lightgrey');
    }
    return isValid;
}