how to add script src inside a View when using Layout

Question

I want to include a javascript reference like:

<script src="@Url.Content("~/Scripts/jqueryFoo.js")" type="text/javascript"></script>

If I have a Razor View, what is the proper way to include this without having to add it to the Layout (I only need it in a single specific View, not all of them)

In aspx, we could use content place holders.. I found older examples using aspx in mvc but not Razor view..

I just want to add the script in my view, but when i view source on the page that gets created, it puts the script tags inside the of the html instead of the ? — dferraro, Jan 11 '13 at 19:03
for more recent browsers type="text/javascript" is not neede — Mark Schultheiss, Nov 12 '19 at 12:50

score 204 · Accepted Answer · answered Jan 11 '13 at 18:52

204

Depending how you want to implement it (if there was a specific location you wanted the scripts) you could implement a @section within your _Layout which would enable you to add additional scripts from the view itself, while still retaining structure. e.g.

_Layout

<!DOCTYPE html>
<html>
  <head>
    <title>...</title>
    <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
    @RenderSection("Scripts",false/*required*/)
  </head>
  <body>
    @RenderBody()
  </body>
</html>

View

@model MyNamespace.ViewModels.WhateverViewModel
@section Scripts
{
  <script src="@Url.Content("~/Scripts/jqueryFoo.js")"></script>
}

Otherwise, what you have is fine. If you don't mind it being "inline" with the view that was output, you can place the <script> declaration within the view.

answered Jan 11 '13 at 18:52

Brad Christie

100,477
16
156
200

3

BTW, sections are essentially your contentplaceholders you were referring to. See the default MVC web project and how they place a heading on the page. – Brad Christie Jan 11 '13 at 18:57
thanks. This was what I was looking for - but is it possible to do this without the RenderSection? You say 'what you have is fine' - but I don't have anything yet... I tried putting the script references at the top of the .cshtml, but the result is the references are in the but they should be in the head – dferraro Jan 11 '13 at 19:04
3

@dferraro: then you need to add `RenderSection("Scripts")` to your layout (like you would a placeholder) and then define a `@section Scripts {}` within the view. At some point a modification to the "master" (_layout) is imminent. You can't just define something within a view and tell it "place it between `` for me" (unless you want to get in to a script that adds a script) – Brad Christie Jan 11 '13 at 19:06
2

+1. Also @dferraro a better thing would be to put the references to jQuery and the RenderSection before the
and not in the head at all. Old but relevant reading: http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/
– MikeSmithDev Jan 11 '13 at 19:15
1

If your script is not in the `Scripts` folder then you might need to also enable access to it: http://stackoverflow.com/questions/24763493/how-to-include-js-files-in-the-view-asp-net-mvc-4 – Homer Aug 23 '16 at 20:37
Solution to **add custom script optionally** with use of if script is defined, check [this](http://stackoverflow.com/a/7357102/2218697) – Shaiju T Sep 10 '16 at 12:09
Now I understand the concept of Sections. Very powerful. – jboi Jan 01 '19 at 11:47

score 13 · Answer 2 · answered Jan 21 '15 at 07:02

If you are using Razor view engine then edit the _Layout.cshtml file. Move the @Scripts.Render("~/bundles/jquery") present in footer to the header section and write the javascript / jquery code as you want:

@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
    $(document).ready(function () {
        var divLength = $('div').length;
        alert(divLength);
    });
</script>

score 9 · Answer 3 · answered Jun 19 '17 at 17:37

9

You can add the script tags like how we use in the asp.net while doing client side validations like below.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<script type="text/javascript" src="~/Scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(function () {
       //Your code
    });
</script>

answered Jun 19 '17 at 17:37

Santhosh kumar Vadlamani

150
1
5

for more recent browsers `type="text/javascript"` is not needed – Mark Schultheiss Nov 12 '19 at 12:49

score 0 · Answer 4 · edited Nov 03 '22 at 08:43

0

You should add datatable.js script on defer="defer"

<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js" defer="defer"></script>

edited Nov 03 '22 at 08:43

vahid tajari

1,163
10
20

answered Oct 25 '22 at 01:47

Ferhat Cengiz

1
2

how to add script src inside a View when using Layout

4 Answers4

_Layout

View

Linked

Related