问题描述
我有一个带有生成的剃须刀页面的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()
{
}
}
结果: