ASP.NET MVC: История одного проекта "UI - Редактирование экспоната" (часть 7)

ru-RU | создано: 28.05.2012 | опубликовано: 28.05.2012 | обновлено: 02.01.2018 | просмотров за всё время: 8672

В этой части сделаем autocomplete для выбора меток (tags), который будет использоваться при добавлении экспонатов, а также будет закончено представление (View) для редактирование экспоната.

Содержание

ASP.NET MVC: История одного проекта "Готовимся к старту" (часть 1)
ASP.NET MVC: История одного проекта "Всё ради данных" (часть 2)
ASP.NET MVC: История одного проекта "Шаблоны и внешний вид" (часть 3)
ASP.NET MVC: История одного проекта "Еще немного классов" (часть 4)
ASP.NET MVC: История одного проекта "UI - всё для пользователя" (часть 5)
ASP.NET MVC: История одного проекта "UI - Добавление экспоната" (часть 6)
ASP.NET MVC: История одного проекта "UI - Редактирование экспоната" (часть 7)
ASP.NET MVC: История одного проекта "Обработка ошибок" (часть 8)
ASP.NET MVC: История одного проекта "Фильтрация" (часть 9)
ASP.NET MVC: История одного проекта "Поиск" (часть 10)
ASP.NET MVC: История одного проекта "Облако тегов" (часть 11)
ASP.NET MVC: История одного проекта "Главная страница" (часть 12)

И снова сразу к делу

На странице добавления нового экспоната всё хорошо, единственное неудобство в том, что наборе текста метки, не показывается подсказка в виде выпадающего списка из уже существующих меток (tags). Исправим это неудобство.

На самом деле в Интеренете очень много всяки-разных javascript'ов, в том числе и на jQuery, которые реализуют данный функционал. Я буду последователен и снова воспользуюсь jQuery UI библиотекой, которая уже добавленая у меня в проект. Вы же можете выбрать тему и скачать себе весь набор плагинов (или персонализировать его, выбрав только те компоненты, которые собираетесь использовать) на официальном сайте. Я воспользуюсь плагином Autocomplete.

EditorTemplate для меток

Прежде всего я создам в папке .../Views/Shared/ новую папку EditorTemplates. Это не просто придуманное мной название для папки, это очередная договоренность ASP.NET MVC. А теперь в папку добавлю новое представление (View), которое должно быть создано как Partial:

Название представления (View) будет TagSelector.cshtml. В моем CreateOrEditExhibitViewModel, есть свойство Tags типа String. Так вот, чтобы избежать ассоциации с шаблоном для отображения класса Tag, я выбрал такое название. Вот его содержимое:

@model String
@Html.TextBox("Tags", 
  ViewData.TemplateInfo.FormattedModelValue, 
  <strong>new { data_autocomplete = @Url.Content("/museum/tagsearch/") })
</strong>@Html.ScriptBlock(@<script type="text/javascript" 
  <strong>src="@Url.Content("/scripts/tags.js")"></script>)</strong>

Посмотрев на представленный код разметки, вы должны были догадаться, что теперь требуется создать в контролере Museum метод TagSearch, а в папку Scripts нужно добавить новый файл под названием Tags.js (выделено жирным шрифтом).

Итак, тело метода TagSearch в контролере Museum:

[AdminOnly]
public JsonResult TagSearch(string term) {
  var tags = tagRepository.All
    .Where(x => x.Name.StartsWith(term))
    .Take(20)<strong>
    .Select(x => new { id = x.Id, label = x.Name })
</strong>    .ToArray();

  return Json(tags, JsonRequestBehavior.AllowGet);
}

Жирным шрифтом выделена важная строка, именно эти названия полей принимает autocomplete для отображения в выпадающем списке (см. инструкции на сайте). Обратите внимание на аттрибут над методом. Посетители сайта никогда не будут добавлять метки к экспонатам, а значить этот метод от них можно просто скрыть. И теперь, собственно говоря, содержание файла со скриптом, для выбора меток (Tags):

