ASP.NET MVC 3 Razor: Include JavaScript File in the Head Tag

ASP.NET MVC 3 Razor: Include JavaScript file in the head tag

You can use Named Sections.

_Layout.cshtml

<head>
    <script type="text/javascript" src="@Url.Content("/Scripts/jquery-1.6.2.min.js")"></script>
    @RenderSection("JavaScript", required: false)
</head>

_SomeView.cshtml

@section JavaScript
{
   <script type="text/javascript" src="@Url.Content("/Scripts/SomeScript.js")"></script>
   <script type="text/javascript" src="@Url.Content("/Scripts/AnotherScript.js")"></script>
}

How to to include JavaScript into the page header MVC4

I'm sure in your _LayoutInner.cshtml you should have refered JS files similarly like this

<head>
<link href="@Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"></script>
</head>

To achieve your target you have to add two named sections into your _LayoutInner.cshtml pages head section like this-

<head>
<link href="@Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"></script>
 @RenderSection("JavaScript", required: false)
 @RenderSection("CSS", required: false)
</head>

Now in your other pages to include extra javascript or css pages use these named sections

@section JavaScript
{
   <script type="text/javascript"src="@Url.Content("~/Scripts/farbtastic/farbtastic.js")"></script>
   <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.tinycarousel.min.js")"></script>
}

@section CSS
{
  <link href="@Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
}

It is upto you whether to include different named sections for javascript and css.

Hope it helps!

How to use script tag in an ASP.NET Core MVC razor view

There are multiple problems with your code mostly from mixing jQuery and native JavaScript methods. You can make it work by fixing the 3 lines shown to use jQuery. Note that "this" refers to the element to which the event handler is attached, in this case the button.

$(document).ready(function() {
  // const btn = document.getElementById("#button"); <-- REMOVE
  $("#button").click(function() { // <-- CHANGE
    $(this).prop("disabled", true); // <-- CHANGE
    $(".submit-progress").removeClass("d-none");
  })
});

MVC3 Razor - Adding JavaScript and CSS files to document head

Check this question, best answer supposed to do what you need:
ASP.Net MVC 3 Razor: Include js file in Head tag

where do I put javascript in ASP.NET MVC Nested views?

It will work fine even if it's in the middle of the rendered page, but a better option is to put it in a scripts section.

In the view:

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

In the layout, wherever you want the scripts to go in the rendered page:

@RenderSection("scripts", required: false)

how to add script src inside a View when using Layout

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.

Is it possible to use razor syntax in Javascript files?

I found a razor engine RazorJS on nuget that solves @ in js files

The owner blog and explanations about the package abilities

The Nuget package

see more in this question

ASP.NET MVC 3 Razor: Include JavaScript File in the Head Tag