Where should I include a script for the view component?

Question

I tried to add a script section in the view component view.

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

I also have a Render section in the general layout

@RenderSection("scripts", required: false)

When used in partial views and elsewhere in a project, the script loads fine. However, when in the view component the script does not load.

I suggest that I could include a script in the section tag of each view that calls the component. I feel that this does not correspond to the self-sufficient nature of the species component.

Is there any other way to do this?

Answer 1

viewcomponents. , , viewcomponents. . https://github.com/aspnet/Home/issues/2037

-, : Javascript

, viewcomponent

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

, google viewcomponent. , script jquery, jquery.ui.
defer, , , , . , .. (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>

}

, , , , script , ,

Answer 2

, , a "@section Scripts {}" ViewComponent @RenderSection() ViewComponents _*layout.cshtml

.

Answer 3

Asp.net core 2.0.

, .

: ///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 .

: ///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 , ctor , async/await.

2: , script.

Answer 4

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>

Answer 5

. , .

https://github.com/cempehlivan/ViewComponentsRenderSection

Answer 6

wwwroot. , ~/ wwwroot. script wwwroot/js, ~/js/some.js.

css ..

Update

@sectionwill not render anything, you need to explicitly display the section in your code using @RenderSection("scripts", required: false)(or @RenderSection("scripts", required: true), if necessary.

For example, the default template has this in the _Layout.cshtmlfile

<!DOCTYPE html>
<html>
<head>
...
    @RenderSection("styles", required: false)
</head>
<body>
    @RenderBody()
...
    @RenderSection("scripts", required: false)
</body>
</html>