Question

我有一个包含单个属性的视图模型：

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

向用户显示一个表单，该表单最初只包含一个文本框以输入团队名称。但是，用户可以通过javascript添加另一个文本框，以便添加另一个团队名称。

我的问题是 - 如何将这些动态文本框绑定到我的视图模型中的列表中？

Answer 1

首先，在表单上创建一个隐藏输入。然后使用JQuery创建这些文本框。毕竟，只需序列化此隐藏字段中的数据就可以提交数据。最后，只需在服务器端对其进行反序列化，并做任何你想做的事情。

例如在加载时

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

提交：

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

Answer 2

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

控制器：

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>

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

2 个答案: