2

I am trying to call an ASP.NET Web API method from an AngularJS script. The HTTP request is of POST type, and I am trying to send some data over to the Web API method.

Here is my AngularJS code. d is a simple JSON object.

$http({
    url: '/api/StudentsBasicInfo/InsertOrUpdateStudentBasicInfo',
    method: "POST",
    data: JSON.stringify(d),
    contentType: "application/json;charset=utf-8",
    dataType: 'json'
}).success(function (data, status) {
    if (data == "\"success\"") {
});

Here is my Web API:

[ActionName("InsertOrUpdateStudentBasicInfo")]
public string InsertOrUpdateStudentBasicInfo([ModelBinder] StudentDynamicFormVM student)
{
    try
    {
        StudentsBasicInfoBL studentsBasicInfoBL = new StudentsBasicInfoBL();
        long returnedId = studentsBasicInfoBL.InsertStudentsBasicInfoAndEnrolledProgram(student);
        if(returnedId > 0)
        {
            return "success";
        }
        else
        {
            return "error";
        }
    }
    catch(Exception ex)
    {
        return "error";
    }
}

Below is the strongly typed C# object that I am trying to bind the HTTP request data to:

public class StudentDynamicFormVM
{
    public long SerialId { get; set; }
    public long StudentSerialId { get; set; }
    public string FirstName { get; set; }
    public string MiddleName { get; set; }
    public string LastName { get; set; }
    public int ProgramTypeId { get; set; }
    public string AdmittedSemester { get; set; }
    public string AdmittedDate { get; set; }
    public int DepartmentId { get; set; }
    public int ProgramId { get; set; }
    public string MaritalStatus { get; set; }
    public string Nationality { get; set; }
    public string BloodGroup { get; set; }
    public string Country { get; set; }
    public string Religion { get; set; }
    public int Mobile { get; set; }
    public string Email { get; set; }
    public string NationalId { get; set; }
    public string PresentAddress { get; set; }
    public string PermanentAddress { get; set; }
    public string IdentificationMark { get; set; }
    public string ColourOfHair { get; set; }
    public string DateofBirth { get; set; }
}

However, when I try to execute this code, my Web API is called correctly (verified by debugging), but all the properties of the model class are found to be null, as shown in the screenshot.

enter image description here

Following the suggestion in this post (Web API complex parameter properties are all null), I also changed my Web API code to this:

[HttpPost]
[ActionName("InsertOrUpdateStudentBasicInfo")]
public string InsertOrUpdateStudentBasicInfo(object model)
{
    try
    {
        var jsonString = model.ToString();
        StudentsInfoHybrid student = JsonConvert.DeserializeObject<StudentsInfoHybrid>(jsonString);
        StudentsBasicInfoBL studentsBasicInfoBL = new StudentsBasicInfoBL();
    }
    catch(Exception ex)
    {
        return "error";
    }
}

But then I saw that the JSON object was being correctly received by the Web API, but after attempting to serialize, the object parameters were coming null, that is, the same result as before (there was no exception thrown, however).

I have even tried to omit the JSON.stringify method calls from my AngularJS code, and tried to remove the contentType headers in POST request. But the results remained exactly the same.

Tech stack:

  • ASP.NET 4.5
  • Web API
  • Angular JS 1.2.19
  • Visual Studio 2015

Finally, I am attaching a screenshot of Google Chrome's network log:

enter image description here

CarenRose
  • 1,266
  • 1
  • 12
  • 24
Shuaib
  • 779
  • 2
  • 13
  • 47

1 Answers1

1

Change the name of your property in WebAPI to the name of the property that you are sending. It looks like you are sending an object called Academic_DetailsStatic.

Alternatively, change the name of the object you are posting to match the model binding property name in WebAPI

jle
  • 9,316
  • 5
  • 48
  • 67
  • thanks @jle !! looks like all the properties were wrapped in a property called Academic_DetailsStatic right from the javascrit end (i.e. nested object). I sent just d.Academic_DetailsStatic to Web API and it worked – Shuaib Oct 11 '16 at 19:52