How to pass multiple values to controller?

Question

I have a model Vehicle, my model has a list of Options.

In my Create view, how can i add multiple Options to be passed to the controller?
The amount of options can variate from 0 to 10+..

My idea is to place one text field with a button next to it, when the button is clicked, the value of the text field is passed to a label with Javascript.

But i'm not sure how to get the values of my label passed to my controller.

My View:

@using (Html.BeginForm("Edit", "VehicleModels", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>VehicleModels</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)


        <div>
            @Html.LabelFor(model => model.Options)

            <ul>
                @foreach (var optie in Model.Options)
                {
                    <li>@optie.Naam @Html.ActionLink("X", "DeleteOption", new { opId = optie.OptieId, vehId = optie.VehicleModelsID })</li>
                }
            </ul>


                <input type="text" id="optienaam" /> <input type="button" value="Toevoegen" class="btn btn-default" onclick="optiestoevoegen()" />
                 <br />
                <label id="optielabel"></label>
        </div>



        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

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

Javascript:

function optiestoevoegen() {

    var elm;

    elm = document.createElement("p");
    elm.innerHTML = document.getElementById('optienaam').value;
    document.getElementById('optielabel').appendChild(elm);
}

this generates a nice list of all the options being added, but not really a straight forward way to pass them to the controller.

EDIT

Vehicle model:

public class VehicleModels
    {
        [Key]
        public virtual int Id { get; set; }

        [Required]
        [StringLength(30)]
        [Display(Name ="Naam")]
        public virtual string Naam { get; set; }

        [Required]
        [Display(Name = "Merk")]
        public virtual Merken Merk { get; set; }

        [Required]
        [Display(Name = "Type brandstof")]
        public virtual Brandstoffen Brandstof { get; set; }

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

        [Display(Name = "Type van merk")]
        public virtual string TypeVanMerk { get; set; }

        [Display(Name = "Type van transmissie")]
        public virtual Transmissies TypeVanTransmissie { get; set; }

        [Required]
        [Range(0,500000)]
        [Display(Name = "Kilometerstand")]
        public virtual int Kilometerstand { get; set; }

        [Range(1800,2100)]
        [Display(Name = "Datum van eerste inschrijving")]
        public virtual int Bouwjaar { get; set; }

        [Range(1,8)]
        [Display(Name = "Aantal deuren")]
        public virtual int AantalDeuren { get; set; }

        [Display(Name = "Prijs")]
        public virtual int Prijs { get; set; }

        [Display(Name = "Optie's")]
        public virtual ICollection<Optie> Options { get; set; }

        public virtual ICollection<Foto> Fotos { get; set; }

        public VehicleModels()
        {

        }

    }

Option model:

public class Optie
    {
        [Key]
        public virtual int OptieId { get; set; }
        public virtual int VehicleModelsID { get; set; }
        public virtual VehicleModels Vehicle { get; set; }
        public virtual string Naam{ get; set; }


        public Optie()
        {

        }

        public Optie(string naam)
        {
            Naam = naam;
        }
    }

@Vahx, any input element within the Form that has a `name` attribute set will post back to the form action. So you need to add inputs in your javascript function, even if they are hidden. If you follow the correct naming convention (by looking at what razor would generate in a loop) then you can access them from the model, or from a more general form collection. — Crowcoder, May 14 '16 at 15:44
@Crowcoder could you make a small scetch up of that in an answer? — Vahx, May 14 '16 at 15:47
@Vahx, can you show your model implementation? Is it just `id` and `Options` (strings) ? — Crowcoder, May 14 '16 at 15:51
@Crowcoder Edited the post, there are more attributes but i removed them from the view to post here to avoid clutter — Vahx, May 14 '16 at 15:55
@Vahx, I think you need to simplify your viewmodel. It would be pretty complex to get your list of `Optie` which in turn has `VehicleModels`. Make a view model with just what you need for your form then do your mapping or logic server-side. — Crowcoder, May 14 '16 at 16:13

score 0 · Answer 1 · answered May 14 '16 at 17:22

Add a hidden input in your view for label

<label id="optielabel"></label>
<input type="hidden" id="optielabelVal" name="optielabel" />

And in your javascript append new label to the existing value of that hidden input when user hit the button.

function optiestoevoegen() {

    var elm;

    elm = document.createElement("p");
    elm.innerHTML = document.getElementById('optienaam').value;
    document.getElementById('optielabel').appendChild(elm);
    // for hidden input
    var optieVal = document.getElementById('optielabelVal').value;
    optieVal = optieVal + ';' + document.getElementById('optienaam').value;
    document.getElementById('optielabelVal').value = optieVal;        
}

How to pass multiple values to controller?

1 Answers1