.Net MVC Add Remove & delete Child items (one to many relation) in parent view

Question

I am having some trouble with my project. I have a one to many relationship between a department and a number table. A department can have 0 or multiple numbers.

In my Department Model i've got an ICollection Numbers and i'm looking for the best way to modify the Numbers collection.

This is wat my code looks like:

Model:

    [Table("Department")]
public partial class Department
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public Department()
    {
        Numbers = new List<Number>();
    }

    public int Id { get; set; }

    [Required]
    [StringLength(255)]
    public string Name { get; set; }

    [StringLength(255)]
    public string Description { get; set; }

    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<Number> Numbers { get; set; }
}

}

Controller:

        [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit([Bind(Include = "Id,Name,Description, Numbers")] Department department)
    {
        if (ModelState.IsValid)
        {
            foreach (Number nr in department.Numbers)
            {
                db.Entry(nr).State = EntityState.Modified;
            }
            db.Entry(department).State = EntityState.Modified;

            db.SaveChanges();
            return RedirectToAction("Index");
        }
        return View(afdeling);
    }

View = EDIT page:

@model StandbyBeheer.Models.Afdeling

@{
    ViewBag.Title = "Edit";
}

<div>
    @Html.ActionLink("Terug", "Index")
</div>
<h2>Afdeling bewerken</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.EditorFor(model => model.Numbers)
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Opslaan" class="btn btn-primary" />
            </div>
        </div>
    </div>
}

And i've got an EditorTemplate like this:

    @model StandbyBeheer.Models.Number
<div class="form-group">
    @Html.HiddenFor(model => model.Id)
    @Html.TextBoxFor(model => model.PhoneNumber, new { @class = "form-control text-box single-line" })
</div>

I can see the numbers in the edit page of my department, and change them but when i submit the form, i get the error: "InvalidOperationException was unhandled by user code"

How can i solve this problem AND what is the best way to add / edit / delete Numbers in my Collection? My idea was to create text fields with AJAX, but i am still having problems to add the text field values to my collection. I hope someone can help me! Thanks in advance!