How do I call Scripts.Render inside of a javascript blog in MVC?

Question

I am adding SystemJS to my project but I still need to make use of some of the bundles I've defined in BundleConfig.cs. I want to import dependencies using SystemJS, but I can't render my own code until those dependencies are loaded.

Here's my cshtml file

<html lang="en" ng-app="app">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My-App</title>

   @Scripts.Render("~/bundles/base") // SystemJS and polyfills

</head>

<body>
    <script>
       System.import("angular")
        .then(function () {

             // THIS IS WHERE I WOULD LIKE TO RENDER ANOTHER BUNDLE

          })
    </script>
<body>
</html>

Just shoving @Scripts.Render into the script block breaks the HTML script parsing -- because all that does is inject a bunch of script tags.

Please note that I am specifically looking for MVC cshtml solutions that will allow me to call my pre-defined bundles -- I'm hoping to avoid manually writing script imports for every file in my project.

related, though this specifically has to do with MVC script bundles — tcmoore, Sep 29 '17 at 17:59
no, it injects a separate script tag for every file in the bundle — tcmoore, Sep 29 '17 at 18:02
You can use webessentials to create a static bundled file and load it here. — Amit Kumar Singh, Sep 29 '17 at 18:03
okay, yes, I can make it bundle by default and then use the jquery.getScript from https://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js — tcmoore, Sep 29 '17 at 18:13

score 1 · Accepted Answer · answered Sep 29 '17 at 18:28

1

First, in order to load scripts dynamically inside your JavaScript, you're going to have to just have hard-coded path references. You can't use something like Scripts.Render, as you figured out.

However, this isn't really an issue if you understand how the bundling system works. The bundle you create, i.e. ~/bundles/base, is actually a route to that bundle. In other words, you can literally do something like:

 <script src="/bundles/base"></script>

And that bundled JavaScript will be included. So just use that route with your script loader.

answered Sep 29 '17 at 18:28

Chris Pratt

207,690
31
326
382

thank you! that's what I ended up doing actually -- using System.import no less – tcmoore Sep 29 '17 at 18:32
In my BundleConfig.cs I did this: "BundleTable.EnableOptimizations = false;" Because I don't want my files minified/bundled on my local test environment. When doing your solution it gets bundled anyway. Is there a way to retrieve the list of paths/files in a bundle as an array? – Simon Sondrup Kristensen Aug 02 '18 at 08:17

How do I call Scripts.Render inside of a javascript blog in MVC?

1 Answers1