Спонсор: Microsoft
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 314 / 17 | Длительность: 11:36:00
Специальности: Программист
Лекция 12:

Разработка серверных сценариев гибридных мобильных приложений средствами ASP.NET

Аннотация: Технология ASP.NET WebForms для разработки серверных сценариев. Преимущества использования. Инструменты Visual Studio создания веб-форм. Анализ созданной страницы. Тег атрибутов страницы @Page. Добавление текста на страницу. Элементы управления ASP.NET. Добавление в проект C#- кода для получения данных из запроса клиента и отправки клиенту сообщения. Коллекция Request. Получение данных от клиентского мобильного приложения Windows Phone посредством элементов управления формы.

Технология ASP.NET WebForms для разработки серверных сценариев

Серверная часть гибридных мобильных приложений для современных устройств под Windows Phone практически не отличается от традиционных веб-приложений для настольных компьютеров и может создаваться на базе большого разнообразия технологий. Компания Microsoft предлагает для этих целей технологию ASP.NET и множество шаблонов проектов для ее реализации, таких как WebForms [1], MVC [2] и WebPages [3]. Ввиду того, что вхождение в WebForms начинающих разработчиков происходит быстрее, для нашего учебного курса была выбрана именно эта технология в среде Visual Studio. Основные преимущества использования веб-форм таковы:

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

Следует отметить, что в версию ASP.NET 4 и выше добавлены такие усовершенствования для веб-форм, как поддержка новых браузеров мобильных устройств, а также поддержка HTML5.

Веб-форма представляет собой веб-страницу, которую пользователи мобильных устройств могут открыть в браузере. Серверное приложение ASP.NET состоит из одной или нескольких веб-форм, которые могут обращаться к ресурсам на сервере (файлам и базам данных). Как правило, для работы веб-формами используется программный код, запускаемый на сервере. Мы будем использовать в наших серверных сценариях код C#. Обычный механизм работы серверного приложения ASP.NET выглядит следующим образом:

  • браузер пользователя мобильного устройства генерирует запрос HTTP;
  • парсер ASP.NET интерпретирует код источника;
  • если код еще не откомпилирован в DLL, ASP.NET вызывает компилятор;
  • среда выполнения выполняет код на языке MSIL (ассемблер) и возвращает скомпилированный код HTML в браузер пользователю.

Для отладки сценариев на компьютере можно использовать обычный браузер, но лучше использовать специальный эмулятор мобильного браузера, например, Opera Mobile emulator. Его можно скачать по ссылке [4] и подключить к набору браузеров Visual Studio.

Инструменты Visual Studio создания веб-форм

Visual Studio.NET - это главное программное средство для разработки серверных приложений типа WebForms. На примере создания простейшего серверного приложения мы продемонстрируем возможности веб-форм получения серверным сценарием данных от клиентского мобильного приложения (виджета) и отправки данных на мобильное устройство.

Откройте Visual Studio и создайте в любой вашей папке новый проект c произвольным именем, например "WebApp_Mobile", используя шаблон "Пустое веб-приложение ASP.NET":

В окне проекта средствами главного оконного меню ВИД -> Обозреватель решений, установите обозреватель решений:

Окно обозревателя решений содержит все ресурсы проекта. Первоначально здесь только конфигурационная информация (файл web.config), ссылки на подключаемые библиотеки (References) и файлы свойств (Properties). По мере разработки, здесь появятся файлы веб-форм *.aspx, и дополнения к веб-формам: модули C# (файлы *.cs), папки с базой данных, файлами изображений, таблицами стилей и другие компоненты.

Используя обозреватель решений, добавьте в проект веб-форму (Добавить -> Создать элемент):

В окне добавления нового элемента следует выбрать "Форма Web Form" и дать создаваемой форме имя, например, WebForm_Mobile.aspx:

Visual Studio IDE создает страницу, которой присваивается имя WebForm_Mobile.aspx. Исходный код страницы:

Анализ созданной страницы. Тег атрибутов страницы @Page

Исходный код HTML для веб-формы (файла .aspx) обычно начинается с тега @Page, который определяет параметры данной страницы. По умолчанию данный тег для каждой новой страницы .aspx выглядит примерно так:

<%@ Page Language="C#" AutoEventWireup="true" 
CodeBehind ="WebForm_Mobile. aspx.cs" Inherits="_Default" %>

