ASP.NET MVC nested collection with create view

Question

I have the following model classes:

public class TripCreateVM
{
    public TripCreateVM()
    {
        Stops = new List<TripStopVM>();
    }

    [Display(Name = "Trip ID")]
    public int ID { get; set; }

    [Display(Name = "Driver")]
    public int? DriverId { get; set; }
    public SelectList DriverList { get; set; }

    [Display(Name = "Account")]
    public int? BrokerId { get; set; }
    public SelectList BrokerList { get; set; }

    [Required]
    [Display(Name = "Date")]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
    public System.DateTime DateTime { get; set; }

    [Display(Name = "Description")]
    public string Description { get; set; }

    [Display(Name = "Mileage")]
    [DisplayFormat(DataFormatString = "{0:N}")]
    public int? Mileage { get; set; }

    [Display(Name = "Freight Amount")]
    [DisplayFormat(DataFormatString = "{0:c}")]
    public decimal? FreightAmount { get; set; }

    [Display(Name = "Pay Amount")]
    [DisplayFormat(DataFormatString = "{0:c}")]
    public decimal? Amount { get; set; }

    [Display(Name = "Tolls")]
    [DisplayFormat(DataFormatString = "{0:c}")]
    public decimal? Tolls { get; set; }

    [Required]
    [Display(Name = " ")]
    public bool PaperRecd { get; set; }

    [Display(Name = "Pro #")]
    public string ProNo { get; set; }

    [Display(Name = "Load #")]
    public string LoadNo { get; set; }

    [Display(Name = "Notes")]
    public string Notes { get; set; }

    [Display(Name = "Total Hours")]
    public decimal? Hours { get; set; }

    public List<TripStopVM> Stops { get; set; }
}

public class TripStopVM
{
    public int ID { get; set; }

    [Display(Name = "Stop #")]
    public int StopNo { get; set; }

    [Display(Name = "Company Name")]
    public string CoName { get; set; }

    [Display(Name = "Address")]
    public string Address { get; set; }

    [Display(Name = "City")]
    public string City { get; set; }

    [Display(Name = "State")]
    public string State { get; set; }

    [Display(Name = "Zip Code")]
    public string Zip { get; set; }

    [Display(Name = "Phone / Contact")]
    public string Phone { get; set; }

    [Display(Name = "Appt Time")]
    public DateTime? Appt { get; set; }

    [Display(Name = "Appt Notes")]
    public string ApptNotes { get; set; }

    [Display(Name = "Ref #")]
    public string RefNo { get; set; }

    [Display(Name = "Notes")]
    public string Notes { get; set; }
}

controller GET method:

    public ActionResult Create()
    {
        TripCreateVM model = new TripCreateVM();

        model.Stops = new List<TripStopVM> { new TripStopVM() };
        model.DateTime = DateTime.Today;
        model.BrokerList = new SelectList(db.Brokers.ToList(), "BrokerId", "Name");
        model.DriverList = new SelectList(db.Drivers.Where(u => u.Active == true).ToList(), "ID", "Name");
        return View(model);
    }

and view:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    bool first = true;
    <div class="container-fluid">
        <div class="row">
            @*<div class="col-md-3">*@
            <div class="row">
                <div class="row_wrapper">


                    <div class="form-horizontal">
                        <h4>TripCreateVM</h4>
                        <hr />
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        <div class="form-group">
                            @Html.LabelFor(model => model.DriverId, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.DropDownListFor(model => model.DriverId, Model.DriverList)
                                @Html.ValidationMessageFor(model => model.DriverId, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <!-- Other model properties -->

                        <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>

                </div>
            </div>
            @*<div class="col-md-9">*@
            <div class="row">
                <div class="">
                    <div><a href="#" id="addNew" class="btn btn-success" style="margin-bottom:10px;"><span class="glyphicon glyphicon-plus"></span> Add Stops</a></div>

                    <table id="dataTable" class="table table-bordered table-condensed" style="table-layout:fixed; ">
                        <thead>
                            <tr>
                                <th>Company Name</th>
                                <th>Street</th>
                                <th>City</th>
                                <th style="width:4%">State</th>
                                <th style="width:6%">Zip</th>
                                <th>Phone #</th>
                                <th>Appt Time</th>
                                <th>Ref #</th>
                                <th>Notes</th>
                                <th style="width:5%"></th>
                            </tr>
                        </thead>
                        @foreach (var item in Model.Stops)
                        {
                            <tr>
                                @Html.HiddenFor(model => item.ID)
                                <td>
                                    @Html.TextBoxFor(model => item.CoName)
                                </td>
                                <td>
                                    @Html.EditorFor(model => item.Address)
                                </td>
                                <!-- other TripStop properties -->
                                <td>
                                    <a href="#" class="remove">Remove</a>
                                </td>
                            </tr>
                        }
                    </table>
                </div>
            </div>
        </div>

    </div>
}

so, user should fill Trip form and can add one or more child TripStop elements and I have post controller method:

    [HttpPost()]
    [ValidateAntiForgeryToken()]
    public ActionResult Create(TripCreateVM model, string ReturnUrl)
    {

but when post method is called, Stops collection is empty. How to fill it too?

Wheels73 · Accepted Answer · 2017-06-14T14:21:13.663

You need to use a for loop with a counter on the collection. This then generates a unique id for each option and property and allows it to be bound to the model.

 @for (var count= 0; count <= (Model.Stops.Count - 1); count++)
 {
    @Html.EditorFor(model => model.Stops[count].ID)
    @Html.EditorFor(model => model.Stops[count].CoName)
    @Html.EditorFor(model => model.Stops[count].Address)
 }

Hope that helps.

ASP.NET MVC nested collection with create view

1 Answers1