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?
In a View, you can invoke a view component one of two ways: use a View's Component property or add a Tag Helper to the View. For my money, the simplest method is to simply call the InvokeAsync method from the View's Component property, passing the name of your view component and its parameters.
The default view name for a view component is Default , which means view files will typically be named Default. cshtml . A different view name can be specified when creating the view component result or when calling the View method.
This property returns the dynamic view bag object, which can be used to pass data between the view component and the view. This property returns a ModelStateDictionary, which provides details of the model binding process. This property returns the ViewContext object that was provided to the parent view.
The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
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
From what I have seen, a "@section Scripts {}"
in a ViewComponent is ignored and does not render in the relevant @RenderSection()
of the ViewComponents _*layout.cshtml
Why that is I do not know.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With