在ASP.NET MVC中动态添加文本框

Question

我正在一个ASP.NET MVC项目上工作，我需要一些帮助。当用户单击“添加文本框”时，我需要能够创建x个文本框。当用户进入页面时，将加载一个视图模型。此视图模型需要处理用户在页面上时创建的x个文本框，以便在发布页面时这些文本框是模型的一部分。该模型应如下所示。

public class PlanViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public List<EventViewModel> EventList { get; set; } // this should be the list of textboxes that the user "create" by clicking add new
}

public class EventViewModel
{
    public string Name { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public string Description { get; set; }
}

我有点不知道如何执行此操作，因此不胜感激。

更新

我已经添加了此JavaScript，可在客户端添加文本框。

<script type="text/javascript">
function GetDynamicTextBox(value) {
    return('<input type="text" name="events[0].Key" value="box1" /><input type="text" name="events[0].Value.StartDate" value="box2"/><button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>');
}
function AddTextBox() {
    var div = document.createElement('DIV');
    div.innerHTML = GetDynamicTextBox("");
    document.getElementById("divcontent").appendChild(div);
}
function RemoveTextBox(div) {
    document.getElementById("divcontent").removeChild(div.parentNode);
}
</script>

            <div id="divcontent" class="form-group">
            <button type="button" class="btn btn-sm btn-primary" onclick="AddTextBox()"><i class="fa fa-angle-right"></i> Add</button>
        </div>

我想我只需要为这样的文本框添加唯一的ID ...

events[0].Key
events[1].Key
events[2].Key

依此类推..

但是我不知道如何。有人知道吗？

Answer 1

您可以添加String的列表，像这样

public String[] MyTextFields

然后使用Javascript创建HTML，如下所示：

<input name="myTextFields[0]"></input>

<input name="myTextFields[1]"></input>

Answer 2

在剃刀视图中：

@for (var i = 0; i < Model.EventList.Count; i++)
{
    @Html.EditorFor(x => Model.EventList[i].Name)
}

Answer 3

如果可以的话，可以使用JS依赖，而不是我建议使用light Knockout库。这将帮助您创建/编辑/删除输入。 Check example in JS fiddle。

使用HTML调整视图。标记data-bind使您可以绑定到数据和事件

<button data-bind="click: addInput">Add</button>
<div data-bind="foreach: inputs">
  <input data-bind="value: text"/><br />
</div>
<button data-bind="click: proceed">Proceed</button>

然后是小型JS脚本，用于处理单击时添加新的输入和处理数据。

function InputData(text) {
  let self = this;
  self.text = text;
}
function InputViewModel() {
  let self = this;
  // Your array of HTML inputs
  self.inputs = ko.observableArray([new InputData("Default value")]);
  self.output = ko.observable();
  self.addInput = function() {
    // Dynamically adds new input on user click button "Add"
    self.inputs.push(new InputData(""));
  };
  self.proceed = function() {
    // Process all input with their values
    for (var i = 0; i < self.inputs().length; i++) {
        console.log(self.inputs()[i].text);
    }

  }
}
// Bind our JS to HTML view
ko.applyBindings(new InputViewModel());