At the moment, I am utilizing an AngularJS Post method to send data to my controller instead of a traditional form submission. The issue I am encountering is that after the post call, the object named sharingInfo in the controller always gets set to null. I suspect that this problem is related to the JSON serializer.
In Angular, the data is posted in the following manner:
$scope["TemplateForm"].$setPristine();
var model = getFormData($('#TemplateForm'));
model.Publish = publish;
model["Template.CommitteeWithAccessCanEditReusable"] = $scope.Model.Template.CommitteeWithAccessCanEditReusable;
model["Template.SharingInfo"] = angular.toJson($scope.Model.Template.SharingInfo);
$http({
method: "POST",
url: "/Template/UpdateTemplateContent",
data: model
}).then...morecode=>
While debugging, I noticed that the template.sharingInfo gets serialized as:
"{"CommitteesWithAccess":[{"TenantId":32727,"DisplayName":"20190304 Ted Test Committee","IsStatic":false,"RootCommitteeId":null}]""{"CommitteesWithAccess":[{"TenantId":32727,"DisplayName":"20190304 Ted Test Committee","IsStatic":false,"RootCommitteeId":null}]"
However, on reaching the controller, the debugger consistently shows the value as null. Although, for string or boolean types, I can successfully set the value. It seems like the object is not being properly serialized into the.NET object. To investigate further, I added a dummy sharingInfo variable of type string to check its expectations. This workaround is not ideal as it requires defining two variables with the same name but different types and prohibits any changes to the sharingInfo object.
Below is my controller method definition: where templatedto.sharingInfo is a string and templatedto.template.sharinginfo is the object
[AcceptVerbs(HttpVerbs.Post)]
[RequireReusablesPermissions]
public ActionResult UpdateTemplateContent(SaveTemplateDto templateDto)
{
if (templateDto.SharingInfo != null && templateDto.Template.SharingInfo != null)
{
templateDto.Template.SharingInfo = JsonConvert.DeserializeObject<ReusableDto.SharingState>(templateDto.SharingInfo) as ReusableDto.SharingState;
}
//just to see what this gives me tbd
var serializedObject = JsonConvert.SerializeObject(templateDto.Template.SharingInfo);
var validationResults = TemplateValidator.GetValidationErrors(templateDto);
if (validationResults?.Any() == true)
{
return new AjaxResult<ReusableDto>
{
ResponseResultCode = ResponseResultCode.Failure,
MessagesHeader = $"{Resources.UnableToSaveTemplate} {string.Join(",", validationResults)}"
};
}
The 'serializedObject' yields the following string:
"{\"CommitteesWithAccess\":[{\"TenantId\":32727,\"DisplayName\":\"20190304 Ted Test Committee\",\"IsStatic\":false,\"RootCommitteeId\":null}]}"
It's evident that the Angular toJson and C# JSON serializer handle the serialization differently. How can I ensure that the expected serializing occurs in Angular?
Here is the object definition for reference. The reuasableDTO is template
public class SaveTemplateDto
{
public ReusableDto Template { get; set; }
public bool IsNewTemplate => Template?.Id == Guid.Empty;
// Model binding properties
public bool Publish { get; set; }
public string SharingInfo { get; set; }
}
public class ReusableDto
{
public SharingState SharingInfo { get; set; }
public class TenantDto
{
public short TenantId { get; set; }
public string DisplayName { get; set; }
public bool IsStatic { get; set; }
public string RootCommitteeId { get; set; }
}
public class SharingState
{
public List<TenantDto> CommitteesWithAccess { get; set; }
public List<TenantDto> CommitteesWithoutAccess { get; set; }
}