如何使用Razor和.NET Core 2.2将项目动态添加到ViewModel列表中的列表？

Question

我一直在关注这个教程（我在asp.net core 2.2中做过）：http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/关于如何编辑asp.net中的变量列表。在本教程中，我们只是处理礼物列表。我正在尝试将此方法应用于更复杂的模型。

我有一个名为Workout.cs的对象，其中包含Section.cs列表。 Section.cs对象包含Movement.cs列表

public class Workout
{
    public string Name { get; set; }
    public IEnumerable<Section> Sections { get; set; } = new List<Section>();
}

public class Section
{
    public int NbRounds { get; set; }
    public string Name { get; set; }
    public IEnumerable<Movement> Movements { get; set; } = new List<Movement>();
}
public class Movement
{
    public string Name { get; set; }
}

WorkoutController

        public IActionResult BlankSection()
        {
            return PartialView("_SectionEditor", new Section());
        }

        public IActionResult BlankMovement()
        {
            return PartialView("_MovementEditor", new Movement());
        }

Index.cshtml

@model Workout

<h2>Workout</h2>

<form asp-action="Index" method="post" asp-controller="Workout">
    <div id="editorRows">
        @foreach (var item in Model.Sections)
        {
            <partial name="_SectionEditor" model="item" />
        }
    </div>

    <a id="addItem" asp-action="BlankSection" asp-controller="Workout">Add Section...</a> <br />
    <input type="submit" value="Finished" />
</form>

@section scripts {
    <script>
        $("#addItem").click(function () {
            $.ajax({
                url: this.href,
                cache: false,
                success: function (html) { $("#editorRows").append(html); }
            });
            return false;
        });
    </script>
}

_SectionEditor.cshtml

@model Section
@{
    Layout = "~/Views/Shared/_LayoutEditor.cshtml";
}

<div class="editorRow">
    @using (Html.BeginCollectionItem("sections"))
    {
        <span>Name: </span> @Html.EditorFor(m => m.Name);

        <span>Rounds: </span>@Html.EditorFor(m => m.NbRounds, new { size = 4 });
    }

    <a href="#" class="deleteRow">delete</a>
    <div id="editorMovement">
        @foreach (var item in Model.Movements)
        {
            <partial name="_MovementEditor" model="item" />
        }
    </div>
    <a id="addMovement" asp-action="BlankMovement" asp-controller="Workout">Add Movement...</a> <br />
</div>


@section Scripts {

    <script>
        $(document).ready(function () {
            $("a.deleteRow").on("click", function () {
                $(this).parents("div.editorRow:first").remove();
                return false;
            });
        });

        $("#addMovement").click(function () {
            $.ajax({
                url: this.href,
                cache: false,
                success: function (html) { $("#editorMovement").append(html); }
            });
            return false;
        });
    </script>
}

MovementEditor.cshtml

@model Movement

@{
    Layout = "~/Views/Shared/_LayoutEditor.cshtml";
}

<div class="editorMovement">
    @using (Html.BeginCollectionItem("movements"))
    {
        <span>Name: </span> @Html.TextBoxFor(m => m.Name);
    }
    <a href="#" class="deleteMovement">delete</a>
</div>

@section Scripts {
    <script>
        $(document).ready(function () {
            $("a.deleteMovement").on("click", function () {
                $(this).parents("div.editorMovement:first").remove();
                return false;
            });
        });
    </script>
}

有了这个教程，当我在训练中添加各个部分时，它工作正常，但是当我尝试将相同的动作添加到我的部分时，它不再起作用了。我希望能够为我的锻炼添加尽可能多的部分，并为每个部分添加尽可能多的动作，并将其发送给控制器。我怎么能这样做？

非常感谢

Answer 1

首先：MovementEditor似乎是控制器的一部分，但不在视图文件中（尽管'_'）。

第二：由于_SectionEditor是局部视图，你不能在其中定义@section scripts，因为它已经在主视图中定义了Index。要解决此问题，您需要将所有脚本放在主视图Index中。

P.S：不要忘记更改部分视图中项目的jquery选择器，即：$("#addMovement")不会指向锚标记，因为创建DOM树时它不存在。而是写$("body #addMovement")，它将获得锚标记。