页脚动态常量区域新增标题不删除原有内容的问题如何解决

你当前用到的下拉框渲染代码如下：

<select id="FooterList2" asp-items="@(new SelectList( ViewBag.FooterList2,"Id","Title"))" class="form-control col-md-5"></select>

出现新标题追加不覆盖原有内容的问题，可按以下步骤排查修复：

根因说明 #

• 后端数据存储逻辑未清空原有同分组的页脚标题，直接追加了新输入的内容
• 页面渲染时复用了缓存的ViewBag.FooterList2旧值，没有加载最新的数据源
• 若为异步提交场景，前端没有清空下拉框旧选项就插入了新内容

修复步骤 #

1. 修正后端数据更新逻辑 #

在处理标题提交的接口中，先清空原有旧数据再插入新数据，或者直接更新对应ID的记录，示例逻辑：

[HttpPost]
public IActionResult SaveFooterTitle(FooterTitle input)
{
    // 示例：清空分组为2的原有页脚标题，按需调整过滤条件
    var oldItems = _dbContext.FooterConstants.Where(x => x.GroupId == 2).ToList();
    _dbContext.FooterConstants.RemoveRange(oldItems);
    
    // 插入新标题
    _dbContext.FooterConstants.Add(new FooterConstant
    {
        Id = input.Id,
        Title = input.Title,
        GroupId = 2
    });
    _dbContext.SaveChanges();
    
    // 重新赋值ViewBag，不要复用之前的集合对象
    ViewBag.FooterList2 = _dbContext.FooterConstants.Where(x => x.GroupId == 2).ToList();
    return View();
}

2. 禁用页面局部缓存避免复用旧值 #

在渲染该下拉框的视图顶部添加缓存禁用配置：

@{
    Response.Headers.Append("Cache-Control", "no-cache, no-store");
}

3. 异步提交场景补充前端处理逻辑 #

如果是Ajax异步提交不刷新页面的场景，提交成功后先清空下拉框原有选项再插入新值：

// 提交成功回调中执行
const selectDom = document.getElementById('FooterList2');
// 清空旧选项
selectDom.innerHTML = '';
// 插入后端返回的新选项
res.data.forEach(item => {
    let opt = document.createElement('option');
    opt.value = item.id;
    opt.innerText = item.title;
    selectDom.appendChild(opt);
})

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