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

【问题标题】：How to pass multiple values to controller? [duplicate]如何将多个值传递给控制器？ [复制]
【发布时间】：2016-09-10 17:41:49
【问题描述】：

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

【问题讨论】：

你检查 ajax 帖子了吗？
也许你可以设置<input type="hidden">中的值。
@Vahx，表单中任何具有name 属性集的输入元素都将回传到表单操作。所以你需要在你的javascript函数中添加输入，即使它们是隐藏的。如果您遵循正确的命名约定（通过查看 razor 将在循环中生成的内容），那么您可以从模型或更通用的表单集合中访问它们。
@Crowcoder 你能在答案中做一个小例子吗？
@Vahx，你能展示你的模型实现吗？只是id 和Options（字符串）吗？

标签： javascript c# asp.net-mvc

【解决方案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;        
}

【讨论】：