Ajax call to MVC method results in 404

Question

I'm developing a drill down chart using Canvasjs and MVC5. I have a Controller called JsonController that contains several Tasks that return Json. They're all quite similar, but accept more arguments as the layers increase. Layer 0 is the default layer.

[HttpPost]
public async Task<IActionResult> GetLayer0(string datePassedIn)
{
    string orgCode = User.Identity.GetOrgCode();
    DateTime? processDate;
    DateTime defaultDate = DateTime.Today.AddDays(-1);  //default yesterday 

    try
    {
        processDate = DateTime.ParseExact(datePassedIn, inputDateFormat, cultureProvider);
    }
    catch (FormatException ex)
    {
        _logger.LogError(ex, "Error formatting date {datePassedIn} did not match {inputDateFormat}. using default date {defaultDate}", null);
        processDate = defaultDate;
    }

    List<DataPoint> dataPoints = new List<DataPoint>();

    IEnumerable<EventTypeLayer1> results = await _context.EventTypeLayer1Results
                                                        .FromSql($"usp_dd_EventType_0 @p0, @p1", orgCode, processDate)
                                                        .ToListAsync();

    foreach (EventTypeLayer1 result in results)
    {
        dataPoints.Add(new DataPoint(result.Value, result.Title, result.Colour));
    }

    return Json(dataPoints);
}   

In the javascript, the ajax calls are managed with an array

var ajaxOptions  = [
{

    url: "~/Views/Json/GetLayer0",
    data: {
        layer: 0,
        processDate: encodeURIComponent(formatDateInput(param.processDate)),
        orgCode: encodeURIComponent(param.orgCode)
    },
    callback : handleLayer0
},
{
    url: "~/Views/Json/GetLayer1",
    data: {
        layer: 1,
        processDate: encodeURIComponent(formatDateInput(param.processDate)),
        orgCode: encodeURIComponent(param.orgCode),
        eventType: encodeURIComponent(param.eventType)
    },
    callback : handleLayer1

},
{
    url: "~/Views/Json/GetLayer2",
    data: {
        layer: 2,
        processDate: encodeURIComponent(formatDateInput(param.processDate)),
        orgCode: encodeURIComponent(param.orgCode),
        eventType: encodeURIComponent(param.eventType),
        driverId: encodeURIComponent(param.driverId)
    },
    callback : handleLayer2

}
];

function doAjax( layerIndex) {
$.ajax({
    type: "POST",
    cache: false,
    dataType: "json",
    url: ajaxOptions[layerIndex].url,
    data: ajaxOptions[layerIndex].data,
    success: function (serverResponse) {

        //once a successful response has been received,
        //no HTTP error or timeout reached,
        //run the callback for this request
        ajaxOptions[layerIndex].callback(serverResponse);

    },
    complete : function () {

        //note that the "success" callback will fire
        //before the "complete" callback
        console.log("Ajax call complete");
    }
});
}

When the ajax fires, I'm getting Errors

https://localhost:44388/~/Views/Json/GetLayer0 error 404

https://localhost:44388/Json/GetLayer0 error 405

@Url.Action("GetLayer0", "JsonController") renders blank

I'm a bit confused. What should I do?

Edit: Here's the actual AJAX call

function doAjax( layerIndex) {
    $.ajax({
        type: "POST",
        cache: false,
        dataType: "json",
        url: ajaxOptions[layerIndex].url,
        data: ajaxOptions[layerIndex].data,
        success: function (serverResponse) {

            //once a successful response has been received,
            //no HTTP error or timeout reached,
            //run the callback for this request
            ajaxOptions[layerIndex].callback(serverResponse);

        },
        complete : function () {

            //note that the "success" callback will fire
            //before the "complete" callback
            console.log("Ajax call complete");
        }
    });
 }

Answer 1

You are callig view urls instead of controller functions It should be like

{

    url: "/youcontrollername/GetLayer0",
    data: {
        layer: 0,
        processDate: encodeURIComponent(formatDateInput(param.processDate)),
        orgCode: encodeURIComponent(param.orgCode)
    },
    callback : handleLayer0
},