НОУ ИНТУИТ | Разработка гибридных приложений для мобильных устройств под Windows Phone. Лекция 12: Разработка серверных сценариев гибридных мобильных приложений средствами ASP.NET

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 26 | Длительность: 11:36:00

Темы: Программирование, Мобильные технологии

Специальности: Программист

|

Вам нравится? Нравится 13 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Элементы управления ASP.NET

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

увеличить изображение
Рис. 21.10.

Элементы управления определяются как специализированные объекты, используемые для взаимодействия с пользователем, которые можно размещать на формах HTML. Пример кода HTML для кнопки на форме может выглядеть так:

<asp:Button ID="Button1" runat="server" Text="Button" />

Обратите внимание на атрибут runat="server". Он означает то же, что и для формы: элемент управления, для которого использован такой атрибут, становится доступным из программного кода в С# - файле *.aspx.cs, а на события этого элемента управления реагирует сервер. Если этот атрибут убрать (а также, возможно, избавиться от атрибутов, которые допустимы только для серверных элементов управления), элемент управления станет обычным элементом управления HTML. Отметим некоторые отличия серверных элементов управления ASP.NET от обычных элементов управления HTML:

Главное отличие заключается в том, что в ответ на события серверного элемента управления (например, на нажатие кнопки) срабатывает событийная процедура на сервере, в которой вы можете определить любой требуемый вам код. При этом работа с серверными элементами управления основана на стандартной модели событий для этих элементов, что делает ее очень похожей на работу с элементами управления Windows: например, используются те же события Click, Load и т.п..
В коде HTML для серверных элементов управления используется префикс пространства имен XML, который выглядит как <asp:...>. Например:
```
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
```
Для элементов управления HTML такой префикс не используется.
В ASP.NET элементы управления производятся от общих предков и поэтому обладают общим набором свойств (BackColor), методов и событий (хотя для каждого элемента управления могут быть предусмотрены и уникальные свойства, методы и события).
В отличие от стандартных элементов управления HTML, для серверных элементов управления обязательно сохраняется информация о состоянии. Отличия наглядно видны при обновлении страницы. Для серверных элементов управления установленные пользователем значения по умолчанию сохранятся, а для обычных элементов управления HTML будут загружены исходные значения.
Серверные элементы управления автоматически определяют тип и версию браузера мобильного устройства и генерируют подходящий для него код. В результате снижается потребность в тестировании и разработке разных версий страниц под разные версии браузеров.

На одной странице .aspx вполне можно использовать одновременно как серверные элементы управления, так и стандартные элементы управления HTML. Элементы управления HTML проще, стандартнее и используют меньшую полосу пропускания, поэтому серверные элементы управления обычно используются только тогда, когда вам нужна дополнительная функциональность: как на уровне сервера (например, для взаимодействия с базами данных), так и на уровне клиентского интерфейса (например, в наборе элементов управления HTML нет календаря).

Отметим, что атрибут runat = "server" можно использовать не только для традиционных элементов управления. Например, атрибут runat = "server" можно поместить внутрь тега для элемента HTML <body>, и при этом вы точно так же получите программный доступ к этому элементу (например, сможете настраивать для него фон).

Все элементы управления разделены на несколько групп (найдите эти группы в среде своего проекта). Назначение основных групп элементов управления:

HTML - это просто блоки кода HTML (как элементы управления, так и другие теги, например, тег <div>). К ASP.NETотношения они не имеют, а в ToolBox помещены для удобства дизайнеров. Справку по ним можно посмотреть в руководствах по HTML.
Стандартный (Standard) - главный набор серверных элементов управления ASP.NET. Эти элементы управления используются чаще всего
Данные (Data) - эти элементы управления предназначены для работы с информацией в базах данных.
Проверка (Validation) - эти элементы управления предназначены для проверки вводимых пользователем значений.
Переходы (Navigation) - специальные элементы управления, которые предназначены для упрощения навигации пользователя по сайту.
Вход (Login) - эти элементы управления предназначены для аутентификации пользователя на Web-сайте.
Веб - части (WebParts) - сложные элементы управления, предназначенные для использования на портальный сайтах (например, реализованные средствами SharePoint Portal Server). Обычно эти элементы управления используются для того, чтобы предоставить возможность пользователю самостоятельно настраивать для себя интерфейс Web-сайта.

