bagaimana menambahkan script src di dalam View saat menggunakan Layout

101

Saya ingin menyertakan referensi javascript seperti:

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

Jika saya memiliki Razor View, apa cara yang tepat untuk memasukkan ini tanpa harus menambahkannya ke Layout (saya hanya membutuhkannya dalam satu View tertentu, tidak semuanya)

Di aspx, kita bisa menggunakan tempat konten .. Saya menemukan contoh lama menggunakan aspx di mvc tapi tidak Razor view ..

asp.net-mvc razor

— dferraro.dll
sumber

Cukup tambahkan tag skrip ke tampilan Anda.

— jrummell

Saya hanya ingin menambahkan skrip dalam tampilan saya, tetapi ketika saya melihat sumber pada halaman yang dibuat, itu menempatkan tag skrip di dalam <body> dari html, bukan di <head>?

— dferraro

untuk browser yang lebih baru type = "text / javascript" tidak diperlukan

— Mark Schultheiss

Jawaban:

172

Bergantung bagaimana Anda ingin menerapkannya (jika ada lokasi tertentu yang Anda inginkan skripnya), Anda dapat menerapkan di @sectiondalam Anda _Layoutyang memungkinkan Anda menambahkan skrip tambahan dari tampilan itu sendiri, sambil tetap mempertahankan struktur. misalnya

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

Melihat

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

Jika tidak, apa yang Anda miliki baik-baik saja. Jika Anda tidak keberatan itu menjadi "sebaris" dengan tampilan yang merupakan keluaran, Anda dapat menempatkan <script>deklarasi dalam tampilan.

— Brad Christie
sumber

BTW, bagian pada dasarnya adalah pemegang konten Anda yang Anda maksud. Lihat proyek web MVC default dan bagaimana mereka menempatkan judul pada halaman.

— Brad Christie

Terima kasih. Inilah yang saya cari - tetapi apakah mungkin melakukan ini tanpa RenderSection? Anda mengatakan 'apa yang Anda miliki baik-baik saja' - tetapi saya belum memiliki apa-apa ... Saya mencoba meletakkan referensi skrip di bagian atas .cshtml, tetapi hasilnya adalah referensi ada di <body> tetapi seharusnya berada di kepala

— dferraro

@dferraro: maka Anda perlu menambahkan RenderSection("Scripts")ke tata letak Anda (seperti Anda menggunakan placeholder) dan kemudian menentukan a @section Scripts {}dalam tampilan. Di beberapa titik, modifikasi pada "master" (_layout) akan segera terjadi. Anda tidak bisa begitu saja mendefinisikan sesuatu dalam tampilan dan mengatakannya "letakkan di antara <head>saya" (kecuali jika Anda ingin masuk ke skrip yang menambahkan skrip)

— Brad Christie

+1. Juga @dferraro, hal yang lebih baik adalah meletakkan referensi ke jQuery dan RenderSection sebelum </body> dan bukan di head sama sekali. Bacaan lama tapi relevan: developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5

— MikeSmithDev

Jika skrip Anda tidak ada di dalam Scriptsfolder, Anda mungkin juga perlu mengaktifkan akses ke sana: stackoverflow.com/questions/24763493/…

— Homer

Jika Anda menggunakan mesin tampilan Razor, edit file _Layout.cshtml. Pindahkan @ Scripts.Render ("~ / bundles / jquery") yang ada di footer ke bagian header dan tulis kode javascript / jquery seperti yang Anda inginkan:

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

— Dilip Nannaware
sumber

Anda dapat menambahkan tag skrip seperti yang kami gunakan di asp.net sambil melakukan validasi sisi klien seperti di bawah ini.

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

untuk browser yang lebih baru type="text/javascript"tidak diperlukan

— Mark Schultheiss