Visual Studio Code – POST and GET values from 3 Tables linked through many to many relationship with Code First

Html form in Visual Studio Code with multi selectable checkboxes :

<form name="CarServ" id="myForm">
            <div>
                <label>CarModel:</label>
                <input type="text" id="model" size="65" name="CarModel" placeholder="Enter Car Model" required>
            </div>

            <div class="check">
    
                <label>Addons:</label>
    
                <input type="checkbox" name ="SelectedCheckboxes[]" value="10%off First service visit" id="10%off First service visit">
                <label for="10%off First service visit">10%off First service visit</label>
                <input type="checkbox" name="SelectedCheckboxes[]" value="10%off Waterwash"  id="10%off Waterwash">
                <label for="10%off Waterwash">10%off Waterwash</label>


                <input type="checkbox" name ="SelectedCheckboxes[]" value="Free AC Inspection" id="Free AC Inspection">
                <label for="Free AC Inspection">Free AC Inspection</label>


            </div>  
                    
            <button id="btn" type="submit">Submit</button>
        
    
        </form>

Three Models in dotnet core api,
CarForm.cs:

public class CarForm
    {
        public int Id { get; set; }
        [Required]
        public string CarModel { get; set; }
        [Required]
        public string SelectedCheckboxes { get; set; }
        public IList<Selection> Selections { get; set; }


    }

Addon.cs :

public class Addon
    {
        public int Id { get; set; }
        public string CheckboxName { get; set; }
        public IList<Selection> Selections { get; set; }
    }

Selection.cs :

 public class Selection
    {
        public int CarFormId { get; set; }
        public CarForm CarForms { get; set; }

        public Addon Addons { get; set; }
        public int AddonId { get; set; }

    }

CarDbContext.cs :

    public class CarDbContext : DbContext
    {
        public CarDbContext(DbContextOptions<CarDbContext> options) : base(options)
        {
        }

        public DbSet<CarForm> CarForms { get; set; }
        public DbSet<Addon> Addons { get; set; }
        public DbSet<Selection> Selections { get; set; }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<Selection>()
                .HasKey(s => new { s.CarFormId, s.AddonId });

            modelBuilder.Entity<Addon>().HasData(
                new Addon { Id = 1, CheckboxName = "10%off First service visit" },
                new Addon { Id = 2, CheckboxName = "10%off Waterwash" },
                new Addon { Id = 3, CheckboxName = "Free AC Inspection" });
        } 
    }

Created a Controller class:

namespace CarServiceFormApi.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class CarServiceFormController : ControllerBase
    {
        private readonly CarDbContext _context;

        public CarServiceFormController(CarDbContext context)
        {
            _context = context;
        }

        [HttpPost("submit-form")]
        public IActionResult SubmitForm([FromBody] CarForm carForm)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            // Save the CarForm to the database
            _context.CarForms.Add(carForm);
            _context.SaveChanges();

            // Create the selections for the CarForm
            var selections = carForm.SelectedCheckboxes.Select(id => new Selection
            {
                CarFormId = carForm.Id,
                AddonId = id
            });
            _context.Selections.AddRange(selections);
            _context.SaveChanges();

            return Ok();
        }
       
                [HttpGet("get-form-data/{id}")]
                public async Task<IActionResult> GetFormData(int id)
                {
                    // Retrieve the CarForm from the database
                    var carForm = await _context.CarForms.Include(cf => cf.Selections).ThenInclude(s => s.Addons).FirstOrDefaultAsync(cf => cf.Id == id);
                    if (carForm == null)
                    {
                        return NotFound();
                    }

                    // Return the CarForm as JSON
                    return Ok(carForm);
                }
       
    }
}

Basically What I’m trying to achieve is, My html form input details has to be posted to API and stored in the database. Then, with GET method I’m trying to retrieve the data back to the console on success. Since its a multi selectable checkbox, I’m passing an array of Selectedcheckboxes to API and trying to store it in the database.

Now when I run my html form I get a error on the console like

{"type":"https://tools.ietf.org/html/rfc7231#section-6.5.1","title":"One or more validation errors occurred.","status":400,"traceId":"00-d0f3aa9cab0ad5f1450f6bbb403a1a9c-adf3f2910efaeafb-00","errors":{"CarModel":["The CarModel field is required."],"Selections":["The Selections field is required."],"SelectedCheckboxes":["The SelectedCheckboxes field is required."]}}

It shows like the "Selections" field is required! but I haven’t declared a Selection field in "CarForm.cs". I hope the line with selection on my "CarForm.cs" is to perform the function of linking models.Couldn’t figure out where did I go wrong in the code.