如何将多个值传递给控制器​​？ [重复]

This question already has an answer here:

这个问题在这里已有答案:

• POST a form array without successful 5 answers

POST表单数组没有成功的5个答案

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

在我的“创建”视图中,如何添加要传递给控制器​​的多个选项?选项数量可以从0到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.

我的想法是在其旁边放置一个带有按钮的文本字段,当单击该按钮时,文本字段的值将通过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;
        }
    }

1 个解决方案

#1

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.

并且在您的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;        
}