como adicionar script src dentro de uma visualização ao usar Layout

Quero incluir uma referência de javascript como:

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

Se eu tenho uma Visão do Razor, qual é a maneira correta de incluí-la sem ter que adicioná-la ao Layout (eu só preciso dela em uma única visão específica, não todas)

No aspx, poderíamos usar espaços reservados para conteúdo. Encontrei exemplos mais antigos usando aspx no mvc, mas não no modo de exibição Razor.

asp.net-mvc razor

— Dferraro
fonte

Basta adicionar a tag de script à sua visualização.

— jrummell de

Eu só quero adicionar o script ao meu modo de exibição, mas quando vejo o código-fonte na página que é criada, ele coloca as tags de script dentro do <body> do html em vez do <head>?

— dferraro

para navegadores mais recentes type = "text / javascript" não é necessário

— Mark Schultheiss

Respostas:

169

Dependendo de como você deseja implementá-lo (se houver um local específico onde você deseja os scripts), você pode implementar um @sectiondentro de seu _Layoutque permitiria adicionar scripts adicionais da própria visualização, enquanto ainda retém a estrutura. por exemplo

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

Visão

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

Caso contrário, o que você tem está bom. Se você não se importa em ficar "alinhado" com a visão que foi gerada, você pode colocar a <script>declaração dentro da visão.

— Brad Christie
fonte

BTW, as seções são essencialmente os seus contentplaceholders aos quais você se referia. Veja o projeto da web MVC padrão e como eles colocam um título na página.

— Brad Christie

obrigado. Era isso que eu procurava - mas é possível fazer isso sem RenderSection? Você diz 'o que você tem está bom' - mas eu não tenho nada ainda ... Eu tentei colocar as referências do script no topo do .cshtml, mas o resultado é que as referências estão no <body>, mas deveriam estar na cabeça

— dferraro

@dferraro: então você precisa adicionar RenderSection("Scripts")ao seu layout (como faria com um espaço reservado) e definir um @section Scripts {}dentro da visualização. Em algum ponto, uma modificação no "mestre" (_layout) é iminente. Você não pode simplesmente definir algo dentro de uma visualização e dizer "coloque-o entre <head>para mim" (a menos que você queira entrar em um script que adiciona um script)

— Brad Christie

+1. Além disso, @dferraro, uma coisa melhor seria colocar as referências a jQuery e RenderSection antes de </body> e não na cabeça. Leitura antiga, mas relevante: developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5

— MikeSmithDev

Se o seu script não estiver na Scriptspasta, talvez seja necessário habilitar o acesso a ele: stackoverflow.com/questions/24763493/…

— Homer

Se você estiver usando o mecanismo de visualização Razor, edite o arquivo _Layout.cshtml. Mova o @ Scripts.Render ("~ / bundles / jquery") presente no rodapé para a seção do cabeçalho e escreva o código javascript / jquery como desejar:

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

— Dilip Nannaware
fonte

Você pode adicionar as tags de script como usamos no asp.net ao fazer as validações do lado do cliente como abaixo.

@{
    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>

— Santhosh kumar Vadlamani
fonte

para navegadores mais recentes type="text/javascript"não é necessário

— Mark Schultheiss