ASP.Net Core Razor Pages 动态列表答案

【问题标题】：ASP.Net Core Razor Pages dynamic listASP.Net Core Razor Pages 动态列表
【发布时间】：2018-10-16 06:22:09
【问题描述】：

我想创建一个带有 Razor 页面的网站，以维护空间和相应的房间。所以，在我的模型中，一个空间有一个房间列表。

public class Space
{
    public int Id { get; set; }
    public string SpaceName { get; set; }
    public List<Room> Rooms { get; set; }

    public Space()
    {
        this.Rooms = new List<Room>();
    }
}

在 create.cshtml 中我想动态添加和删除房间

<h1>Create New Space</h1>
<form method="post">
    <div class="form-group">
       <label for="Space.SpaceName">Space Name</label>
       <input type="text" class="form-control" asp-for="Space.SpaceName" placeholder="Enter space name">
       <span asp-validation-for="Space.SpaceName" ></span>
    </div>
    @if(Model.Space != null){
        for (int i = 0; i < Model.Space.Rooms.Count; i++)
        {
         <input asp-for="@i" type="hidden" />
         <div class="form-group">
             <label for="SpaceName">Room Name</label>
             <input type="text" class="form-control" asp-for="Space.Rooms[i].Name" placeholder="Enter space name">
             <span asp-validation-for="Space.Rooms[i].Name" ></span>
         </div>

         <button type="submit" asp-page-handler="removeroom" asp-route-index="@i">Remove Room</button>
         }
    }

    <button type="submit" asp-page-handler="addroom">Add Room</button>

    <button type="submit" asp-page-handler="submit" class="btn btn-primary">Submit</button>
</form>

PageModel 如下所示：

public class CreateModel : PageModel
{
    readonly SpaceRepository spaceRepository;

    public CreateModel(SpaceRepository spaceRepository)
    {
        this.spaceRepository = spaceRepository;
    }

    [BindProperty]
    public Space Space { get; set; }

    public async Task<IActionResult> OnPostSubmitAsync()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        spaceRepository.Create(Space);
        return RedirectToPage("./Index");
    }

    public async Task OnPostAddRoomAsync()
    {
        Space.Rooms.Add(new Room());
    }

    public async Task OnPostRemoveRoomAsync(int index)
    {
        Space.Rooms.RemoveAt(index);
    }
}

到目前为止，它按预期工作，但是当我创建例如 3 个房间并删除第一个或第二个房间时，它总是删除最后一个。

在处理程序发布后，页面似乎没有收到操纵列表。

任何想法缺少什么？

感谢您的帮助！

【问题讨论】：

你调试OnPostRemoveRoomAsync方法并检查index的值了吗？
是的，索引是正确的。

标签： c# razor-pages

【解决方案1】：

我知道你可能不再需要它了，但我也有一个问题，所以我在 github 上打开了一个问题，我得到了你问题的答案：https://github.com/aspnet/Mvc/issues/8373
所以基本上 MVC 是往返模型，所以字段可以保持填充。因此，页面模型使用最后已知的模型状态来填充每个字段。删除项目后，您可以使用Modelstate.Clear() 修复该问题。多亏了这一点，您在从列表中删除项目后也不会显示任何验证消息。

【讨论】：

【解决方案2】：

索引必须按顺序排列，没有间隙。如果你有这样的数组或列表：

rooms[0] = "Room 1"
rooms[1] = "Room 2"
rooms[2] = "Room 3"

它将正确发布。但是如果你删除rooms[1]，它只会发布rooms[0]并跳过rooms[2]。

这是使用 GUID 作为索引来解决的，这就是 BeginCollectionItem 或具有隐藏索引 GUID 的 EditorForMany 以正确的顺序跟踪此问题的方式。

【讨论】：