14 июля 2011 г.

Диалоговое окно на ASP.Net MVC, с помощью Jquery UI

Некоторое время назад, я рассматривал вариант подключения плагина-модального окна к проекту. Thickbox, сам по себе, штука хорошая, но у всех сторонних (и особенно бесплатных) Jquery-плагинов есть один огромный недостаток - никто не дает вам гарантии, что после подключения новой версии библиотеки плагин не сломается.
По-моему, здесь есть 3 варианта решения проблемы:

  1. Всегда оставаться на одной версии Jquery (тогда не будут работать все новые, крутые плагины);
  2. Покупать плагины, к которым прилагается поддержка, и которые постоянно обновляются (денег жалко);
  3. Минимизировать риски использовав плагины от самого Jquery. Под словом плагин, я здесь имею в виду Jquery UI.
Помимо набора ну очень полезных штук, в состав Jquery UI входит модуль Dialog, который предоставляет возможность быстро, удобно и результативно использовать диалоговые окна (включая модальные) в проекте.

Итак, сегодня мы займемся тем, что прикрутим диалоговое окно Jquery UI, и заставим его отображать контент из другого представления/контрола. В документации по UI сказано, что окно может отображать какой-то inline-контент страницы (например, внутренности одного из дивов). Про динамическую подгрузку контента в окно там ничего не говорится, но это нас не остановит )))

Для начала, нам необходимо загрузить набор Jquery UI с официального сайта. Стоит заметить, что перед загрузкой, в удобной форме можно скомпоновать пакет загрузки как душе угодно. А именно - включить/исключить компоненты, и подобрать нужный дизайн плагинов.

Добавим в наш пустой проект все нужные материалы, и подключим необходимые файлы в Site.Master:


<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>

<link href="/Content/UITheme/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="/Scripts/myScript.js" type="text/javascript"></script>

В представлении Index.aspx создадим кнопку с событием запуска окошка по клику, и пустой div, в который будет подгружаться нужный контент перед показов в Dialog-е:

<input type="button" value="Show my window" onclick="showWnd();" />
<div id="dialogDiv">
</div>

myScript.js - мой, отдельно созданный скрипт, в котором есть всего одна функция - вызов диалогового окна:

function showWnd() {
$('#dialogDiv').load('/home/someaction/').dialog({ autoOpen: true, position: 'center', title: 'My window', resizable: false });
};

Что же здесь происходит?!
Сначала мы загружаем в наш пустой див контент, возвращаемый методом контроллера, после чего задаем стандартные параметры плагина (описание параметров, и их весь перечень можно посмотреть на официальном сайте, в разделе документации).

Практически все. Нам осталось лишь создать метод SomeAction контроллера Home, который, по запросу, вернет необходимый для окошка контент:

public ActionResult SomeAction()
{
ViewData["Greeting"] = "Hello World!";
return PartialView("_wndContent");
}

_wndContent - созданный нами ASP.Net MVC контрол, который будет отображаться в окне. В нашем случае, он отобразит текст, переданный из контроллера:

<%= Html.Encode(ViewData["Greeting"])%></h2>

Вот теперь точно все.
Мы реализовали то, что задумали. Осталось посмотреть на результат.

При запуске проекта мы видим одну кнопочку, по нажатию на которую вызывается симпатичное, простое диалоговое окно с множеством плюсов (например перетаскивание, ресайз, и даже поддержкой Drag&Drop):

_____
Исходники