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 — thomasmost
– thomasmost, Commented Sep 29, 2017 at 17:59
no, it injects a separate script tag for every file in the bundle — thomasmost
– thomasmost, Commented Sep 29, 2017 at 18:02
You can use webessentials to create a static bundled file and load it here. — Amit Kumar Singh
– Amit Kumar Singh, Commented Sep 29, 2017 at 18:03

Chris Pratt · Accepted Answer · 2017-09-29 18:28:59Z

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, 2017 at 18:28

Chris Pratt

240k37 gold badges414 silver badges469 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

thomasmost Over a year ago

thank you! that's what I ended up doing actually -- using System.import no less

Simon Sondrup Kristensen Over a year ago

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?

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related