Как работает ненавязчивый JavaScript в ASP.NET MVC3? - PullRequest
Новая
       11

Как работает ненавязчивый JavaScript в ASP.NET MVC3?

2 голосов
/ 16 января 2011

Существует ли руководство или объяснение, как MVC3 реализует ненавязчивый JavaScript с использованием тегов данных HTML5? Я хотел бы знать, как я могу расширить эту практику для своего собственного javascript, особенно, как эффективно анализируются теги данных для выполнения javascript, для прикрепления обработчиков событий и т. Д .?

Ответы [ 3 ]

2 голосов
/ 16 января 2011

В ASP.NET MVC 1 и 2 проверка на стороне клиента и любое поведение AJAX означали, что ASP.NET MVC автоматически генерирует JavaScript для проверки или класса AJAX.Результатом стал тег <script> со встроенным javascript, который выводился бы на HTML-страницу или данные в обработчиках событий ввода (например, onclick).

Ненавязчивый javascript устраняет необходимость в внедренииHTML-страницу, поместив все необходимые вещи в data- атрибутах элемента.Имея это в виду, jquery.validate.unobtrusive будет проверять и выполнять класс AJAX на основе информации в атрибутах data- элемента управления вводом.

Для получения более подробной информации взгляните на этот asp.netУчебник MVC 3 , который предлагает быстрый пример.Ненавязчивое объяснение ближе к концу под вторым Enabling Client-Side Validation.

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

1 голос
/ 01 мая 2011

Посмотрите в ненавязчивых файлах скриптов (например, jquery.unobtrusive-ajax.js), где вы обнаружите, что это просто случай использования селекторов для поиска элементов с атрибутами данных.

Например: 

 $("a[data-ajax=true]").live("click", function (evt) {
        evt.preventDefault();
        ...
 });

 $("form[data-ajax=true]").live("submit", function (evt) {
     ...           
 });

Я начал использовать свои собственные атрибуты данных для подключения таких функций, как автозаполнение и средство выбора даты. Например, добавив вход с атрибутом data-autocomplete, указывающим на удаленный источник данных, а затем с помощью jQuery незаметно подключите его. 

$(":input[data-autocomplete]").each(function () {
        $(this).autocomplete({ source: $(this).attr("data-autocomplete") });
    });

Здесь продемонстрировано, если вам интересно: http://www.pluralsight -training.net / microsoft / Players / PSODPlayer.aspx? Author = scott-allen & name = mvc3-building-ajax & mode = live & clip = 0 & course = aspdotnet-mvc3- интро

1 голос
/ 16 января 2011

По сути, он просто использует jQuery для присоединения обработчиков событий, а не помещает скрипт непосредственно в атрибуты html.

Например, событие готовности документа, содержащее 

$("#button1").click(DoStuff);

и HTML 

<button id="button1" />

эквивалентно 

<button id="button1" onclick="DoStuff()" />

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

...