/* File Created: мая 29, 2012 */
$(document).ready(function () {
  var availableTags = $('input[name$=Tags]').attr('data-autocomplete');

  $('input[name$=Tags]').bind("keydown", function (event) {
    if (event.keyCode === $.ui.keyCode.TAB &&
            $(this).data('autocomplete').menu.active) {
      event.preventDefault();
    }
  }).autocomplete({
    minLength: 0,
    source: function (request, response) {
      $.getJSON(
        availableTags,
        { term: extractLast(request.term) }, 
        response);
    },
    focus: function () {
      return false;
    },
    select: function (event, ui) {
      var terms = split(this.value);
      terms.pop();
      terms.push(ui.item.value);
      terms.push("");
      this.value = terms.join(", ");
      return false;
    }
  });

});

function split(val) {
  return val.split(/,\s*/);
}

function extractLast(term) {
  return split(term).pop();
}

Комментировать скрипт не имеет смысла, потому что я, практически, скопировал его с сайта jQuery UI из примера для Autocomplete. На сайте в большом масштабе можно найти документации по работе плагинами. Теперь осталось показать изменения, которые пришлось сделать в классе CreateOrEditViewModel для того, чтобы при редактировании и создании нового экспоната использовался вновь созданный специальный шаблон TagSelector. Я выделил жирным единственную новую строку:

/// <summary>
/// ViewModel для сущности Exhibit
/// для Создания и Редактирования
/// </summary>
public class CreateOrEditExhibitViewModel : ExhibitViewModel {
  public CreateOrEditExhibitViewModel() : base() { }

  public CreateOrEditExhibitViewModel(Exhibit exhibit)
    : base(exhibit) {
      this.Tags = exhibit.Tags.TagsToString();

  }

  /// <summary>
  /// Метки через запятую
  /// </summary>
  [Display(Name = "Метки через запятую")]
  [Required(ErrorMessage = "Метки через запятую - обязательно поле")]
  [StringLength(100, ErrorMessage = "Метки через запятую не может длиннее 100 символов")]
  <strong>[UIHint("TagSelector")]
</strong>  public string Tags { get; set; }
}

Этот атрибут (UIHint) указывает фреймворку, что надо при отрисовки (rendering) этого свойства этого ViewModel на представлении использовать этот специальный "контрол", и да, этот контрола MVC Framework будет искать именно в папке EditorTemplates. Хотя тут стоит оговориться. Точнее сказать что MVC Framework искать этот "контрол" в нескольких папках, одна из которых EditorTemplates. Но можно в папке Shared создать, например, папку Controls и положить файл туда, тогда в атрибуте нужно будет указать строку следующего вида:

 [UIHint("Controls/TagSelector")] 

После всего проделанного, когда я попытался ввести какой-нибудь текст в поле для заполнении меток, я увидел следующее:

Редактирование? Легко!

Пора теперь что-нибудь отредактировать. Удивительно, но мне пришлось только поправить метод Edit в контролера, чтобы на представление приходил правильный ViewModel:

[AdminOnly]
public ActionResult Edit(int id) {
    ViewBag.PossibleHall = hallRepository.All;
    Exhibit ex = exhibitRepository.Find(id);
    if (ex != null) {
        return View(new CreateOrEditExhibitViewModel(ex));
    }
    // пока при отсутвии обработки ошибок
    // буду перекидывать на страницу списка
    return RedirectToAction("index");
}

Вот и всё что мне пришлось сделать, чтобы заработало редактирование экспоната.

Полезная оптимизация №2

В пятой части "ИОП" было рассказано о методе CutLongText. В комментариях на этот счет было высказано несколько мнений относительно расширений и хелперов. Пришло время воспользоваться дельными советами и написать расширения для типа String в новом файле StringExtensions. Таким образом, MuseumHelpers можно удалить после переноса из него единственного метода в файл StringExtensioin. Тем более, что назрела необходимость еще в некоторых расширениях для типа String. Переделывать ничего не надо, а просто добавить один модификатор this. Итак, новый метод CutLongText в файл расширений StringExtension для типа String:

