วิธีเพิ่ม script src ภายใน View เมื่อใช้ Layout

102

ฉันต้องการรวมการอ้างอิงจาวาสคริปต์เช่น:

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

ถ้าฉันมี Razor View วิธีใดที่เหมาะสมในการรวมสิ่งนี้โดยไม่ต้องเพิ่มลงใน Layout (ฉันต้องการเพียงมุมมองเดียวเท่านั้นไม่ใช่ทั้งหมด)

ใน aspx เราสามารถใช้ตัวยึดเนื้อหาได้ .. ฉันพบตัวอย่างเก่ากว่าที่ใช้ aspx ใน mvc แต่ไม่ใช่มุมมอง Razor ..

asp.net-mvc razor

— dferraro
แหล่งที่มา

เพียงเพิ่มแท็กสคริปต์ในมุมมองของคุณ

— jrummell

ฉันแค่ต้องการเพิ่มสคริปต์ในมุมมองของฉัน แต่เมื่อฉันดูซอร์สบนเพจที่สร้างขึ้นมันจะใส่แท็กสคริปต์ไว้ใน <body> ของ html แทน <head>?

— dferraro

สำหรับเบราว์เซอร์ล่าสุดให้พิมพ์ = "text / javascript" ไม่จำเป็น

— Mark Schultheiss

คำตอบ:

175

ขึ้นอยู่กับว่าคุณต้องการใช้งานอย่างไร (หากมีตำแหน่งเฉพาะที่คุณต้องการสคริปต์) คุณสามารถใช้งาน@sectionภายในไฟล์_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>

ดู

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

มิฉะนั้นสิ่งที่คุณมีก็ไม่เป็นไร หากคุณไม่คิดว่าจะเป็น "อินไลน์" กับมุมมองที่ส่งออกคุณสามารถวาง<script>คำประกาศไว้ในมุมมองได้

— แบรดคริสตี้
แหล่งที่มา

BTW ส่วนต่างๆเป็นตัวยึดเนื้อหาของคุณที่คุณอ้างถึง ดูโครงการเว็บ MVC เริ่มต้นและวิธีการวางหัวเรื่องบนหน้า

— Brad Christie

ขอบคุณ. นี่คือสิ่งที่ฉันกำลังมองหา - แต่เป็นไปได้ไหมที่จะทำสิ่งนี้โดยไม่ต้อง RenderSection คุณบอกว่า 'สิ่งที่คุณมีดี' - แต่ฉันยังไม่มีอะไรเลย ... ฉันพยายามวางการอ้างอิงสคริปต์ที่ด้านบนของ. cshtml แต่ผลลัพธ์คือการอ้างอิงอยู่ใน <body> แต่ควร อยู่ในหัว

— dferraro

@dferraro: จากนั้นคุณต้องเพิ่มRenderSection("Scripts")เค้าโครงของคุณ (เช่นเดียวกับที่คุณใช้ตัวยึดตำแหน่ง) จากนั้นกำหนด@section Scripts {}ภายในมุมมอง ในบางจุดการปรับเปลี่ยน "ต้นแบบ" (_layout) กำลังใกล้เข้ามา คุณไม่สามารถกำหนดบางสิ่งภายในมุมมองและบอกได้ว่า "วางไว้ระหว่าง<head>สำหรับฉัน" (เว้นแต่คุณต้องการเข้าสู่สคริปต์ที่เพิ่มสคริปต์)

— Brad Christie

+1. นอกจากนี้ @dferraro สิ่งที่ดีกว่าคือการใส่การอ้างอิงถึง jQuery และ RenderSection ก่อน </body> และไม่อยู่ในหัวเลย การอ่านที่เก่าแก่ แต่เกี่ยวข้อง: developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5

— MikeSmithDev

หากสคริปต์ของคุณไม่อยู่ในScriptsโฟลเดอร์คุณอาจต้องเปิดใช้งานการเข้าถึงด้วย: stackoverflow.com/questions/24763493/…

— Homer

หากคุณใช้ Razor view engine ให้แก้ไขไฟล์ _Layout.cshtml ย้าย @ Scripts.Render ("~ / bundles / jquery") ที่อยู่ในส่วนท้ายไปที่ส่วนหัวและเขียนโค้ด javascript / jquery ตามที่คุณต้องการ:

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

— ดิลิปแนนนาว
แหล่งที่มา

คุณสามารถเพิ่มแท็กสคริปต์เช่นเดียวกับที่เราใช้ใน asp.net ขณะทำการตรวจสอบความถูกต้องฝั่งไคลเอ็นต์ดังต่อไปนี้

@{
    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
แหล่งที่มา

type="text/javascript"ไม่จำเป็นต้องใช้เบราว์เซอร์รุ่นล่าสุด

— Mark Schultheiss