Working with JSON using Json.NET by Newtonsoft 2 (Consume JSON with JQuery)

In the previous example, we discussed about how to return JSON with the use of JSON.NET.
Here, we consume the returned data and display it in the view, using JQuery.

In JQuery, there are 3 main ways to make ajax calls.

$.ajax();
$.get();
$.post();

In this tutorial, lets add some code to consume the JSON from the previous tutorial

since we want to show the data when the page loads, lets put the call inside the document.ready function

** please note that, I have 2 buttons inside this table with onclick functions they will open up modal dialogues to do relevant actions.
** for the 2 buttons, on the onClick methods, I pass in the relevant employeeID and with that, I am able to edit a particular employee...
**note that the table body in the view has a tbody with the id="tbodyEmp", which is used to append data into

Table in the view

      <div style="text-align:center">
         <table style="width:100%" class="table table-striped table-responsive table-bordered">
                        <tr>
                            <th>Employee ID</th>
                            <th>Employee Name</th>
                            <th>Edit Employee</th>
                            <th>Delete Employee</th>
                        </tr>  
                        <tbody id="tbodyEmp">
                        </tbody>                

            </table>
         </div>


Calling from the Javascript

$(document).ready(function () {
    //load employees
    var url = '/Home/GetAllEmployeesJSON';
 
//when we execute the ajax call, the script will continue to execute without waiting for the data
//to return, this will stop that
$.ajaxSetup({ async: false });

    $.post(
    url,
    function (result) {
        if (!$.isEmptyObject(result)) {
            var empListCount = result.length;
            for (var i = 0; i < empListCount; i++) {
                $("#tbodyEmp").append(
                            "<tr>" +
                                "<td>" + result[i].employeeID + "</td>" +
                                "<td>" + result[i].employeeName + "</td>" +
                                "<td>" +
                                    "<button onclick='return showEditEmployee(" + result[i].employeeID + ")'>" +
                                        "Edit" +
                                    "</button>" +
                                "</td>" +
                                "<td>" +
                                    "<button onclick='return showDeleteEmployee(" + result[i].employeeID + ")'>" +
                                        "Delete" +
                                    "</button>" +
                                "</td>" +
                            "</tr>"
                    );
            }
        }
        else {
            $('#empDisplayDiv').append(
                    "<div>Employee list not available</div>"
                );
        }
    });


    $.ajaxSetup({ async: true});   //this will resume the async....
});

//delete employee modal show
function showDeleteEmployee(empID) {
    $('#selectedDelete').val(empID);//this is how you assign a value using id
    $('#deleteEmployeeConfirmDialog').modal('show');
    return false;
}

delete employee modal in the view
<div class="modal fade" id="deleteEmployeeConfirmDialog" tabindex="-1" role="dialog" aria-labelledby="deleteEmployeeConfirmDialogLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="deleteEmployeeConfirmDialogLabel">Confirmation</h4>
            </div>
            <input id="selectedDelete" type="hidden" value="-1"/>
            <div class="modal-body">
                Are you sure you want to delete this employee ?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="deleteEmployee()">Yes</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>




//edit employee modal show
function showEditEmployee(empID) {
    $('#editEmployeeDialog').modal('show');

  //this is how you get values using id
   //var firstName = $("#editFirstName").val();

}

edit employee dialog
<div class="modal fade" id="editEmployeeDialog" tabindex="-1" role="dialog" aria-labelledby="editEmployeeDialogLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="editEmployeeDialogLabel">Edit Employee</h4>
            </div>
            <input id="selectedDelete" type="hidden" value="-1" />
            <div class="modal-body">
                <div class="panel panel-body">
                    <div id="editErrorDiv" name="editErrorDiv" style="text-align:center; color:red">
                    </div>
                    <form>
                        <p>
                            <label for="editFirstName" class="control-label">First Name : </label>
                            <input type="text" id="editFirstName" name="editFirstName" class="form-control" />
                        </p>
                        <p>
                            <label for="editMiddleName" class="control-label">Middle Name : </label>
                            <input type="text" id="editMiddleName" name="editMiddleName" class="form-control" />
                        </p>
                        <p>
                            <label for="editLastName" class="control-label">Last Name : </label>
                            <input type="text" id="editLastName" name="editLastName" class="form-control" />
                        </p>
                        <p>
                            <label for="editDepartmentSelect">Department : </label>
                            <select id="editDepartmentSelect" name="editDepartmentSelect" class="form-control"></select>
                        </p>
                        <p>
                            <label for="editDateofBirth">Date of Birth (Use DD-MM-YYYY format) : </label>
                            <input type="text" id="editDateofBirth" name="editDateofBirth" class="form-control" />
                        </p>
                        <input type="hidden" id="editCurrentID" value="-1"/>
                        <br />
                    </form>
                </div>
            </div>
            <div class="modal-footer">              
                <button onclick="return editValidateEmployee()" class="btn btn-primary">Edit Employee</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>