Not getting multiple select list json array in object parameter in api controller Asp.net Core 2.1

Question

i am posting data with angular service to Webapi, the action is hitting and i am receiving data all data except DepartmentName json array. From frontend i am passing json array for DepartmentName and other data as you can see in attached image but i am not getting DepartmentName json array in action. i am also passing one file that,s also i am getting in action but problem only for DepartmentName json array. i am trying to solve this issue from last 2 days but i cant solve it. i hope that you understand my question.For more explanation i have attached an image of form data and code also.

Model

public class UserViewModel
{
    public string fullName { get; set; }
    [Column(TypeName = "nvarchar(100)")]
    public string email { get; set; }
    [Column(TypeName = "nvarchar(20)")]
    public string phone { get; set; }
    [Column(TypeName = "nvarchar(15)")]
    public string gender { get; set; }
    [Column(TypeName = "nvarchar(20)")]
    public string dateOfBirth { get; set; }
    [Column(TypeName = "nvarchar(200)")]
    public string address { get; set; }
    [Column(TypeName = "nvarchar(max)")]
    public string password { get; set; }
    [Column(TypeName = "nvarchar(max)")]
    public string userImageName { get; set; }
    public List<Department> DepartmentName { get; set; }

}



public class Department
{
    [Key]
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
    public int DepartmentID { get; set; }
    [Column(TypeName = "nvarchar(100)")]
    public string DepartmentName { get; set; }
    public virtual ICollection<UserDepartment> UserDepartments { get; set; }
}

Controller

    [HttpPost, Route("[action]")]
    public async Task<IActionResult> AddNewUser([FromForm] UserViewModel userViewModel )
    {
       //other coding here  
       return Ok()
    }

Angular

<mat-form-field class="example-full-width">
    <mat-select placeholder="Select department(s)" formControlName="DepartmentName" multiple>
        <mat-option *ngFor="let department of departmentList" [value]="department">{{department.departmentName}}</mat-option>
    </mat-select>
</mat-form-field>

Form-Data From Network

Answer 1

the action is hitting and i am receiving data all data except DepartmentName json array

Based on your model class, to bind form values correctly to the model, you can try following approaches:

Approach 1: on angular client side, generate form data for List<Department> DepartmentName property, like below.

Approach 2: implement a custom model binder, to get DepartmentName json array that you passed and deserialize it to List<Department> .

[ModelBinder(BinderType = typeof(DepartmentNameModelBinder))]
public List<Department> DepartmentName { get; set; }

DepartmentNameModelBinder class

public class DepartmentNameModelBinder : IModelBinder
{
    public Task BindModelAsync(ModelBindingContext bindingContext)
    {
        if (bindingContext == null)
        {
            throw new ArgumentNullException(nameof(bindingContext));
        }

        // ...
        // implement it based on your actual requirement
        // code logic here
        // ...

        var options = new JsonSerializerOptions
        {
            PropertyNameCaseInsensitive = true
        };

        var model = JsonSerializer.Deserialize<List<Department>>(bindingContext.ValueProvider.GetValue("DepartmentName").FirstOrDefault(), options);

        bindingContext.Result = ModelBindingResult.Success(model);
        return Task.CompletedTask;
    }
}

Test Result