在 MVC 中引用 JS 配置文件中的相对路径

Question

我正在尝试将this scanning 软件合并到应用程序中。

包含所有必要的.js、.css 和二进制文件的文件夹称为Resources。

在我的 MVC 应用程序中 - 我已将 Resources 文件放在我的 Scripts 文件夹中。

在我的.cshtml 中，我有以下内容：

@section scripts {
    <script src="~/Scripts/Resources/dynamsoft.webtwain.config.js"></script>
    <script src="~/Scripts/Resources/dynamsoft.webtwain.initiate.js"></script>
}

成功加载脚本。

我面临的问题是脚本本身引用了Resources 文件夹中的相对路径。

在dynamsoft.webtwain.config.js - 你可以设置资源文件夹的路径 - 我的设置如下：

Dynamsoft.WebTwainEnv.ResourcesPath = '~/Scripts/Resources';

但是当页面加载时 - 我收到一些文件的 404 错误，因为它试图从字面上解释路径：

我也尝试了以下方法，但没有成功：

Dynamsoft.WebTwainEnv.ResourcesPath = '@Url.Content("~/Scripts/Resources")';

Answer 1

据我所知，您不能在单独的 JS 文件中使用以波浪号 (~) 开头的相对路径，因为 @Url.Content() 助手和 ASP.NET 相对路径仅在 Razor 视图页面中有效，但您可以通过通过在 JS 全局范围（即 Razor 视图页面的 <script> 标记）中创建根路径的相对路径，如下所示：

<script>
    var baseUrl = '@Url.Content("~")';
</script>

然后您可以使用该变量将路径包含在 JS 文件中：

// custom JS file
if (typeof baseUrl !== 'undefined') {
    Dynamsoft.WebTwainEnv.ResourcesPath = baseUrl + '/Scripts/Resources';
}

或者只是提到完整路径并传递它：

@* Razor page *@
<script>
    var resourcesPath = '@Url.Content("~/Scripts/Resources")';
</script>

// custom JS file
if (typeof resourcesPath !== 'undefined') {
    Dynamsoft.WebTwainEnv.ResourcesPath = resourcesPath;
}

另一种选择是使用自定义 JS 视图引擎和 JS 脚本的文件处理程序，如下例所示：

// custom JS engine
public class CustomJSEngine : BuildManagerViewEngine
{
    public CustomJSEngine()
    {
        ViewLocationFormats = new[]
        {
            "~/Scripts/{0}.js",
            "~/Scripts/Resources/{0}.js"
        };

        FileExtensions = new[]
        {
            "js"
        };
    }

    protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)
    {
        var view = new RazorView(controllerContext, viewPath,
                                 layoutPath: masterPath, runViewStartPages: true, viewStartFileExtensions: FileExtensions,
                                 viewPageActivator: ViewPageActivator);
        return view;
    }
}

// put these lines below inside Application_Start()
RazorCodeLanguage.Languages.Add("js", new CSharpRazorCodeLanguage());
ViewEngines.Engines.Add(new CustomJSEngine());

// add this line if necessary
WebPageHttpHandler.RegisterExtension(".js");

参考资料：

@Url.Content in separate javascript file using ASPNET MVC 3 and Razor

Returning razor-parsed Javascript as a ViewResult from a controller