title: Declaring a script from a PartialView only once
body: <p>I have a Razor PartialView that works with Metro-UI-style tiles. It's a very simple PartialView that allows me to display tiles bound to a <code>ViewModel</code>, really nothing spectacular.</p>
  
  <p>Since it's not used in all pages, I don't want to include the jQuery block on every page load. Instead I prefer that the script is declared inline with the PartialView, but registered once in the pagecode.</p>
  
  <p>The view is the following (I have reenginered Metrofy template)</p>
  
  <pre><code>@model IEnumerable&lt;MetroStyleTile&gt;
  
  
  &lt;div class="container tiles_hub"&gt;
      &lt;div class="sixteen columns alpha"&gt;
          @foreach (MetroStyleTile tile in Model)
          {
              &lt;div class="tile_item four columns alpha"&gt;
                  &lt;a href="@Url.Action(tile.Action, tile.Controller, routeValues: tile.MvcArea != null ? new { area = tile.MvcArea } : null)" class="tile"&gt;
                      @Html.Label(tile.Description)
                      @if (tile.ImageUrl != null)
                      {
                          @Html.Image(tile.ImageUrl.ToString(), tile.Title, htmlAttributes: new { @class = "tile_img" })
                      }
                  &lt;/a&gt;
              &lt;/div&gt;
          }
      &lt;/div&gt;
  
      @section Scripts{
  
  
  
          &lt;script type="text/javascript"&gt;
  
              $(document).ready(function ($) {
                  //Tiles hover animation
                  $('.tile').each(function () {
                      var $span = $(this).children('span');
                      $span.css('bottom', "-" + $span.outerHeight() + 'px');
                  });
  
                  var bottom = 0;
  
                  $('.tile').hover(function () {
                      var $span = $(this).children('span');
                      if (!$span.data('bottom')) $span.data('bottom', $span.css('bottom'));
                      $span.stop().animate({ 'bottom': 0 }, 250);
                  }, function () {
                      var $span = $(this).children('span');
                      $span.stop().animate({ 'bottom': $span.data('bottom') }, 250);
                  });
              });
          &lt;/script&gt;
      }
  &lt;/div&gt;
  </code></pre>
  
  <p>The above code is fine when I use the PartialView only once in the page, but if I use the <code>@Html.Partial</code> twice I get the script twice.</p>
  
  <p>Now let me clarify: I often ask question on StackOverflow to <strong>learn more</strong> from the platform, and I don't usually like workaround solutions.</p>
  
  <p><strong>I could</strong> use a Javascript global variable to see if the function must be declared again or not.</p>
  
  <p><strong>I could</strong> register the script in the Layout to make it appear in all pages and not worry.</p>
  
  <p>I'm asking how to print the script to <code>Response</code> only once. Learning how to do this allows me to lighten page payload when multiple PartialViews are developed like this (so the client gets the script only when needed, and only once if needed).</p>
  
  <p>How can I do that?</p>