我的Javascript应该放在View组件的哪个位置？

Question

我已经习惯了MVC 6中的view components，几年前我问similar question部分观点。如果我构建一个封装一个需要自己的Javascript的常见用例的视图组件，我在哪里放置那个Javascript？我知道在部分视图中使用Javascript是dangerous at best，但将它包含在视图组件中要简单得多，而不是在包含视图或必须由包含引用的单独文件中包含它图。

例如，假设我有一个包含两个下拉列表的视图组件。第一个下拉列表中的选择确定第二个下拉列表中显示的项目。当然，这在Javascript中很容易处理，但我在哪里放呢？

Answer 1

根据我对ASP.NET 5 View Components的经验，我想说最好的办法是将它们隔离在一个地方，以便在长期项目中轻松管理。

在我的一个ASP.NET项目中，我开发了像这样的View Components结构：

视图，后端代码和模型都集中在一个位置，因此当您在文件夹中移动时，您确信可以移动整个组件。此外，当你正在修改它们时，你可以快速访问它们的所有部分。

在这样的结构中放置与组件高度耦合的JavaScript将是方便的。您只需在组件文件夹下创建文件，然后编写将JS文件复制到wwwroot的 GULP TASK 即可。从那时起，您将能够使用标准语法链接组件的.cshtml上的JavaScript代码：

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

为了在我的项目中获得这样的结构，我扩展了Razor，以便能够在适当的位置搜索我的组件的CSHTML。为此，我在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());
    }
}

并且ViewLocationExpander类是：

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);
    }
}

然后，你调用这样的组件（来自任何.cshtml视图）：

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