Главная страница   /   23.1. Выбор рабочей среды представления с помощью DisplayModes (ASP.NET MVC 4 в действии

ASP.NET MVC 4 в действии

ASP.NET MVC 4 в действии

Джеффри Палермо

23.1. Выбор рабочей среды представления с помощью DisplayModes

Для того чтобы поддерживать различные устройства – смартфоны, планшеты и стационарные компьютеры – разработчики внешнего интерфейса исторически прибегали ко множеству способов решения проблемы на стороне клиента. Специальные CSS-селекторы, которые интерпретируются только единичным веб-браузером, JavaScript, который пытается вычислить, на каком устройстве отображается представление – все эти приемы создают бессчисленное количество кросс-браузерных проблем и добавляют нагрузки в процесс поддержания в рабочем состоянии консруктивных решений с совершенными пикселями. Это была проигрышная битва, поскольку с каждым годом появлялось все больше устройств, каждый со своим собственным набором причуд и стандартов реализации, но времена изменились. ASP.NET MVC 4 обладает великолепным решением для представлений, специфичных для конкретного устройства, которое не полагается на "веселье" на стороне клиента: DisplayModes.

Использование Mobile DisplayMode

Лучшим способом исследования этой новой возможности является использование встроенного DisplayMode, специально разработанного для мобильных устройств. Если дано представление с названием файла Index.cshtml, то будет создана копия с названием Index.Mobile.cshtml. Эта копия будет отображаться, когда к странице будут обращаться с мобильного устройства.

  • Index.cshtml – отображается в веб-браузерах стационарных компьютеров
  • Index.Mobile.cshtml – отображается на мобильных устройствах

В контроллере ничего менять не нужно – это регулярный метод действия. ASP.NET MVC знает, как изменить отображаемое представление, и разработчикам не нужно знать, какие представления являются доступными.

Ручное тестирование различных веб-браузеров

Для того чтобы протестировать возможность DisplayModes, вы, возможно, захотите придумать другой пользовательский агент. В HTTP заголовок поля User-Agent описывает программное обеспечение, выполняющее запрос – он используется веб-браузером для идентификации самого себя на сервере. Различные устройства и веб-браузеры отправляют на сервер различные заголовки User-Agent. Вы можете тестировать с помощью различных пользовательских агентов сложным способом, фактически используя различные устройства, которые вас интересуют, или вы можете установить ваш регулярный веб-браузер, подделав заголовок User-Agent, который отлично работает в рамках простого ручного тестирования.

Если вы используете Internet Explorer 9 или Chrome, то вы можете подделать поле User-Agent путем использования встроенных инструментов разработки. В IE9 вызовите инструменты разработки с помощью клавиши F12, а затем выберите в меню пункт Tools > Change User Agent String. В Chrome вызовите инструменты разработки также с помощью клавиши F12 и нажмите на иконку устройства; поле в этом окне настроек позволит вам изменить заголовок User-Agent, который посылает ваш веб-браузер. В Firefox существует портативное расширение, называемое User Agent Switcher, которое функционирует аналогично (https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/).

Одним замечательным фактом, касающимся DisplayModes, является то, что он работает не только для регулярных представлений. Он также работает и для макетов, и частичных представлений. Вы можете настроить пользовательское событие на самом подробном уровне согласно тому устройству, которое они используют. Если представление не имеет мобильной версии, то фреймворк отобразит регулярную версию на смартфоне, как вы того и ожидали.

Давайте рассмотрим пример, который демонстрирует DisplayModes. В этом примере мы будем использовать частичное представление внутри регулярного представления, которое обладает заданным макетом. Вы можете видеть выходной результат на рисунке 23-1, где страница отображается в стационарном веб-браузере. Каждый файл представления в приложении – частичное, регулярное представление и макет – записывает свое название в веб-браузер.

Рисунок 23-1: Обычное использование Chrome без подделки User-Agent

После того, как вы настроите инструменты разработки вашего веб-браузера таким образом, чтобы они подделывали мобильное устройство и обновляли страницу, вы заметите изменение. Как показано на рисунке 23-2, приложение отображает представления для конкретного мобильного устройства.

Рисунок 23-2: Использование Chrome, настроенного таким образом, чтобы отправлять User-Agent в виде мобильного устройства

Рисунок 23-3 демонстрирует, как организованы файлы проекта. Файлы с суффиксом .Mobile используются всякий раз, когда ASP.NET обнаруживает, что запрос исходит от мобильного устройства.

Рисунок 23-3: Представления для конкретного мобильного устройства в проекте

Создание нового DisplayModes

Допустим, ваше приложение имеет фрагмент макета, который вы хотели бы настроить для Internet Explorer 9. Вы хотите создать пользовательское частичное представление и пользовательский DisplayMode, который будет отображать ваше специальное IE9 частичное представление только при необходимости. Вы можете создать специальное представление прямо рядом с регулярным представлением, как это продемонстрировано на рисунке 23-4, но присвойте специальному представлению пользовательский суффикс IE9.

Рисунок 23-4: Представление, настроенное для Internet Explorer 9 – Partial.IE9.cshtml

Вам сейчас, наверное, интересно, как написать код, который распознает этот определенный веб-браузер. Я раскрою вам секрет: Internet Explorer 9 отправляет заголовок User-Agent, который содержит текст MSIE 9. Поскольку никакой другой веб-браузер не будет использовать этот текст, его присутствие – это идеальный тест для нашего пользовательского DisplayMode. Таким образом, вот ваша эврика: заголовок User-Agent можно протестировать для того, чтобы увидеть, содержит ли он конкретную строку. После прохождения теста вы можете дать ASP.NET MVC указание использовать суффикс .IE9 таким образом, чтобы отображалось частичное представление, продемонстрированное на рисунке 23-4.

Еще одним замечательным фактом, касающимся DisplayModes, является то, что API облегчает объявление новых режимов. Путем вставки DisplayMode с функцией теста и суффиксом в статический провайдер вы можете установить новый режим для приложения:

DisplayModeProvider.Instance.Modes
		.Insert(0, new DefaultDisplayMode("IE9")
		{
			ContextCondition = context =>
				context.Request.UserAgent.Contains("MSIE 9")
		});

В предыдущем фрагменте отметьте свойство ContextCondition класса DefaultDisplayMode (строка 4). Тип этого свойства – Func<HttpContextBase, bool>, функция, которая принимает HTTP контекст и возвращает результат теста типа Boolean: true – если этот DisplayMode должен быть включен. Сама тестовая функция находится в заголовке User-Agent (строка 5). Наконец, вы определяете суффикс в параметре конструктора для DefaultDisplayMode (строка 2). Это кодовый клей, который заставляет работать это пользовательское частичное представление IE9.

На рисунке 23-5 вы можете увидеть результат, отображаемый в Internet Explorer 9. Отображается специальное частичное представление, подтверждая тот факт, что новый DisplayMode работает.

Рисунок 23-5: Использование пользовательского частичного представления для Internet Explorer 9

Получение креативности с помощью DisplayModes

DisplayModes – великолепная возможность, поскольку, несмотря на то, что он должен был стать средством переключения представлений в зависимости от устройства, он настолько мощный и гибкий, что вы можете дать волю вашему воображению. Эрик Сауэлл в своем блоге "The Coding Humanist" исследовал использование DisplayModes для A/B тестирования – необычная и интересная идея.

Обычно используемое в сайтах электронной коммерции, A/B тестирование – искусство и наука отображения различного контента для пользователя в течение времени, а затем записывания того, что пользователи делают в ответ. Цель – увидеть, какой контент "конвертируется" – какой контент вызовет желаемое поведение пользователя. Возьмем, например, кнопку Purchase в онлайн-магазине, будут пользователи покупать больше товаров при красной или зеленой кнопке? Один лишь способ узнать это! У Сауэлла была идея создать пользовательский DisplayMode, который использует случайную генерацию чисел для отображения различных представлений.

Просмотрите статью блога Сауэлла "Doing Crazy Things with ASP.NET MVC 4’s Display Modes" (http://www.thecodinghumanist.com/blog/archives/2011/9/27/doing-crazythings-with-asp-net-mvc-4s-display-modes).

Разрешение пользователям переопределять DisplayModes

Случалось ли вам просматривать сайт, оптимизированный для мобильных устройств и упускающий некоторую возможность, которая предлагается в стационарной версии? С появлением мобильных устройств с высокой разрешающей способностью линия между страницами, нацеленными на мобильные веб-браузеры, и теми страницами, которые созданы для стационарных веб-браузеров, размывается сразу же, как только прорисовывается. Что если бы вы давали возможность людям, просматривающим сайт, выбирать, какую версию сайта они хотели бы видеть?

Например, вы могли бы читать статью газетного веб-сайта, оптимизированную для мобильного устройства, но раздел комментариев мог бы быть сокращен для того, чтобы установить меньший экран. Если бы пользователи захотели оставить комментарий, им пришлось бы просматривать сайт в виде, предназначенном для стационарных веб-браузеров. Пользователь, который желает оставить комментарий, должен иметь возможность видеть другую версию, переопределяющую специальное форматирование. На данный момент многие сайты предлагают пользователям возможность переключаться между дружественными мобильными и регулярными представлениями, и эта функциональность встроена в ASP.NET MVC.

Существует два метода расширений в HttpContextBase, которые поддерживают эти переходы. Ниже представлен первый из них:

HttpContext.SetOverridenBrowser(BrowserMode.Desktop)

Этот метод дает ASP.NET MVC указание отображать стационарно-нацеленные представления такие, как Index.cshtml, как если бы он не обнаружил мобильный веб-браузер.

Следующий метод выполняет противоположное:

HttpContext.SetOverridenBrowser(BrowserMode.Mobile)

С помощью передачи другого значения BrowserMode Index.cshtml будет отображен как будто на мобильном устройстве, даже если доступен стационарный веб-браузер.

Наконец, следующий метод будет отменять любое переопределение и демонстрировать мобильные представления для мобильных устройств и стационарные представления для стационарных устройств:

HttpContext.ClearOverridenBrowser()

Существует простой способ перенесения этого кода, переключающего представления, в существующее приложение – вы можете использовать NuGet пакет, созданный членами команды ASP.NET, который продемонстрирован на рисунке 23-6. Пакет имеет название jQuery.Mobile.MVC и после установки вводит четыре новые сущности:

  • JavaScript библиотеку jQuery.Mobile, которая помогает дизайнерам создавать сайты, которые отлично смотрятся на мобильных устройствах
  • Приятный файл _Layout.Mobile.cshtml
  • ViewSwitcherController, который поддерживает переопределение DisplayModes с помощью методов расширения, описанных ранее
  • Частичное представление _ViewSwitcher, связанное с ViewSwitcherController
Рисунок 23-6: Установленный NuGet пакет jQuery.Mobile.MVC

После того, как вы установили пакет, вы можете отображать частичное представление view switcher, а переопределенная возможность будет работать в вашем приложении:

@Html.Partial("_ViewSwitcher")
Рисунок 23-7: Отображение частичного представления view switcher в мобильных представлениях приложения

Вы можете видеть view switcher, отображаемый вверху окна веб-браузера, на рисунке 23-7. На рисунке 23-8 вы можете видеть, что отображается после нажатия ссылки Desktop View. Даже если мы используем (или, по крайней мере, моделируем) мобильное устройство, отображается обычный стационарный режим.

Рисунок 23-8: После нажатия ссылки Desktop View приложение отображает стационарные представления даже для мобильных устройств

Возможность DisplayModes – великолепный способ изоляции кода, который вы пишите для различных устройств. В данном примере мы создали специальное представление для Internet Explorer 9, но эта возможность будет полезной при написании кода для более ранних версий веб-браузеров таких, как Internet Explorer 6. DisplayModes может защитить вашу команду разработчиков от многих проблем совместимости перекрестных устройств, позволяя им писать специальные представления для этих граничных веб-браузеров. Для управления составными клиентами больше не нужен сложный и хрупкий код на стороне клиента. Скручивание мобильной поддержки также просто, как и установка NuGet пакета.

Мобильная разработка на ASP.NET платформе быстро развивается. Наряду с новой DisplayModes возможностью ASP.NET MVC поддерживает оптимизацию клиентских ресурсов таких, как CSS и JavaScript. Вам необходима вся производительность, которую вы можете собрать в мобильном пейзаже с низким диапазоном частот. В следующем разделе мы рассмотрим то, как вы можете использовать преимуществаи пакетирования для того, чтобы ускорить пользовательское тестирование ваших веб-приложений.