如何將帶有動態 HTML 的 Razor Pages 中的多個實體添加到可編輯實體？

Question

我有一個帶有生成的 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 個 Progression。 一個進程可以有 0..* BucketListElementTasks (BLETask)。 創建 BucketListElement 后，我​​們可以導航到“編輯”頁面，在那里我希望能夠執行以下操作：用戶可以按“+”號，增加一個帶有復選框的字段，或者可以按“ -" 符號，刪除帶有復選框的字段以及旁邊的字段。 每個字段都需要填充，並且在保存了盡可能多的 BLETasks 之后，應該將盡可能多的 BLETask 分配給編輯過的 BucketListElement 的 Progression 實體（通過外鍵）與用戶創建和填充的字段一樣多。

單擊“+”號兩次后編輯頁面布局（需要紅色部分）

如果我知道正確，我可以動態地操作 HTML 以使用 JavaScript/Ajax 添加和刪除這些字段，但不幸的是我沒有這方面的經驗，這就是我尋求您幫助的原因。

更新：根據@mj1313 的建議更改，添加 BLETasks 工作正常，但我希望能夠編輯已注冊的 BLETasks，因此我將此代碼插入 Edit.cshtml 中，ID 為“Tasks”。 現在它看起來像這樣：

<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 行的“-”按鈕之一，則會發生這種情況：刪除必填字段並刪除前 n-1 行之一排

Answer 1

我根據你的描述做了一個例子，你可以參考下面的代碼：

編輯.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>

}

編輯.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()
    {
        
    }
}

結果：