/// <summary>
/// Обрезка текста правильно по тегам
/// </summary>
/// <param name="text">текст</param>
/// <param name="maxLength">количесто букв показывать</param>
/// <returns>обрезанный текст</returns>
public static string CutLongText(<strong>this</strong> string text, int maxLength, string appendText) {
    // {несколько строк кода}
    return text;
}

Я добавил еще два метода расширения для строк, один из них будет html-содержание экспоната переводить в режим редактирования (отображать в textarea подменяя теги на специальные символы: перевод строки, табуляция и т.д.), другой метод будет проделывать обратное действие при сохранении изменений.

/// <summary>
/// Форматирование текст перед записью в БД
/// </summary>
/// <param name="TxtString">текст</param>
/// <returns></returns>
public static string HtmlToSave(this string TxtString) {
  TxtString = TxtString.Replace("<", "&lt;");
  TxtString = TxtString.Replace(">", "&gt;");
  TxtString = TxtString.Replace("       ", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
  TxtString = TxtString.Replace("      ", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
  TxtString = TxtString.Replace("     ", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
  TxtString = TxtString.Replace("    ", "&nbsp;&nbsp;&nbsp;&nbsp;");
  TxtString = TxtString.Replace("   ", "&nbsp;&nbsp;&nbsp;");
  TxtString = TxtString.Replace("\t", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
  TxtString = TxtString.Replace("\n", "<br />");
  TxtString = TxtString.Replace("\r", "");
  return TxtString;

}

/// <summary>
/// Форматировать текст перед тем как отобразить на странуце HTML
/// </summary>
/// <param name="TxtString">текст</param>
/// <returns></returns>
public static string HtmlToEdit(this string TxtString) {
  TxtString = TxtString.Replace("&lt;", "<");
  TxtString = TxtString.Replace("&gt;", ">");
  TxtString = TxtString.Replace("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;", "       ");
  TxtString = TxtString.Replace("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;", "      ");
  TxtString = TxtString.Replace("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;", "     ");
  TxtString = TxtString.Replace("&nbsp;&nbsp;&nbsp;&nbsp;", "    ");
  TxtString = TxtString.Replace("&nbsp;&nbsp;&nbsp;", "   ");
  TxtString = TxtString.Replace("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;", "\t");
  TxtString = TxtString.Replace("<br />", "\n");
  return TxtString;
}

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

Метод Show

Отображение экспоната я тоже немного переделал, потому что сгенерированный MvcScaffolding вид был, мякго говоря, "не очень". Теперь просмотр выглядит так:

Заключение

Назрела необходимость сделать обработку ошибок, чтобы вместо "желтого экрана смерти ASP.NET" или стандартного экрана ошибки 404 посетитель сайта увидел дружелюбный (Friendly) экран с возможностью выбора дальнейших действий и с извинениями по поводу случившегося. Чуть позже я буду делать фильтрацию по типу зала и по тегам (на главной странице). А еще чуть позже облако меток... Короче, работы еще хватает.

Комментарии к статье (18)

01.06.2012 8:59:48 Алекс

Хочется разобраться в вашем проекте, но, к сожалению, не все понятно. Хотелось бы взглянуть на рабочую вещь в виде проекта. Не подскажите, где можно скачать? 

01.06.2012 9:03:05 Calabonga

Выкладывание проекта не планировалось, может спросите, что не понятно?

01.06.2012 9:27:51 Алекс

_http://skyliver.ru/blog/item/73 Почему бы не сделать как тут? и описание и код приложен, чтоб можно было разобраться и не тратить некоторое количество времени на собирание готового велосипеда.

01.06.2012 14:13:24 Calabonga

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

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

01.06.2012 10:15:31 Алекс

Извиняюсь за столь негавтиные мысли в вашей голове, к которым привел мой комментарий,  но уверяю вас, что таких статей очень мало и ваша очень замечательная. Одно дело учиться по книгам, другое - создать готовый продукт. Когда ты видишь результат и конечную цель, то обучение проходит намного быстрее и интереснее. Так что прошу вас не прекращать цикл статей, они полезны будут многим людям которые только начали учить MVC. Я всего лишь спросил проект потому, что как и у вас не очень много свободного времени, а освоить хочется и совсем не хотел чтоб у вас негативные выводы появились. 

01.06.2012 10:38:45 Calabonga

Ну что ж... Значит продолжим написание цикла статей. А я могу пообещать, что в следующей статье выложу проект для скачивания, чтобы исключить лишние вопросы.

01.06.2012 21:32:33 ukurok

Может тогда сразу на github или какой нибудь другой хостинг выложите свой проект? 

01.06.2012 22:04:03 Алекс

Спасибо вам огромное)!

02.06.2012 3:03:18 Calabonga

ukurok, я не вижу особого смысла выкладывать проект куда-либо еще кроме как на этом сайте.

03.06.2012 10:18:06 Меркадер

Добрый день

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

Мне кажется внутренняя реализация логики контролов слишком доступная. Например у меня на форме 30 полей, 15 из которых это списки с выбором, 6 из которых это выбор сотрудника, режимов выбора сотрудника - 4 (режим это подмножество сотрудников). При описанном вами подходе, похоже дублирование будет существенное.

Далее скажу, что я разочаровался в использовании атрибутов в качестве мета информации для контролв. В моей ситуации интерактивная форма должна позволять динамически настраивать доступ в зависимости не только от роли пользователя, но и от состояния доменного объекта, который мы в данный момент редактируем (например при создании заказа, поле адрес не обязательно, но если заказ дошел до этапа оформление, это поле становится обязательным). С атрибутами этот фокус не пройдет. Та же проблема возникнет с аспектами readOnly и required. 

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

03.06.2012 2:29:06 Calabonga

Меркадер, а я в свою очередь хочу предложить вам создать свой блог на нашем сайте и тогда мы с большим удовольствием поучавствуем в обсмуждении, ибо вопросы и проблемы которые вы подняли в своем комментарии очень актуальны. В рабочем проекте (по долгу службы, который приходится писать) озвученные проблемы приходится решать по ходу. А вместе - будет веселей.

Создаете свой блог, пишите статью, показываете свои варинты решения, мы свои и наоборот... Как вам моё предложение?

03.06.2012 15:23:05 Alien

Отличный цикл статей, очень благодарен вам, так как почерпнул из них много нового и полезного, того, ради чего  иногда приходиться проводить часы, в поиске в интернете, или чтения документации. Спасибо вам. Пс. А выложить в свободный репозиторий было бы класно.

04.06.2012 10:10:09 НУЖНО!

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

04.06.2012 10:14:29 Calabonga

для НУЖНО!

А знаете, на habrahabr меня даже не пустили сразу. Пришлось написать себе свой блог и писать в него свои статьи! А теперь еще и других разумных блоггеров сюда собрать... Чуть позже открою свободную регистрацию... но пока бета версия, поэтому по приглашениям.

P.S. Спасибо на добром слове.

08.06.2012 21:38:31 Max

Доброго времени суток, иду по стопам статьи :) , узнал много нового по работе с МVC, так что статья однозначно нужная и полезная!  но возник вопрос, после создания шаблона TagSelector.cshtml - появилась проблемма при создании экспозиции - не видит данные поля Tags (срабатывает валидация, считает, что TextBox не заполнен), автокомплит также не работает, но это уже вторично, не пойму  где закралась ошибка с полем Тags...

08.06.2012 23:39:19 Max

Доброго времени суток, возник такой вопрос по данной теме: после добавления шаблона TagSelector.cshtm  при создании новой экспозиции, перестало видеть данные вводимые для тэгов в TextBox (срабатывает валидатор для Tags), также аутокомплит не срабатывает, но это уже вторично, главный вопрос - почему не видет значения поля Tags? ставил точку останова в методе действия Create  - Tags = null

09.06.2012 11:05:42 Max

Прошу прощение за даблпост, думал что  браузер глюкнул, пришлось писать заново :)

25.05.2017 4:55:12 Calabonga

Мах, а вы не смотрели как всё реализовано в моем проекте. Я выложил проект в части 8 . Посмотрите ссылку в конце статьи. Проверьте что и как реализовано у вас, если не получится - будем посмотреть.

P.S.: за двойной пост... ничего страшного - пусть будет :)