How to avoid repeating same scripts and styles sections in MVC views

Question

I have an MVC 5 project (.NET Framework) where a set of Views have the same set of @section styles and @section scripts blocks.

@section styles {
    <link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
    <link href="~/Content/DataTables/css/buttons.dataTables.css" rel="stylesheet" />
}
@section scripts {
    <script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
    <script src="~/Scripts/DataTables/dataTables.buttons.js"></script>
    <script src="~/Scripts/DataTables/buttons.print.js"></script>
    <script src="~/Scripts/DataTables/buttons.html5.js"></script>
    <script src="~/Scripts/jszip.js"></script>
    <script>
        $(() => {
            // source js file defined in BundleConfig.cs
            TableController.init();
        });
    </script>
}

Just as the one TableController.init() jQuery function rests in a single location and can be called in any View I choose, is there a way I can have only a single definition of this set of <link> and <script> elements be able to call it in any view I choose? The reason I did not put this in the _Layout file is that I might not want it on all Views -- just most of them.

I don't know what this technique is called, or even if it is possible in MVC. I just figured that it would be a useful way to avoid repeating myself. Furthermore, if I wanted to make any tweaks, I would only make a change in one place and not multiple Views.

Is there a technique I can use to achieve this goal?

You can define these in different _Layout and you can specify which layout a view would use. You can also [nest layouts](https://stackoverflow.com/questions/21026917/nested-layouts-for-mvc5). — Jasen, May 11 '18 at 23:25
@StephenMuecke -- There's the noun I needed. There are a lot of answers to process, but this might be the trick. https://stackoverflow.com/questions/13660868/how-to-include-script-bundle-in-scripts-section-in-view — RandomHandle, May 12 '18 at 04:27

pool pro · Accepted Answer · 2018-05-14T20:56:02.173

You can create Bundles for anything you want, You can create a Bundle for an area or a single page.

//scripts
    bundles.Add(new ScriptBundle("~/bundles/Custom").Include(
                    "~/Scripts/Custom.js"));
    bundles.Add(new ScriptBundle("~/bundles/Custom2").Include(
                    "~/Scripts/Custom2.js"));
//styles
    bundles.Add(new StyleBundle("~/Content/Custom").Include(
                           "~/Content/Custom.css"));
    bundles.Add(new StyleBundle("~/Content/Custom2").Include(
                           "~/Content/Custom2.css"));

Now you can separate theese scripts and styles and add them only on page that you need.

Also I suppose it's good to define 2 sections in your _Layout.cshtml in head tag.

<head>
    //other scripts and styles here
    @RenderSection("scriptslib", required: false)
    @RenderSection("csslib", required: false)
</head>

So now in your Views (Cabinet.cshtml and AdminPanel.cshtml) you can place your libs where they suppose to be like this:

@section scriptslib{
    @Scripts.Render("~/bundles/Custom")
    @Scripts.Render("~/bundles/Custom2")
    }

By doing this it allows you to build complete bundles for sections or pages to use how you wish.

**

EDIT: thanks Adrian

** You can add bundles as folders for future scripts using wildcards so you do not have to recompile, aswell as place a custom.js and custom.css in each folder for future edits or overrides you may want to add.

ADDING A CUSTOM FOLDERS:

Scripts
- Custom
  - YourFiles.js
  - YourFiles.min.js
Content
- Custom
  - YourFiles.css
  - YourFiles.min.css

Custom Bundles:

    bundles.Add(new ScriptBundle("~/bundles/Custom").Include(
                    "~/Scripts/Custom/*.js"));
    bundles.Add(new ScriptBundle("~/bundles/Custom2").Include(
                    "~/Scripts/Custom/*.*.js"));

    bundles.Add(new StyleBundle("~/Content/Custom").Include(
               "~/Content/Custom/*.css"));
    bundles.Add(new StyleBundle("~/Content/Custom2").Include(
               "~/Content/Custom/*.*.css"));

Now anything you place in those folders will be processed with a IIS App restart, I usually add a function to my applications to be able to perform the App Restart.

Hope this helps

Unless IIS is reset the files you add are not loaded by the application. In order for the files to be noticed the Application must restart to load all files from the folder, — pool pro, Dec 06 '19 at 05:36

score 1 · Answer 2 · answered May 12 '18 at 09:34

1

Try the pool pro's idea, it's a great answer. For me I simply prefer to use partial views for referencing it.

Why ?

You need to compile the code again once you modify the c# file and add a another CSS or JS file. If you use partial views you don't need to compile the project again, you can just change views and upload.

answered May 12 '18 at 09:34

Anirudha Gupta

9,073
9
54
79

Very good point, I had thought of this before and had not placed it in my answer, You can use folders and wild cards for your sections, so if you need to add you just place it in the folder, Usually ill always add a blank custom.js or custom.css file for adding stuff later on. Only issue is restarting app to get the files added. I usually add this to my applications to restart IIS pool. – pool pro May 14 '18 at 20:03

score 0 · Answer 3 · answered May 12 '18 at 00:47

Not pretty: You could use partialview and use it in views you want your links.
Put your partialview in your shared folder.
Then call this inside your view @await Html.PartialAsync("_SomeNamePartial")

More beautiful: Put all css in 1 file and all javascript in 1 file.

Best way and as it should be: Your way of doing it, @section is there for a reason.

How to avoid repeating same scripts and styles sections in MVC views

3 Answers3