ASP MVC - Get data from partial view on Create

Question

Im using ASP.Net MVC 5. I have two simple classes; Student and Course, like this;

public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class Course
{
    public int Id { get; set; }
    public string Name { get; set; }
    public virtual ICollection<Student> Students { get; set; }
}

I want to create a new Course with optional many Students. The student(s) form/view will be rendered as a partail view (insde the Course-view).

Right now I have a Create-View that is strongly type to Course. This view only have 1 textbox - name of the Course.

I render the partial view that is strongly typed to Student. To simplify i just want to add 1 student to the List.

I would like pass the student data to the course object and then "move on" to the controller.

Can anyone help me with this approach of passing data from a partitial view, or give me a hint of how its done in MVC? ;)

Answer 1

Ok found out what I was doing wrong. First off I donwloaded the Html helper, BeginCollectionItem. Real nice if you want to dynamically add and remove fields/textboxes that will be added to your model.

First off send an empty object to to your view to work with (from your controller).

I just passed in a new Course object. Ctor of Course creates a new List with 1 student object.

Then i used RenderPartial to display a partailview + the student item.

@foreach(var student in Model.Students)
{
  RenderPartial("_Student", student);
}

This view looks like this:

@model Project.Data.Entities.Student

<div class="AddStudent form-group">
    @using (Html.BeginCollectionItem("students"))
    {

    @Html.Label("Name:", new { @class = "control-label col-md-2" })
    <div class="col-md-8">
        @Html.TextBoxFor(x => x.Name)

        <button type="button" class="deletButton btn btn-default">Remove</button>
        @Html.ValidationMessageFor(model => model.Name)
    </div>
    }
</div>

I render a button that is hooked up to delete (jquery) the student field.

When i want to add more students to my Course i just use an ajax call to add more partial "_Student" views.

<div>
            @Ajax.ActionLink("Add more...", "NewStudentRow", "Course", new AjaxOptions()
            {
                InsertionMode = InsertionMode.InsertAfter,
                UpdateTargetId = "students"
            }, new { @class = "btn btn-default" })
        </div>

The NewStudentRow method in my controller looks like this:

public PartialViewResult NewStudentRow ()
{
    return PartialView("_Student", new Student());
}

Pretty simple if you just use the http://www.nuget.org/packages/BeginCollectionItem/