Shuaib Shuaib - 1 month ago 6
AngularJS Question

Object parameters are always null after Web API call

I am trying to call a ASP.NET Web API method from an Angular JS 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

$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\"") {

});


In the above javascript code, d is a simple JSON object.

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 JSON.stringify method calls from my angular JS 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

jle jle
Answer

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