Wo sollte ich auch ein Skript für eine view-Komponente?

Ich hatte auch Probleme mit den Abschnitten tag in viewcomponents. Stellt sich heraus, zu den besten meines Wissens, gibt es keine Unterstützung für ihn in viewcomponents. Sehen https://github.com/aspnet/Home/issues/2037

Jake Shakesworth umgesetzt hat, eine tag-Helfer wie gezeigt in:
Javascript in einer View Komponente

Auf der anderen Seite konnte man nur schließen Sie Sie in den viewcomponent als

<script defer src"...">
  </script>

Meine Anforderung war es, zu zeigen Sie eine google-Karte von einem viewcomponent. Problem war das, dass das Skript immer aufgerufen, bevor die jquery, jquery.ui-Sachen.

Durch die Verwendung aufschieben, sagen Sie den parser nicht ausführen, bis das Dokument geladen hatte, wodurch das problem des mit zu es in das layout für die ordnungsgemäße Ausführung.
Aufschieben wird unterstützt von chrome, safari und ie(10+), ff(3.6+), o(15+)

Hoffe, das hilft

Dies ist ein Beispiel von meinem code:

@using MobileVet.WebApp.Services;
@inject ISettingsService SettingsService
@{
     var Options = SettingsService.Value();

    <!--Service Area-->
    <div class="container-fluid">
         <div class="row p-3">
            <!--First column-->
            <div class="col-md-3">
                <h5 class="title">Site Navigation</h5>
                <ul>
                    <li><a href="#!">Home</a></li>
                    <li><a href="#!">Services</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul> 

            </div>
            <!--/.First column-->
            <hr class="w-100 clearfix d-md-none">

            <!--Second column-->
            <div class="col-md-9">

                <div id="map-canvas" style="min-height: 300px; min-width: 200px;"> 
                </div>
            </div>
            <!--/.Second column-->

        </div>
    </div>
    <!--Service Area-->


<script src="http://maps.google.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXX&sensor=false"></script>
<script type="text/javascript" src="~/js/components/servicearea.js" defer ></script>

}

Beachten Sie, dass Sie wahrscheinlich benötigen, um zu schreiben, etwas Logik, um zu verhindern, dass das Skript aufgenommen zu werden, mehrere Male, wenn die view-Komponente vorhanden ist, die mehr als einmal auf einer Seite, die war nicht mein Fall

Dies ist, wie ich näherte sich dem einfügen von Skripten in eine view-Komponente, mit Asp.net core 2.0.

Zuerst erstellte ich eine teilweise Ansicht, die ich innerhalb der view-Komponenten view-Ordner.

Pfad: Views/Shared/Komponenten/CalendarWidget/_CalendarScriptsPartial.cshtml

_CalendarScriptsPartial.cshtml

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/moment/moment.js"></script>
    <script src="~/lib/fullcalendar/dist/fullcalendar.js"></script>
    <script src="~/js/calendarWidget.js"></script>
</environment>
<environment exclude="Development">
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/moment/min/moment.min.js"></script>
    <script src="~/lib/fullcalendar/dist/fullcalendar.min.js"></script>
    <script src="~/js/calendarWidget.js"></script>
</environment>

Dann brachte ich die Skripte über den Html-teilweise async-Helfer-Methode in meinem view Ansicht "Komponenten".

Pfad: Views/Shared/Komponenten/CalendarWidget/Default.cshtml

Standard.cshtml

<section id="calendar"></section>
@await Html.PartialAsync( "Components/CalendarWidget/_CalendarScriptsPartial" )

Und der Vollständigkeit halber, hier ist meine Ansicht Komponenten-Klasse.

Pfad: ViewComponents/CalendarWidgetViewComponent.cs

CalendarWidgetViewComponent.cs

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace LodgersChoice.ViewComponents
{
    public class CalendarWidgetViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync( )
        {
            return View( );
        }
    }
}

Hinweis: Async ist derzeit nicht erforderlich, in meinem Beispiel, aber ich möchte Spritzen, ein repository in der ctor der Klasse, die mit async/await.

Hinweis 2: Sobald ich fertig bin, ist die Entwicklung dieses ich planen die Bündelung und minifying alles, was zu einem Skript.