Model state 无效，当列表超过一项时

Question

I'm using the following code to get the information from ui. I use select2 as Combobox to let user select more than one elements.

var saveObj = {
        
        DiscountRate: $('#discountRate').val(),
        State: $('#isActiveSelect2List').val() == 1 ? true : false,
        AuthorList: $('#authorSelect2List').val(),
        InterpreterList: $('#interpreterSelect2List').val(),
        TagList: $('#tagSelect2List').val()
    };

I save this data as object, then i post the data with ajax. But if i select more than one elements for select2's. I get an error in my controller;

Error

But if i select only one element for select2 its okay, Model state is true. I don't know where i am wrong. Any advice?

Here's my data model;

    public List<int> AuthorList { get; set; }
    public List<int> InterpreterList { get; set; }
    public List<int> TagList { get; set; }

Answer 1

You are passing comma-separated values of select2 lists when posting data with ajax. val() is returning values in the comma-separated string and you need to convert this string into an array before posting data like this:

var authorSelectedList = [];
var interpreterSelectedList= [];
var tagSelectedList= [];
if ($("#authorSelect2List").select2('data').length){
  $.each($("#authorSelect2List").select2('data'), function(key, item){
    authorSelectedList.push(item.text);
  });
}
if ($("#interpreterSelect2List").select2('data').length){
  $.each($("#interpreterSelect2List").select2('data'), function(key, item){
    interpreterSelectedList.push(item.text);
  });
}
if ($("#tagSelect2List").select2('data').length){
  $.each($("#tagSelect2List").select2('data'), function(key, item){
    tagSelectedList.push(item.text);
  });
}
var saveObj = {
    
    DiscountRate: $('#discountRate').val(),
    State: $('#isActiveSelect2List').val() == 1 ? true : false,
    AuthorList: authorSelectedList,
    InterpreterList: interpreterSelectedList,
    TagList: tagSelectedList
};