Jquery和Asp.Net MVC通过Jquery Ajax调用将Obejct传递给控制器

Question

I am trying to pass Object from Jquery to asp.net mvc controller action. The parameter is always null. what is my mistake?

Creating object for countries

var selectedCountries = [];

var id = 1;

$(".countriesSelection").find('span').each(function() {
  var countryName = $(this).text();
  var profile1 = {};
  profile1.id = id;
  profile1.countryName = countryName;

  selectedCountries.push(profile1)
});

console.log(selectedCountries);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countriesSelection">
  <span>India</span>
  <span>USA</span>
  <span>China</span>
  <span>Japan</span>
</div>

calling controller

selectedCountries = (Object.assign({}, selectedCountries));

            $.ajax({
                url: "AddCountries",
                type: "POST",
                data: { "selectedCountries": selectedCountries },
                traditional: true,
                success: function (result) {
                    console.log(result);
                },
                error: function (err) {
                    console.log("Something went wrong.." + err.status);
                }
            });

    });

Asp.net MVC Controller

  [HttpPost]
 public IActionResult AddCountries(List<ProfileEntity> selectedCountries){
//my c# code comes here but selectedCountries Parameter is always null

}

Profile Entity

public class ProfileEntity
    {
        [Required]
        public string Id { get; set; }

        [Required]
        public string countryName { get; set; }
    }

Answer 1

Assuming you have an array like this in selectedCountries variable,

[{
    "id": 1,
    "countryName": "India"
}, {
    "id": 1,
    "countryName": "USA"
}, {
    "id": 1,
    "countryName": "China"
}, {
    "id": 1,
    "countryName": "Japan"
}]

When you execute this line

selectedCountries = (Object.assign({}, selectedCountries));

it will reset the value of selectedCountries to to an object (not an array)

{
    "0": {
        "id": 1,
        "countryName": "India"
    },
    "1": {
        "id": 1,
        "countryName": "USA"
    },
    "2": {
        "id": 1,
        "countryName": "China"
    },
    "3": {
        "id": 1,
        "countryName": "Japan"
    }
}

That does not match with your action method parameter type. For model binding to work, the structure of the data you are sending should match the structure of the parameter type, along with the property names. That means if your server action method expects an array, you should send an array, not an object

You should send the array. Use JSON.stringify to create the json string of the array and send that while specifying your content-type as application/json

This should work. In the below code snippet, i also changed the way you were populating the array using the $.map method (Your current implementation will absolutely work, but i like less code)

var id = 1;

var spans = $("div.countriesSelection").find('span');
var selectedCountries = $.map(spans, function (item)
{
    return { id: id, countryName: $(item).text() };
});

$.ajax({
    url: "AddCountries",
    type: "POST",
    data: JSON.stringify(selectedCountries),
    contentType: "application/json",
    success: function (result)
    {
        console.log('result', result);
    },
    error: function (err)
    {
        console.log("Something went wrong.." + JSON.stringify(err));
    }
});