如何在DotVVM中集成Toastr.js？已实现异常过滤器但遇阻

1. 引入toastr的CSS和JS资源 #

两种引入方式选其一即可：

方式一：直接在布局页引入CDN资源 #

打开项目的_Layout.dothtml文件，在<head>标签内添加toastr样式：

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />

在</body>闭合标签前添加toastr脚本（依赖jQuery，DotVVM默认已集成）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

方式二：通过DotVVM资源管理器注册 #

在DotvvmStartup.cs的ConfigureResources方法中注册资源：

config.Resources.Register("toastr-css", new StylesheetResource("https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"));
config.Resources.Register("toastr-js", new ScriptResource("https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js")
{
    Dependencies = new[] { "jquery" } // 声明依赖jQuery
});

然后在_Layout.dothtml中引用注册的资源：

@resource toastr-css
@resource toastr-js

2. 修复异常过滤器的脚本注入逻辑 #

原代码存在JS语法错误风险（未转义特殊字符）和执行时机问题，修改后的过滤器代码如下：

public class ErrorLoggingActionFilter : ExceptionFilterAttribute
{
    protected override async Task OnPageExceptionAsync(IDotvvmRequestContext context, Exception exception)
    {
        // 转义错误消息中的特殊字符，避免JS语法错误与XSS风险
        var escapedErrorMessage = System.Web.HttpUtility.JavaScriptStringEncode(exception.Message);
        
        // 使用AddStartupScript确保脚本在页面资源加载完成后执行
        context.ResourceManager.AddStartupScript($"toastr.error('{escapedErrorMessage}');");

        // 标记异常已处理，阻止DotVVM显示默认错误页
        context.IsPageExceptionHandled = true;

        await base.OnPageExceptionAsync(context, exception);
    }
}

3. 全局注册异常过滤器 #

在DotvvmStartup.cs的Configure方法中添加全局过滤器，让所有页面的ViewModel异常都能被捕获：

config.GlobalFilters.Add(new ErrorLoggingActionFilter());

如果只想让特定页面生效，也可以在对应ViewModel类上添加[ErrorLoggingActionFilter]特性。

常见问题排查 #

• 若toastr不显示，打开浏览器控制台检查是否有资源加载错误，确认CDN链接可用或本地资源路径正确。
• 确保context.IsPageExceptionHandled = true，否则DotVVM会覆盖处理逻辑，显示默认错误页面。
• AJAX PostBack场景下，AddStartupScript依然有效，DotVVM会在PostBack完成后自动执行脚本。

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