Search code examples
.netrazorasp.net-core-mvc

Why script is not loaded from _Layout and has to be added in partial view?

I'm going through a course on .NET Core 8 and I've run into a big question mark. The person conducting the course shows a way to add toastr used with TempData as shown below:

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
@if (TempData["SuccessMessage"] != null)
{
    <script type="text/javascript">
        toastr.success('@TempData["SuccessMessage"]');
    </script>
}

Now, the code works. However... The code is within a partial view, that is added to _Layout (_Notification):

<div class="container">
        <main role="main" class="pb-3">
            <partial name="../Category/_Notification" />
            @RenderBody()
        </main>
</div>

    <footer class="border-top text-muted fixed-bottom">
        <div class="container text-center">
            Made with <i class="bi bi-heart-pulse-fill"></i>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    
    @await RenderSectionAsync("Scripts", required: false)

My question is: why do I need to add the scripts within the partial view, while for example jquery.min.js is already added in the script section in _Layout? And why it doesn't work when I add ALL the scripts to _Layout instead of adding it to partial view?

Many thanks to all the answers.

Solution

  • why do I need to add the scripts within the partial view, It is not mandatory where the JavaScript code is placed, You can put it in partial view or _layout. When you put the scripts in the view, Scripts will be loaded only when they are needed, reducing unnecessary script loading and making the application more modular and efficient. But if you put all the scripts in _layout, each view will load these scripts even they don't need.

    In your code

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

    Must be placed before toastr.success('@TempData["SuccessMessage"]');, But in _Layout, jquery.min.js is placed after <partial name="../Category/_Notification" /> So it doesn't work. You can try to place it in <head></head>, Then you will find it works as expected.

    Update:

    If you put the script in the partial view, It will render in html like: enter image description here

    If you tried to put jquery.min.js and toastr.min.js after toastr.success('@TempData["SuccessMessage"]'); in partial view, You will find it doesn't work too, So we can get a conclusion that these two scripts must be placed before toastr.success('@TempData["SuccessMessage"]');. Now we can place these two scripts anywhere before toastr.success('@TempData["SuccessMessage"]');

    enter image description here If I put these two scripts in the top of <body></body> it can also works well. Because I don't like to mix html code and javascript code, So i choose to place it in <head>