example of jquery in mvc

var RID = 0;
var mark = 0;
$(function () {
     $.ajaxSetup({ cache: false });
        $(document).delegate("#tbRole", "focusout", function () {
        if (mark != 1) {
            $.getJSON("CheckDuplicate", { roleName: $('#tbRole').val() }, function (data) {
                if (data == 1) {
                    window.parent.window.parent.showMessage('This role already exists.', 'error');
                    //$('#tbRole').focus();
                    $(element).delay(3000);
                    return false;
                }
            });
        }
    });
 
    getDataGridList();
    $('#btnAddNew').bind("click", function () {
        $('#rm').css("display", "block");
        clr();
        mark = 0;
        $('#btnsubmit').val('Submit');
    });
    $("#btnupdate").bind("click", function () {
        mark = 0;
        clr();
    });
    BindMultiCheck();
    $('body').on("click", "#hcb", function () {
        $("input[name='cb']").prop("checked", this.checked);
    });
    $(document).on("click", "#ishcb", function () {
        $("input[name='iscb']").prop("checked", this.checked);
    });
    $(document).on("click", "input[name='cb']", function () {
        if ($("input[name='cb']").length == $("input[name='cb']:checked").length)
            $('#hcb').prop("checked", "checked");
        else
            $('#hcb').removeProp("checked");
    });
    $(document).on("click", "input[name='iscb']", function () {
        if ($("input[name='iscb']").length == $("input[name='iscb']:checked").length)
            $("#ishcb").prop("checked", "checked");
        else
            $("#ishcb").removeProp("checked");
    });
    $('#btnsubmit').bind("click", function () {
        var m = [];
        var k = 0;
        $('#stbl tr').each(function (i, j) {
            var n;
            if ($(j).find('td').find("input[name='cb']").is(':checked')) {
                if ($(j).find('td').find("input[name='iscb']").is(':checked'))
                    n = true;
                else
                    n = false;
                m.push({ PageID: $(j).find('td').find("input[name='cb']").val(), Active: n });
                k++;
            }
        });
        if ($('#tbRole').val() == "") {
            $('#tbRole').focus();
            window.parent.window.parent.showMessage('Role description should not blank.', 'error');
            return false;
        }
       
        if (k == 0) {
            window.parent.window.parent.showMessage('Please select a page name.', 'error');
            return false;
        }
        if (mark == 0) {
         
            $.ajax({
                url: "Save",
                type: "post",
                cache: false,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: "{ 'objBOAdmin': " + JSON.stringify(m) + ",'roleName':" + JSON.stringify($('#tbRole').val()) + "}",
                success: function (result) {
                    if (result.error != null) {
                        window.parent.window.parent.showMessage(result.error, 'error');
                    } else {
                        window.parent.window.parent.showMessage('Record has been submitted successfully', 'success');
                        window.location.reload(true);
                    }
                }
            });
        }
        else {
            $.ajax({
                url: "Update",
                type: "post",
                cache: false,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: "{ 'objBOAdmin': " + JSON.stringify(m) + ",'roleName':" + JSON.stringify($('#tbRole').val()) + ",'RoleId':" + JSON.stringify(RID) + "}",
                success: function (result) {
                    if (result.error != null) {
                        window.parent.window.parent.showMessage(result.error, 'error');
                    } else {
                        window.parent.window.parent.showMessage('Record has been updated successfully', 'success');
                        window.location.reload(true);
                    }
                }
            });
        }
    });
 
 
   
});
function BindMultiCheck() {
    $.getJSON("FillPageMaster", {}, function (data) {
        $('#stbl').empty().append("<tr><th><input type='checkbox' id='hcb' name='hcb' /></th><th>Page Name</th><th><input type='checkbox' id='ishcb' name='ishcb' />Is Active</th></tr>");
        for (var i = 0; i < data.length; i++) {
            $('#stbl').append("<tr><td><input type='checkbox' id='cb' name='cb' value=" + data[i].Value + " /></td><td>" + data[i].Text + "</td><td><input type='checkbox' id='iscb' name='iscb'  /></td></tr>");
        }
    });
}

function getDataGridList() {
    $('#baseDataTd').empty();
    var columns = 'Role Description';
    var baseDataTable = [];  
    var i = 0;
    var check = "";
    $.getJSON('FillroleMaster', {}, function (data) {
        baseDataTable = $('<table id="baseDataTable" class="display" style="width: 100%;" ></table>');
        var row = $('<tr></tr>');
        $(columns.split(',')).each(function () {
            row.append('<th>' + this + '</th>');
        });
        row.append('<th>Action</th>');
        baseDataTable.append($('<thead></thead>').append(row));
        $(data).each(function () {
            var cObj = this;
            row = $('<tr></tr>');
            $(columns.split(',')).each(function () {
                row.append('<td>' + cObj["Text"] + '</td>');
            });
            row.append('<td><img onclick=EditRecord(' + cObj["Value"] + ') src="/Content/Images/Edit.png" style="cursor:pointer;" />&nbsp;<img onclick=DeleteRecord(' + cObj["Value"] + ') src="/Content/Images/delete.gif" style="cursor:pointer;" /></td>');
            baseDataTable.append(row);
            i++;
        });
        $('#baseDataTd').empty().append(baseDataTable);
        baseDataTable.dataTable();
    });
}
function clr() {
    //$('#hcb').removeProp("checked");
    //$('#ishcb').removeProp("checked");
    $('#tbRole').val('');
    //$('#stbl tr').each(function (i, j) {
    //    $(j).find('td').find("input[name='cb']").removeProp("checked");
    //    $(j).find('td').find("input[name='iscb']").removeProp("checked");
    //});
    $('#stbl').empty();
    BindMultiCheck();
    $('#tbRole').focus();
    $('#btnsubmit').val('Submit');
    mark = 0;
}
function DeleteRecord(obj) {
   
    if (confirm('Do you want to delete it ?')) {
        $.getJSON('CheckUser', { RoleId: obj }, function (data) {
            if (data == 1) {
                window.parent.window.parent.showMessage('You can not delete this role. \n This role has assigned to a user. ', 'error');
            }
            else {
                del(obj);
            }
        });

    }
    else {
        return false;
    }
}
function del(obj)
{
    $.getJSON('Delete', { RoleId: obj }, function (result) {
        if (result.error != null) {
            window.parent.window.parent.showMessage(result.error, 'error');
        } else {
            window.parent.window.parent.showMessage('Record has been deleted successfully', 'success');
            window.location.reload(true);
        }
    });
}
function EditRecord(obj) {
        clr();
        mark = 1;
        RID = obj;
        $('#rm').css("display", "block");
        $('#btnsubmit').val('Update');
        $.getJSON('FillroleMasterById', { RoleId: obj }, function (data) {
            $('#tbRole').val(data[0].Text);
        });
        $.getJSON('Edit', { RoleId: obj }, function (data) {
            $('#stbl tr').each(function (m, n) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].PageID == $(n).find('td').find("input[name='cb']").val()) {
                        $(n).find('td').find("input[name='cb']").prop("checked", "checked");
                        if (data[i].Active == true) {
                            $(n).find('td').find("input[name='iscb']").prop("checked", "checked");
                        }
                    }
                }
            });
            if ($("input[name='cb']").length == $("input[name='cb']:checked").length)
                $("#hcb").prop("checked", "checked");
            if ($("input[name='iscb']").length == $("input[name='iscb']:checked").length)
                $("#ishcb").prop("checked", "checked");
        });
     
    }