如何根据下拉框中选择的项目ID将文本框（IN LOOP）的值从视图传递到控制器？

Question

我想将多个文本框的值从视图传递到控制器，关于在下拉框中选择的项目ID。

注意： - 生成多个文本框，因为用户可以从下拉列表中选择多个项目。

这是我的控制器的一部分： -

foreach(var data in propertyViewModel.PropertyInvestors)
    {
    FounderInvestment founderInvestment = new FounderInvestment
    {
        Id = propertyViewModel.FounderInvestmentViewModel.Id ?? 0,
        InstallmentPeriod = propertyViewModel.FounderInvestmentViewModel.InstallmentPeriod,
        InvestorId = Convert.ToInt32(data),
        PropertyId = property.Id,
        Investment = propertyViewModel.FounderInvestmentViewModel.Investment
    };
    _founderInvestmentQueryProcessor.Create(founderInvestment);
}

这是我的下拉： -

<div class="form-group">
  @Html.LabelFor(model => model.PropertyInvestors, htmlAttributes: new { @class = "control-label col-md-2" })
  <div class="col-md-10">
    @Html.DropDownListFor(model => model.PropertyInvestors, (IEnumerable<SelectListItem>)@ViewBag.Investors, "Select", htmlAttributes: new {@id="dropdown", @class = "form-control",@multiple="multiple" })
    @Html.ValidationMessageFor(model => model.PropertyInvestors, "", new { @class = "text-danger" })
  </div>
</div>

这些是文本框： -

<div id="showInvestmentForm" style="display:none">                        
    <div class="form-group">
    @Html.LabelFor(model => model.FounderInvestmentViewModel.Investment, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
        @Html.EditorFor(model => model.FounderInvestmentViewModel.Investment, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.FounderInvestmentViewModel.Investment, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.FounderInvestmentViewModel.InstallmentPeriod, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.FounderInvestmentViewModel.InstallmentPeriod, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.FounderInvestmentViewModel.Investment, "", new { @class = "text-danger" })
        </div>
    </div>                       
</div>

这是根据所选下拉项目的数量生成文本框的JS： -

<script type="text/javascript">
    $(function () {
        $("#dropdown").change(function () {
            var value = $(this).val();
            var form1 = $('#showInvestmentForm').html();
            if (value.length == 1) {
                $('#showInvestmentForm').show();
            }
            else if (value.length > 1) {
                for (var i = value.length; i <= value.length ; i++) {
                    $(form1).appendTo('#field1');
                }
            }
            else {
                $('#showInvestmentForm').hide();
            }
        });
    });
</script>

问题：----我遇到的问题是第一个'form-group'文本框的值正在为所有文本框重复。第一个条目正在重复并传递给控制器​​。如何解决这个问题？

This is how it gets saved in Founder Investment Database Table because of repeat

Answer 1

为了回发这些文本框的值，您需要建立索引。为此，首先为这两个输入文本框创建一个'Dummy'代码，如下所示：--->

<div id="showInvestmentForm" style="display:none">                        
        <div class="form-group">
            <label for="FounderInvestments.Investment" class="control-label col-md-2">Investment</label>
            <div class="col-md-10">
                <input type="number" name="FounderInvestments[#].Investment" value="" class="form-control" />
                <input type="hidden" name="FounderInvestments[#].Index" value="" />                    
            </div>
        </div>
        <div class="form-group">
            <label for="FounderInvestments.InstallmentPeriod" class="control-label col-md-2">Installment Period</label>
            <div class="col-md-10">
                <input type="number" name="FounderInvestments[#].InstallmentPeriod" value="" class="form-control" />                        
            </div>
        </div>                       
    </div>

隐藏的输入也是必要的。现在JS代码看起来像这样： -

$(function () {
    $('#dropdown').change(function () {
        var value = $('#dropdown').val();
        alert(value.length);
        var index = (new Date()).getTime();
        var clone = $('#showInvestmentForm').clone();

        clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
        clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
        $('#field1').append(clone.html());
    });

DateTime用于生成随机索引号。 [#]被随机生成的DateTime值替换。

Answer 2

不幸的是我还没有发表评论，所以我会将其作为答案发布（实际上可能是这样）。

您描述的问题出现在下拉选择的“value.length”大于1（因此正在创建多个文本框）时。

从您的代码中取出此代码段：

else if (value.length > 1) {
   for (var i = value.length; i <= value.length ; i++) {
      $(form1).appendTo('#field1');
   }
}

..我们可以看到有关DOM操作的不良行为 - 实际上，创建具有相同ID的多个元素。

我猜是因为您可能正在使用ID收听这些文本框更改，您将体验到您所描述的问题。

一个可能有用的小片段：

else if (value.length > 1) {
   for (var i = value.length; i <= value.length ; i++) {
      var newTextBox = document.createElement('div');
      newTextBox.innerHTML = form1.innerHTML;
      newTextBox.setAttribute('id', 'textbox'+i);
      $(newTextBox).appendTo('#field1');
   }
}

（不确定这实际上是否有效，因为我没有足够的信息，但这个想法应该解决问题）