How to include script bundle in scripts section in view

36
votes

I have a layout with an @RenderSection("scripts") section and I have a bundle that would need to be included in this section for some views. I thought that just doing this in the view would work, but it's not rendering the scripts.

@section scripts {
    @Scripts.Render("~/bundles/myBundle")  
}

In my view, how can I include a bundle to the scripts section?

Layout

@Scripts.Render("~/bundles/jquery", "~/bundles/scripts")
@RenderSection("scripts", required: false)

View

@section scripts {
    @Scripts.Render("~/bundles/movie")  
}
4
asp.net-mvcasp.net-mvc-4
This should definitely work and is supported. I would check for typos in the bundle name - e.g. makes sure its ~/bundles/movie and not ~/scripts/movie in your BundleConfig. – Mrchief
I'm incredibly late here, but apparently even in VS2015 this can happen. The code is right, but I had to restart VS to get it rendering correctly. – Lathejockey81

4 Answers

20
votes

Why mix the rendersection with bundling? If you choose to down the route of bundling, you can simply put your scripts in .JS file ,put it in their own bundle if you like and call that bundle on your view. For ex: 

     bundles.Add(new ScriptBundle("~/bundles/myscripts").Include(
                    "~/Scripts/myscript1.js",
                    "~/Scripts/myscript2.js"));

then view will have the following:

    @Scripts.Render("~/bundles/myscripts")

Also make sure your Web.config has compilation debug set to false like below:

  <compilation debug="false" />

it makes sure the scripts are bundled and minified.

Update

Based on comments and my recent experience, I can see why would we want to use the two together. Perfect case of learning in the community! :) So, if you decide to come back for refactoring, I would make sure there are no typos to begin with. If it still does not work, please let me know what the problem is and I will update the answer accordingly. Thanks everyone!

38
votes

Try below mentioned solution inside the View.

View 

@section Scripts{
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/movie")"></script>
}
2
votes

I can not replicate the issue you are having

@section scripts {
    @Scripts.Render("~/bundles/movie")  
}

renders fine with no issue (and respects the debug flag) i would agree with @Mrchref and revisit your paths

on the other hand, you could use something like this:

public static class Helpers
{
    public static HtmlString StaticContent(this System.Web.Mvc.UrlHelper url, string contentPath)
    {
        return new HtmlString(System.Web.Optimization.Scripts.Render(contentPath).ToString());
    }
}

Usage:

@section Scripts{
    @Url.StaticContent("~/assets/js/jquery")
}

i would advise not to use it as is, You would need to find another solution for System.Web.Optimization.Scripts.Render(contentPath).ToString() since it basically renders the same function you are using (and not working).

You should play around with System.Web.Optimization.BundleTable.Bundles and see if you can query for both version, check the debug flag, and serve the correct content.

1
votes

I believe a new build would solve your problem. Please follow these steps if not:

  • Step 1: add this into BundleConfig.cs

    bundles.Add(new ScriptBundle("~/bundles/common").Include("~/Scripts/common.js"));

  • Step 2: add this line in your view/layout

    @Scripts.Render("~/bundles/common")

  • Step 3: build your project and run it.