How to pass either a JavaScript array or JSON string to an Asp .NET Core 6 MVC controller using AJAX

Question

I am working on an Asp.Net Core 6 MVC project. Initially, I tried to send a javascript array created by this line of code,

var reportData = $('#reportForm').serializeArray();

to the controller. The controller signature was

public async Task ProcessReport(ReportsConfigurationVM reportsConfigurationVM).

However, all the properties of the object reportsConfigurationVM had null values. So, I have converted the javascript array to a string by the following code:

var dataToPost = JSON.stringify(reportData);

and changed the controller signature to receive a string value.

public async Task ProcessReport([FromBody] string reportsConfigurationVM)

However, the string "reportsConfigurationVM" in the above code came out as null. When I checked the value of dataToPost in the view, it was a valid JSON object as shown below:

[{"name":"CustomerNumber","value":"12345"},{"name":"Year","value":"2024"},{"name":"__RequestVerificationToken","value":"CfDJ8PVSsilBiOxCixGgY8TVnJlM-gjOWKMAq7GwBeOfy_fQvqz1-jXnHLEAaA5yHblnxH1aI7GQUR4PHGIK0SgqmJRjUG3ePL-lzQdMlKGUPWFICQq8ZbmVOYend3dWdHKzauvfm-eKCCt79Zn1Ve00OIg"}]

If you could please help me to successfully pass either a JS array or a JSON string to the controller, from the view through an AJAX call that would be a great help.

Controller Code:
[HttpPost]
public async Task ProcessReport([FromBody] string  reportsConfigurationVM)
{
    
    
        List myList = new List();
    	RiskByYearTest r1 = new RiskByYearTest();
    	r1.CustomerNumber = "4549601";
    	r1.CustomerStatus = "Active";
    	r1.StartYear = "2022";

    	RiskByYearTest r2 = new RiskByYearTest();
    	r2.CustomerNumber = "4549602";
    	r2.CustomerStatus = "Closed";
    	r2.StartYear = "2023";
    	myList.Add(r1);
    	myList.Add(r2);

    	return JsonConvert.SerializeObject(myList);
    
    
    
}

Model:
public class ReportsConfigurationVM
{
public string? CustomerNumber { get; set; }
public string? Date1 { get; set; }
public string? Date2 { get; set; }
[Required(ErrorMessage = "Year is required")]        
public string? Year { get; set; }
public int UserID { get; set; }
}

Index.cshtml:
@model ViewModels.ReportsConfigurationVM


   
    
        
            
            
            
                
                    Available Reports
                
                
                    
                    
                    
                    Enter Year

Accepted Answer

Hi @Sherpa,

I found you are using DataTable javascript library in your project, and I believe you can pass the data successfully by using basic ajax method(like the sample SurferOnWww shared).

And I following your sample code and make it work in my side. Please kindly check the data area under the DataTable/ajax like below. Hope it can help you.

Reports/Index.cshtml

@model ReportDemo.Models.ReportsConfigurationVM


    
        
            
            
                
                    Available Reports
                
                
                    
                    
                    
                    Enter Year
                    
                    
                    
                
            
        
    
    
        
        
    



    
        
            Customer Number
            Customer Status
            Start Year

ProcessReport method

[HttpPost]
public async Task ProcessReport([FromBody] ReportsConfigurationVM reportsConfigurationVM)
{
    if (reportsConfigurationVM == null)
    {
        return BadRequest("Error: Model binding failed. The model is null.");
    }
    List myList = new List
    {
        new RiskByYearTest { CustomerNumber = "4549601", CustomerStatus = "Active", StartYear = "2022" },
        new RiskByYearTest { CustomerNumber = "4549602", CustomerStatus = "Closed", StartYear = "2023" }
    };
    return Ok(myList);
}

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Jason

Answer

When I checked the value of dataToPost in the view, it was a valid JSON object as shown below: [{"name":"CustomerNumber","value":"12345"},{"name":"Year","value":"2024"}, ...

Since the resultant JSON string is not proper the model binding to the argument of ProcessReport method could not be done. The JSON string must be like as follows;

{"CustomerNumber":"12345","Date1":"8/20","Date2":"8/27","Year":"2024","UserID":1}

Use $('#reportForm').serialize(); instead of $('#reportForm').serializeArray(); to send the form data in the application/x-www-form-urlencoded format.

Shown below is a sample code:

Controller and Model

using Microsoft.AspNetCore.Mvc;
using MvcNet8App.Models;
using System.ComponentModel.DataAnnotations;
using System.Diagnostics;

namespace MvcNet8App.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger _logger;

        public HomeController(ILogger logger)
        {
            _logger = logger;
        }

        public IActionResult Index()
        {
            return View();
        }


        public IActionResult ProcessReport()
        {
            var model = new ReportsConfigurationVM
            {
                CustomerNumber = "12345",
                Date1 = "8/20",
                Date2 = "8/27",
                Year = "2024",
                UserID = 1
            };
            return View(model);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult ProcessReport(ReportsConfigurationVM reportsConfigurationVM)
        {
            if (ModelState.IsValid)
            {               
                return RedirectToAction("Index", "Home");
            }
            return View(reportsConfigurationVM);
        }
    }

    public class ReportsConfigurationVM
    {
        public string? CustomerNumber { get; set; }
        public string? Date1 { get; set; }
        public string? Date2 { get; set; }
        [Required(ErrorMessage = "Year is required")]
        public string? Year { get; set; }
        public int UserID { get; set; }
    }
}

View

@model MvcNet8App.Controllers.ReportsConfigurationVM

@{
    ViewData["Title"] = "ProcessReport";
}

ProcessReport



    
        
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            

            
                
            
        
    


@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");

        
    }
}

Result

enter image description here

Share via

How to pass either a JavaScript array or JSON string to an Asp .NET Core 6 MVC controller using AJAX

1 additional answer

Your answer