Статьи

ASP.NET MVC 4 Developer Preview: улучшенные шаблоны по умолчанию

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

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

Установка

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

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

Расширенные шаблоны по умолчанию

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

Адаптивный рендеринг — это когда страница отображается в браузере без каких-либо настроек. Это абсолютно необходимо для большинства разработчиков сегодня; пиши один раз, беги везде. Адаптивный рендеринг стал возможным благодаря медиа-запросам .

После создания нового веб-сайта вы сможете увидеть улучшения в макете по умолчанию.

login page

Чтобы увидеть адаптивный рендеринг в действии, откройте страницу с помощью мобильного устройства.

Вот как выглядит страница на iPhone.

login page on mobile

А вот как выглядит страница на iPad.

login page on iPad

Страница отображается по-разному в зависимости от размера экрана. Заставить страницу сделать это без медиа-запросов сложно. Использование медиа-запросов делает это простым.

И еще одна вещь, которую стоит отметить: шаблон по умолчанию также использует преимущества jQuery UI. Ссылки Login и Register показывают вам, как использовать эту библиотеку JavaScript для обеспечения более богатого пользовательского интерфейса. Вы можете прочитать все о других функциях, доступных вам с помощью jQuery UI, здесь .

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

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

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