AJax Call that pass KnockoutJS Observable Array to the HTTP Post Controller Method fails

Question

I am trying to make a Ajax Call to the Http Controller POST method, the data passed from the ajax to Controller is the Array of JSON which is an ObserverableArray from KnockoutJS. The AAX Call to the HTTP Controller is like below

 $.ajax({
                    url: '/ORF/pdtInfo',
                    type: 'POST',
                    data: ko.toJSON(self.pdtDetails()),
                    success: function (result) {
                        console.log("OrderRequest - Recorded inserted Sucessfully" );
                    },
                    error: function (errorThrown) {
                        console.log("OrderRequest - Recorded insert Failed" +errorThrown.responseText );
                        callHandleUserError("Request Failed");
                    }
                })

The data that is ko.toJSON(self.pdtDetails()), passed to Controller is like

[{"pdtNeededTypes":["Individual","Other"],
  "stockNumber":"0054654354  |  y8fdts-Tg(hhhjhj)2Mnn/J          [Also Known as : O2 , OygR4-EhaFP]",
  "pdtNeeded":"Other",
  "pdtTypes":""}]

The Controller method is like below which receives array as input parameter

   public JsonResult pdtInfo(List<Models.ORFPdtInfo> orfpdtInfo)
    {
        try
        {
            if (Session["ORFData"] != null)
            {
                ORFData ORFData = Session["ORFData"] as ORFData;
                ORFData.pdtInfo = orfpdtInfo;
                Session["ORFData"] = ORFData;
                var result = new JsonResult()
                {
                    Data = orfpdtInfo,
                    MaxJsonLength = Int32.MaxValue
                };
                return result;
            }
            else
            {
                return Json(new { redirectUrl = Url.Action("Index", "ORF"), isRedirect = true });
            }
        }
        catch (Exception e)
        {
            return null;
        }
    }

Where the Model Class ORFPdtInfo is like

public class ORFPdtInfo
{
    public List<string> pdtNeededTypes { get; set; }
    public string stockNumber { get; set; }
    public string pdtNeeded { get; set; }
    public string pdtTypes { get; set; }
}

And the ORFData is the class where I am composing the email content, from Controller I am passing the data in to this class for composing the email body content

[Serializable]
public class ORFData
{
public List<ORFPdtInfo> pdtInfo { get; set; }

public string SerializedOrderData()
{
    StringBuilder orderText = new StringBuilder();
    for (int i=0;i<pdtInfo.Count();i++ ){
    orderText.AppendLine("<tr><td width='30%'>Pdt Needed </td><td width='70%'>" + pdtInfo[i].pdtNeeded + "</td></tr>");
    ....

The issue is when the Ajax call that is made to the Controller method automatically goes to the error function. I tried to see the error by putting them in the console errorThrown.responseText but it is empty. I also set break point in the controller List<Models.ORFPdtInfo> orfpdtInfo is null,nothing is passed from the ajax call to the controller, am I missing anything with the Model class binding. Any help is greatly appreciated

if you puta breakpoint inside your `catch (Exception e)` block in the Controller Action, is it hitting that? — , May 02 '21 at 06:01
@CallumMorrisson Catch block in Controller is not hitting but just the AJAX call ` error: function (errorThrown)` — trx, May 02 '21 at 06:09
@CallumMorrisson But why will I see Input parameter as null in Controller but in the AJAX I can see the Array is passed though, do you think I am missing something with Mapping/Binding with the Model Class or not not correctly passing data? — trx, May 02 '21 at 06:19
There's a few things that might be going wrong. Make sure the `content-type` header is `application/json`. And the try putting a `[FromBody]` attribute on the input parameter in your controller action. — , May 02 '21 at 06:25
Maybe this can help : https://stackoverflow.com/questions/6186770/ajax-request-returns-200-ok-but-an-error-event-is-fired-instead-of-success — vernou, May 02 '21 at 07:49

score 1 · Answer 1 · answered May 03 '21 at 13:18

1

Adding the contentType: "application/json",to the POST method AJAX call fixed the issue

answered May 03 '21 at 13:18

trx

2,077
9
48
97

AJax Call that pass KnockoutJS Observable Array to the HTTP Post Controller Method fails

1 Answers1

Linked