Содержание
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, new { data_autocomplete = @Url.Content(«/museum/tagsearch/») }) @Html.ScriptBlock(@<script type=»text/javascript» src=»@Url.Content(«/scripts/tags.js»)»></script>)
Посмотрев на представленный код разметки, вы должны были догадаться, что теперь требуется создать в контролере 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) .Select(x => new { id = x.Id, label = x.Name }) .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 символов»)] [UIHint(«TagSelector»)] 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(this 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) экран с возможностью выбора дальнейших действий и с извинениями по поводу случившегося. Чуть позже я буду делать фильтрацию по типу зала и по тегам (на главной странице). А еще чуть позже облако меток… Короче, работы еще хватает.
Подробнее: http://feedproxy.google.com/~r/blogmusor/~3/eKLXoh5wBE4/82
Источник: