javascript - Asp.Net core Vue C# + JS动态添加输入文本框

Question

我正在尝试添加一个功能，以在我的 EventMembers 输入中添加任意数量的用户请求的文本框。

我可以使用这些功能，但没有将额外的文本框输入添加到我的 EventMembers 列表中。我知道我是否只是通过做在我的 View 上创建多个文本框

EventMembers[0]
EventMembers[1]
EventMembers[2]

等等。效果很好。我将如何使用动态文本框的 javascript 函数完成同样的事情？下面的代码仅包含必需的信息。

型号:

public class Event
    {
        public List<string> EventMembers { get; set; }
    }

查看:

<div class="form-group" id="firstdiv">
                <label asp-for="EventMembers" class="control-label">Event Members</label>
                <input asp-for="EventMembers" class="form-control" />
                    <input type="button" class="btn btn-primary" value="Add Member" 
                           onclick="DynamicText()" />
                <span asp-validation-for="EventMembers" class="text-danger"></span>
                <span style="color:red;">@TempData["MustEnterinput"]</span>
            </div>

Javascript:

function DynamicText() {
    var division = document.createElement('DIV');
    division.innerHTML = DynamicTextBox("");
    document.getElementById("firstdiv").appendChild(division);
}
function DynamicTextBox(value) {
    return '<div><input asp-for="EventMembers" class="form-control" /><input type="button" class="btn btn-primary" onclick="ReTextBox(this)" value="Remove" /></div>';
}
function ReTextBox(div) {
    document.getElementById("firstdiv").removeChild(div.parentNode.parentNode);
}

Answer 1

我为我的设置更改了一些名称。

模型；

public class EventMemberList
{
    public List<string> EventMembers { get; set; }
}

Controller ，获取操作；

public IActionResult Index()
{
    EventMemberList model = new EventMemberList
    {
        EventMembers = new List<string>()
    };
    return View(model);
}

Controller ，后操作；

[HttpPost]
public IActionResult Index(EventMemberList model)
{
   //Do Something...
   return View(model);
}

最后查看；

@using (Html.BeginForm())
{
    <div class="form-group" id="firstdiv">
        <label class="control-label">Event Members</label>
        <div id="inputList"></div>
        <br />
        <a class="btn btn-primary" onclick="AddInput()">Add Member</a>
        <br />
        <button type="submit">Submit</button>
    </div>
}


<script type="text/javascript">
    function AddInput() {
        var inputList = document.getElementById("inputList");
        var inputCount = inputList.getElementsByTagName('input').length;
        var newInput = ` 
    <input class="form-control" id="EventMembers_${inputCount}" name="EventMembers[${inputCount}]" type="text" value=""> 
    <br/> 
`;
        var element = document.createElement("div");
        element.innerHTML = newInput ;
        inputList.appendChild(element);
    }
</script>

为了追加输入，我创建了一个 div。您需要添加像 EventMembers_${inputCount} 这样的 id 和像 EventMembers[${inputCount}] 这样的名字。通过这样做，您将能够向 Controller 发送数据。

如果你想在模型中进行一些验证，你需要向 inputList 添加一些代码;

<div id="inputList">
    @for (int i = 0; i < Model.EventMembers.Count; i++)
    {
        @Html.EditorFor(_ => Model.EventMembers[i], new { htmlAttributes = new { @class = "form-control" } })
        <br />
    }
</div>

通过这样做，当您提交列表并且模型无效时，您将能够发送无效输入以供查看。