ASP.NET MVC: История одного проекта "UI - Редактирование экспоната" (часть 7)
Сайтостроение | создано: 28.05.2012 | опубликовано: 28.05.2012 | обновлено: 13.01.2024 | просмотров: 9893 | всего комментариев: 18
В этой части сделаем 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("<", "<"); TxtString = TxtString.Replace(">", ">"); TxtString = TxtString.Replace(" ", " "); TxtString = TxtString.Replace(" ", " "); TxtString = TxtString.Replace(" ", " "); TxtString = TxtString.Replace(" ", " "); TxtString = TxtString.Replace(" ", " "); TxtString = TxtString.Replace("\t", " "); 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("<", "<"); TxtString = TxtString.Replace(">", ">"); TxtString = TxtString.Replace(" ", " "); TxtString = TxtString.Replace(" ", " "); TxtString = TxtString.Replace(" ", " "); TxtString = TxtString.Replace(" ", " "); TxtString = TxtString.Replace(" ", " "); TxtString = TxtString.Replace(" ", "\t"); TxtString = TxtString.Replace("<br />", "\n"); return TxtString; }
И конечно же я сразу же применил эти методы и при добавдении нового экспоната, и при редактировании.
Метод Show
Отображение экспоната я тоже немного переделал, потому что сгенерированный MvcScaffolding вид был, мякго говоря, "не очень". Теперь просмотр выглядит так:
Заключение
Назрела необходимость сделать обработку ошибок, чтобы вместо "желтого экрана смерти ASP.NET" или стандартного экрана ошибки 404 посетитель сайта увидел дружелюбный (Friendly) экран с возможностью выбора дальнейших действий и с извинениями по поводу случившегося. Чуть позже я буду делать фильтрацию по типу зала и по тегам (на главной странице). А еще чуть позже облако меток... Короче, работы еще хватает.
Комментарии к статье (18)
Хочется разобраться в вашем проекте, но, к сожалению, не все понятно. Хотелось бы взглянуть на рабочую вещь в виде проекта. Не подскажите, где можно скачать?
Выкладывание проекта не планировалось, может спросите, что не понятно?
_http://skyliver.ru/blog/item/73 Почему бы не сделать как тут? и описание и код приложен, чтоб можно было разобраться и не тратить некоторое количество времени на собирание готового велосипеда.
Видите ли, Алекс, дело в том, что одно дело написать одну статью про "Табличный вывод данных" подробно с картинками, красиво разложив всё по полочкам, и поверьте, совсем другое дело писать статью о целом сайте создающемся "с нуля". Пишутся статьи в реальном времени вместе с сайтом, пока есть свободное время, а его не так много (времени, я имею ввиду)... Поэтому очень трудно писать последовательно излагая мысли, вспоминая что писалось неделю назад.
Поэтому приношу свои извинения, что получается "коряво", я уже и сам не рад, что пустился в "пляс" с этим общественным программированием. Вообще подумываю прекратить писать цикл статей. И ваше высказывание - очередное доказательство в пользу прекращения. :)
Извиняюсь за столь негавтиные мысли в вашей голове, к которым привел мой комментарий, но уверяю вас, что таких статей очень мало и ваша очень замечательная. Одно дело учиться по книгам, другое - создать готовый продукт. Когда ты видишь результат и конечную цель, то обучение проходит намного быстрее и интереснее. Так что прошу вас не прекращать цикл статей, они полезны будут многим людям которые только начали учить MVC. Я всего лишь спросил проект потому, что как и у вас не очень много свободного времени, а освоить хочется и совсем не хотел чтоб у вас негативные выводы появились.
Ну что ж... Значит продолжим написание цикла статей. А я могу пообещать, что в следующей статье выложу проект для скачивания, чтобы исключить лишние вопросы.
Может тогда сразу на github или какой нибудь другой хостинг выложите свой проект?
Спасибо вам огромное)!
ukurok, я не вижу особого смысла выкладывать проект куда-либо еще кроме как на этом сайте.
Добрый день
Мой пост - не критика, а приглашение к обсуждению идей. Я в последние годы занимался разработкой очень сложных интерактивных форм. Но мои формы, они чисто клиентские, без серверной части. Хотел бы поделиться своими наблюдениями о проблемах с которыми я столкнулся, может кто подскажет варианты преодоления.
Мне кажется внутренняя реализация логики контролов слишком доступная. Например у меня на форме 30 полей, 15 из которых это списки с выбором, 6 из которых это выбор сотрудника, режимов выбора сотрудника - 4 (режим это подмножество сотрудников). При описанном вами подходе, похоже дублирование будет существенное.
Далее скажу, что я разочаровался в использовании атрибутов в качестве мета информации для контролв. В моей ситуации интерактивная форма должна позволять динамически настраивать доступ в зависимости не только от роли пользователя, но и от состояния доменного объекта, который мы в данный момент редактируем (например при создании заказа, поле адрес не обязательно, но если заказ дошел до этапа оформление, это поле становится обязательным). С атрибутами этот фокус не пройдет. Та же проблема возникнет с аспектами readOnly и required.
Еще одна проблема атрибутов это их ограничения на использование полиморфизма. Например у меня контрол выбора сотрудника он позволяет а) выбирать одного сотрудника или несколько, б) задать одно из подмножеств сотрудников у большинства других контролов тоже есть режимы. Чтобы обеспечить OCP нам необходимо или пользоваться строками (отказаться от типов) или использовать полиморфизм с интерфейсам чего не позволяют атрибуты.
Меркадер, а я в свою очередь хочу предложить вам создать свой блог на нашем сайте и тогда мы с большим удовольствием поучавствуем в обсмуждении, ибо вопросы и проблемы которые вы подняли в своем комментарии очень актуальны. В рабочем проекте (по долгу службы, который приходится писать) озвученные проблемы приходится решать по ходу. А вместе - будет веселей.
Создаете свой блог, пишите статью, показываете свои варинты решения, мы свои и наоборот... Как вам моё предложение?
Отличный цикл статей, очень благодарен вам, так как почерпнул из них много нового и полезного, того, ради чего иногда приходиться проводить часы, в поиске в интернете, или чтения документации. Спасибо вам. Пс. А выложить в свободный репозиторий было бы класно.
Прекраснейшие статьи, регулярно пополняются. Кол-во кода и описания сбалансировано, виден ход ваших мыслей, а это уже дорогово стоит. Обязательно допишите цикл до конца. На хабре один "умник" начал свой цикл раньше вас (писал свой хабрахабр на асп мвс) и похоже, "кинув" всех, остановился более месяца назад на уровне примерно второй статьи. Все с нетерпением ждали и следили и вот такое разочрование... но кто-то привел Ваш блог и ссылку на Ваш цикл статей в пример в комментариях на хабре и вот теперь с коллегами читаем еще более профессиональные статьи у Вас. Спасибо! Делитесь опытом по мере возможности... интересно!
для НУЖНО!
А знаете, на habrahabr меня даже не пустили сразу. Пришлось написать себе свой блог и писать в него свои статьи! А теперь еще и других разумных блоггеров сюда собрать... Чуть позже открою свободную регистрацию... но пока бета версия, поэтому по приглашениям.
P.S. Спасибо на добром слове.
Доброго времени суток, иду по стопам статьи :) , узнал много нового по работе с МVC, так что статья однозначно нужная и полезная! но возник вопрос, после создания шаблона TagSelector.cshtml - появилась проблемма при создании экспозиции - не видит данные поля Tags (срабатывает валидация, считает, что TextBox не заполнен), автокомплит также не работает, но это уже вторично, не пойму где закралась ошибка с полем Тags...
Доброго времени суток, возник такой вопрос по данной теме: после добавления шаблона TagSelector.cshtm при создании новой экспозиции, перестало видеть данные вводимые для тэгов в TextBox (срабатывает валидатор для Tags), также аутокомплит не срабатывает, но это уже вторично, главный вопрос - почему не видет значения поля Tags? ставил точку останова в методе действия Create - Tags = null
Прошу прощение за даблпост, думал что браузер глюкнул, пришлось писать заново :)
Мах, а вы не смотрели как всё реализовано в моем проекте. Я выложил проект в части 8 . Посмотрите ссылку в конце статьи. Проверьте что и как реализовано у вас, если не получится - будем посмотреть.
P.S.: за двойной пост... ничего страшного - пусть будет :)