10 мая 2012 г.

Знакомство с компонентами Telerik, для Asp.Net MVC. Подключение к проекту

Этим постом я хочу начать небольшой цикл статей об использовании компонентов Telerik в проектах Asp.Net MVC. Статьи не в каком случае не являются рекламными. Это лишь попытка продемонстрировать очередной удобный инструмент, который можно с успехом использовать в своих проектах.
Узнать подробнее о доступных компонентах, посмотреть демки, и скачать полный набор можно здесь: Telerik Extensions for ASP.Net MVC. Радует то, что данный набор от Telerik-а кроме коммерческой лицензии предлагает так же и Open Source версию, что собственно и остановило мой выбор именно на этом наборе компонентов.

Сегодня, в первом посте по данной тематике, мы подключим все необходимые материалы и библиотеки Telerik к нашему проекту, дабы подготовиться к дальнейшему рассмотрению каждого компонента по-отдельности. Сразу замечу, что всю эту информацию можно найти и в документации (правда на английском), но проблема в том, что зачастую узнать полную картину о чем-то из набора можно только изучив информацию из нескольких источников сразу. Например, документация на самом сайте и документация, входящая в пакет поставки,  совсем не идентичны, а скорее дополняют одна другую.
Итак, приступим.
Что у нас имеется? Имеется новый, пустой проект. Необходимо обеспечить возможность использовать в нем Teletik Extensions for Asp.Net MVC.

Первым делом необходимо скачать пакет установки всех необходимых материалов. Для скачивания необходимо будет зарегистрироваться на их сайте, но я считаю это простой формальностью, да и занимает это всего пару минут. Я качал версию Open Source (GPL v2).

Далее устанавливаем скачанный пакет, и переходим к нашему проекту.

Для своей работы Telerik использует свои же скрипты и стили, которые необходимо подключить в наш проект. После установки, все материалы у меня находятся по адресу: C:\Program Files (x86)\Telerik\Extensions for ASP.NET MVC Q1 2012\:

Для начала, давайте скопируем содержимое папок: App_GlobalResources, Content и Scripts в наш проект:

App_GlobalResources - содержит доступные локализации для конкретных элементов из набора.
Content/2012.1.214 - стили и темы оформления.
Scripts/2012.1.214 - все необходимые скрипты.

Теперь нам необходимо добавить (add reference) к проекту сборку Telerik.Web.Mvc.dll, найти ее можно в папке:  C:\Program Files (x86)\Telerik\Extensions for ASP.NET MVC Q1 2012\Binaries\Mvc2\.
Должно получиться так:

Так же, для дальнейшего удобства, добавим в web.config пространство имен Telerik.Web.Mvc.UI, чтобы оно присутствовало по-умолчанию во всех наших представления:
   1:  <pages>
   2:        <namespaces>
   3:          <add namespace="System.Web.Mvc" />
   4:          <add namespace="System.Web.Mvc.Ajax" />
   5:          <add namespace="System.Web.Mvc.Html" />
   6:          <add namespace="System.Web.Routing" />
   7:   
   8:          <add namespace="Telerik.Web.Mvc.UI" />
   9:        </namespaces>
  10:      </pages>
  11:    </system.web>

Последним этапом, необходимо добавить все подключенные стили и скрипты на Site.Master. К счастью, Telerik позаботился о том, чтобы мы не писали много кода, и не подключали к страницам много ненужных скриптов и стилей. Для этого нам предоставлены регистраторы стилей и скриптов. Давайте добавим их на нашу мастер-страницу.

Регистрируем стили в секции HEAD:
   1:  <head runat="server">
   2:      <title>
   3:          <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
   4:      </title>
   5:      <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
   6:      <%= Html.Telerik().StyleSheetRegistrar()
   7:          .DefaultGroup(group => group.Add("telerik.common.css")
   8:                                      .Add("telerik.vista.css"))
   9:      %>
  10:  </head>

Регистрируем скрипты в конце блока BODY:
   1:  </div>
   2:      <%= Html.Telerik().ScriptRegistrar() %>
   3:  </body>

ScripRegistrator содержит еще много полезных настроек. Например, можно исключить загрузку JQuery из пакета Telerik, если например вы используете версию поновее:
   1:  </div>
   2:      <%= Html.Telerik().ScriptRegistrar().jQuery(false) %>
   3:  </body>

Мы же, на будущее, включим через регистратор скриптов поддержку глобализации:
   1:  </div>
   2:      <%= Html.Telerik().ScriptRegistrar().Globalization(true) %>
   3:  </body>

С ресурсами разобрались. Теперь все должно работать. Чтобы проверить, правильно ли мы все подключили, попробуем изобразить на стартовой странице простенький PanelBar от Telerik-а:
   1:  <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
   2:      <% Html.Telerik().PanelBar()
   3:         .Name("PanelBar")
   4:         .Items(items =>
   5:         {
   6:             items.Add().Text("Item 1")
   7:                        .Content(() =>
   8:                        {%>
   9:      <p>
  10:          Some Content</p>
  11:      <% });
  12:             items.Add().Text("Item 2")
  13:                  .Items(subItems =>
  14:                        {
  15:                            subItems.Add().Text("Sub Item 1");
  16:                            subItems.Add().Text("Sub Item 2");
  17:                            subItems.Add().Text("Sub Item 3");
  18:                        });
  19:         })
  20:         .Render();
  21:      %>
  22:  </asp:Content>

Запускаем проект, смотрим что мы натворили:

Все красиво, плавно, а главное - оно работает!!!
_____
Исходники

В дальнейших постах я постараюсь "пройтись" по наиболее интересным компонентам из набора Telerik. Также напомню, что кроме Extensions for Asp.Net, Telerik разрабатывает также KendoUI. По сути, KendoUI полностью дублирует функционал серверных контролов, но реализуется это все через Javascript и JQuery. Таким образом, если вам очень понравились контролы, но не повезло с используемой технологией (не работаете с Asp.Net MVC), то можете смело использовать KendoUI под любую платформу. Для нашего же случая, реализация не в яваскрипте, а в серверном коде, дает больший контроль, сопровождаемость, и банальную удобность написания кода благодаря IntelliSense.