Вторник, 30 мая, 2017

Разработка приложения ASP.NET MVC 4 сразу для мобильных и десктопных браузеров

комментарии: 7

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

В MVC 4 появилась новая возможность изменения режима отображения, когда можно создавать различные версии представления, и выбирать соответствующую версию в зависимости от используемого браузера. Например, если десктопный браузер запросил начальную страницу сайта, то генерируется страница через представление Views\Home\HomePage.cshtml, а если запрос пришел от браузера мобильного устройства, то выбирается представление Views\Home\HomePage.Mobile.cshtml, причем URL будет тем же самым.

Так же работают мастер-представления и частичные представления. То есть, для каждого запроса десктопного браузера будет использоваться Views\Shared\_Layout.cshtml, а для мобильного - Views\Shared\_Layout.Mobile.cshtml.

Как работает режим отображения

Чтобы начать использовать различные представления для различных браузеров, нужно зарегистрировать режим отображения в событии Application_Start в файле global.asax.cs. И затем приложение сможет выбирать нужную версию представления в зависимости от того, каким условиям удовлетворяет браузер.

Зарегистрировать новый режим отображения можно с помощью класса DefaultDisplayMode. Например, следующий код зарегистрирует режим отображения "Mobile", который будет использоваться для запросов от мобильных браузеров.

protected void Application_Start()
{
    System.Func contextCheckDelegate = contextCheck;
    DefaultDisplayMode mobileMode = new DefaultDisplayMode("Mobile");
    mobileMode.ContextCondition = contextCheckDelegate;
    DisplayModeProvider.Instance.Modes.Add(mobileMode);
}

public bool contextCheck(HttpContextBase httpContextBase)
{
   if(/* проверить здесь - мобильный ли браузер */)
   {
       return true;
   }
   else
   {
       return false;
   }
}

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

Пример использования двух режимов отображения

Рассмотрим небольшой пример приложения с двумя режимами отображений - для десктопных браузеров и для мобильных.

  • Создадим новое приложение ASP.NET MVC 4
  • В папках Views/Home и Views/Shared добавим новые представления для мобильных устройств. Можно перенести представления из проекта для мобильного приложения и переименовать их как показано на рисунке ниже.

  • И добавим следующий код в событие Application_Start файла global.asax.cs.
protected void Application_Start()
{
    System.Func<HttpContextBase, bool> contextCheckDelegate = contextCheck;
    DefaultDisplayMode mobileMode = new DefaultDisplayMode("Mobile");
    mobileMode.ContextCondition = contextCheckDelegate;
    DisplayModeProvider.Instance.Modes.Add(mobileMode);
}

public bool contextCheck(HttpContextBase httpContextBase)
{
    string strUserAgent = httpContextBase.Request.UserAgent;
    Regex strBrowser = new Regex(@"android.+mobile|blackberry|ip(hone|od)",
                    RegexOptions.IgnoreCase | RegexOptions.Multiline);
    if ((strBrowser.IsMatch(strUserAgent)))
    {
         return true;
    }
    return false;
}
  • Скомпилируем, сбилдим и запустим проект.
  • Откроем один и тот же URL в десктопном браузере и в браузере любого мобильного эмулятора. Или можно установить в браузер Mozilla дополнения Mozilla User Agent Switcher Add-ons и переключить user agent на iPhone. В браузерах откроются разные версии страницы.

Самое важное в этом примере, то что в браузеры открыли содержимое с одинаковым URL, но сгенерированы страницы по-разному.

Комментарии

KANekT KANekT 03 июля, 2013, 10:21
замените regexOptions на RegexOptions у меня в проекте DisplayModes выделил красным - может тоже, где ошибка в тексте ?
Василий Мажекин Василий Мажекин 03 июля, 2013, 02:20
да, это конечно ошибка в статье, спасибо за замечание, поправил
KANekT KANekT 04 июля, 2013, 12:30
В статье так и остались ошибки, может изменения не сохранились?
KANekT KANekT 04 июля, 2013, 12:36
DisplayModes.Modes.Add(mobileMode); DisplayModes - выделяет красным
Василий Мажекин Василий Мажекин 04 июля, 2013, 07:27
да, надо так - DisplayModeProvider.Instance.Modes.Add(mobileMode);
Алекс Алекс 19 апреля, 2016, 11:55
Как сделать переход на полную версию ( не мобильную) сайта
Алекс Алекс 13 июня, 2016, 10:28
Как сделать переход на полную версию ?

 

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

Войти через Twitter Войти через Facebook Войти через ВКонтакте Войти через Github Войти через Google Войти через LinkedIn

Copyright © 2013 All Rights Reserved for CodeHint.ru      Powered by Windows Azure