ASP.Net WebForms中toastr通知进程控制关闭及tapToDismiss失效问题

一、修复tapToDismiss参数不生效的问题 #

你的原代码错误地将tapToDismiss作为第三个参数直接传入toastr方法，而toastr的正确调用格式是：toastr[type](message, title, options)，其中第三个参数是配置对象，所有选项（包括tapToDismiss）都需要放在这个对象里。

修改后的后端方法如下：

private void ShowToastr(Page page, string message, string title, string type = "info", bool tapToDismiss = false, bool disableAutoClose = false)
{
    // 使用JavaScriptSerializer序列化配置对象，避免字符串转义问题
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    var options = new
    {
        tapToDismiss = tapToDismiss,
        timeOut = disableAutoClose ? 0 : 5000, // 0表示禁用自动关闭
        closeButton = !disableAutoClose, // 禁用自动关闭时隐藏关闭按钮
        extendedTimeOut = 0
    };
    var optionsJson = serializer.Serialize(options);

    var script = $"toastr.{type.ToLower()}('{EscapeSingleQuotes(message)}', '{EscapeSingleQuotes(title)}', {optionsJson});";
    page.ClientScript.RegisterStartupScript(page.GetType(), $"toastr_{Guid.NewGuid()}", script, addScriptTags: true);
}

// 辅助方法：转义字符串中的单引号，避免JavaScript语法错误
private string EscapeSingleQuotes(string input)
{
    return input?.Replace("'", "\\'") ?? string.Empty;
}

关键修改点： #

• 用配置对象传递tapToDismiss等选项，而非直接传布尔值
• 添加disableAutoClose参数，用于控制是否自动关闭通知
• 新增字符串转义方法，避免message/title中的单引号导致JS语法错误
• 用Guid.NewGuid()生成唯一的脚本键，避免多次调用时脚本被覆盖

二、实现进程运行时阻止关闭，进程结束后手动关闭 #

要实现“进程运行时通知无法关闭，结束后自动关闭”的效果，需要分两步操作：

1. 启动进程时显示不可关闭的通知 #

调用修改后的ShowToastr方法，设置disableAutoClose: true和tapToDismiss: false，这样通知既不会自动关闭，也无法通过点击或关闭按钮关闭：

// 启动后台进程前调用
ShowToastr(this.Page, "正在处理，请稍候...", "操作中", type: "info", tapToDismiss: false, disableAutoClose: true);

2. 进程结束后关闭通知 #

当后台进程完成后，通过后端注册脚本调用toastr的关闭方法，或者前端监听进程完成事件后执行关闭逻辑：

方式一：后端注册关闭脚本（适合同步操作或进程完成后回发页面的场景）

// 进程结束后调用
var closeScript = "toastr.clear();"; // 关闭所有toastr通知
// 或者关闭特定通知：如果需要跟踪单个通知实例，可在显示时保存实例，这里简化为关闭所有
Page.ClientScript.RegisterStartupScript(this.GetType(), $"toastr_close_{Guid.NewGuid()}", closeScript, addScriptTags: true);

方式二：前端AJAX监听进程状态（适合异步后台进程）

如果你的进程是异步执行的（比如通过AJAX轮询或SignalR推送状态），可以在前端收到进程完成的信号后执行关闭：

// 示例：AJAX轮询进程状态
function checkProcessStatus() {
    $.ajax({
        url: "CheckProcessStatus.aspx",
        type: "GET",
        success: function(response) {
            if (response.isCompleted) {
                toastr.clear(); // 关闭通知
                // 可选：显示操作完成的成功通知
                toastr.success("操作完成！", "成功");
            } else {
                setTimeout(checkProcessStatus, 1000); // 1秒后再次查询
            }
        }
    });
}

// 页面加载时启动轮询（如果是异步场景）
$(function() {
    checkProcessStatus();
});

额外注意事项 #

• 确保已正确引入toastr的CSS和JS文件到页面中
• 如果需要更精细地控制单个通知，可在显示时保存通知实例：var toastInstance = toastr.info('消息', '标题', options);，后续通过toastr.clear(toastInstance)关闭特定实例

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