MVC中如何点击X移除foreach生成的Div并同步更新模型数据

要实现点击移除图标时删除对应容器并同步模型数据，需要结合前端DOM操作和后端模型处理，以下是具体实现步骤：

1. 给每个Chassis项添加唯一标识 #

修改Razor循环代码，为每个.chassi容器添加索引（或唯一业务ID）标识，方便后续定位要删除的项：

@foreach (var item in Model.Chassis.Select((chassi, index) => new { Chassi = chassi, Index = index }))
{
    <div class="chassi" data-index="@item.Index">
        @item.Chassi
        <img src="~/assets/icons/exclude.svg" alt="Remove chassis" class="remove-chassi" />
    </div>
}

如果你的Chassis项有唯一业务ID（比如ChassiId），建议用data-id="@item.Chassi.Id"替代索引，避免因删除顺序导致索引错乱。

2. 前端点击事件处理（两种方案） #

方案A：表单提交同步删除（适合需提交整个表单的场景） #

通过添加隐藏输入框记录要删除的项，提交表单时传给后端处理：

// 绑定移除图标点击事件
document.querySelectorAll('.remove-chassi').forEach(icon => {
    icon.addEventListener('click', function() {
        const chassiDiv = this.closest('.chassi');
        const targetIndex = chassiDiv.dataset.index;
        
        // 移除当前容器
        chassiDiv.remove();
        
        // 生成隐藏输入框，记录要删除的索引
        const deleteInput = document.createElement('input');
        deleteInput.type = 'hidden';
        deleteInput.name = 'ChassisToRemove';
        deleteInput.value = targetIndex;
        // 将输入框添加到表单中
        document.querySelector('form').appendChild(deleteInput);
    });
});

方案B：AJAX无刷新删除（适合单独删除项的场景） #

直接通过AJAX调用后端接口删除数据，无需刷新页面：

document.querySelectorAll('.remove-chassi').forEach(icon => {
    icon.addEventListener('click', function() {
        const chassiDiv = this.closest('.chassi');
        const targetIndex = chassiDiv.dataset.index;
        // 获取防跨站请求伪造Token
        const antiForgeryToken = document.querySelector('input[name="__RequestVerificationToken"]').value;
        
        fetch('/YourController/RemoveChassi', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'RequestVerificationToken': antiForgeryToken
            },
            body: `index=${targetIndex}`
        })
        .then(response => {
            if (response.ok) {
                // 删除成功后移除DOM容器
                chassiDiv.remove();
            }
        })
        .catch(err => console.error('删除操作失败:', err));
    });
});

3. 后端模型与控制器处理 #

模型扩展（对应方案A） #

在视图模型中添加属性，用于接收要删除的项索引列表：

public class YourPageModel
{
    // 原有Chassis属性
    public List<string> Chassis { get; set; } = new List<string>();
    // 新增接收删除索引的属性
    public List<int> ChassisToRemove { get; set; } = new List<int>();
}

控制器处理逻辑 #

方案A：表单提交时处理删除

[HttpPost]
public IActionResult YourPageAction(YourPageModel model)
{
    // 倒序删除，避免因索引偏移导致删除错误
    foreach (var index in model.ChassisToRemove.OrderByDescending(i => i))
    {
        if (index >= 0 && index < model.Chassis.Count)
        {
            model.Chassis.RemoveAt(index);
        }
    }
    
    // 这里可以添加数据持久化逻辑（比如保存到数据库）
    return View(model);
}

方案B：AJAX接口处理删除

[HttpPost]
public IActionResult RemoveChassi(int index, YourPageModel model)
{
    if (index >= 0 && index < model.Chassis.Count)
    {
        model.Chassis.RemoveAt(index);
        // 数据持久化逻辑
    }
    return Ok();
}

注意事项 #

• 如果使用业务ID而非索引，后端逻辑需改为根据ID查找并删除项，比索引更可靠。
• 务必带上__RequestVerificationToken防跨站请求伪造，避免安全风险。
• 根据实际Chassis数据类型（比如自定义实体类）调整代码中的类型匹配。

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