如何将带有动态HTML的Razor页面中的多个实体添加到可编辑实体？

如何解决如何将带有动态HTML的Razor页面中的多个实体添加到可编辑实体？

我有一个带有生成的剃须刀页面的ASP.NET Core 3.0 Web应用程序。该模型如下：

public class Element
{
    public int ElementID { get; set; }
    public string Name { get; set; }
    public string discriminator { get; private set; }
}

public class BucketListElement : Element
{
    public int BucketListID { get; set; }
    public string Description { get; set; }
    public bool Completed { get; set; }

    public BucketList BucketList { get; set; }
    public Progression Progression { get; set; }
}

public class Progression
{
    public int ProgressionID { get; set; }
    public int ElementID { get; set; }
    public ICollection<BLETask> BLETasks { get; set; }
    public BucketListElement BLElement { get; set; }
}

public class BLETask
{
    public int BLETaskID { get; set; }
    public int ProgressionID { get; set; }
    public string Text { get; set; }
    public bool Completed { get; set; }
    public Progression Progression { get; set; }
}

BucketListElement具有1级数。进度可以具有0 .. * BucketListElementTasks（BLETask）。创建BucketListElement之后，我们可以导航到“编辑”页面，在这里我可以执行以下操作：用户可以按下“ +”号，再添加一个带有复选框的字段，也可以按下“-”号，将其旁边的复选框也删除。每个字段都需要填充，保存后，应将用户创建和填充的字段数量一样多（通过外键）分配给已编辑的BucketListElement的Progression实体。

Edit page layout after clicking the "+" sign twice (red part is needed)

如果我知道的正确，我可以使用JavaScript / Ajax来动态地处理HTML以添加和删除这些字段，但是不幸的是我没有相关经验，这就是为什么我寻求您的帮助。

更新：通过@ mj1313的建议更改，添加BLETasks可以正常工作，但是我希望能够编辑已注册的BLETasks，因此我将此代码插入到ID为“ Tasks”的Edit.cshtml中。现在看起来像这样：

<div class="form-group">
<label asp-for="BucketListElement.Progression.BLETasks" class="control-label"></label>
<button id="addTask" class='btn btn-primary'>+</button>
<div id="Tasks" style="margin-top:10px">
    @{
        int indexCounter = 0;
        int taskCounter = 1;
        foreach (var task in Model.BucketListElement.Progression.BLETasks)
        {
            <div class="taskRow">
                <label>Task @taskCounter:</label>
                <input class="form-control" asp-for="@Model.BucketListElement.Progression.BLETasks[indexCounter].Text" required="required" />
                <input class="largerCheckBox" asp-for="@Model.BucketListElement.Progression.BLETasks[indexCounter].Completed" />
                <button class="btn btn-danger" style="padding-top:1px" onclick="deleteRow(this)" value="@indexCounter">-</button>
            </div>
            indexCounter++;
            taskCounter++;
        }
    }
</div>

现在，从已经存在的BLETasks中，只能删除最后一行（以及由脚本（“ +”按钮）创建的行）。如果我在第一n-1行的末尾按下“-”按钮，就像单击“保存”按钮一样。如果我删除了一个必填字段的文本（以便停留在页面上）并单击第n-1行的“-”按钮之一，则会发生这种情况： After deleting a required field and deleting one of the first n-1 row

解决方法

我根据您的描述举了一个例子，您可以参考以下代码：

Edit.cshtml：

@page
@model WebApplication9.Pages.EditModel
@{
}

<style>
    .largerCheckbox {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        margin-right: 20px;
        vertical-align: middle
    }

</style>

<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="BucketListElement.Name" class="control-label"></label>
                <input asp-for="BucketListElement.Name" class="form-control" />
                <span asp-validation-for="BucketListElement.Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="BucketListElement.Description" class="control-label"></label>
                <input asp-for="BucketListElement.Description" class="form-control" />
                <span asp-validation-for="BucketListElement.Description" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="BucketListElement.Progression.BLETasks" class="control-label"></label>
                <button id="addTask" class='btn btn-primary'>+</button>
                <div id="Tasks" style="margin-top:10px">

                </div>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>


@section scripts{
    <script>
        var count = 1;
        $("#addTask").on("click",function () {
            var htmlstring = "<div class='taskRow'><label>Task" + count + "</label>";
            htmlstring += "<input type='text' name='BucketListElement.Progression.BLETasks[" + (count - 1) +"].Text' required='required'>";
            htmlstring += "<input type='checkbox' name='BucketListElement.Progression.BLETasks[" + (count - 1) +"].Completed' class='largerCheckbox' value='true'>";
            htmlstring += "<button class='btn btn-danger' style='padding-top:1px' onclick='deleteRow(this)' value='" + (count - 1)+"'>-</button></div>"
            $("#Tasks").append(htmlstring);
            count++;
        })

        function deleteRow(element) {
            var currentRow = parseInt($(element).val());
            let nextsiblings = document.querySelectorAll('.taskRow:nth-child(' + (currentRow + 1) + ') ~ *');
            for (var i = 0; i < nextsiblings.length; i++) {
                var childElements = nextsiblings[i].children;
                childElements[0].textContent = "Task" + (currentRow + 1);
                childElements[1].setAttribute("name","BucketListElement.Progression.BLETasks[" + currentRow + "].Text");
                childElements[2].setAttribute("name","BucketListElement.Progression.BLETasks[" + currentRow + "].Completed");
                childElements[3].setAttribute("value",currentRow)
                currentRow++;
            }
            $(element).parent("div").remove();
            count--;
        }
    </script>

}

Edit.cshtml.cs：

public class EditModel : PageModel
{
    [BindProperty]
    public BucketListElement BucketListElement { get; set; }

    public void OnGet()
    {
        BucketListElement = new BucketListElement
        {
            Name = "Element1",Description = "AAA"
        };
    }

    public void OnPost()
    {
        
    }
}

结果：