Reference relative path inside JS config file in MVC

Question

I'm trying to incorporate this scanning software into an application.

The folder which contains all the necessary .js, .css and binary files is called Resources.

In my MVC app - I have placed the Resources file inside my Scripts folder.

In my .cshtml, I have the following:

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

Which loads the scripts successfully.

The issue I'm facing is the scripts themselves reference relative paths within the Resources folder.

In dynamsoft.webtwain.config.js - you can set the path to the resources folder - I have mine set to the following:

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

However when the page loads - I'm receiving 404 errors for some of the files because it's trying to literally interpret the path:

I have also tried the following but with no luck:

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

score 3 · Accepted Answer · answered Oct 03 '18 at 01:38

As far as I know you can't use relative paths starting with tilde (~) in separate JS files because @Url.Content() helper and ASP.NET relative paths only work inside Razor view page, but you can pass the relative path by creating root path in JS global scope (i.e. Razor view page's <script> tag) like this:

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

Then you can include the path inside JS files using that variable:

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

Or simply mentioning full path & pass it:

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

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

Another alternative is using custom JS view engine together with file handler for JS scripts like example below:

// 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");

References:

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

Returning razor-parsed Javascript as a ViewResult from a controller

Mentioning the full path as `var resourcesPath = '@Url.Content("~/Scripts/Resources")';` worked - thanks! — TomSelleck, Oct 03 '18 at 11:16

Reference relative path inside JS config file in MVC

1 Answers1