将文本框的动态列表绑定到字符串列表模型

本文关键字：列表 绑定 字符串 模型 动态 文本 | 更新日期: 2023-09-27 18:04:50

我有一个视图模型，它包含一个属性:

public List<string> TeamNames = new List<string>();

用户将看到一个表单，该表单最初只包含一个输入团队名称的文本框。但是，用户可以通过javascript添加另一个文本框来添加另一个团队名称。

我的问题是-我怎么能把这些动态文本框绑定到我的列表在我的视图模型?

将文本框的动态列表绑定到字符串列表模型

首先，在表单上创建一个Hidden输入。然后使用JQuery创建这些文本框。毕竟，在提交数据之前，只需序列化这个隐藏字段中的数据。最后，只需在服务器端反序列化它，然后做任何你想做的。

例如on load

that.onLoad = function () {
    var listString = that.hidden.value;
    that.list = $.parseJSON(listString);
}
在提交

: 

function updateHidden() {
    that.hidden.value = JSON.stringify(that.list);
}

如果初始列表为空并且要动态创建，则不需要将空列表传递给视图。这是你需要的简化版本。

控制器:

public class TestController : Controller
{
    // GET: Test
    public ActionResult Index()
    {
        return View();
    }
    [HttpGet]
    public ActionResult AddTeams()
    {
        // you do not need to pass anything if you list is empty
        return View();
    }
    [HttpPost]
    public ActionResult AddTeams(List<string> teamNames)
    {
        // do whatever you want with your teamnames
        return RedirectToAction("Index");
    }
}

视图:

@using (Html.BeginForm("AddTeams", "Test", FormMethod.Post))
{
    <table id="teams-list">
        <tr>
            <td>Team name:</td>
            <td><input type="text" name="teamNames[0]" /></td>
        </tr>
    </table>
    <button type="button" id="add-btn">Add one more team</button>
    <br/>
    <button type="submit">submit</button>
}
<script>
    $('#add-btn').on('click', function() {
        var currentTeamCount = $('#teams-list tr').length;
        $('#teams-list  tr:last').after('<tr><td>Team name:</td><td><input type="text" name="teamNames[' + currentTeamCount + ']" /></td></tr>');
    });
</script>

相关文章：