javascript - 如何在 Razor 中保存 ViewModel 的数组

Question

我的 ViewModel 看起来像

public class MyVm
{
    public List<string> MyList{get;set;}
}

在我的 .chstml 文件中，我想通过 JavaScript 数组填充它

我该怎么做

这是我的努力

@Html.HiddenFor(a => a.MyList)
<script>
    var myJsList = ["this", "that"];
    document.getElementById("MyList").value = myJsList;
</script>

问题是当我单击保存按钮时，我的 Controller 显示

public ActionResult Save(MyVm model)
{
    //model.MyList is null
}

Answer 1

您无法存储复杂类型，例如 List<string>在单个隐藏输入中。您将需要多个隐藏字段。例如，您可以为这些隐藏字段设置一个容器:

<div id="container"></div>

您将根据 JavaScript 字符串数组中存储的值动态注入(inject)相应的隐藏字段:

<script>
    var myJsList = ["this", "that"];
    var container = document.getElementById("container");
    for (var i = 0; i < myJsList.length; i++) {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", "MyList[" + i + "]");
        hiddenField.setAttribute("value", myJsList[i]);
        container.appendChild(hiddenField);
    }
</script>

所以基本上你最终会得到以下 DOM:

<div id="container">
    <input type="hidden" name="MyList[0]" value="this" />
    <input type="hidden" name="MyList[1]" value="that" />
</div>

如果您希望标准 ASP.NET MVC 模型绑定(bind)器将这些值合并为 List<string>，这就是您的目标。进入您的 View 模型。