如何将多个值传递给控制器​​？

Question

我有一个模型Vehicle，我的模型有一个Options列表。

在我的“创建”视图中，如何添加要传递给控制器​​的多个选项？ 期权金额可以从0变化到10 + ..

我的想法是在其旁边放置一个带有按钮的文本字段，当单击该按钮时，文本字段的值将传递给带有Javascript的标签。

但我不知道如何将我的标签值传递给我的控制器。

我的观点：

@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);
}

这会生成一个很好的列表，列出所有正在添加的选项，但实际上并不是将它们传递给控制器​​的直接方式。

修改

车辆型号：

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()
        {

        }

    }

选项模型：

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

Answer 1

在视图中为标签添加隐藏输入

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

当你的用户按下按钮时，你的javascript会将新标签附加到该隐藏输入的现有值。

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