Как в ASP.Net MVC создавать виджеты, которые помещают javascript и css, куда они должны идти?

Я пытаюсь создать многоразовый виджет в ASP.Net MVC. Это виджет, который объединяет 2 даты в строку. Виджет содержит 3 файла: Widget.cshtml, Widget.css и Widget.js и зависимости для нескольких библиотек jquery.

Widget.cshtml

<h2>Create a date range</h2>

<div>
    <label for="startDate">Start:</label>
    <input id="startDate" class="date" name="startDate" type="text" />
</div>

<div>
    <label for="endDate">End:</label>
    <input id="endDate" class="date" name="endDate" type="text" />
</div>

<p id="output"></p>

<button id="createDateRange">Create</button>

Widget.css

label { color: #555;}

Widget.js

$(function () {
    $(".date").datepicker();

    $("#createDateRange").click(function () {
        var start = $("#startDate").val();
        var end = $("#endDate").val();
        $("#output").html(start + " to " + end);
    });
});

Я хочу сделать этот виджет многоразовым на моих страницах MVC. Я придумал несколько вариантов, в том числе:

1. Создать помощник HTML
2. RenderPartial
3. RenderAction
4. Удалить все зависимости css и javascript из файла виджета. Вручную скопируйте и вставьте в каждое представление, которое я использую в нужном месте.

Я собирался использовать помощника, когда вспомнил правила Стива Содерса для производительности веб-сайта:

Правило 5: помещайте таблицы стилей вверху

Правило 6: помещайте скрипты внизу

Варианты 1) , 2) и 3) все кажутся хорошими идеями, но все они пишут встроенный код и нарушают правила производительности. Вариант 4) позволяет мне вручную помещать файлы javascript и css на свои места, но при копировании и вставке возможны ошибки. Потенциальной идеей было бы написать каркас, который помещает все на свои места, но сейчас это кажется слишком большим трудом.

Каков наилучший (надеюсь, простой) способ создания виджетов при соблюдении правил производительности 5 и 6?