JSON function code in the controller is not functioning with following code in MVC

Question

When the page is loaded from the view the JSON function code in the controller is not firing. What is the error in the following code?

the following code in the view

Script in Index view:

 <div class="modal fade" id="MyModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="model">&times;</a>
                    <h4 id="ModelTitle"></h4>
                </div>
                <div class="modal-body">
                    <form id="form">
                        <fieldset id="SubmitForm">
                            @Html.HiddenFor(m => m.UserID, new { @id = "UserID" })

                            <div class="form-group">
                                @Html.TextBoxFor(m => m.UserCode, new { @id = "userCode", @class = "form-control", @placeholder = "Code*" })
                            </div>
                            <div class="form-group">
                                @Html.TextBoxFor(m => m.Name, new { @id = "userName", @class = "form-control", @placeholder = "Name*" })
                            </div>
                            <div class="form-group">
                                @Html.TextBoxFor(m => m.AliasName, new { @id = "userAliasName", @class = "form-control", @placeholder = "AliasName" })
                            </div>
                            <div class="form-group">
                                @Html.TextBoxFor(m => m.Email, new { @id = "userEmail", @class = "form-control", @placeholder = "Email*" })
                            </div>
                            <div class="form-group">
                                @Html.TextBoxFor(m => m.Gender, new { @id = "userGender", @class = "form-control", @placeholder = "Gender*" })
                            </div>
                            <div class="form-group">
                                @Html.TextBoxFor(m => m.Mobile, new { @id = "userMobile", @class = "form-control", @placeholder = "Mobile*" })
                            </div>
                            <div class="form-group">
                                @Html.TextBoxFor(m => m.CountryID, new { @id = "userCountryID", @class = "form-control", @placeholder = "CountryID*" })
                            </div>
                            <div class="form-group">
                                @Html.TextBoxFor(m => m.DateOfBirth, new { @id = "userDOB", @class = "form-control", @placeholder = "DateOfBirth*" })
                            </div>
                            <div class="form-group">
                                <a href="#" class="btn btn-block btn-danger" id="SaveUserRecord">Save</a>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>

        </div>
    </div>


function DataBind(UserList) {
        var SetData = $("#SetUserList");
        for (var i = 0; i < UserList.length; i++) {
            var Data =
                "<tr class='row_" + UserList[i].UserID + "'>" +
                "<td>" + UserList[i].UserID + "</td>" +
                "<td>" + UserList[i].UserCode + "</td>" +
                "<td>" + UserList[i].Name + "</td>" +
                "<td>" + UserList[i].Email + "</td>" +
                "<td>" + UserList[i].Gender + "</td>" +
                "<td>" + UserList[i].Mobile + "</td>" +
                "<td>" + "<a href='#' class='btn btn-warning' onclick='Edit(" + UserList[i].UserID + ")'><span class='glyphicon glyphicon-edit'></span>+</a>" + "</td>" +
                "<td>" + "<a href='#' class='btn btn-danger' onclick='Delete(" + UserList[i].UserID + ")'<span class='glyphicon glyphicon-trash'></span>x</a>" + "</td>" +
                "</tr>";

            SetData.append(Data);
            $("#LoadingStatus").html(" ");
        }

 function Edit(UserID) {
        var url = "/User/GetUserbyID/" + UserID;
        $("#ModelTitle").html("Update Record");
        $("#MyModal").modal();

        $.ajax({
             type: "GET",
            url: url,
            success: function (data) {
               var obj = JSON.parse(data);
                $("#UserID").val(data.UserID);
                $("#userCode").val(data.UserCode);
                $("#userName").val(data.Name);
                $("#userAliasName").data(obj.AliasName);
                $("#userEmail").val(data.Email);
                $("#userGender").val(data.Gender);
                $("#userMobile").val(data.Mobile);
                $("#userCountryID").val(data.CountryID);
                $("#userDateOfBirth").val(data.DateOfBirth);
            }
       })
    }

JSON function in the controller:

public JsonResult GetUserbyID(int UserID)
{
    BOUser newBOUser = new TktServiceClient().GetUsers().Where(x => x.UserID == UserID).SingleOrDefault();
    string value = string.Empty;
    value = JsonConvert.SerializeObject(newBOUser, Formatting.Indented, new JsonSerializerSettings
    {
        ReferenceLoopHandling = ReferenceLoopHandling.Ignore
    });
    return Json(value, JsonRequestBehavior.AllowGet);
}

Answer 1

you can check with following code, insted of get you can use post method ,

    var Edit= function (UserID) {
    $("#ModelTitle").html("Update Record");
    $("#MyModal").modal();
    $.ajax({
        type: "POST",
        url: "/User/GetUserbyID?UserID=" + UserID,
        success: function (data) {
            var obj = JSON.parse(data);
            $("#UserID").val(obj.UserID);
            $("#userCode").val(obj.UserCode);
            $("#userName").val(obj.Name);
            $("#userAliasName").val(obj.AliasName);
            $("#userEmail").val(obj.Email);
            $("#userGender").val(obj.Gender);
            $("#userMobile").val(obj.Mobile);
            $("#userDOB").val(obj.DateOfBirth);
            $("#userCreatedate").val(obj.CreatdDate);
          }
       })
    }