Режимы отображения DisplayMode

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

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

Инфраструктура ASP.NET MVC 4 содержит такую функциональность как режимы отображения или DisplayMode. Например, у нас есть некое представление Index.cshtml. Оно было предназначено для десктопов. И мы хотим рядом с ним сделать копию представления, но только уже для мобильных устройств. Для этого нам достаточно создать в проекте копию данного представления, добавив к его имени суффикс Mobile. То есть представление, которое ориентировано на мобильные устройства, у нас будет называться Index.Mobile.cshtml.

И больше нам ничего не надо менять: контроллеры и их действия остаются теми же. Но теперь этот суффикс Mobile будет показывать фреймворку, что представление Index.Mobile.cshtml надо использовать в ответ на запросы, исходящие от мобильных устройств. Во всех остальных случаях будет использоваться обычное представление Index.cshtml.

Теперь посмотрим на примере. Возьмем обычный проект asp.net mvc 4 и добавим ко всем его представлениям (в том числе к мастер-странице) двойники с суффиксом Mobile:

Теперь, если мы запустим проект на выполнение и обратимся к приложению из обычного браузера Opera (либо другого браузера, предназначенного для персональных компьютеров), то мы увидим представление Index.cshtml:

В то же время если мы обратимся к приложению из браузера Opera Mobile, то обращение уже будет идти к представлению Index.Mobile.cshtml:

Переопределение режима DisplayMode

Благодаря суффиксу Mobile фреймворк узнавал о том, что страница предназначена для мобильных устройств. Однако этим работа функциональности DisplayMode не исчерпывается. Так, мы можем переопределить ее действие. Зачем это надо? К примеру ряд браузеров и устройств могут не поддерживать какие-то определенные теги, стили, вследствие этого страницы могут отображаться некорректно.

Так, в настоящее время существует большое число пользователей, которые используют Internet Explorer 8. И мы, допустим, хотим, чтобы наш сайт при запросах от IE 8 использовал только определенные представления - как и в случае с мобильными устройствами.

Для этого вначале нам надо зарегистрировать в файле Global.asax в методе Application_Start новый режим отображения для Internet Explorer 8:

using System.Web.WebPages;
...............
        protected void Application_Start()
        {
            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("IE8")
            {
                ContextCondition = (context => context.Request.UserAgent.Contains("MSIE 8"))
            });
        ......................................

Здесь мы смотрим, содержит ли свойство UserAgent у объекта Request "MSIE 8" - то есть был ли запрос послан браузером IE 8. В этом случае мы используем новый режим DefaultDisplayMode("IE8"). Параметр "IE8" означает, что наши специфичные представления будут иметь названия типа [имя_представления].IE8.cshtml. Собственно также, как и с мобильными приложениями. Поэтому добавим в проект представление Index.IE8.cshtml и сэмулируем запрос от IE 8, например, в IE 10 в режиме совместимости:

Переключение между мобильным и десктопным вариантом

Несмотря на то, что автоматическое переключение представлений между мобильной и десктопной версиями очень удобно, все же подобный автоматизм может вызвать неудобства. Десктопные сайты предлагают, как правило, пользователю гораздо больше функционала, чем мобильные. И некоторым пользователям, возможно, больше нравится десктопная версия даже при обзоре на мобильном устройстве.

Чтобы решить эту проблему, ряд сайтов предлагает переключение режимов отображения - с мобильного на десктопный и обратно. Подобную функциональность мы можем использовать и в приложениях asp.net mvc. Для этого вначале добавим в проект с помощью пакетного менеджера NuGet библиотеку jQuery.Mobile.MVC:

Этот пакет добавляет в проект ряд файлов:

• Во-первых, добавляется библиотека jquery.mobile.js и ее минимизированная версия, а также используемые этой библиотекой файлы стилей css.

• Во-вторых, добавляется контроллер ViewSwitcherController, который переключает режимы отображения.

• В-третьих, добавляется мастер-страница _Layout.Mobile.cshtml и файл стилей Site.Mobile.css для мобильного вида (при их отсутствии).

• А также добавляется частичное представление _ViewSwitcher с разметкой переключения режимов.

Кроме того, в каталог App_Start проекта добавляется файл BundleMobileConfig.cs, который содержит объявление мобильного бандла, включающего библиотеку jquery.mobile и все сопутствующие файлы стилей. Если мы в будущем собираемся использовать этот бандл, то нам надо зарегистрировать его в файле Global.asax в методе App_Start:

protected void Application_Start()
{
    BundleMobileConfig.RegisterBundles(BundleTable.Bundles);

    //..............................
}

Теперь, чтобы задействовать функционал переключения, добавим в мастер-страницы layout (и в обычную, и в мобильную версии) вызов частичного представления _ViewSwitcher (естественно мы можем локализовать представление _ViewSwitcher.cshtml, настроив нужным нам образом отображения переключения режимов):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Обычный сайт</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @Html.Partial("_ViewSwitcher")
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

После этого, обратившись к приложению на мобильном устройстве, нам будет доступна функция переключения режимов отображения:

Таким образом, в приложении ASP.NET MVC 4 мы легко можно связать обычную десктопную версию вею-приложения с мобильной и при необходимости осуществлять переключение между ними.