javascript ajax call not not hitting controller

Question

I am trying to build up a list of mock files for Dropzone.js to consume. I have an MVC controller method defined as follows:

    [HttpPost]
    public async Task<JsonResult> GetImageInfo(int imageId)
    {
        //int imgId;
        //int.TryParse(imageId, out imgId);
        var image = await RepublikDb.PropertyImage.FindAsync(imageId);

        var path = Server.MapPath(image.ImageURI);
        var size = new FileInfo(path).Length;
        var fileName = new FileInfo(path).Name;
        var thumbnailURI = image.ThumbnailImage.ImageURI.TrimStart('~');

        return Json(new { fileName = fileName, size = size, thumbnailURI = thumbnailURI });
    }

I have tested this endpoint with Postman, and everything works as expected, however each time I try and get the data in JS, the server returns a 500 error code, with complaints of the following: Exception Details: System.ArgumentException: The parameters dictionary contains a null entry for parameter 'imageId' of non-nullable type 'System.Int32'

Here is the JS AJAX code: //Entry point to JS from razor. A comma separated string is passed here. Eg. imageIds = "10,12,14,16"

EditFormInit("@Model.PropertyImageIds") 

var EditFormInit = function (imageIds) {

var imageIdsArr = imageIds.split(",");
var imageFiles = [];

imageIdsArr.forEach(function (ImageId) {
    var requestData = { imageId: parseInt(ImageId) };

    //var reqUrl = "?imageId=";
    //reqUrl = reqUrl.concat(requestData.imageId.toString());

    $.ajax({
        type: "POST",
        url: "/Admin/PropertyImage/GetImageInfo",
        data: requestData,
        contentType: "text/json; charset=utf-8",
        dataType: "json",
        success: function (data, status, jqXHR) {
            var image = { fileName: data.fileName, size: data.size, thumbnail: data.thumbnailURI }
            imageFiles.push(image);
        }
    });
});

get imageFiles init out of the function scope – Amir Katz Dec 20 '15 at 12:01 — Amir Katz, Dec 20 '15 at 12:01

score 0 · Accepted Answer · answered Dec 20 '15 at 12:00

0

Try:

contentType: "application/json"

This should work

answered Dec 20 '15 at 12:00

Amir Katz

1,027
1
10
24

thanks Amir. Figured that out, and finally get the JS to hit the controller and get a response. I am still stuck with the imageFiles being null (after exiting the imageIdsArr.forEach loop). In the loop the values are being added correctly. – Michael Yankelev FSM1 Dec 20 '15 at 12:06

Michael Yankelev FSM1 · Answer 2 · 2015-12-20T13:24:21.957

so i finally realised why the controller was not getting hit, and resolved that issue. The $.ajax was passing the controller a JSON request, which was obviously failing.Once I removed the offending lines, the controller breakpoint finally got hit.

$.ajax({
   type: "POST",
   url: "/Admin/PropertyImage/GetImageInfo",
   data: requestData,
   success: function (data, status, jqXHR) {
      var image = { fileName: data.fileName, size: data.size, thumbnail: data.thumbnailURI }
      imageFiles.push(image);
   }}
);

Even though the response from the controller is now coming back, the imageFiles array is still null. What am I doing wrong here?

javascript ajax call not not hitting controller

2 Answers2

Linked