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

В этой части сделаем 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) экран с возможностью выбора дальнейших действий и с извинениями по поводу случившегося. Чуть позже я буду делать фильтрацию по типу зала и по тегам (на главной странице). А еще чуть позже облако меток... Короче, работы еще хватает.