Toastr通知无绿色背景且固定左下，如何调整至右上？

1. 修复成功通知绿色背景不显示的问题 #

问题根源：layout.cshtml中Toastr CSS的rel属性拼写错误（写成了stlyesheet），浏览器无法识别该属性，导致CSS文件未加载，所有默认样式（包括成功通知的绿色背景）均不生效。

修改方法：将错误的属性值修正为标准的stylesheet，修正后的代码如下：

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

2. 修复通知位置固定在左下角的问题 #

问题根源有两点：

• 上述CSS未加载，导致Toastr默认的左下角位置样式生效；
• 当前代码先触发通知（toastr.success()/toastr.error()），再设置toastr.options，此时配置的选项无法应用到已创建的通知上。

修改方法：

1. 先设置全局配置选项，再触发通知；
2. 统一在layout.cshtml中引入jQuery和Toastr脚本，避免重复加载。

优化后的通知代码（合并重复逻辑） #

@if (TempData["success"] != null || TempData["error"] != null)
{
    <script type="text/javascript">
        // 先配置全局选项
        toastr.options = {
            "closeButton": false,
            "debug": false,
            "newestOnTop": false,
            "progressBar": false,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };

        // 触发对应类型的通知
        @if (TempData["success"] != null)
        {
            <text>toastr.success('@TempData["success"]');</text>
        }
        @if (TempData["error"] != null)
        {
            <text>toastr.error('@TempData["error"]');</text>
        }
    </script>
}

统一脚本引入（layout.cshtml底部） #

将jQuery和Toastr脚本移至layout.cshtml的</body>标签前，避免局部视图重复加载：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
@RenderSection("Scripts", required: false)

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