web-dev-qa-db-ja.com

ビューコンポーネントのスクリプトはどこに含める必要がありますか？

ビューコンポーネントのビュー内にセクションスクリプトを追加してみました。

@section scripts {
    <script src="~/somepath" asp-append-version="true"></script>
}

共有レイアウトにレンダリングセクションもあります

@RenderSection("scripts", required: false)

部分ビューやプロジェクトの他の場所で使用すると、スクリプトは正常に読み込まれます。ただし、ビューコンポーネントでは、スクリプトは読み込まれません。

コンポーネントを呼び出すすべてのビューのセクションタグにスクリプトを含めることができると思います。これは、ビューコンポーネントの自己完結型の性質に適合しないと思います。

これを行う別の方法はありますか？

razorasp.net-coreasp.net-core-viewcomponent
7
Oliver Orchard

また、viewcomponentsのsectionsタグにも問題がありました。私の知る限り、viewcomponentsではサポートされていません。 https://github.com/aspnet/Home/issues/2037 を参照してください

Jake Shakesworthは、次のようにタグヘルパーを実装しました。 ビューコンポーネントのJavascript

一方、ビューコンポーネントに次のように含めることもできます。

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

私の要件は、viewcomponentからグーグルマップを表示することでした。問題は、スクリプトがjquery、jquery.uiのものの前に呼び出されていたことでした。
deferを使用すると、ドキュメントが読み込まれるまで実行しないようにパーサーに指示するため、適切に実行するためにレイアウトに配置する必要があるという問題を回避できます。 Deferは、chrome、safari、およびie（10 +）、ff（3.6 +）、o（15+）でサポートされています。

お役に立てれば

これは私のコードの例です：

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

}

ビューコンポーネントがページに複数回存在する場合、スクリプトが複数回含まれないようにするためのロジックを作成する必要があることに注意してください。これは私の場合ではありませんでした。

6
Alberto L. Bonfiglio

私が見たところ、ViewComponentの_"@section Scripts {}"_は無視され、_ViewComponents _*layout.cshtml_の関連する@RenderSection()にはレンダリングされません。

なぜだかわかりません。

2
Axel Gunnlaugsson

viewcomponentsの@sectionスクリプト{}は無視され、Asp.Netレンダリングエンジンによってレンダリングされません。したがって、ビューコンポーネントの最後で使用するだけです。また、jqueryスクリプトがレイアウトの最後に指定されている場合、jqueryはビューコンポーネントで使用できません。もちろん、jqueryスクリプトをレイアウトのheadセクションに移動すると問題は解決しますが、最後にjsファイルをロードすることをお勧めします。

したがって、レイアウトの最後にjqueryスクリプトを保持し、viewcomponentsでjqueryを使用したい場合は、javascript domcontentloadedを使用でき、任意のjqueryをdomcontentloaded内に書き込むことができます。永続的な良いアプローチではありませんが、私にとってはうまくいきます。

<script>
    document.addEventListener('DOMContentLoaded', function (event) {
        console.log($ === jQuery)
    });
</script>

または、@ Alberto L. Bonfiglioが述べているように、スクリプトを別のJSファイルに移動して、ビューコンポーネントへのロードを延期することもできます。

<script src="viewComponentScript.js" defer></script>
0
suomi-dev

ASP.NET Coreのビューコンポーネントは、独立したコントローラーを備えた独立したビューのように機能するため、ビューコンポーネントの上に次のタグを挿入できます

@{
Layout = null;
}

その後、以下のタグを挿入して、関連するスクリプトを使用します。次に例を示します。

<environment include="Development">

<script src="~/js/chart.js"></script>

</environment>
 <environment exclude="Development">

<script src="~/js/chart.min.js"></script>

</environment>
0
nassim taghipour

これは、Asp.net core 2.を使用してスクリプトをビューコンポーネントに挿入する方法です。

最初に、ビューコンポーネントのビューフォルダー内に配置した部分ビューを作成しました。

パス：Views/Shared/Components/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>

次に、ビューコンポーネントビュー内のHtml部分非同期ヘルパーメソッドを介してスクリプトを取り込みました。

パス：Views/Shared/Components/CalendarWidget/Default.cshtml

Default.cshtml

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

完全を期すために、ここに私のビューコンポーネントクラスがあります。

パス：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( );
        }
    }
}

注：私の例では現在非同期は必要ありませんが、async/awaitを使用するクラスのctorにリポジトリを挿入する予定です。

注2：これの開発が完了したら、すべてを1つのスクリプトにバンドルして縮小することを計画しています。

0
WBuck