Where to place @Scripts.Render and @Styles.Render

2
votes

I am quite confused about where to place @Scripts.Render and @Styles.Render. Ideally I would put them all inside head section but unexpectedly, for example, @Scripts.Render("~/bundles/bootstrap") won't work at all unless I put it inside body section, after @RenderBody().

Same confusion for where to place @Mvc.RazorTools.BundleManager.Styles.Render() and @RenderSection("scripts", required: false).

A final word about them would be really appreciated.

p.s. There is another similar answer to this question but the only similarity is in the title as the problem was in missing files, not in placement. Also that question does not address both scripts AND styles.

Adding bundles for sake of completion:

bundles.Add(new ScriptBundle("~/bundles/bundlejquery").Include(
                    "~/Scripts/jquery-1.12.4.js",
                   "~/Scripts/jquery-ui-1.12.1.js",
                   "~/Scripts/jquery.validate.min.js",
                   "~/Scripts/jquery.validate.unobtrusive.min.js"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));
2
jquerycssasp.net-mvctwitter-bootstrap
Possible duplicate of Not sure where to place Scripts.Render for JQuery – Sankar

2 Answers

0
votes

I would advise you to put your @Styles.Render on the head section of your page. Doing so would let the browser render the page faster because it waits for all CSS files to load before rendering the page.

I would also advise you to put your @Scripts.Render before the closing tag of the page body. Doing so would allow the browser to render the UI in a flawless manner. Please do note that whenever a script executes (Web workers and Ajax calls are exempted), the UI thread stops (this causes long running scripts on some scenarios).

Addition:

<head>
 Render styles here
</head>
<body>

    Render jQuery Scripts
    Render Bootstrap Scripts
</body>
1
votes

First of all, you can put @Styles.Render and @Scripts.Render wherever you put script and style tags, so it is totally fine to put in header. Probably there is something else wrong that if you provide more information, it might help. you usually put @RenderSection("scripts", required: false) inside your master page(like the default _layout file). Then you can put 

@section script{
}

on your page then the content that you put inside this tag would be replaced with @RenderSection("scripts", required: false) on master page.

Note: you cannot put the @section on the partial page.