Создание мобильного приложения на ASP.NET MVC 4

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

Последнее обновление: 31.10.2015

Итак, создадим первое мобильное приложение на ASP.NET MVC 4. Для этого выберем специально предназначенный для мобильных приложений шаблон Mobile Application:

Шаблон проекта asp.net mvc Mobile Application

По сути данный тип проекта напоминает проект по типу Internet Application, но только в данном случае он предназначен непосредственно для мобильных устройств.

Одним из ключевых отличий данного проекта будет использование библиотеки jQuery.mobile. Так, в проекте в каталоге Scripts можно найти полную и минимизированную версию библиотеки: jquery.mobile-1.1.0.js и jquery.mobile-1.1.0.min.js

А в каталоге Content будут находится связанные с jQuery.mobile стили: jquery.mobile-1.1.0.css и др.

Собственно наличие библиоетки jQuery.mobile и представляет главное отличие от других типов проектов.

Если мы откроем в проекте мастер-страницу _Layout.cshtml, то мы найдем код, который использует атрибуты jQuery.mobile:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <meta name="viewport" content="width=device-width" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        @Styles.Render("~/Content/mobileCss", "~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <div data-role="page" data-theme="b">
            <div data-role="header">
                @if (IsSectionDefined("Header")) {
                    @RenderSection("Header")
                } else {
                    <h1>@ViewBag.Title</h1>
                    @Html.Partial("_LoginPartial")
                }
            </div>
            <div data-role="content">
                @RenderBody()
            </div>
        </div>

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

Чтобы дать понять браузеру, что он имеет дело с сайтом для мобильных устройств, в секции head, идет объявление метатега vieport: <meta name="viewport" content="width=device-width" />.

Далее у нас идут ряд элементов непосредственно с атрибутами jQuery.mobile. Так, тег <div data-role="page" data-theme="b"> определяет роль элемента div на экране - в данном случае элемент играет роль страницы(data-role="page"), а также определяет тему оформления элемента (data-theme="b").

Страница (data-role="page") содержит два элемента div с ролями header (data-role="header") и content (data-role="content"). От роли элемента зависит, как он будет отображаться на экране.

И ниже в секции скриптов идет само подключение библиотеки jQuery.mobile вместе с основной библиотекой jQuery: @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")

Представление Index.cshtml, которое будет отображаться при запуске, по сути представляет обычное представление, только опять же использующее арибуты jQuery.mobile:

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="https://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Использованный здесь атрибут data-role="listview" указывет, что элемент ul будет отображаться в виде списка. Возможно, несовсем ясно, почему мы к списку ul должны применять дополнительный атрибут списка? В данном случае атрибут data-role="listview" лишь просто помогает управлять визуализацией элемента в виде списка на мобильных устройствах.

Нам необязательно использовать библиотеку jquery.mobile, просто она упрощает построение интерфейса для мобильных приложений.

Для более подробного ознакомления с работой библиотеки jQuery.mobile и используемыми ею атрибутами можно обратиться к специализированным источником, а пока в данном случае важно понять суть работы мастер-страницы. То есть, это обычная мастер страницы, только использующая библиотеку jQuery.mobile - ее стили и скрипты, ее атрибуты для управления элементами на странице.

Запустим проект на выполнение и потом обратимся к нему в эмуляторе Opera Mobile:

Теперь, отталкиваясь от этого шаблона и используя библиотеку jQuery.mobile, мы можем создавать мобильные сайты на ASP.NET MVC.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850