'My body arrive null in my backend when mapping to the model(axios/vue.js/c#)

I'm trying to send my vue data to my backend and map it to the FilterModel and it's always null, whatever I tried I was ending up with null : this is the console.log result you see in getFilteredLogs :

{
    "searchQuery": "e",
    "dateTimeRange": {},
    "logTypeFilter": {
        "error": false,
        "warning": false,
        "critical": false
    }
}

I tried mapping to just LogTypeFilter which is part of FilterModel and it worked I received 3 Booleans value for error, warning and critical.

I thought maybe it was the dates, but I even tried hardcoding dates or changing them to string and it didn't do anything.

Any idea ? Thanks a lot.

I have this data in my vue component which is the complex object I am trying to send to my backend:

data() {
    return {
          filterModel:{
            searchQuery: '',
            dateTimeRange:{
                sartDateTime: Date,
                endDateTime: Date
            },
            logTypeLevel:{
              error: false,
              warning: false,
              critical: false
            }
          }
    }
}

This is my call to my backend :

getFilteredLogs(filterModel) {
      //console.log(JSON.stringify(filterModel))
      return client.post(
           '/logs/filter', {
               headers: { "Content-Type": "application/json" },
               body: JSON.stringify(filterModel)
           }
      )
}

This is my controller code in the back end where the FilterModel is null (note I added [FromBody] just to try it out, didn't change anything) :

[HttpPost]
[Route("filter")]
public IActionResult FilterLogs([FromBody] FilterModel filter)
{
     return Ok(_logLogic.FilterLogs(filter));
}

This is my model (added serializable just try out, didn't change anything) :

[Serializable]
public class FilterModel
{
      public string SearchQuery { get; set; }
      public DateTimeRange DateTimeRange { get; set; }
      public LogTypeFilter LogTypeFilter { get; set; }
}
    
[Serializable]
public class DateTimeRange
{
      public DateTime StartDateTime { get; set; }
      public DateTime EndDateTime { get; set; }
}
    
[Serializable]
public class LogTypeFilter
{
       public bool Critical { get; set; }
       public bool Error { get; set; }
       public bool Warning { get; set; }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source