Creat dynamic list of children at time of parent creation in asp.net MVC3 EF4.1

Question

My objective is to allow the user to add goals(children) to a review(parent) while creating and/or editing a review. I have this mostly working so I'm looking for answers to two questions A. How can I do this better, cleaner, and B. When I edit the parent why won't it save newly added children. My guess is the answer to A will make B obsolete. Thanks for the help.

Here are some code highlights and my working scratch solution you can download below.

    public ActionResult Create()
    {
        var review = new Review();
        review.Goals.Add(new Goal());
        return View(review);
    }

    //
    // GET: /Reviews/Edit/5

    public ActionResult Edit(int id)
    {
        return View(reviewRepository.AllIncluding(review => review.Goals).Single(review => review.ReviewID == id));
    }

This is pretty basic, nothing fancy here pretty basic.

here is my createoredit form with the jquery for an ajax call

<div class="editor-label">
@Html.LabelFor(model => model.ReviewName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ReviewName)
@Html.ValidationMessageFor(model => model.ReviewName)
<div id="goals">
    @Html.EditorFor(model => model.Goals)
</div>
@Html.ActionLink("Add another...", "NewGoal", null, new { id = "addItem" })
<script type="text/javascript">

$("#addItem").click(function () {
    $.ajax({
        url: this.href,
        data: "index=" + getLastIndex() + "&parentID=" + getParentID(),
        cache: false,
        success: function (html) {
            alert(html);
            $("#goals").append(html);
        }
    });
    return false;
});

function getParentID() {
    var val = $('#ReviewID').val();
    if (val == null)
        return 0;
    else 
        return val;

}

function getLastIndex() {
    return $('input[name=Goals.Index]:last').val();
}
</script>

The ajax request receives a partial view

public PartialViewResult NewGoal(int? index, int? parentID)
{
    ViewBag.Index = index + 1;
    ViewBag.ParentID = parentID;
    return PartialView("../Shared/NewGoal", new Goal());
}

and here is what the partial looks like. In my project you'll see I have the beginnings of an html helper build up this up with the correct index, its got the model names hard coded at the moment as this is just myscratch project and I'm convinced there is a better way to do this.

        <input name="Goals.Index" value="0" type="hidden">
    <input id="Goals_0__GoalID" name="Goals[0].GoalID" value="0" type="hidden" data-val-required="The GoalID field is required." data-val-number="The field GoalID must be a number." data-val="true">
    <input id="Goals_0__ReviewID" name="Goals[0].ReviewID" value="0" type="hidden" data-val-required="The ReviewID field is required." data-val-number="The field ReviewID must be a number." data-val="true">

    <div class="editor-label">
        <label for="Goals_0__GoalName">GoalName</label>
    </div>
    <div class="editor-field">
        <input id="Goals_0__GoalName" class="text-box single-line" name="Goals[0].GoalName" value="" type="text">
        <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Goals[0].GoalName"></span>
    </div>

Visual Studio Solution http://dl.dropbox.com/u/29534952/RelationScratch.zip

Answer 1

I think that you could use Steven Sanderson solution that you can find here: http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

his helper will help you add new inputs for each Goals that you want to add in your form. I use it here and there in my web applications without any problems. I can add/remove items in creation or modification mode.