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

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

виджет.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>

виджет.в CSS

label { color: #555;}

виджет.js

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

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

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

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

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

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

Правило 6: Поместите скрипты в дно

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

что является лучшим (надеюсь простой) способ сделать виджеты и еще следите правила 5 и 6?

8
asp.net-mvc performance widget

2 ответов

можно использовать RenderSection() который похож на ContentPlaceHolder старого и ставим их в файл _Layout.cshtml по

   <head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
   @RenderSection("head");
</head>

тогда, на ваш взгляд, говоря:

@{
    ViewBag.Title = "Home Page";
}
@section head
{
<link href="widget-style.css" type="text/css" rel="stylesheet" /><
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

@section footer{
 <script type="text/javascript" src="wiget.js"></script>  
}

это простая альтернатива, если вы не хотите использовать Combress или Chirpy, вам все равно придется добавить код на страницы, на которых вы используете элемент управления, но он появится в нужных местах.

Я также нашел удобный сообщение в блоге о регистрации скриптов изнутри частичного вида это, возможно, стоит прочитать.

2
  1. измените виджет, чтобы использовать ненавязчивые методы javascript, чтобы весь DOM можно было сканировать для экземпляров виджета. Полагайтесь на классы вместо идентификаторов.
  2. используйте такой инструмент, как Chirpy, чтобы упаковать все ваши файлы CSS и файлы Javascript в один файл библиотеки (один .JS и один .css), который вы можете добавить вверху и внизу (соответственно) вашей главной страницы/макета.
  3. используйте HTML-помощник для создания виджета HTML. Если вам нравится, HTML helper можно отобразить частичное представление, чтобы сохранить код представления HTML в файле представления. Поскольку вы используете ненавязчивый javascript, нет необходимости создавать какой-либо встроенный скрипт. Просто позвольте javascript-коду виджета сканировать DOM для экземпляров вашего виджета.

Шаг 1

в исходном примере уже используются некоторые ненавязчивые методы javascript, но вот как вы можете расширить этот шаблон еще дальше, как показано в этот jsfiddle.

виджет.cshtml по

<div class="date-range-widget">
    <h2>Create a date range</h2>

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

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

    <p class="output"></p>

    <button class="create-date-range">Create</button>
</div>

виджет.js

$(function () {
    // This line could probably be done generally, regardless of whether you're
    // in the widget.
    $("input.date").datepicker();

    $("div.date-range-widget").each(function(){
        var $t = $(this);
        var startBox = $t.find("input.start-date");
        var endBox = $t.find("input.end-date");
        var output = $t.find("p.output");
        $t.find("button.create-date-range").click(function () {
            output.html(startBox.val() + " to " + endBox.val());
        });
    });    
});

обратите внимание, как теперь вы можете иметь несколько экземпляров этого виджета присутствует на Вашей странице, с другой id и name значения, и они будут функционировать независимо друг от друга.

когда нет виджета диапазона данных, javascript по-прежнему будет искать DOM, не сможет найти его и двигаться дальше. Однако стоимость этой операции обычно довольно невелика по сравнению с отдельной поездкой туда и обратно для другого файла javascript. Сохранение CSS и javascript в отдельных статических файлах позволяет браузеру кэшировать эти файлы, что означает, что в среднем он вытягивает меньше данных по проводу (поскольку только HTML изменяется от одного запроса к другому).

Шаг 2

я лично нашел, что стоит объединить мой javascript и CSS в один файл, поэтому браузеру нужно только вытащить один javascript и один css-файл в для данной загрузки страницы (и оба будут кэшироваться после загрузки первой страницы). Если у вас есть очень большой файл javascript, который используется только на определенных страницах, вы можете сохранить его отдельно и загрузить только на определенных страницах.

независимо от того, ваш JavaScript должен быть написан таким образом, что вы мог бы все файлы javascript на вашем сайте загружаются сразу, не наступая друг другу на пальцы.

Шаг 3

должно быть довольно пояснений.

2