时间戳

首页 > 解决方案 > 在 ASP.NET MVC 中动态添加文本框

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

问题描述

我在一个 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

等等..

但我不知道怎么做。有谁知道？

标签： c#asp.net-mvc

解决方案

您可以添加一个字符串列表，像这样

public String[] MyTextFields

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

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

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

推荐阅读