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

Содержание

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

• Комментарии