英文:
Why script is not loaded from _Layout and has to be added in partial view?
问题
我正在学习.NET Core 8的课程，遇到了一个大问题。进行课程的人展示了一种在TempData中使用toastr的方法，如下所示：
<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>
}
现在，这段代码可以工作。但是... 这段代码位于一个偏视图内，该偏视图添加到了_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)
我的问题是：为什么我需要将脚本添加到偏视图中，而不是像jquery.min.js一样已经添加到_Layout的脚本部分中？为什么当我将所有脚本添加到_Layout而不是添加到偏视图时，它不起作用？
非常感谢所有的答案。
英文:
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.
答案1
得分: 0
为什么需要在局部视图中添加脚本？脚本放置的位置并不强制要求，您可以将其放在局部视图或_layout中。当您将脚本放在视图中时，只有在需要时才会加载脚本，减少了不必要的脚本加载，使应用程序更加模块化和高效。但是，如果您将所有脚本放在_layout中，每个视图都会加载这些脚本，即使它们不需要。
在您的代码中：
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
这两行脚本必须放在toastr.success('@TempData["SuccessMessage"]');之前。但在_Layout中，jquery.min.js放在<partial name="../Category/_Notification" />之后，所以它无法正常工作。您可以尝试将它们放在<head></head>中，然后您会发现它可以按预期工作。
更新：
如果您将脚本放在局部视图中，它将在HTML中呈现如下：
如果您尝试在局部视图中将jquery.min.js和toastr.min.js放在toastr.success('@TempData["SuccessMessage"]');之后，您会发现它仍然无法正常工作。因此，我们可以得出结论，这两个脚本必须放在toastr.success('@TempData["SuccessMessage"]');之前的任何位置。
如果我将这两个脚本放在<body></body>的顶部，它也可以正常工作。因为我不喜欢混合HTML代码和JavaScript代码，所以我选择将它们放在<head>中。
英文:
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:
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"]');
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论