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

Answer 1

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 (ie 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