0

我有一个页面，里面有一个表格。如果他们愿意，我想让用户能够添加自定义输入。我还希望能够快速更改这些自定义输入的数量。

例如：

    Name: ____________________
    Phone Number: ____________
    email:  __________________
[ ] Some Option
[ ] Another Option
[ ] custom input 1: __________
[ ] custom input 2: __________
[ ] custom input 3: __________
 .
 .
 .
[ ] custom input N: __________

前面的复选框将该输入添加到提交的表单数据中。

这是我尝试过的

<div>
    @for(int iterator=0; iterator<customInputs.Length; iterator++){
        <label class="list-group-item">
            <span class="input-group input-group-sm mb-3">
                <input class="form-check-input me-1" type="checkbox" id="@(customInputs[iterator] + "Checkbox")" name="@(customInputs[iterator] + "Checkbox")" value="InputCustom@(customInputs[iterator] + "Checkbox")" aria-label="Input Custom @(customInputs[iterator])Check" @onchange="eventArgs => { gatherData(true, customInputs[iterator]); }" />
                <input class="form-control" type="text" id="@(customInputs[iterator] + "Text")" name="@(customInputs[iterator] + "Text")" placeholder="Custom Input @(iterator+1)" aria-label="@(customInputs[iterator] + "Text")" @bind="customInputs[iterator]" />
            </span>
        </label>
    }
</div>

@code {
    IList<String> checkedBoxes = new List<String>();

    String[] customInputs = new String[NumericConstants.MAX_CUSTOM_INPUTS];

    protected override void OnInitialized()
    {
        for(int i=0; i<NumericConstants.MAX_CUSTOM_INPUTS; i++){
            customInput[i] = ("customInput" + i.ToString());
        }
    }

    private void gatherData(bool subject, String selection)
    {
        checkedBoxes.Add(selection);
    }
}

当我运行它时，会发生以下情况：

  1. 即使我没有设置“值”，输入字段也已经填写了“customInputN”。
  2. 当我更改其中一个输入时，它总是恢复为“customInputN”
  3. 当我离开那个input type="text"领域时，我得到了例外System.IndexOutOfRangeException: Index was outside the bounds of the array.
  4. 我在 HTML 中的循环处设置了一个断点for，它似乎遍历了两次循环。

我正在尝试的甚至可能吗？

编辑：

根据要求，这是 ifMAX_CUSTOM_INPUTS为 3 的 HTML 输出：

<span class="input-group input-group-sm mb-3">
    <input class="form-check-input me-1" type="checkbox" id="customInputs0Checkbox" name="customInputs0Checkbox" value="InputCustomCustomcustomInputs0Checkbox" aria-label="Input Custom Custom customInputs0Check">
    <input class="form-control" type="text" id="customInputs0Text" name="customInputs0Text" placeholder="Custom Input 1" aria-label="customInputs0Text">
</span>

<span class="input-group input-group-sm mb-3">
    <input class="form-check-input me-1" type="checkbox" id="customInputs1Checkbox" name="customInputs1Checkbox" value="InputCustomCustomcustomInputs1Checkbox" aria-label="Input Custom Custom customInputs1Check">
    <input class="form-control" type="text" id="customInputs1Text" name="customInputs1Text" placeholder="Custom Input 2" aria-label="customInputs1Text">
</span>

<span class="input-group input-group-sm mb-3">
    <input class="form-check-input me-1" type="checkbox" id="customInputs2Checkbox" name="customInputs2Checkbox" value="InputCustomCustomcustomInputs2Checkbox" aria-label="Input Custom Custom customInputs2Check">
    <input class="form-control" type="text" id="customInputs2Text" name="customInputs2Text" placeholder="Custom Input 3" aria-label="customInputs2Text">
</span>
4

0 回答 0