My object doesn't post with ASP.NET MVC from jQuery

Question

I have the following javascript:

<script>
function uploadPhotoDoc() {
    var SmallPhotoDoc = {};
    SmallPhotoDoc.PK_PhotoDoc = $("#PK_PhotoDoc").val();
    SmallPhotoDoc.FK_Site = $("#FK_Site").val();
    SmallPhotoDoc.SeriesID = $("#SeriesID").val();
    SmallPhotoDoc.ContentID = $("#ContentID").val();
    SmallPhotoDoc.Notes = $("#Notes").val();
    SmallPhotoDoc.Date = $("#Date").val();
     
    data = "{SmallPhotoDoc: " + JSON.stringify(SmallPhotoDoc) + "} ";

    alert(data);
    $.ajax({
        type: "POST",
        url: "/Containers/UploadPhotoDoc/@ViewContext.RouteData.Values["org"]",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            alert(response);
        },
        failure: function (response) {
            alert(response.responseText);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
     
}
</script>

And I have following class in C#:

public class SmallPhotoDoc
{ 
    public Guid PK_PhotoDoc { get; set; }
    public Guid? FK_Site { get; set; }
    public string SeriesID { get; set; }
    public string ContentID { get; set; }
    public string Notes { get; set; }
    public DateTime? Date { get; set; }
}

And I have the following signature to be sent to:

public string UploadPhotoDoc(string id, SmallPhotoDoc model)

I have verified the data is correct with the alert popup. But when I go to the UploadPhotoDoc menu, the model is always null. Does anyone see my error in this? Note, I have tried to use [FromBody] with the model parameter and that didn't do anything. It show no form has been posted on the Request object.

Answer 1

In JS:

  function uploadPhotoDoc(id) {

    var SmallPhotoDoc = {};
    SmallPhotoDoc.PK_PhotoDoc = $("#PK_PhotoDoc").val();
    SmallPhotoDoc.FK_Site = $("#FK_Site").val();
    SmallPhotoDoc.SeriesID = $("#SeriesID").val();
    SmallPhotoDoc.ContentID = $("#ContentID").val();
    SmallPhotoDoc.Notes = $("#Notes").val();
    SmallPhotoDoc.Date = $("#Date").val();

    var model = {
        "id": @ViewContext.RouteData.Values["org"],
        "model": SmallPhotoDoc
    }

    alert(model);

    $.ajax({
        type: "POST",
        url: "/Containers/UploadPhotoDoc",
        data: model,
        datatype: "json",
        cache: false,
        success: function (response) {
            alert(response);
        },
        failure: function (response) {
            alert(response.responseText);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });

}

In controller's action method:

public string UploadPhotoDoc(string id, SmallPhotoDoc model)

Answer 2

After noting that the direct post worked, I changed the upload to the following and it now works:

$.ajax({
        type: "POST",
        url: "/Containers/UploadPhotoDoc/@ViewContext.RouteData.Values["org"]",
        data: $("#photodocform").serialize(),
       
        dataType: "json",
        success: function (response) {
            alert(response);
        },
        failure: function (response) {
            alert(response.responseText);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });

I would still love to see the reason it didn't work from anyone who knows exactly what I did incorrectly.