126

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..

3
  • 1
    Just add the script tag to your view. Commented Jan 11, 2013 at 18:54
  • 1
    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 <body> of the html instead of the <head> ? Commented Jan 11, 2013 at 19:03
  • for more recent browsers type="text/javascript" is not neede Commented Nov 12, 2019 at 12:50

4 Answers 4

209

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.

Sign up to request clarification or add additional context in comments.

7 Comments

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.
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 <body> but they should be in the head
@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 <head> for me" (unless you want to get in to a script that adds a script)
+1. Also @dferraro a better thing would be to put the references to jQuery and the RenderSection before the </body> and not in the head at all. Old but relevant reading: developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5
If your script is not in the Scripts folder then you might need to also enable access to it: stackoverflow.com/questions/24763493/…
|
13

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>

Comments

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>

1 Comment

for more recent browsers type="text/javascript" is not needed
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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.