レイアウトの使用時にビュー内にスクリプトsrcを追加する方法


99

私は次のようなjavascriptリファレンスを含めたいです:

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

かみそりビューがある場合、レイアウトに追加せずにこれを含める適切な方法は何ですか(すべてではなく単一の特定のビューでのみ必要です)

aspxでは、コンテンツプレースホルダーを使用できます。mvcでaspxを使用していて、Razorビューでは使用していない古い例を見つけました。


1
ビューにスクリプトタグを追加するだけです。
jrummell 2013年

1
ビューにスクリプトを追加したいだけですが、作成されたページのソースを表示すると、スクリプトタグが<head>ではなくhtmlの<body>内に配置されますか?
dferraro 2013年

最近のブラウザではtype = "text / javascript"は必要ありません
Mark Schultheiss

回答:


169

実装方法に応じて(特定の場所にスクリプトが必要な場合)、@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>内に宣言を配置できます。


3
ところで、セクションは基本的にあなたが参照していたあなたのコンテンツプレースホルダーです。デフォルトのMVC Webプロジェクトと、それらがページに見出しを配置する方法を参照してください。
ブラッドクリスティ

ありがとう。これは私が探していたものでしたが、RenderSectionなしでこれを行うことは可能ですか?あなたは「あなたが持っているものは大丈夫です」と言いますが、まだ何もありません... .cshtmlの上部にスクリプト参照を配置しようとしましたが、結果は参照が<body>にありますが、それらは頭の中で
dferraro 2013年

3
@dferraro:次に、RenderSection("Scripts")(プレースホルダーのように)レイアウトに追加して@section Scripts {}、ビュー内でを定義する必要があります。ある時点で、「マスター」(_layout)の変更が差し迫っています。ビュー内で何かを定義してそれを「<head>私のためにそれを置く」と言うことはできません(スクリプトを追加するスクリプトにアクセスしたくない場合)
Brad Christie

2
+1。また、@ dferraroの方が良いのは、jQueryとRenderSectionへの参照を</ body>の前に置き、先頭にはまったく入れないことです。古いが関連する読み物:developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5
MikeSmithDev

1
あなたのスクリプトがされていない場合はScripts、フォルダ、あなたもそれへのアクセスを有効にする必要があります:stackoverflow.com/questions/24763493/...
ホーマー

12

Razorビューエンジンを使用している場合は、_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>

0

以下のようなクライアント側の検証を行いながら、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>

最近のブラウザ type="text/javascript"では必要ありません
Mark Schultheiss
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.