我的 Javascript 应该去哪里查看组件？

Question

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

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

Answer 1

根据我使用 ASP.NET 5 视图组件的经验，我认为最好的办法是将它们隔离在一个地方，以便在长期项目中轻松管理它们。

在我的一个 ASP.NET 项目中，我开发了如下视图组件结构：

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

将与组件高度耦合的JavaScript也放在这样的结构中会很方便。您可以通过简单地在组件文件夹下创建文件，然后编写一个 GULP TASK 将 JS 文件复制到 wwwroot 来做到这一点。从那时起，您将能够使用标准语法在组件的 .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())