ASP.NET Core Razor Pages动态维护空间及关联房间功能开发问询

没问题，我来帮你搞定Razor Pages里动态添加和移除Room的功能！下面是完整的实现步骤和代码：

1. 先完善Room模型 #

首先得把Room模型补全，确保和Space的关联正确：

public class Room
{
    public int Id { get; set; }
    public string RoomName { get; set; }
    // 外键关联Space
    public int SpaceId { get; set; }
}

2. 调整Create页面的PageModel #

在Create.cshtml.cs里设置绑定属性，初始化Room列表：

public class CreateModel : PageModel
{
    [BindProperty]
    public Space Space { get; set; }

    public void OnGet()
    {
        // 初始化至少一个Room，方便用户直接输入
        Space = new Space();
        Space.Rooms.Add(new Room());
    }

    public IActionResult OnPost()
    {
        if (ModelState.IsValid)
        {
            // 这里替换成你实际的数据库保存逻辑
            // _context.Spaces.Add(Space);
            // await _context.SaveChangesAsync();
            return RedirectToPage("Index");
        }
        return Page();
    }
}

3. 编写Create.cshtml页面（带动态操作逻辑） #

页面里包含Space名称输入、Room的动态容器，还有添加/移除按钮，配合JavaScript实现动态功能：

@page
@model CreateModel

<h1>Create New Space</h1>

<form method="post">
    <!-- Space名称输入 -->
    <div class="form-group">
        <label asp-for="Space.SpaceName" class="control-label"></label>
        <input asp-for="Space.SpaceName" class="form-control" />
        <span asp-validation-for="Space.SpaceName" class="text-danger"></span>
    </div>

    <!-- Rooms容器 -->
    <h3>Rooms</h3>
    <div id="roomsContainer">
        @foreach (var room in Model.Space.Rooms)
        {
            <div class="room-item form-group mb-3">
                <label class="control-label">Room Name</label>
                <input type="text" name="Space.Rooms[@Model.Space.Rooms.IndexOf(room)].RoomName" class="form-control" />
                <button type="button" class="btn btn-danger mt-2 remove-room">Remove</button>
            </div>
        }
    </div>

    <!-- 操作按钮 -->
    <button type="button" id="addRoom" class="btn btn-primary mb-3">Add Room</button>
    <button type="submit" class="btn btn-success">Create Space</button>
</form>

@section Scripts {
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const roomsContainer = document.getElementById('roomsContainer');
            const addRoomBtn = document.getElementById('addRoom');

            // 添加新Room
            addRoomBtn.addEventListener('click', function() {
                const roomCount = document.querySelectorAll('.room-item').length;
                const newRoomDiv = document.createElement('div');
                newRoomDiv.className = 'room-item form-group mb-3';
                newRoomDiv.innerHTML = `
                    <label class="control-label">Room Name</label>
                    <input type="text" name="Space.Rooms[${roomCount}].RoomName" class="form-control" />
                    <button type="button" class="btn btn-danger mt-2 remove-room">Remove</button>
                `;
                roomsContainer.appendChild(newRoomDiv);
                bindRemoveEvents();
            });

            // 绑定移除按钮事件
            function bindRemoveEvents() {
                const removeButtons = document.querySelectorAll('.remove-room');
                removeButtons.forEach(btn => {
                    btn.removeEventListener('click', removeRoom);
                    btn.addEventListener('click', removeRoom);
                });
            }

            // 移除Room
            function removeRoom() {
                if (document.querySelectorAll('.room-item').length > 1) {
                    this.parentElement.remove();
                    reindexRooms(); // 移除后重新索引，确保模型绑定正确
                } else {
                    alert('至少需要保留一个房间哦');
                }
            }

            // 重新索引所有Room的name属性
            function reindexRooms() {
                const roomItems = document.querySelectorAll('.room-item');
                roomItems.forEach((item, index) => {
                    const input = item.querySelector('input');
                    input.name = `Space.Rooms[${index}].RoomName`;
                });
            }

            // 初始化绑定移除事件
            bindRemoveEvents();
        });
    </script>
}

关键注意点 #

• 模型绑定规则：必须用Space.Rooms[index].RoomName这种命名格式，Razor Pages才能正确把所有Room数据绑定到Space的Rooms集合里。
• 移除后重新索引：如果直接删除元素不调整索引，模型绑定会只识别到第一个断层的位置，后面的数据会丢失，所以一定要重新编号。
• 初始化默认Room：给用户一个初始的输入框，避免空列表的尴尬情况。

内容的提问来源于stack exchange，提问作者El Stefano