MVC can't reach inside a tempdata condition

I'm trying to show user a notification with TempData but my code can't reach the script part. Any idea how can I fix this ? In debug I can see that TempData is not null.

<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>

Solution

I'm trying to show user a notification with TempData but my code can't reach the script part. Any idea how can I fix this ?

I have checked your shared code snippet and investigated that which seems alright and working as expected. I have set the console and alert both executed as expected. Finally, I tried to bind the '@TempData["error"]' within the modal and got the expected output as you can see below:

Output:

HTML:

I just kept your code as it is. Therefore, just you can replace your code.

Script:

<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 () {
                console.log(modal);
                alert("Debug");
                modal.style.display = "block";
                $("#modal3").find(".modal-header").html('@TempData["error"]');
                $("#modal3").find(".modal-title").html(('@TempData["error"]'));
                $("#modal3").modal('show');
            });
            function closeModal() {
                modal.style.display = "none";
               
            }
            $("#btnHideModal").click(function () {
                $("#modal3").modal('hide');
            });
        </script>

    }
    }
</body>

Note: I have directly bind the html('@TempData["error"]') as HTML to your modal-header class and its working. Please have a try, It should work as expected.