jak dodać src skryptu do widoku podczas korzystania z układu

101

Chcę dołączyć odwołanie do javascript, takie jak:

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

Jeśli mam widok Razor, jaki jest właściwy sposób włączenia tego bez konieczności dodawania go do układu (potrzebuję go tylko w jednym określonym widoku, a nie we wszystkich)

W aspx możemy użyć posiadaczy miejsca zawartości .. Znalazłem starsze przykłady przy użyciu aspx w mvc, ale nie w widoku Razor.

asp.net-mvc razor

— dferraro
źródło

Po prostu dodaj tag script do swojego widoku.

— jrummell

Chcę tylko dodać skrypt w moim widoku, ale kiedy wyświetlam źródło na utworzonej stronie, umieszcza on tagi skryptu wewnątrz elementu <body> HTML zamiast <head>?

— dferraro

dla nowszych przeglądarek wpisz = "text / javascript" nie jest potrzebne

— Mark Schultheiss

Odpowiedzi:

172

W zależności od tego, jak chcesz to zaimplementować (jeśli była określona lokalizacja, w której chciałeś skrypty), możesz zaimplementować @sectionw swoim, _Layoutco umożliwiłoby dodanie dodatkowych skryptów z samego widoku, zachowując jednocześnie strukturę. na przykład

_Układ

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

Widok

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

W przeciwnym razie to, co masz, jest w porządku. Jeśli nie masz nic przeciwko temu, że jest on „wbudowany” w widok, który został wyprowadzony, możesz umieścić <script>deklarację w widoku.

— Brad Christie
źródło

Swoją drogą, sekcje to zasadniczo elementy zastępcze treści, o których mówiłeś. Zobacz domyślny projekt sieciowy MVC i sposób umieszczania nagłówka na stronie.

— Brad Christie,

dzięki. Tego właśnie szukałem - ale czy można to zrobić bez RenderSection? Mówisz `` to, co masz, jest w porządku '' - ale jeszcze nic nie mam ... Próbowałem umieścić odniesienia do skryptu na początku pliku .cshtml, ale wynik jest taki, że odwołania znajdują się w <body>, ale powinny być w głowie

— dferraro

@dferraro: następnie musisz dodać RenderSection("Scripts")do swojego układu (tak jak w przypadku symbolu zastępczego), a następnie zdefiniować @section Scripts {}w widoku. W pewnym momencie zmiana "master" (_layout) jest nieuchronna. Nie możesz po prostu zdefiniować czegoś w widoku i powiedzieć „umieść to pomiędzy <head>mną” (chyba że chcesz wejść do scenariusza, który dodaje scenariusz)

— Brad Christie,

+1. Również @dferraro byłoby lepiej umieścić odniesienia do jQuery i RenderSection przed </body> i wcale nie w głowie. Stara, ale trafna lektura: developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5

— MikeSmithDev

Jeśli Twojego skryptu nie ma w Scriptsfolderze, może być konieczne włączenie do niego dostępu: stackoverflow.com/questions/24763493/ ...

— Homer

Jeśli używasz aparatu widoku Razor, edytuj plik _Layout.cshtml. Przenieś @ Scripts.Render („~ / bundles / jquery”) obecny w stopce do sekcji nagłówka i napisz kod javascript / jquery, jak chcesz:

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

— Dilip Nannaware
źródło

Możesz dodać tagi skryptu, tak jak używamy w asp.net podczas przeprowadzania walidacji po stronie klienta, jak poniżej.

@{
    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
źródło

dla nowszych przeglądarek type="text/javascript"nie jest potrzebny

— Mark Schultheiss