MVC where to put js reference for our cshtml file?

Question

In our existing web application we have done it at the starting of .cshtml page:

@using Carwale.UI.PresentationLogic;
@model Carwale.Entity.ViewModels.HomeModel
@{
    ViewBag.CustomJS = "~/Views/StaticPartials/HomeScripts.cshtml";
    ViewBag.CustomCSS = "~/Views/StaticPartials/HomeCss.cshtml";
}

And in our "~/Views/StaticPartials/HomeScripts.cshtml", we have:

@model Company.Entity.ViewModels.HomeModel
<script>var landingPage = true;</script>
<script type="text/javascript" src="@(!string.IsNullOrWhiteSpace(ViewBag.staticUrl) ? "http://st.com" + ViewBag.stagingPath : "")/js/home.js?201605021628098010"></script>

I am getting render blocking javascript suggestion from various performance website.

Can I improve this somehow? I read that this should be in some javascript section on the bottom of the page to improve the page load time.

Do you need any help further? – monstertjie_za May 16 '16 at 19:48 — monstertjie_za, May 16 '16 at 19:48

score 1 · Answer 1 · edited May 23 '17 at 11:44

1

I would recommend you use sections within MVC. Here is another article explaining the use of sections.

Here is an example:

If you have a master layout file, that defines all of your main layouts for the website, do the following. Place this within your body tag of your master layout.

@RenderSection("scripts", false)

Then, every page/view there after that "inherits" from this master layout file, you can use this section to add your Javascript references, as follow:

@section scripts{
    Scripts.Render("~/Scripts/YourCustomFolder/SomeJSFile.js")
}

edited May 23 '17 at 11:44

Community

1
1

answered May 16 '16 at 06:23

monstertjie_za

7,277
8
42
73

I will give it a try in the evening. Don't have the source code. Once i verify this, i will accept the answer :) – Sahil Sharma May 16 '16 at 07:21
No worries, let us know if you need any help. – monstertjie_za May 16 '16 at 07:22

score 1 · Answer 2 · answered May 16 '16 at 06:25

When browsers hit a script tag they will stop page rendering until the script is downloaded, parsed and executed.

A best practice is to include script references just before the closing body tag. This allows the browser to download and start rendering the page markup as soon as possible without waiting for scripts.

Brendan Vogt · Answer 3 · 2016-05-16T06:46:20.450

For me the best place to add all JavaScript is almost at the end of the HTML document. Just before I close off the body tag I insert all Javascipt references and Javascript custom code. I would first like to see my HTML code get loaded and then Javascript-related stuff after this. Loading Javascript can take a while, so it is best to load it last on the page:

<!DOCTYPE html>
<html lang="en">
     <head>
          <meta charset="utf-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <title>@ViewBag.MetaTitle</title>
          @Styles.Render("~/bundles/css")
     </head>
     <body>
          @RenderBody()
          @Scripts.Render("~/bundles/js")
          @RenderSection("scripts", false)
     </body>
</html>

I normally first add a reference to the Javascript libraries:

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

And then I add all my custom Javascript code after I have referenced these libraries:

@RenderSection("scripts", false)

Where in your .cshtml page you "inject" your custom Javascript code probably doesn't matter. I normally first add all of my HTML code and then at the bottom of my view I will add my Javascript code like this:

<h1>Test Page</h1>
<p>Test page paragraph</p>

@section scripts {
     <script>
     </script>
}

I hope this helps.

MVC where to put js reference for our cshtml file?

3 Answers3