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

How to pass multiple values to controller?

本文关键字:控制器 值传      更新时间:2023-09-26

我有一个模型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;
        }
    }

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

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