Используя панель элементов (таблицу, метки, поля ввода, кнопки) и соответствующие им свойства, поместите на свою форму элементы, изображенные на рисунке:

увеличить изображение
Рис. 21.11.

Исходный код формы должен примерно выглядеть вот так (можете доработать или изменить его вручную):

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm_Mobile.aspx.cs" Inherits="WebApp_Mobile.WebForm_Mobile" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <style type="text/css">
 .auto-style1 {
 width: 429px;
 }
 .auto-style2 {
 font-size: xx-large;
 }
 .auto-style3 {
 font-size: xx-large;
 color: #009900;
 }
 </style>
</head>
 <body style="margin-bottom: 384px; height: 484px; background-color:#a9f2f2">
<h1 class="auto-style3">Гибридное мобильное приложение</h1>
<h2>Серверная страница</h2>
<p style="height: 25px" class="auto-style2"> <strong>Форма ввода клиентских данных</strong></p>
<form id="form1" runat="server">
<table style="width: 40%; height: 162px;">
<tr>
<td class="auto-style2"><strong>Имя</strong></td>
<td class="auto-style1">
<asp:TextBox ID="TextBox1" runat="server" Width="202px"
 Font-Bold="True" Font-Size="X-Large" ForeColor="Red"
  Height="24px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"><strong>Фамилия</strong></td>
<td class="auto-style1">
<asp:TextBox ID="TextBox2" runat="server" Width="252px" Font-Bold="True"
 Font-Size="X-Large" ForeColor="Red"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2" ><strong>Страна</strong></td>
<td class="auto-style1">
<asp:TextBox ID="TextBox3" runat="server" Font-Bold="True" Font-Size="X-Large" 
ForeColor="Red"></asp:TextBox>
</td>
</tr>
</table>
<asp:Button ID="Button2" runat="server" Font-Bold="True" Font-Size="X-Large" 
Height="49px" Text="Отправить на сервер" Width="599px" />
<br />
<asp:Label ID="Label1" runat="server" Font-Bold="True" ForeColor="Red" 
style="font-size: x-large" Text="Сервер получил:"></asp:Label>
</form>
</body>
</html>

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

Запустите проект. В эмуляторе Opera Mobile его главная страница будет выглядеть примерно так (кнопка "Отправить на сервер" пока не работает):

Рис. 21.12.

Добавление в проект C#- кода для получения данных от клиента и отправки клиенту сообщения

Основная задача нашего серверного сценария - принять на сервер данные, переданные мобильным приложением (виджетом). Это можно сделать в событии загрузки страницы мобильным устройством - Page_Load(). Обработчик этого события всегда присутствует в файле дополнения к веб-формам - модуле C# - кода (файл WebForm_Mobile.aspx.cs) и вы можете увидеть его:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApp_Mobile
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

Добавьте в обработчик события Page_Load операторы получения данных из запроса клиента (см. предыдущую лекцию), которые содержатся в коллекции Request:

protected void Page_Load(object sender, EventArgs e)
        {
  // принять данные от клиентского Cardova -приложения,
   //расположенного на мобильном телефоне
   string Name = Request["name"]; // request (англ.) - запрос
   string Lastname = Request["lastname"];
   string Country = Request["country"];
   // Ответ сервера клиенту
   Label1.Text += Name + " " + Lastname + " " + Country;
        }

Дальше >>

Авторизоваться

Разработка гибридных приложений для мобильных устройств под Windows Phone

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

Элементы управления ASP.NET

Добавление в проект C#- кода для получения данных от клиента и отправки клиенту сообщения

Вопросы и ответы