« Все записи

Использование ASP.NET MVC и jQuery для создания запросов на подтверждение

Еще один отличный пример того, что в результате использования принципа "ненавязчивого (unobtrusive) JavaScript" мы имеем чистые веб-страницы, которые изящны в своей простоте и получаем сценарий, который можно повторного использовать. Что, не нравится?

Представьте себе страницу для редактирования личных данных, например, такую:

Здесь у нас есть несколько элементов управления для ввода данных и кнопка отправки. У нас также есть ссылка "Отмена" для ухода со страницы без отправки формы. Хорошей практикой является появление запроса на подтверждение, когда пользователь кликает по ссылке, чтобы он мог прервать отмену редактирования, если он нажал на ссылку ненароком. Один из способов, которым это достигается, является добавление обработчика OnClick к тегу anchor:

<a href="/Person" onclick="JavaScript:return confirm('are you sure?')">Cancel</a>

Оставшаяся часть этой статьи покажет вам, как настроить все это так, чтобы мы могли применить принцип "ненавязчивого (unobtrusive) JavaScript". Мы могли бы добавить идентификатор id к тегу anchor, а затем просто переместить сценарий со страницы в отдельный файл сценария, но это оставит нас со скриптом, который будет работать только для этого одного случая. Вместо этого мы добавим к тегу anchor атрибут, который содержит текст для запроса подтверждения. Так как браузеры должны игнорировать атрибуты с префиксом "data-" мы будем использовать data-confirmprompt:

<a data-confirmprompt="are you sure?" href="/Person">Cancel</a>

В нашем файле сценария мы будем использовать jQuery, чтобы выбрать anchor и добавить ему onclick-поведение. Наш скрипт будет выглядеть следующим образом:

/// <reference path="jquery-1.5.1.js" />
$(document).ready(function () {
    $('*[data-confirmprompt]').click(function (event) {
        var promptText = $(this).attr('data-confirmprompt');
        if (!confirm(promptText)) {
            event.preventDefault();
        }
    });
});

Первые две строки носят служебный характер. Первая строка - это комментарий, указывающий Visual Studio, что мы используем jQuery - это дает нам использование IntelliSense для функций jQuery (вы можете перетащить файл из обозревателя решений, чтобы не набирать текст вручную, а затем использовать Ctrl+Shift+J для обновления IntelliSense). $(document).ready() определяет функцию для запуска после того, как документ загружен.

Внутри функции ready мы используем синтаксис селектора для указания того, что мы хотим найти любой элемент, который имеет атрибут data-confirmprompt. Мы могли бы использовать "a[data-confirmprompt]", но так мы будем находить только теги anchor, а я хочу использовать этот функционал также и для кнопкок отправки (submit buttons). После того как мы выбрали элементы, мы вызываем функцию click jQuery, чтобы привязать функцию к обработчику click для каждого элемента. В обработчик событий jQuery услужливо передает "this" - это будет элемент, для которого событие возникает, чтобы мы могли использовать $(this).attr('name'), чтобы извлечь атрибут элемента - в нашем случае для получения значения атрибутa data-confirmprompt. Теперь когда мы имеем текст подтверждения, мы можем отобразить запрос, используя функцию confirm и, если функция возвращает ложь (например, если пользователь нажмет кнопку Cancel (Отмена)), то мы вызываем event.preventDefault, чтобы предотвратить поведение click по умолчанию, то есть предотвратить переход по ссылке или отправку формы.

Теперь нам нужно убедиться, что у нас есть ссылки на jQuery и на наш файл сценария - и мы в деле! Мы можем просто добавить data-confirmprompt ко всему, для чего мы хотим подтверждения прежде чем принять события нажатия - например, мы можем также добавить его к кнопке Save (Сохранить), задав другой текст подтверждения:

Если вы используете ASP.NET MVC, вы, глядя на тег anchor в коде выше, подумали "а как насчет Html.ActionLink?" - хороший вопрос! ActionLink я буду использовать, чтобы вернуть действие  default/index для текущего контроллера:

Html.ActionLink("Cancel", "Index")

Есть несколько перегрузок для этого метода, которые позволяют указать дополнительные атрибуты для визуализации. Например,

Html.ActionLink("Cancel", "Index", null, new { foo="bar" })

будет преобразовано в:

<a href="/Person" foo="bar>Cancel</a>

Обратили внимание на использование анонимного типа для задания атрибута: "new {foo = “bar”}"? Если мы хотим создать атрибут, который называется "data-confirmprompt", то, к сожалению, C# не позволит нам определить свойство с '-' в нем! Но, поскольку синтаксис анонимного типа - это просто сокращение для создания RouteValueDictionary, мы можем обратиться к инициализатору коллекции и написать:

Html.ActionLink("Cancel", "Index", null, new RouteValueDictionary { {"data-confirmprompt", "are you sure?" }})

Допускаю, что это не страшно красиво. К счастью, фреймворк MVC 3 приходит на помощь, он будет автоматически конвертировать подчеркивания в именах свойств в минусы, поэтому мы можем написать

Html.ActionLink("Cancel", "Index", null, new { data_confirmprompt="are you sure?" })

и свойство "data_confirmprompt" будет преобразовано в атрибут, который называется "data-confirmprompt" - абсолютно точно!

Теперь у нас хорошая годная чистая HTML-страница, которая не содержит никаких сценариев и прекрасный "многоразовый" файл сценария, который мы можем использовать, чтобы добавить поведение подтверждения к любым элементам на странице, у которых установлен атрибут data-confirmprompt.

Progg it

comments powered by Disqus