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

99

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
1
Basta adicionar a tag de script à sua visualização.
jrummell de
1
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
3
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
3
@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
2
+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
1
Se o seu script não estiver na Scriptspasta, talvez seja necessário habilitar o acesso a ele: stackoverflow.com/questions/24763493/…
Homer
12

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
0

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