レイアウト上のスクリプトをビューに伝播できますか？

layoutのスクリプトに問題がありますので、私は@RenderSection("scripts",をやっていることを理解しようとしています。レイアウト上のスクリプトをビューに伝播できますか？

レイアウトにJquery/Jquery.UI（js/css）を置くことができますので、すべてのビューに配置する必要はありませんか？なぜなら私はLayout上のheadタグの内側に配置しようとしていて、viewはそれを見なかったからです。

ここは私のレイアウトです。

あなたは、スクリプトのセクションでCSSファイルを含むと <html>を複製し、スクリプトを複製、文書の外にスクリプトをレンダリングするなど、あなたのコードを持ついくつかの問題を、持っている

<html> 
<head> 
    <title>@ViewBag.Title</title> 
</head> 
<body> 
    <h1>Test Layout</h1> 
    <div> 
     @RenderBody() 
    </div> 
</body> 
</html> 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 
@RenderSection("scripts", required: false)

そして、私の見る

@{ 
    ViewBag.Title = "TreeDetails"; 
    Layout = "~/Views/Shared/_LayoutTest.cshtml"; 
} 
<html> 
<head> 
    <title>@ViewBag.Title</title> 
</head> 
<body> 
    <h2>TEST PAGE</h2> 

    <div id="dialog" title="Basic dialog"> 
     <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
    </div> 
    <button id="opener">Open Dialog</button> 

</body> 
</html> 

@section scripts { 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

    <script> 
     // Your code goes here. 
     $(document).ready(function() { 
      console.log("before dialog"); 
      $("#dialog").dialog({ autoOpen: false }); 
      console.log("after dialog"); 

      $("#opener").click(function() { 
       $("#dialog").dialog("open"); 
      }); 
     }) 
    </script> 
}

出典

2016-06-21 Juan Carlos Oropeza

'@RenderSection（...） 'を''タグの直前に移動します。あなたのcssファイルは、 ''タグの中に別々の '@RenderSection（" styles "、required：false）'でなければならないことにも注意してください。また、@section scripts {' –

@StephenMueckeの中にそれを入れることで、あなたの繰り返しの' '@ Scripts.Render（"〜/ bundles/jquery "）'レイアウトの 'head'にすべてのスクリプト/ cssを宣言すると、' @ Scripts.Render（..） '行は必要ありませんか？ –

はい、ビュー固有のスクリプトなどを追加するためにはまだそれらを持っているはずです。しかし '@RenderSection（" styles "、false）'が ''に、 '@RenderSection（" styles "、false）'が ''の終了タグの直前にあることが推奨されていますドキュメント） –

、<head>とビュー内には<body>のタグがあります。

レイアウトの基本的な構造は

<html> 
<head> 
    <title>@ViewBag.Title</title> 
    .... 
    // Add style sheets common to all views using this layout 
    @Styles.Render("~/Content/css") 
    // Add the place holder for any view specific css files 
    @RenderSection("styles", required: false) 
    // Include modernizr 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
<body> 
    <h1>Test Layout</h1> 
    <div> 
     @RenderBody() 
    </div> 
    // Add js files common to all views using this layout 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    // Add the place holder for any view specific js files 
    @RenderSection("scripts", required: false) 
</body> 
</html>

及び図

@{ 
    ViewBag.Title = "TreeDetails"; 
    Layout = "~/Views/Shared/_LayoutTest.cshtml"; 
} 
<h2>TEST PAGE</h2> 
<div id="dialog" title="Basic dialog"> 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 
<button id="opener">Open Dialog</button> 

// View specific style sheets 
@section styles { 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
} 

// View specific scripts 
@section scripts { 
    // Note: don't repeat jquery-{version}.js 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script> 
     console.log("before dialog"); 
     $("#dialog").dialog({ autoOpen: false }); 
     console.log("after dialog"); 
     $("#opener").click(function() { 
      $("#dialog").dialog("open"); 
     }) 
    </script> 
}

注すべきである：スクリプトがレンダリングされているので$(document).ready(function() {の使用は、この場合、厳密には必要ではありません閉じた</body>タグの直前で、@Scripts.Render(...)と@RenderSection("scripts", required: false)をレイアウトの<head>タグに移動する場合は、それが必要となるだろう。

出典

2016-06-21 02:20:09

2つの '@RenderSection（" scripts "、required：false）'または最初のスタイルが 'styles'ですか？なぜモダニズムが最後ではなく、頭にあるのか？ –

お手数ですが、一番上のものは '@RenderSection（" styles "、required：false）'、 'modernizr'は常に' 'になっていなければなりません。 –

非常に良い...今、私はレイアウトスクリプトとビュースクリプトの違いを参照してください。しかし、私はまだ束を理解していない。代わりに '

レイアウト上のスクリプトをビューに伝播できますか？

答えて

関連する問題