Прокомментируем значение каждого из атрибутов:

  • Language - это, конечно, указание на язык, который используется для программных вставок на самой странице (для кода на страницах codebehind он определяется отдельно). Можно указывать любой .NET-совместимый язык, например. Visual Basic.NET("vb"), C# ("c#") или JavaScript ("jscript"). Однако для каждой страницы язык может быть указан только один.
  • AutoEventWireup - это значение позволяет определять, какие имена можно будет использовать для событийных процедур данной страницы. Если для данного атрибута используется значение "true", то это значит, что имена событийных процедур для страницы жестко предопределены. Например, для события загрузки страницы можно будет использовать только событийную процедуру с именем Page_Load(). Если же для этого атрибута использовать значение "false", то имена событийных процедур можно определять самостоятельно.
  • CodeBehind - этот атрибут определяет имя файла, который используется для данной страницы, используется вместе с атрибутом Inherits.
  • Inherits - этот атрибут определяет, от какого класса с точки зрения программного кода производится объект данной страницы. Можно использовать любой класс, производный от System.Web.UI.Page.
  • Title - позволяет определить заголовок страницы (если он не определен в соответсвующем теге HTML).

Атрибут runat ="server"

Основное назначение ASP.NET - создание динамических веб-сайтов. Поэтому в большинстве ситуаций на сайтах ASP.NET предусмотрены страницы с формами HTML, где размещены элементы управления, которые выполняют прием информации от пользователей. В тегах <head>, <form> и др. атрибуту runat присваивается значение server, указывающее на то, что код элемента должен выполняться на стороне сервера, а не на стороне клиента. В принципе код ASP .NET может работать и на стороне клиента, но это делается очень редко, поскольку многие возможности ASP.NET становятся недоступными (в сущности, при этом выполняется сценарий клиентской стороны, не имеющий ничего общего с ASP .NET).

В ASP.NET слово "форма" (form) употребляется в двух значениях. Во-первых, это слово употребляется для обозначения самой Web-страницы с расширением .aspx (веб-форма). Во-вторых, это слово употребляется для обозначения обычных форм HTML, которые размещаются на страницах HTML и служат контейнерами для элементов управления. В этом разделе речь пойдет именно о формах HTML.

В большинстве ситуаций создавать форму на странице ASP.NET вручную нет необходимости. Обычно она создается автоматически при перетаскивании из ToolBox на веб-страницу любого элемента управления. По этой причине в ToolBox даже не предусмотрено специального элемента управления для форм. Однако, при желании вы можете, как создать форму вручную, так и настроить ее параметры в режиме работы с кодом HTML (вкладка "Исходный код"). В самом простом варианте тег для формы выглядит так:

<form id="form1" runat="server">
 ...
 </form>

В принципе, теги форм, которые используются в ASP.NET, определяются стандартом HTML. Однако при применении форм на страницах ASP.NET необходимо учесть дополнительные особенности, специфические именно для ASP.NET:

  • На странице .aspx может быть только одна форма, обрабатываемая сервером (то есть с атрибутом runat = "server". В противном случае при попытке обработать эту страницу в ASP.NET возникнет исключение.
  • Для форм ASP.NET, которые должны обрабатываться сервером, обязательно должен быть указан атрибут runat со значением "server". Именно этот атрибут говорит о том, что события для элементов управления данной формы должны обрабатываться сервером. Если этот элемент управления указан не будет, то в этом случае форма будет вести себя как обычная форма HTML.
  • В открывающем теге не должен использоваться атрибут action. Значение этого атрибута настраивается подсистемой ASP.NET в автоматическом режиме.

Другие атрибуты форм, которые можно использовать согласно стандарту HTTP, можно использовать и в ASP.NET.

Добавление текста на страницу

Перейдите в "Конструктор" созданной нами формы, щелкнув одноименную вкладку.

Представление "Конструктор" отображает страницу, над которой ведется работа, в режиме точного отображения (WYSIWYG). На этом этапе на странице нет ни текста, ни элементов управления, а только изображенная пунктиром прямоугольная область. Эта прямоугольная область представляет на странице элемент <div>. Щелкните внутри прямоугольной области, ограниченной пунктиром и введите текст "Наше первое приложение". Далее показан текст, введенный в представлении "Конструктор":


Рис. 21.6.

Запустите приложение в обычном браузере, установленном в меню проекта:


Рис. 21.7.

Для более удобной отладки, ориентированной на мобильное устройство, подключите установленный предварительно эмулятор мобильного браузера и вновь запустите приложение:

Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?

Александр Бут-Гусаим
Александр Бут-Гусаим
Россия, Тула
Виктор Ефремов
Виктор Ефремов
Россия