Главная > .NET > Вышел Telerik Extensions for ASP.NET MVC Q1 2011

Вышел Telerik Extensions for ASP.NET MVC Q1 2011

15 марта вышла новая версия Telerik Extensions for ASP.NET MVC.

Данная версия характеризуется очень большим количеством нововведений: появились 3 новых элемента управления (Upload, Splitter и Slider), добавилось много новых возможностей в элементе управления Grid, изменилась HTML-разметка элементов для выбора даты/времени и ввода числовых значений и т.д.
Мода на HTML5 также не обошла стороной данный продукт.

Рассмотрим более подробно нововведения данной версии:

  1. Данная версия продукта поддерживает последние версии всех основных броузеров, в том числе и финальную версию Internet Explorer 9. Некоторые элементы управления стали использовать возможности HTML5.
  2. Библиотека jQuery, включаемая в поставку, обновилась до версии 1.5.1
  3. Upload (Загрузчик файлов) позволяет просто и надежно реализовать в веб-приложении синхронную и асинхронную загрузку файлов. Upload не требует установки плагинов сторонних производителей (таких как Flash или Silverlight), т.к. реализован с помощью HTML и JavaScript. Upload может работать в 2 режимах: синхронном и асинхронном.

    Для работы в синхронном режиме Upload должен быть обязательно размещен в форме. Сохранение файла производится при отправке формы.

    При работе в асинхронном режиме для Upload`а должен быть написан специальный обработчик сохранения файлов в виде метода контроллера (задается через свойство Async.Save). Также для элемента управления может быть написан метод контроллера, отвечающий за удаление загруженных файлов (задается через свойство Async.Remove). По умолчанию в асинхронном режиме файлы начинают загружаться на сервер автоматически, т.е. сразу после их выбора. Это бывает не всегда удобно. Чтобы отключить автоматическую загрузку нужно присвоить свойству Async.AutoUpload значение false.

    Я рекомендую всегда размешать Upload в форме, чтобы он мог переключиться в синхронный режим при отключенном JavaScript.


    Рис. 1.1. Форма с элементом управления Upload в Internet Explorer 9

    Листинг 1.1. Пример использования элемента управления Upload (код представления)

    <h2>Upload</h2>
    <div class="formLayout">
    @using (Html.BeginForm("Index", "Upload", FormMethod.Post, 
        new { enctype = "multipart/form-data" }))
    {
        <dl class="row">
            <dt class="label">
                <label>Файлы:</label>
            </dt>
            <dd class="field">@(Html.Telerik().Upload()
                    .Name("Files")
                    .Multiple(true)
                    .Async(async => async
                        .Save("_Save", "Upload")
                        .Remove("_Remove", "Upload")
                        .AutoUpload(false)
                    )
                )</dd>
        </dl>
        <dl class="row">
            <dt class="label"></dt>
            <dd class="field">
                <button type="submit" class="t-button">Отправить</button>
            </dd>
        </dl>
    }
    </div>

    Листинг 1.2. Пример использования элемента управления Upload (код контроллера)

    /// <summary>
    /// Выводит страницу с аплоадером
    /// </summary>
    [HttpGet]
    public ActionResult Index()
    {
        return View();
    }
    
    /// <summary>
    /// Сохраняет значения полей формы на сервере ()
    /// </summary>
    /// <param name="files">файлы</param>
    [HttpPost]
    public ActionResult Index(IEnumerable<HttpPostedFileBase> files)
    {
        SaveFiles(files);
    
        // Перенаправляем на страницу с сообщением об успешном сохранении данных
        return RedirectToAction("SubmitSummary");
    }
    
    /// <summary>
    /// Выводит сообщение об успешном сохранении данных на сервере
    /// </summary>
    [HttpGet]
    public ActionResult SubmitSummary()
    {
        return View();
    }
    
    /// <summary>
    /// Асинхронное сохранение файлов на сервере
    /// </summary>
    /// <param name="files">файлы</param>
    [HttpPost]
    public ActionResult _Save(IEnumerable<HttpPostedFileBase> files)
    {
        SaveFiles(files);
    
        return Content("");
    }
    
    /// <summary>
    /// Асинхронное удаление файлов на сервере
    /// </summary>
    /// <param name="fileNames">список имен файлов</param>
    [HttpPost]
    public ActionResult _Remove(string[] fileNames)
    {
        foreach (var fullName in fileNames)
        {
            var fileName = Path.GetFileName(fullName);
            var physicalPath = Path.Combine(
                Server.MapPath("~/App_Data"), fileName);
    
            if (System.IO.File.Exists(physicalPath))
            {
                System.IO.File.Delete(physicalPath);
            }
        }
    
        return Content("");
    }
    
    /// <summary>
    /// Сохраняет файлы на сервере
    /// </summary>
    /// <param name="files">файлы</param>
    private void SaveFiles(IEnumerable<HttpPostedFileBase> files)
    {
        foreach (var file in files)
        {
            if (file != null)
            {
                var fileName = Path.GetFileName(file.FileName);
                var destinationPath = Path.Combine(
                    Server.MapPath("~/App_Data"), fileName);
    
                file.SaveAs(destinationPath);
            }
        }
    }

    При разработке данного элемента управления использовался подход «прогрессивное улучшение» (progressive enhancement), принцип которого заключается в следующем: при инициализации элемента управления учитываются возможности броузера и для более современных броузеров подключается дополнительный функционал. В данном случае, для броузеров, полностью поддерживающих HTML5 File API, подключаются дополнительные возможности: множественная загрузка файлов, добавление новых файлов с помощью drag and drop, отображение хода выполнения загрузки и возможность ее отмены.

    Табл. 1.1. Поддержка возможностей элемента управления Upload броузерами

    Возможность IE Firefox Chrome Safari Opera Работает без JS
    Стилизация кнопки загрузки + + + + + +
    Асинхронная загрузка + + + + +
    Множественный выбор файлов в диалоге «Открыть» 3.6+ + + +
    Отображение хода выполнения загрузки 4+ + +
    Drag & Drop 4+ + только Mac OS
    Отмена загрузки в ходе ее выполнения + + + + +


    Рис. 1.2. Добавление нового файла с помощью drag and drop в Google Chrome 10

    Данный элемент управления может быть локализован путем размещения ресурсных файлов UploadLocalization.resx в директории App_GlobalResources. К сожалению, сейчас в поставку не входит ресурсный файл для русского языка, но вы можете скачать мою неофициальную русскую локализацию.

  4. Splitter (Разделитель) разделяет страницу на видимые области, размеры которых могут изменять конечные пользователи.
     

    Рис. 2.1. Страница, разделенная с помощью 2 Splitter`ов (внутреннего и внешнего)

    Листинг 2.1. Страница, разделенная с помощью 2 Splitter`ов (код представления)

    @(Html.Telerik().Splitter()
        .Name("OuterSplitter")
        .HtmlAttributes(new { style = "width: 500px; height: 300px;" })
        .Orientation(SplitterOrientation.Vertical)
        .Panes(vPanes =>
            {
            vPanes.Add()
                .Size("100px")
                .Collapsible(true)
                .Content(@<p>Внешний разделитель : верхняя панель</p>)
                ;
            vPanes.Add()
                .Scrollable(false)
                .Content(Html.Telerik().Splitter()
                    .Name("InnerSplitter")
                    .HtmlAttributes(
                        new { style = "border: 0; overflow: hidden;" }
                    )
                    .Orientation(SplitterOrientation.Horizontal)
                    .Panes(hPanes =>
                        {
                        hPanes.Add()
                            .Size("150px")
                            .MinSize("50px")
                            .MaxSize("250px")
                            .Collapsible(true)
                            .Content(
                                @<p>Внутренний разделитель :: левая панель</p>
                            )
                            ;
                        hPanes.Add()
                            .Collapsible(false)
                            .Content(
                                @<p>Внутренний разделитель :: правая панель</p>
                            )
                        ;
                        }
                    ).ToString())
                ;
            }
        )        
    )
  5. Slider (Ползунок) используется для выбора одиночного значения и RangeSlider (Диапазон) для выбора начального и конечного значения из заранее определенного диапазона.


    Рис. 3.1. Элементы управления Slider и RangeSlider при включенном JavaScript в Firefox 3.6.15

    Листинг 3.1. Элементы управления Slider и RangeSlider (код представления)

    <h2>Slider</h2>
    <div class="sliderWrapper">
    @(Html.Telerik().Slider<decimal>()
        .Name("Rating")
        .Min(0)
        .Max(10)
        .SmallStep(0.5m)
        .LargeStep(1.0m)
        .Value(6.5m)
    )
    </div>
    
    <h2>RangeSlider</h2>
    <div class="sliderWrapper">
    @(Html.Telerik().RangeSlider<decimal>()
        .Name("Range")
        .Min(0)
        .Max(10)
        .SmallStep(0.5m)
        .LargeStep(1.0m)
        .Values(3.5m, 9)
    )
    </div>

    Данные элементы управления могут работать и при отключенном JavaScript, т.к. Slider реализован как тэг INPUT типа range (появился в HTML5), а RangeSlider как 2 тэга INPUT типа range.


    Рис. 3.2. Элементы управления Slider и RangeSlider при отключенном JavaScript в Firefox 3.6.15


    Рис. 3.3. Элементы управления Slider и RangeSlider при отключенном JavaScript в Opera 11.01

  6. Новые возможности элемента управления Grid:
    1. Пакетное редактирование (демонстрация)
    2. Шаблоны заголовка и футера для групп записей (демонстрация)
    3. Агрегатные функции в шаблонах заголовка и футера (демонстрация)
    4. В настройках стиля пэйджера появилась возможность добавить раскрывающийся список для настройки максимального количества записей на странице (демонстрация).


      Рис. 4.1. Раскрывающийся список для настройки максимального количества записей на странице

    5. Теперь при AJAX-редактировании записи в элементе управления Grid на сервер отправляется элемент со всеми своими свойствами.
      Раньше на сервер отправлялись только свойства, представленные редактируемыми полями.
    6. Дополнительные параметры, заданные с помощью метода клиентской стороны rebind, теперь не сохраняются при последующих привязках данных. Для воспроизведения такого же поведения в текущей версии нужно в обработчике события DataBinding проводить повторную привязку параметра.

      Листинг 4.1. Повторная привязка дополнительного параметра

      @(Html.Telerik().Grid()
          .Name("Grid")
          .DataBinding(dataBinding => 
              dataBinding.Ajax().Select("Select", "Grid")) 
          .ClientEvents(clientEvents => 
              clientEvents.OnDataBinding("dataBinding"))
      )
      
      <script type="text/javascript">
          function dataBinding(args) {                        
              args.data = $.extend(args.data, { customerID: 1234 });
          }
      </script>
      
  7. В элементе управления Editor появилась возможность загрузки графических файлов, построенная на базе нового элемента управления Upload (демонстрация).
  8. Всплывающие окна элементов управления DatePicker, TimePicker, DateTimePicker и ComboBox теперь не открываются при получении элементом управления фокуса. Для возврата старого поведения используйте следующий код:

    Листинг 4.2. Возвращает автоматическое открытие всплывающего окна при получении фокуса

    @(Html.Telerik().DatePicker()
        .Name("DatePicker")
        .OpenOnFocus(true)
    )
  9. Изменилась HTML-разметка элементов управления DatePicker, TimePicker, DateTimePicker, NumericTextBox, CurrencyTextBox, IntegerTextBox и PercentTextBox.
    Раньше идентификатор элемента управления присваивался обертке (тэг DIV), а тэгу INPUT присваивался идентификатор с суффиксом «-input».
    Теперь идентификатор присваивается только тэгу INPUT.
Реклама
Рубрики:.NET Метки: ,
  1. Комментариев нет.
  1. No trackbacks yet.

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: