MVC中TempData不为空却无法触发对应脚本代码的问题求助

我尝试通过TempData向用户展示通知弹窗，但代码无法执行到脚本部分。调试时可确认TempData不为空，请问该如何修复此问题？

代码如下：

<body>
 @if (TempData["error"] != null)
    {
        <div class="modal fade" tabindex="-1" id="modal3"
         data-keyboard="false" data-backdrop="static">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">                      
                    </div>
                    <div class="modal-body">
                        @TempData["error"]
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary button button4">Sign</button>
                        <button type="button" id="btnHideModal" class="btn btn-primary button button4">
                            Hide
                        </button>
                    </div>
                </div>
            </div>
        </div>
    }
    @if (TempData["error"] != null)
    {
//This is the problem. In temporary breakpoint , it skips this part.
        @section Scripts{

        <script type="text/javascript">        
            const modal = document.getElementById("modal3")
            $(window).on('load', function () {
            modal.style.display = "block";
            });
            function closeModal() {
            modal.style.display = "none";
            }
        </script>

        }
    }
</body>

核心问题：@section Scripts不能嵌套在条件块内 #

Razor视图中，@section必须直接定义在视图的顶级作用域，不能被if、foreach等代码块包裹，否则Razor引擎会忽略这个section，导致脚本无法渲染到布局页的对应位置。

修复步骤： #

1. 将@section Scripts移到视图顶级位置，在脚本内部判断弹窗是否存在（即TempData是否有值）：

<body>
 @if (TempData["error"] != null)
    {
        <div class="modal fade" tabindex="-1" id="modal3"
         data-keyboard="false" data-backdrop="static">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">                      
                    </div>
                    <div class="modal-body">
                        @TempData.Peek("error")
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary button button4">Sign</button>
                        <button type="button" id="btnHideModal" class="btn btn-primary button button4">
                            Hide
                        </button>
                    </div>
                </div>
            </div>
        </div>
    }
</body>

@section Scripts{
    <script type="text/javascript">        
        // 先判断弹窗元素是否存在（即TempData["error"]是否有值）
        const modal = document.getElementById("modal3");
        if (modal) {
            // 用Bootstrap官方的modal方法触发显示，而非直接改display
            $(window).on('load', function () {
                $(modal).modal('show');
            });
            
            // 绑定关闭按钮事件
            $("#btnHideModal").click(function() {
                $(modal).modal('hide');
            });
        }
    </script>
}

2. 处理TempData的生命周期：
   TempData默认是一次性读取的，第一次访问后会被标记为删除。使用TempData.Peek("error")可以保留数据，确保后续逻辑能正常判断弹窗是否需要渲染。

3. 使用Bootstrap Modal原生方法：
   你的弹窗使用了Bootstrap的fade类，直接修改display属性会破坏框架的动画和交互逻辑，建议用官方提供的modal('show')和modal('hide')方法控制弹窗状态。

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