В этой статье я кратко расскажу о мобильных функциях ASP.NET MVC 4.
Вам нужно установить ASP.NET MVC 4, если у вас его нет.
Давайте начнем упражнение:
Шаг 1. Создайте веб-приложение ASP.NET MVC 4.
Шаг 2: Выберите шаблон проекта и выберите ASPX или Razor в качестве View Engine. Я выбрал ASPX.
Шаг 3: Теперь скомпилируйте и запустите приложение на разных устройствах. Вы заметите, что макет остается нетронутым.
Шаг 4: Нельзя использовать другое устройство для тестирования. Для тестирования в другом агенте вы можете скачать FireFox User Agent Switcher
Скачать выше получите ограниченные возможности Agent Switcher.
Чтобы получить полный список переключателя агентов, перейдите в Инструменты -> Пользовательский агент по умолчанию -> Переключатель пользовательских агентов -> Параметры
При нажатии кнопки «Параметры» вы получите параметры переключателя агента пользователя, как показано ниже.
Теперь нажмите «Импорт», вставьте ниже URL-адрес XML-файла и нажмите «ОК».
http://techpatterns.com/downloads/firefox/useragentswitcher.xml
Вы получите полный список User Agent Switcher. Теперь вы можете попробовать на разных ОС, устройстве и браузере.
Шаг 5: Теперь разверните папку Views и все папки внутри нее. Вы получите файлы с расширением .cshtml, если выбрали Razor View Engine, и .aspx, если выбрали ASPX View Engine.
Это единственное отличие, которое вы получите, если выберете Razor или ASPX View Engine.
Шаг 6: Теперь откройте папку Scripts, вы заметите jquery.mobile-1.0.js и jquery.mobile-1.0.min.js.
Как видите, мобильная версия jquery — 1.0. На момент написания статьи этот пост 1.1 уже выпущен. Вы можете скачать последнюю версию JQuery Mobile здесь
Шаг 7: Откройте _Layout.cshtml или Site.master, вы заметите
<!DOCTYPE html> <meta charset="utf-8" />
Выше обозначения HTML5.
Следующее, что нужно посмотреть в _Layout.cshtml или Site.master, это
<meta name="viewport" content="width=device-width" />
Область страницы помещается в окне просмотра. Можно установить ширину и высоту, ширина и высота может быть больше или меньше, чем экран устройства. Мобильный веб-сайт должен начинаться с ширины и высоты экрана устройства без увеличения или уменьшения масштаба.
Начальный масштаб области просмотра должен быть 1, что означает область просмотра: видимая область просмотра
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Шаг 8: Теперь вы заметите эти строки в _Layout.cshtml.
@Styles.Render("~/Content/mobileCss", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
@RenderSection("scripts", required: false)
And Site.Master will contain below lines.
<%: Styles.Render("~/Content/mobileCss", "~/Content/css") %>
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") %>
Выше строк загружаются CSS и JSS, указанные в BundleConfig.cs, помещенные в App_Start.
Структура BundleConfig.cs выглядит следующим образом.
На этом заканчивается внедрение мобильных функций ASP.NET MVC 4.