title: When I have to use @section scripts?
body: <p><a href="https://i.stack.imgur.com/QVC3Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QVC3Y.png" alt="enter image description here"></a></p>
  
  <p>My current structure has a layout with header, body and footer. Inside the body load a view using ajax to call for a action controller returning a Json and painting a tree view. When user click on the tree view the footer should load the detailed information. But isnt working, my guess is because the scripts section isnt render properly.</p>
  
  <p>Right now the script are in the layout without bundles or anything and work ok on the Main body because I use Jquery and a Tree to load the Json data.</p>
  
  <p>But in the partial View get an error. I could write a <code>@section scripts</code> area and copy all the script from the layout in the Partial View but why should I duplicate the code?</p>
  
  <p><a href="https://i.stack.imgur.com/iF2OR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iF2OR.png" alt="enter image description here"></a></p>
  
  <p>The worst part is only give me problem in the production enviroment ... on my devolpment enviroment works ok.</p>
  
  <p><a href="https://i.stack.imgur.com/kfLYh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kfLYh.png" alt="enter image description here"></a></p>
  
  <p>So the questions:</p>
  
  <ul>
  <li><p>Why the main view can see the scripts define on the Layout but the Partial View Doesnt?</p></li>
  <li><p>Why my development enviroment work ok, but productions doesnt?</p></li>
  <li><p>What should I do to solve this?</p></li>
  </ul>
  
  <p>EDIT: More testing.</p>
  
  <p>This is a test View, this render in the Body. But I need include script section otherwise the dialog doesnt show, even when layout have the scripts too.</p>
  
  <pre><code>@{
      ViewBag.Title = "TreeDetails";    
  }
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;@ViewBag.Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h2&gt;TEST PAGE&lt;/h2&gt;
  
      &lt;script&gt;
  
          // Your code goes here.
          $(document).ready(function () {
              console.log("before dialog");
              $("#dialog").dialog();
              console.log("after dialog");
          })
      &lt;/script&gt;
  
      &lt;div id="dialog" title="Basic dialog"&gt;
          &lt;p&gt;This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  @section scripts {
      &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
      &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
      &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  }
  </code></pre>