30 октября 2012 г.

Использование шаблонов Kendo в ASP.Net MVC

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

Можно придумать огромное множество сценариев и ситуаций, когда использование шаблонов сильно упрощает нам жизнь. Применение можно найти и в заполнении выпадающего списка на клиенте, и в связке с MVVM-паттерном.

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

Пример 1

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

В голову сразу приходят варианты:
  • хардкодить в Javascript, и после успешного выполнения ajax-добавления формировать новый DOM-обьект;
  • передавать данные на сервер, там заполнять заранее сделанный контрол, и возвращая его назад, вставлять в DOM страницы;
Первый вариант - уж больно некрасивый и сложно читаемый в будущем. Второй - по-сути верный, но не всегда есть возможность постоянно делать запросы на сервер за новым контролом. Так что реализуем это пока новым для нас, шаблонным способом.

Начнем с представления. Поместим на нем небольшую форму для ввода данных:

Также разместим контейнер, в который будут помещаться все добавленные элементы:

<div id="container" style="width: 65%; float: right; padding: 0 10px 0 10px;">
</div>
По идентификатору container мы будем помещать в него новый контент.

Последним элементом представления является сам шаблон Kendo. Согласно документации, шаблоны должны помещаться в блоки скрипта, типа "text/x-kendo-template". В такой блок можно поместить любой html, совмещенный с вставками яваскрипта. Вставки кода определяются символом "#". Давайте посмотрим на наш шаблон:

   1:  <script type="text/x-kendo-template" id="template">
   2:      <div class="k-block personBlock">
   3:          User: #= userName #; Country: #= country #; 
                                 Added on: #= new Date().toLocaleString() #
   4:      </div>
   5:  </script>

В этом шаблоне определен div, который включает в себя имя пользователя, его страну, а так-же дату добавления. Конструкция "#= param #" означает, что в это место будет вставлено значение param, переданное в этот шаблон. Кроме того, обратите внимание на дату - в шаблонах есть возможность создавать новые объекты, и проводить их конвертацию.

Теперь, когда будет нажата кнопка на форме, данные с нее подставятся в шаблон, а сам он, с вставленными значениями, отправится в общий контейнер.
За все это отвечает следующий javascript-код:

   1:  <script type="text/javascript">
   2:      var template = kendo.template($("#template").html());
   3:   
   4:      function AddUser() {
   5:          $("#container").append(template({
   6:              userName: $('#p_name').val(),
   7:              country: $('#p_country').val()
   8:          }));
   9:      };
  10:  </script>

Здесь, в первой строке, мы указываем Kendo, что содержимое элемента с идентификатором template  является шаблоном. Далее идет функция обработки нажатия кнопки. Там мы отправляем в шаблон объект, заполненный нужными данными, и вставляем сам шаблон в общий контейнер.

Вот и все. Можно добавлять записи.

В результате, в правом блоке будет список добавленных элементов, причем каждый построен из нашего шаблона:

Пример 2

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

Все просто. Такая ситуация случается очень часто.
На странице есть  пустой выпадающий список и кнопка:
По нажатию на кнопку должен произойти ajax-запрос на сервер. Сервер должен вернуть список категорий в JSON-формате. Из всех принятых категорий должны сформироваться элементы выпадающего списка.

Если бы шаблонов не существовало, то возможно, что по нажатию на кнопку нам пришлось бы получить список категорий, и потом, пробегая по каждому элементу списка делать что-то типа:
$("#categories").
        append('<option value=\"' + c.ID + '\">' + c.Name + '</option>');

Согласитесь, это не очень красивое решение...

Поэтому мы сделаем общий шаблон содержимого выпадающего списка:

   1:  <script type="text/x-kendo-template" id="template">
   2:      #$.each(Categories, function (index, c) {#
   3:          <option id="#= c.ID #">#= c.Name #</option>    
   4:      #})#
   5:  </script>

Данный шаблон должен принимать параметр Categories, в котором будет содержаться список категорий. Далее, с помощью обычного цикла, перебираются все элементы списка для формирования html-наполнения. Как видите, в шаблоне можно на полную использовать javascript и jquery. Главное - помещать всё внутрь #= # для переменных, и внутрь # # для кода логики.

Рассмотрим весь javascript-код для реализации нашего механизма:

   1:  var template = kendo.template($("#template").html());
   2:   
   3:  function loaddata() {
   4:      $.getJSON('/home/Categories', null, function (data) {
   5:          if (data.Count > 0) {
   6:              $("#categories").html(template({
   7:                  Count: data.Count,
   8:                  Categories: data.Categories
   9:              }));
  10:          } else {
  11:              $("#categories").empty();
  12:          };
  13:      });
  14:  };

В первой строке, как и в предыдущем примере, мы указываем, что именно будет являться шаблоном. Дальше одет описание ajax-запроса при нажатии кнопки. Сервер должен вернуть JSON-обьект, состоящий из двух свойств: список категорий, и кол-во категорий в списке. Если принятое количество категорий больше нуля, то начинается заполнение выпадающего списка с идентификатором "categories" экземпляром нашего шаблона, в который заранее передается полученный список категорий, и их количество (на всякий случай).

А вот и результат:

Данные приняты и успешно транслированы в элементы выпадающего списка с помощью общего шаблона. Все работает.


Шаблоны Kendo Templates действительно реально упрощают клиентскую разработку. Мы получаем читабельный клиентский код, возможность безпроблемной поддержки, а также отсутствие хардкода прямо в javascript или jquery.

_____
Исходники