Question

136

Where should I include a script for a view component?

rated 0 times [ 141] [ 5] / answers: 1 / hits: 18739 / 7 Years ago, thu, march 30, 2017, 12:00:00

I have tried adding a section script inside a view component's view.

@section scripts {

    <script src=~/somepath asp-append-version=true></script>

}

I also have the Render Section in the shared layout

@RenderSection(scripts, required: false)

When used in partial views and elsewhere in the project the script loads fine. However when in a View Component the script does not load.

I suppose I could include the script in the section tag of every view that calls the component. I feel this does not fit with the self contained nature of a view component.

Is there another way I can do this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

khalilb

Add To Favorites

Follow

Total Points: 173

Total Questions: 110

Total Answers: 105

Location: Honduras

Member since Thu, Mar 23, 2023

1 Year ago

khalilb questions

1 Why does the next.js Script tag with the beforeInteractive strategy don't load thirdParty script?

Sat, May 21, 22, 00:00, 2 Years ago

1 axios : How exactly to preserve session after successful authorization and send with subsequent request - while testing without browser

Thu, Nov 25, 21, 00:00, 3 Years ago

1 Chart.JS tooltip callbacks label and title (v3.5)

Thu, Sep 9, 21, 00:00, 3 Years ago

1 Cannot call function only once in React Native?

Sat, Jul 4, 20, 00:00, 4 Years ago

1 How to fix ng build project in angular

Tue, Nov 12, 19, 00:00, 5 Years ago

View All

answered 7 Years ago jayden · Accepted Answer

I also had problems with sections tag in viewcomponents. Turns out, to the best of my knowledge, there is no support for it in viewcomponents. See https://github.com/aspnet/Home/issues/2037

Jake Shakesworth has implemented a tag helper as shown in:
Javascript in a View Component

On the other hand you could just include it in your viewcomponent as an

<script defer src...>

  </script>

My requirement was to show a google map from a viewcomponent. Problem was that the script was getting called before the jquery, jquery.ui stuff.

By using defer you are telling the parser not to execute it until the document had loaded thus avoiding the problem of the having to put it in the layout for proper execution.
Defer is supported by chrome, safari, and ie(10+), ff(3.6+), o(15+)

Hope this helps

This is an example of my 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>



}

Note that you would probably need to write some logic to prevent the script to be included multiple times if the view component is present more than once on a page, which was not my case