title: In ASP.Net MVC, how do you create widgets that put javascript and css where they're supposed to go?
body: <p>I am trying to create a reusable widget in ASP.Net MVC. This is a widget that concatenates 2 dates into a string. The widget contains 3 files: Widget.cshtml, Widget.css, and Widget.js and dependencies to several jquery libraries.</p>
  
  <p>Widget.cshtml</p>
  
  <pre><code>&lt;h2&gt;Create a date range&lt;/h2&gt;
  
  &lt;div&gt;
      &lt;label for="startDate"&gt;Start:&lt;/label&gt;
      &lt;input id="startDate" class="date" name="startDate" type="text" /&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;label for="endDate"&gt;End:&lt;/label&gt;
      &lt;input id="endDate" class="date" name="endDate" type="text" /&gt;
  &lt;/div&gt;
  
  &lt;p id="output"&gt;&lt;/p&gt;
  
  &lt;button id="createDateRange"&gt;Create&lt;/button&gt;
  </code></pre>
  
  <p>Widget.css</p>
  
  <pre><code>label { color: #555;}
  </code></pre>
  
  <p>Widget.js</p>
  
  <pre><code>$(function () {
      $(".date").datepicker();
  
      $("#createDateRange").click(function () {
          var start = $("#startDate").val();
          var end = $("#endDate").val();
          $("#output").html(start + " to " + end);
      });
  });
  </code></pre>
  
  <p>I want to make this widget reusable in my MVC pages. I have come up with several options, including:</p>
  
  <ol>
  <li>Create an HTML Helper</li>
  <li>RenderPartial</li>
  <li>RenderAction</li>
  <li>Remove all css and javascript dependencies from the widget file. Manually Copy-And-Paste into every view that I'm using it in the correct place.</li>
  </ol>
  
  <p>I was about to use a helper, when I remembered Steve Souders rules for web site performance:</p>
  
  <p>Rule 5: Put stylesheets at the top</p>
  
  <p>Rule 6: Put scripts at the bottom</p>
  
  <p>Options 1), 2) and 3) all seem like good ideas, but they all write the code inline and violate the performance rules. Option 4) allows me to manually put the javascript and css files where they belong, but copy-and-paste is prone to mistakes. A potential idea would be write a scaffolder that puts everything where it belongs, but that seems too much work for right now.</p>
  
  <p>What is the best (hopefully simple) way to do widgets and still follow performance rules 5 &amp; 6?</p>