参考视图文件夹中的 JavaScript 文件 - MVC 5答案

【问题标题】：Reference JavaScript Files that are in the views folder - MVC 5参考视图文件夹中的 JavaScript 文件 - MVC 5
【发布时间】：2017-03-22 14:56:09
【问题描述】：

将与一个页面或视图唯一关联的 JavaScript 文件放在该页面或视图所在的同一文件夹中是我公司的一项标准。现在我们正在迁移到 MVC，我们希望继续这样做。例如，如果有一个文件

~/Views/Customer/CustomerMgmt.cshtml

我需要能够引用以下关联的脚本文件：

~/Views/Customer/CustomerMgmt.js

此 js 文件具有仅与 CustomerMgmt.cshtml 相关的功能，该文件不会被共享，因此其他消费者不会使用它。如果我使用以下内容引用 JavaScript 文件，则会失败并出现 404 错误：

<script type = "text/JavaScript" src = "@Url.Content( "~/Views/Customer/CustomerMgmt.js" )">< /script>

我研究后尝试的解决方案包括：

将 JavaScript 引用添加到 BundlerConfig.RegisterBundles 并在 CsHtml 中使用 Scripts.Render：我仍然收到 404 错误。
去掉~/views/web.config自带的过滤器：

" verb="" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />

此选项允许我参考 ~/Views/Customer/CustomerMgmt.js，但它不安全

.js" verb="" preCondition="integratedMode" type="System.Web.StaticFileHandler" />

我仍然收到 404 错误。

我选择使用以下修改 ~/views/web.config 的说明：

进行此更改后，我收到 500 错误和以下（简要）：

检测到不适用于集成托管管道模式的 ASP.NET 设置

我收到了以下建议：

一个。将配置迁移到 system.webServer/handlers 部分

b.通过设置、

忽略此错误

c。将应用切换到经典模式应用池

使用选项“b”后，一切似乎都正常，我可以参考 ~/Views/Customer/CustomerMgmt.js，但我看到一些帖子表明这不是最好的方法。

我的问题是：

对于这种情况，最好的方法是什么？我正在使用 MVC 5.2.3
将唯一关联的 js 文件与视图放在同一文件夹中的做法是否被视为不好的做法？此文件将仅由特定视图使用，我们不想弄乱 ~/Scripts 文件夹（或其中的子文件夹）。

我知道我也可以创建一个新的文件夹结构，如“~/ViewScripts/...”，并将相关的 js 文件放在那里。如有必要，我会这样做，但如果可能的话，我希望继续遵守公司标准并将仅由特定视图使用的文件与该视图一起放置。

提前感谢大家。我研究的一些项目包括：

【问题讨论】：

您是否对每个 JavaScript 文件进行单元测试？这是SPA吗？
我还没有为这个案例创建测试。当我为关联的 js 创建测试时，它们是分开的（我不知道这是否是错误的方法）。这个应用程序会有多个页面，都是 MVC。
没有单元测试，也没有SPA。因此，在 cshtml 旁边放置单独的 js 文件是没有意义的，只是您可以轻松导航。为什么不直接将这些脚本放在特定的 cshtml 中？
谢谢@win。许多视图都有足够的关联代码，值得将该代码保存在单独的文件中。将相关的 JavaScript 代码放在单独的文件中也是我们遵循的标准。我目前能够引用该分隔文件，它位于 [Views] 文件夹中，但我怀疑我是否采用了最佳方法。
@JF 请问您是否对此有解决方案，因为我刚刚加入的一家公司正在着手进行类似的任务

【解决方案1】：

从this forum 我设法获得了一些似乎可以完成这项工作的代码。我在 ViewComponent 中使用它。我有一个组件文件夹，想将所有文件合并到一个文件夹中，例如

假设命名约定一致，我用这个加载它，它不需要对 web.config 进行任何更改，也不需要打开客户端来加载其他 .js 文件。

<script>
    @{ Html.RenderPartial(Regex.Replace(ViewContext.ExecutingFilePath, @"\.[^.]+$", @".js")); }
</script>

【讨论】：