I'm getting used to view ponents in MVC 6, and I asked a similar question a few years ago about partial views. If I build a view ponent encapsulating a mon use-case that requires its own Javascript, where do I put that Javascript? I know that it is dangerous at best to have Javascript in partial views, but it would be a lot simpler to include it in the view ponent, rather than in the containing view or a separate file that has to be referenced by the containing view.

For example, say I have a view ponent that has two drop-downs. The selection in the first drop-down determines what items appear in the second drop-down. This is easily handled in Javascript, of course, but where do I put it?

I'm getting used to view ponents in MVC 6, and I asked a similar question a few years ago about partial views. If I build a view ponent encapsulating a mon use-case that requires its own Javascript, where do I put that Javascript? I know that it is dangerous at best to have Javascript in partial views, but it would be a lot simpler to include it in the view ponent, rather than in the containing view or a separate file that has to be referenced by the containing view.

For example, say I have a view ponent that has two drop-downs. The selection in the first drop-down determines what items appear in the second drop-down. This is easily handled in Javascript, of course, but where do I put it?

• javascript
• c#
• asp-core
• asp-core-viewponent

Share Improve this question Follow edited Feb 11, 2018 at 13:16 Camilo Terevinto 32.1k77 gold badges9595 silver badges126126 bronze badges asked Jan 21, 2016 at 19:31 AJ.AJ. 16.7k2222 gold badges100100 silver badges153153 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

From my experience with ASP.NET 5 View Components, I would say that the best thing to do with them is to keep them isolated and in one place, so they will be easily to manage in long-term projects.

In one of my ASP.NET projects, I've developed View Components structure like this one:

View, Backend code and Model are all in one place, so when you move around the folder, you are sure that you move whole ponent. Moreover, when you are modyfying them, you have quick access to all of their parts.

It will be convinient to put JavaScript which is highly coupled with a ponent also in such structure. You can do this by simply creating the file under the ponent's folder, and then writing a GULP TASK that will copy JS file to wwwroot. From that point, you will be able to link that JavaScript code on ponent's .cshtml using standard syntax:

<script src="~/Components/yourponent.js"></script>

To obtain such a structure in my project, I've extended Razor, to be able to search for my ponent's CSHTML's in proper place. To do this, I've added this code in Startup.cs:

public partial class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
       //non relevant code skipped
       services.AddMvc().AddRazorOptions(ConfigureRazor);

    }

    public void ConfigureRazor(RazorViewEngineOptions razor)
    {
        razor.ViewLocationExpanders.Add(new ViewLocationExpander());
    }
}

and the ViewLocationExpander class is:

public class ViewLocationExpander : IViewLocationExpander
{
    protected static IEnumerable<string> ExtendedLocations = new[]
    {
        "/{0}.cshtml"
    };

    public void PopulateValues(ViewLocationExpanderContext context)
    {
        //nothing here
    }

    public IEnumerable<string> ExpandViewLocations(ViewLocationExpanderContext context, IEnumerable<string> viewLocations)
    {
        //extend current view locations
        return viewLocations.Concat(ExtendedLocations);
    }
}

Then, you invoke ponent like this (from any .cshtml view):

@await Component.InvokeAsync("NavigationComponent",new NavigationComponentModel())