MVC how to update related navigation property

Question

EDIT reformed my question based on @Stephen Muecke answer ..

it took me months trying to resolve such problem, but failed to.

my entities are:

public partial class Book
{
    public int bookID { get; set; }
    public string name { get; set; }
    public string chapter { get; set; }
    public virtual ICollection<Root> roots { get; set; }
}

.

public class Root
{
    public int rootID { get; set; }
    public string rooting { get; set; }
    public virtual ICollection<Book> Book{ get; set; }
}

BooksController:

public class BooksController : Controller
{
    private Context db = new Context();

    // GET: Books
    public ActionResult Index()
    {
        var boo = db.books.Include(x => x.roots).ToList();
        List<RootyVM> model = new List<RootyVM>();
        return View(boo);
    }
....
....
// GET: Books/Create
    public ActionResult Create()
    {
        return View();
    }
    // POST: Books/Create
 [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(IEnumerable<RootyVM> rootings, Book book)
    {
        if (ModelState.IsValid)
        {
            db.books.Add(book);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(book);
    }

my view model RootyVM:

public class RootyVM
{
    public int? rootID { get; set; }

    [Required(ErrorMessage = "Please enter the name of the root!!")]
    public string rooting { get; set; }

}

and my partial view _Rooting.cshtml

@model project.ViewModels.RootyVM
<div class="rooting">
@using (Html.BeginCollectionItem("rooting"))
{
    @Html.HiddenFor(m => m.rootID, new { @class = "rootID" })
    @Html.LabelFor(m => m.rooting)
    @Html.TextBoxFor(m => m.rooting)

    <button type="button" class="delete">Delete</button>
}
</div>

and my Razor view (Create.cshtml) as follows:

@model project.Models.Book

@{
ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Book</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <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.chapter, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.chapter, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.chapter, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @using (Html.BeginForm())
        {
            <div id="rootings">
                foreach(var rooting in Model)
                {
                @Html.Partial("_Rooting", rooting)
                }
            </div>
            <button id="add" type="button">Add</button>
            <input type="submit" value="Save" />
        }
    </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>


<div>
@Html.ActionLink("Back to List", "Index")
</div>

<script type="text/javascript">
var url = '@Url.Action("Rooting")';
var form = $('form');
var rootings = $('#rootings');
$('#add').click(function() {
    $.get(url, function(response) {
        rootings.append(response);
        // Reparse the validator for client side validation
        form.data('validator', null);
        $.validator.unobtrusive.parse(form);
    });
});

$('.delete').click(function() {
    var container = $(this).closest('.rooting');
    var id = container.find('.id').val();
    if (id) {
        // make ajax post to delete item
        $.post(yourDeleteUrl, { id: id }, function(result) {
            container.remove();
        }.fail(function (result) {
            // Oops, something went wrong (display error message?)
        }
    } else {
        // It never existed, so just remove the container
        container.remove();
    }
    });
</script>
}

HOWEVER, there is a mistake where i cannot find. Will appreciate your patience and help

ORIGINAL MAIN REQUESTS

however, I'm struggling in Create and Edit method. What I need to do is that:

• Create a new book record and assign a root or more in the same view.
• using dropdownlist is preferable.
• if root doesn't exist, i want to add/create it on the fly, I mean immediately in the same create view.
• I would appreciate if the Create view for relationship property i.e. Root is based on java where token are used (Select2).

I hope I made it clear for you to help me.