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

Question

我试图添加一个 function 来添加任意数量的用户请求的文本框我的 EventMembers 输入。

我的功能正常工作，但没有将额外的文本框输入添加到我的 EventMembers 列表中。 我知道我是否只是在视图上创建多个文本框

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

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

Model：

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

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

Model；

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>

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

如果要在 model 中进行一些验证，则需要在 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>

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