如何实现仅点击保存按钮时切换显示Bootstrap alert-success消息

我来帮你一步步解决这个问题，核心思路是在保存操作成功后把消息存入Session，重定向回页面后读取Session并控制提示框显示，同时避免刷新重复显示：

第一步：控制器中处理保存逻辑并存储Session消息 #

当用户点击保存按钮提交表单时，在你的Post Action里完成数据保存，然后将提示消息存入Session，最后重定向回页面（用Post-Redirect-Get模式避免重复提交）：

[HttpPost]
public IActionResult SaveYourData(YourModel model)
{
    // 验证模型并执行保存操作
    if (ModelState.IsValid)
    {
        // 这里替换成你的实际保存逻辑
        _yourDataService.Save(model);
        
        // 将成功消息存入Session
        HttpContext.Session.SetString("message", "数据已成功保存！");
    }
    
    // 重定向回展示页面（确保是GET请求）
    return RedirectToAction(nameof(YourIndexPageAction));
}

注意：如果是ASP.NET Core项目，需要先在Program.cs中配置Session服务，否则Session无法正常使用：

builder.Services.AddSession(options =>
{
    options.IdleTimeout = TimeSpan.FromMinutes(30);
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true;
});

// 在app.UseRouting()之后添加
app.UseSession();

第二步：Razor页面中渲染并控制提示框显示 #

接下来在你的cshtml页面中，改造提示框的逻辑：默认隐藏提示框，当Session中有消息时，渲染消息并移除隐藏类，同时读取后立即清除Session（防止刷新页面重复显示）。

1. HTML结构 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- 提示消息容器：默认隐藏，使用Bootstrap的alert-success样式 -->
<div id="divConfirmationMessage" class="alert alert-success no-display">
    @{
        var successMessage = HttpContext.Session.GetString("message");
        if (!string.IsNullOrEmpty(successMessage))
        {
            @successMessage
            // 读取后立即清除Session，避免刷新页面再次显示
            HttpContext.Session.Remove("message");
        }
    }
</div>

<!-- 你的保存表单 -->
<form asp-action="SaveYourData" method="post">
    <!-- 这里是你的表单字段 -->
    <input type="text" asp-for="YourProperty" class="form-control" />
    
    <button type="submit" class="btn btn-primary mt-3">保存</button>
</form>

2. CSS样式（定义隐藏类） #

.no-display {
    display: none;
}

3. JavaScript控制显示时机 #

页面加载时检查提示框是否有内容（即Session是否有消息），如果有就移除隐藏类显示消息，还可以加个自动隐藏的效果：

document.addEventListener('DOMContentLoaded', function() {
    const messageDiv = document.getElementById('divConfirmationMessage');
    
    // 检查提示框内是否有有效内容
    if (messageDiv.textContent.trim() !== '') {
        messageDiv.classList.remove('no-display');
        
        // 可选：5秒后自动隐藏消息
        setTimeout(() => {
            messageDiv.classList.add('no-display');
        }, 5000);
    }
});

关键逻辑说明 #

1. Post-Redirect-Get模式：提交表单后重定向，既避免了用户刷新页面重复提交数据，也确保Session消息只会在重定向后的GET请求中出现一次。
2. Session读取后立即清除：保证提示消息只显示一次，不会在用户刷新页面时再次弹出。
3. 默认隐藏+JS控制显示：只有当用户点击保存且操作成功后，才会触发消息显示，完全符合你的需求。

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