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 { getset; }
}

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

Подробнее: http://feedproxy.google.com/~r/blogmusor/~3/eKLXoh5wBE4/82

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

ASP.NET MVC: История одного проекта UI - Редактирование экспоната (часть 7) | | 2012-09-13 08:38:56 | | Программирование | | Содержание ASP.NET MVC: История одного проекта Готовимся к старту (часть 1)ASP.NET MVC: История одного проекта Всё ради данных (часть 2)ASP.NET MVC: История одного проекта Шаблоны и внешний вид | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: