Ajax not hitting controller method

Question

I have the following jquery function which is sending data to a controller:

function bound(e) {
    var ele = document.getElementsByClassName("e-grid")[0]
    ele.addEventListener('click', function (e) {
        if (e.target.classList.contains('e-up')) {
            var grid = document.getElementById('FlatGrid').ej2_instances[0];  //Grid Instance 
            var rowObj = grid.getRowObjectFromUID(ej.base.closest(e.target, '.e-row').getAttribute('data-uid'));
            var  data = rowObj.data;
            //alert(JSON.stringify(data));
            var code = data.ClientCode;
            $.ajax({
                type: "POST",
                url: "/Client/ShowClient",
                data: { "ClientCode": code }, //First item has latest ID
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    if (data.length !== 0) {
                        console.log(data);
                    }
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }

    });
}

And my controller method:

[HttpPost]
    public ActionResult ShowClient(string ClientCode)
    {
        if (ClientCode == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        *action*
    }

However I am getting a 500 (Internal Server Error) error for this. Any idea what I am missing cause my method is not being hit at all. And I can see that var code does have the correct string value.

Answer 1

Change the url to this:

url: "../Client/ShowClient"

Answer 2

Remove commas from the parameter name "ClientCode" and contentType and will be work

        $.ajax({
            type: "POST",
            url: "/Client/ShowClient",
            data: { ClientCode: code }, //First item has latest ID
            success: function (data) {
                if (data.length !== 0) {
                    console.log(data);
                }
            },
            error: function (data) {
                console.log(data);
            }
        });

Answer 3

The comments have provided you with a combination of suggestions that when put together will give you the desired behavior.

First, you can build the URL in teh view using @Url.Action

url: '@(Url.Action("ShowClient","Client"))',

Next, the object model is not being built correctly

data: { ClientCode: code },

Note the last of quotes around the key.

And finally remove the JSON content type.

Which results to portion of code.

$.ajax({
    type: "POST",
    url: '@(Url.Action("ShowClient","Client"))',
    data: { ClientCode: code },
    success: function (data) {
        if (data.length !== 0) {
            console.log(data);
        }
    },
    error: function (data) {
        console.log(data);
    }
});