4 марта 2011 г.

Использование модального окна Thickbox в Asp.Net MVC

Несколько дней назад мне довелось прикручивать к проекту новое модальное окно (простыми словами - попап). До этого использовался JQuery плагин "Colorbox", но с ним оказалось очень много проблем. В результате выбор пал на плагин Thickbox.

 Задач у данного попапа в проекте будет много, но сейчас мы просто подключим его, и попробуем использовать для отображения в нем, к примеру, видео из YouTube.

Для начала, создадим новый проект в студии, и скачаем необходимые материалы для работы плагина отсюда.

Далее, необходимо подключить все необходимое к нашему проекту: css-стиль, JavaScript-скрипт, и картинка-заглушка для имитации процесса загрузки попапа (для нее я создал отдельную папку "images"). В результате, у нас должно получиться что-то такое:

Все это дело также необходимо подключить в MasterPage "Site.Master":
Теперь давайте создадим userControl, который будет отображаться в модальном окне, и который будет содержать в себе необходимую информацию (в нашем случае код для вставки видео с youtube). По-сути, можно было бы выводить в попапе целую страницу, но практичнее всего использовать именно юзерконтрол.
Назовем этот контрол "Video", и поместим в папку "Shared". Именно там его в первую очередь будет искать движок.

Поместим в наш контрол HTML-код для встраивания видео:
 Теперь нам осталось только написать правильную ссылку на странице, которая и будет вызывать наше модальное окно. Воспользуемся для этого ActionLink-ом:

<%= Html.ActionLink("show modal video", "modalvideo", "home", new { height = 400, width = 650}, new { @class = "thickbox", @title ="this is a title of popup" })%>

Эта ссылка будет редиректить на метод "modalvideo" контроллера HOME. Именно там нам остается сделать последний штрих с указанием необходимого для вывода контрола:

Вот и все готово, и можно смотреть на результат:


А по переходу на ссылку получаем наш popup:


Кстати, еще один момент... Если нам нужно будет закрывать модальное окно по нажатию на кнопку в нем, то нужно просто добавить туда submit, и прицепить к нему обработчик стандартной функцией плагина:
 P.S. В данном случаем мы просто показываем модальное окно с заранее определенным в нем контентом. Но никто не мешает нам передавать туда через контроллер нужные данные, и использовать этот, один попап из разных мест, и для отображения самой разнообразной информации.
 ______
Скачать исходники можно здесь.