Question

所以我有一个DVD对象，其中包含一个actor列表。我有一个添加视图（其他一切都添加正常）但我仍然试图让演员添加到DVD上的列表。我试图将JavaScript集成到其中为每个actor创建新的文本框，但它实际上并没有比第一个节省更多。有什么建议/意见吗？

以下是actor列表视图中的代码：

   <div id="actorsContainer">
        <div class="form-group">
            @Html.LabelFor(model => model.dvd.ActorList, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.dvd.ActorList, new { htmlAttributes = new { @class = "form-control", id = "actors", name = "actors[]" } })
                <input type="button" class="btn-sm btn-default col-md-2" id="addActor" value="+" />
                @Html.ValidationMessageFor(model => model.dvd.ActorList, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

以下是我目前用于JavaScript的内容：

<script>
    document.getElementById("addActor").onclick = function () {
        var div = document.getElementById("actorsContainer");
        var input = document.createElement("input");
        input.type = "text";
        input.name = "actors[]";
        div.appendChild(document.createElement("br"));
        div.appendChild(input);
    }
</script>

更新

这是我对控制器的代码。也许这与它有关？此外，只有一个addActor按钮存在，但希望每次单击它时添加一个文本框以添加多个actor。

        [HttpGet]
    public ActionResult AddDVD()
    {
        DVDListVM vm = new DVDListVM();

        return View(vm);
    }

    [HttpPost]
    public ActionResult AddDVD(DVDListVM model)
    {
        if (ModelState.IsValid)
        {
            DVD newDVD = new DVD();

            newDVD.Title = model.dvd.Title;
            newDVD.ReleaseYear = model.dvd.ReleaseYear;
            newDVD.DirectorName = model.dvd.DirectorName;
            newDVD.Studio = model.dvd.Studio;
            newDVD.MPAARating = model.dvd.MPAARating;

            newDVD.ActorList = model.dvd.ActorList;

            newDVD.UserNotes = model.dvd.UserNotes;
            newDVD.UserRating = model.dvd.UserRating;

            _dvdManager.AddDVD(newDVD);

            return RedirectToAction("Collection");
        }
        else
        {
            return View(model);
        }
    }

Answer 1

如果ActorList是一个集合，您需要为集合中的每个记录创建一个输入，如下所示：

@for (int i = 0; i < model.dvd.ActorList.Count; i++) { @Html.TextBoxFor(model => model.dvd.ActorList[i], new { htmlAttributes = new { @class = "form-control"} }) }

我没有分配id和name属性，因为razor会自动为这些属性生成值。

如果要动态创建输入，则需要检查razor呈现的html以及它如何处理集合的索引。我使用asp.net mvc核心，这就是集合中的电子邮件输入在html中的显示方式：

<input name="EmailAddresses[1].EmailAddress" class="form-control emailInputAddress" id="EmailAddresses_1__EmailAddress" type="email" value="">

要动态创建输入，我获取元素索引，增加它，然后使用新索引创建元素的副本。

var newEmailInput = $(".emailInput:last").clone(true)[0].outerHTML;
    //get index generated by razor and increment it
    var newEmailInputIndex = newEmailInput.match(/(\[([^\]]+)\])/i)[0].match(/\d+/i)[0];
    newEmailInputIndex++;
    newEmailInput = newEmailInput.replace(/(\[([^\]]+)\])/ig, "[" + newEmailInputIndex + "]")
                            .replace(/(_([^_]+)__)/ig, "_" + newEmailInputIndex + "__");

    $(this.lastEmailInput).after(newEmailInput);

将Actors添加到DVD库

1 个答案: