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/

Answer 2

You can solve this by having more than one partial view..

Pseudo-code:

CourseView:

<TextBox>@Model.Name</TextBox>
@foreach(var student in Model.Students)
{
  RenderPartial("ShowStudent");
}
RenderPartial("AddStudent");

The AddStudentView conains all fields you need to provide to save a student to database. In the action you take the input parameters, save the new student and redirect ( something like return RedirectToAction("Course", new { id = student.CourseId }) ) to the Course view. The course view will then be loaded including the new student.

You could also do all of this with ajax to prevent postback, but as you haven't specified any desire to prevent postback I think this would be a good solution.