JSON to object does not working on ajax call

Question

just a quick question. I don't know what's wrong with this code I can't pass the json file to my controller as object.

This is the Javascript looks like.

var reportparams = {
                Client_Name_Short: $("#Client_Name_Short").val(),
                CountryNo: $("#CountryNo").val(),
                ProfileUID: $("#ProfileUID").val(),
                HidEmployerList: $("#HidEmployerList").val(),
                MarketPositions: $("#MarketPositions").val(),
                CurrencyID: $('#CurrencyID').val(),
                Language: $('#Language').val(),
                JobMatches: '0',
                ReportType: 'Country_or_Ngolp',
                ShowIncumbents: $("#ShowIncumbents").is(":checked"),
                ExcludeSelectedEmployer: $("#ExcludeSelectedEmployer").is(":checked")
            };
            var reportparamsJSON = JSON.stringify(reportparams);
            $.ajax({
                url: 'LoadPortfolio',
                type: 'POST',
                dataType: 'json',
                data: reportparamsJSON,
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    alert(data);
                }
            });

This is the controller looks like.

[HttpPost]
[ActionName("LoadPortfolio")]
public async Task<IActionResult> LoadPortfolioCall(DownloadReportViewModel model){...}

this is how the Model looks like.

[Display(Name ="Select Client Name: ")]
        public string Client_Name_Short { get; set; }
        [Display(Name = "Select Country: ")]
        public int CountryNo { get; set; }
        [Display(Name = "Select Profile: ")]
        public string ProfileUID { get; set; }
        [Display(Name = "Select Employer: ")]
        public string HidEmployerList { get; set; }
        [Display(Name = "Select Market Positions: ")]
        public string MarketPositions { get; set; }
        [Display(Name = "Select Currency: ")]
        public string CurrencyID { get; set; }
        [Display(Name = "Language: ")]
        public string Language { get; set; }
        public string JobMatches { get; set; }
        public string ReportType { get; set; }
        [Display(Name = "Show Incumbents: ")]
        public bool ShowIncumbents { get; set; }
        [Display(Name = "Exclude Selected Employer: ")]
        public bool ExcludeSelectedEmployer { get; set; }

        #region View
        public List<SelectListItem> ClientNameSelection { get; set; }
        public List<SelectListItem> CountrySelection { get; set; }
        public List<SelectListItem> ProfileSelection { get; set; }
        #endregion

        public DownloadReportViewModel()
        {
            this.ClientNameSelection = new List<SelectListItem>();
            this.CountrySelection = new List<SelectListItem>();
            this.ProfileSelection = new List<SelectListItem>();
        }

When ever I try to call via ajax I always get null values on my properties and data was not transfer correctly.

Answer 1

try to set the data in the ajax call as an object like that

 $.ajax({ url: 'LoadPortfolio', type: 'POST', dataType: 'json', data: {model:reportparamsJSON}, contentType: 'application/json; charset=utf-8', success: function (data) { alert(data); } });