Как динамически добавить элемент в список в списке в ViewModel с помощью Razor и .NET Core 2.2? - PullRequest
Новая
       26

Как динамически добавить элемент в список в списке в ViewModel с помощью Razor и .NET Core 2.2?

0 голосов
/ 11 апреля 2019

Я следовал этому руководству (я делал это в ядре asp.net 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>
}

В этом уроке все работает нормально, когда я добавляю секции к своей тренировке, но когда я пытаюсь сделать то же самое, чтобы добавить движения в свои секции, это больше не работает. Я хотел бы иметь возможность добавлять в свою тренировку столько разделов, сколько я хочу, и для каждого раздела столько движений, сколько я хочу, и отправлять их на контроллер. Как я мог это сделать?

спасибо большое

1 Ответ

0 голосов
/ 11 апреля 2019

Первое: MovementEditor представляется частичным в контроллере, но не в файле представления (несмотря на '_').

Второе: поскольку _SectionEditor является частичным представлением, в нем нельзя определить @section scripts, поскольку оно уже определено в главном представлении Index. Чтобы решить эту проблему, вам нужно поместить все скрипты в главном окне Index.

P.S: не забудьте изменить селекторы jquery для элементов в частичных представлениях, т. Е. $("#addMovement") не будет указывать на тег привязки, потому что его не было при создании дерева DOM. Вместо этого напишите $("body #addMovement"), и он получит тег привязки.

...