Статьи

ASP.NET MVC 4 Developer Preview: режимы отображения

Декабрь 16, 2018

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

Прежде чем начать, вы должны прочитать первую статью из этой серии о ASP.NET MVC 4 Developer Preview.

Установка

Прежде чем приступить к разработке, вам необходимо установить сборки MVC 4. Самый простой способ сделать это через установщик веб-платформы. MVC 4 доступен для Visual Studio 2010 или Visual Studio 2011 Developer Preview.

Все статьи MVC, которые я создаю, разработаны в Visual Studio 2011 Developer Preview. Ниже приведены ссылки для начала.

Мобильные представления по умолчанию в MVC 4

Важно понимать новую функцию в MVC 4. По умолчанию, если вы добавляете представление .mobile.cshtml в папку, это представление будет отображаться на мобильных и планшетных устройствах.

fig1

Это хорошая функция, но если вы хотите настроить таргетинг на определенные устройства, такие как iPhone, iPad или Windows Phone, вы можете использовать режимы отображения .

Для этого вам нужно зарегистрировать новый экземпляр DefaultDisplayMode, чтобы указать, какое имя искать, когда запрос удовлетворяет условию. Вы устанавливаете это в файле global.asaxApplication_Start Вот как указать режим отображения для iPhone. 

  защищенная пустота Application_Start ()

 {

 DisplayModes.Modes.Insert (0, новый DefaultDisplayMode ("iPhone")

 {

 ContextCondition = (context => context.Request.UserAgent.IndexOf

 ("iPhone", StringComparison.OrdinalIgnoreCase)> = 0)

 });

 }

Чтобы использовать представления, соответствующие этому условию, вы создаете представление, но изменяете расширение на .iPhone.cshtml Аналогично, если вы хотите настроить таргетинг на iPad, создайте экземпляр iPad. 

  DisplayModes.Modes.Insert (0, новый DefaultDisplayMode ("iPad")

 {

 ContextCondition = (context => context.Request.UserAgent.IndexOf

 ("iPad", StringComparison.OrdinalIgnoreCase)> = 0)

 });

По сути, режимы отображения проверяет пользовательский агент . Если он находит соответствующий суффикс, он отображает любое представление, которое он находит, который соответствует суффиксу. Суффикс — это параметр, который передается методу DefaultDisplayMode . Чтобы увидеть это в действии, я создал контроллер Home и добавил три представления в папку Home .

fig2

Различия между видами — это заголовок H1. Они будут отображать iPhone , iPad или рабочий стол в зависимости от устройства. Я также отображаю пользовательский агент, чтобы вы могли видеть его изменение. Сначала я буду отлаживать сайт через браузер на рабочем столе. Вы можете увидеть конкретную страницу рабочего стола.

fig3

Теперь перейдите на сайт с помощью iPhone. Вы увидите страницу, обслуживающую iPhone.

fig4

Переключившись на iPad, вы увидите обслуживаемую страницу для iPad.

fig5

Это простой способ нацеливаться на конкретные устройства, создавая представление, подходящее для устройства — и, следовательно, для пользователя.

Тестирование с эмуляторами

Чтобы проверить эти новые функции, вы можете использовать физический iPhone или iPad, или вы можете использовать эмулятор. Я использовал эмулятор от MobiOne. Вы можете скачать 15-дневную бесплатную пробную версию здесь .

Эмулятор Windows Phone RC является бесплатным и может быть загружен здесь .

Аналогичным образом, еще одним хорошим вариантом является дополнение User Agent Switcher для Firefox, которое изменяет пользовательский агент, отправляемый в браузер. Это можно скачать здесь .

33
Share: