Question

我有一个表格，其中TextBox 动态填充。用户可以灵活地添加和删除 TextBox，这是使用 JQuery 完成的。我需要在提交时将TextBox的值传递给我的控制器。

这是我的 View 。

@using (Html.BeginForm("Controller", "Admin", FormMethod.Post, new { required = "required" }))
{
    <h4>Add new Q&A</h4>
    <div id='TextBoxesGroup'>
        <div id="TextBoxDiv1">
            <input type="text" name="Question" id="Question" required placeholder="Question 1" class="form-control" /><br />
        </div>
    </div>
            <input type="button" name="Add" id="Add" value="Add" class="btn btn-success" />
            <input type="button" name="Remove" id="Remove" value="Remove" class="btn btn-danger" /> <br /><br />
            <textarea rows="5" name="Answer" id="Answer" placeholder="Answer" required class="form-control"></textarea><br />
            @Html.DropDownList("Intent", ViewData["Intent"] as List<SelectListItem>, "Select Intent", new { @class = "form-control", required = "required" })
            <br /><input type="text" name="PrimaryEntity" id="PrimaryEntity" placeholder="Primary keyword" required class="form-control" /><br />
            <input type="text" name="SecondaryEntity" id="SecondaryEntity" placeholder="Secondary keyword (optional)" class="form-control" /><br />
            <input type="submit" name="Submit" id="Submit" class="btn btn-success" />
}

这就是我的 JS 看起来

的方式

  $(document).ready(function () {
    var counter = 2;
    $("#Add").click(function () {
        var newTextBoxDiv = $(document.createElement('div'))
             .attr("id", 'TextBoxDiv' + counter);
        newTextBoxDiv.after().html('<input type="text" name="textbox' + counter +
              '" id="Question' + counter + '" value="" class="form-control" required placeholder="Question ' + counter +
              '"> <br />');
        newTextBoxDiv.appendTo("#TextBoxesGroup");
        counter++;
    });

    $("#Remove").click(function () {
        if (counter == 2) {
            alert("No more textbox to remove");
            return false;
        }
        counter--;
        $("#TextBoxDiv" + counter).remove();
    });
});

抱歉，如果我听起来很蹩脚。刚刚开始使用MVC！

Answer 1

您可以创建一个包含Questions类型List<string>属性的简单模型以及其他必需属性。

然后从jQuery中你可以使用一个简单的逻辑添加多个TextBox：

<input type="text" name="Model.Questions[" + index + "]" id="Model_Questions_" + index />

渲染使用：

@for (int i = 0; i < Model.Questions.Count; i++)
{
    @Html.TextBoxFor(x => Model.Questions[i], { .... })
}

当您发布表单时，问题文本框中的所有值都将发布到您的模型的问题列表中。

注意：我没有在VS中编写上述代码，因此可能存在一些您可以自行解决的错误。

将值从View传递到Controller以获取动态填充的表单

1 个答案: