Metadata + JavaScript = ♥ Применение метаданных ViewModel для конфигурирования комплексных JavaScript-контролов через Fluent-интерфейс
1 like1,032 views
Документ представляет выступление Тимура Рахматиллаева на 3-й конференции .NET разработчиков, посвященное использованию JavaScript и C# для работы с формами в ASP.NET. Он обсуждает метаданные, атрибуты и валидацию на стороне сервера и клиента, а также предлагает решения для упрощения конфигурации форм и повторного использования кода. Доклад также затрагивает концепцию метаданных и использование JSON для взаимодействия с контролами.
![Использование атрибутов[AttributeUsage(AttributeTargets.Property)]publicclassRosesCountAttribute : Attribute{publicintRosesCount { get; privateset; }publicRosesCountAttribute(introsesCount) {RosesCount= rosesCount; }}](https://image.slidesharecdn.com/javascriptmetadata-110927033046-phpapp01/85/Metadata-JavaScript-ViewModel-JavaScript-Fluent-9-320.jpg)
![Использование атрибутов. ФормаpublicclassAttributesLetterForm{[RosesCount(101)]publicstringLoveLetter { get; set; }}](https://image.slidesharecdn.com/javascriptmetadata-110927033046-phpapp01/85/Metadata-JavaScript-ViewModel-JavaScript-Fluent-10-320.jpg)
![Еще больше ужаса[Required][RegularExpression(@"\d{5}\-\d+")][DisplayName("My dear field one")][UIHint("DearFieldOne")][RosesCount(5)][VeryCustom("This", "Attrbiute", "Is", "So", "Long")][Editable(true)]publicstringFieldOne { get; set; } [Required][DisplayFormat(DataFormatString = "M")][DisplayName("My cute field two")][UIHint("CuteFieldTwo")][RosesCount(7)][VeryCustom("This", "Attrbiute", "Takes", 6, "Strings", "And", 2, "Integers")][Display(Order = 5)]publicDateTimeFieldTwo { get; set; }](https://image.slidesharecdn.com/javascriptmetadata-110927033046-phpapp01/85/Metadata-JavaScript-ViewModel-JavaScript-Fluent-12-320.jpg)
Metadata + JavaScript = ♥ Применение метаданных ViewModel для конфигурирования комплексных JavaScript-контролов через Fluent-интерфейс
- 1. 3-я конференция .NET разработчиков25 сентября 2011Metadata + JavaScript = ♥ Тимур РахматиллаевIndyCodehttp://muyou.koumakan.jp
- 3. Сказка о любви между формой и JavaScript’ом??JavaScriptФорма
- 5. «В лоб!»Размещаем код инициализации с жестко заданными параметрами во ViewДля каждого из возможных применений JavaScript-контрола – свой View
- 6. «В лоб!»
- 7. Что делать, если…Требуется валидация введенных данных (в т.ч. серверная)
- 8. JavaScript-контролысложныебольшое число параметров конфигурациипривязка к полям формыПовторное использование JavaScript-контролов (работа «из коробки»)Конфигурирование на стороне сервера (C#-код)ФормаАтрибуты DataAnnotationsПоля формы
- 9. Использование атрибутов[AttributeUsage(AttributeTargets.Property)]publicclassRosesCountAttribute : Attribute{publicintRosesCount { get; privateset; }publicRosesCountAttribute(introsesCount) {RosesCount= rosesCount; }}
- 10. Использование атрибутов. ФормаpublicclassAttributesLetterForm{[RosesCount(101)]publicstringLoveLetter { get; set; }}
- 11. Использование атрибутов…О ужас!varattribute = typeof(AttributesLetterForm).GetProperty("LoveLetter") .GetCustomAttributes(typeof(RosesCountAttribute), true) .SingleOrDefault() asRosesCountAttribute;varrosesCount = attribute != null ? attribute.RosesCount: 0;
- 12. Еще больше ужаса[Required][RegularExpression(@"\d{5}\-\d+")][DisplayName("My dear field one")][UIHint("DearFieldOne")][RosesCount(5)][VeryCustom("This", "Attrbiute", "Is", "So", "Long")][Editable(true)]publicstringFieldOne { get; set; } [Required][DisplayFormat(DataFormatString = "M")][DisplayName("My cute field two")][UIHint("CuteFieldTwo")][RosesCount(7)][VeryCustom("This", "Attrbiute", "Takes", 6, "Strings", "And", 2, "Integers")][Display(Order = 5)]publicDateTimeFieldTwo { get; set; }
- 14. Атрибуты – лишь намек на серьезные отношенияФормаАтрибуты DataAnnotationsПоля формы
- 15. Использование полей формыpublicclassDataLetterForm{publicstringLoveLetter { get; set; }publicintRousesCount { get; set; }}// ...publicActionResultExample(){varmodel = newDataLetterForm{RousesCount= 101 };returnView(model);}
- 16. Использовать поля формы – ниже рыцарского достоинстваФормаАтрибуты DataAnnotationsПоля формы
- 17. Недостатки решений «из коробки»Недостаточная гибкость
- 19. Workaround
- 20. Трудность для восприятия и навигацииMvcExtensionsприходит на помощьMvcExtensionsФормаJavaScript
- 21. Метаданные!
- 23. Метаданные формыpublicclassLetterFormMetadata:ModelMetadataConfiguration<LetterForm> {publicLetterFormMetadata() {Configure(x => x.LoveLetter).HideForDisplay().DisplayName("Любовное послание").Template("LoveLetter").IncludeRoses(101); } }
- 25. Рецепт хороших метаданныхРеализация интерфейса IModelMetadataAdditionalSetting для хранения метаданных данных
- 26. Метод-расширение для соответствующего Builder’а
- 27. Немного кода во View(добавлять по вкусу)Из чего же они состоят…МетаданныеОписание свойстваsettings
- 28. … и как строятсяМетаданныеБилдерМетодыМетоды-расширенияОписание свойстваsettings
- 29. А если сложнее?
- 30. Говорим на языке JavaScript’а?
- 31. Используем JSONСериализация данных, хранимых в setting в формат JSON
- 32. JSON-объект является объектом инициализации контрола
- 33. Применимо для большинства контролов (jQuery UI и другие)Нам потребуется…MvcExtensions
- 34. Newtonsoft.Json
- 35. MVC FuturesИ брюки превращаются…
- 36. Выигрыш от подобного решенияПростота рефакторинга и тестирования
- 37. Удобство при повторном использовании
- 38. Fluent-интерфейс
- 39. Минимальный код во View
- 40. Определение параметров валидации (клиентской и серверной)А если без JavaScript’а?Сериализация метаданных в data-атрибуты HTML-тега
- 41. Ненавязчивый (unobtrusive) JavaScript – поведение элементов, определяется набором их атрибутов
- 42. Атрибут role
- 43. Сборка объекта конфигурации изdata-атрибутовВот и сказке конецhttp://mvcextensions.codeplex.com
- 45. http://eskat0n.habrahabr.ruСпасибо за вниманиеТимур РахматиллаевIndyCodemuyou.prj@gmail.comtwitter.com/eskat0n