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

Разработка серверного сценария, использующего SQL Server Compact

Разбить на страницы
Показывать лекцию целиком

Ход выполнения работы:

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

  • Создайте проект с шаблоном "Пустое веб-приложение ASP.NET". Дайте ему имя, например, "WebApplication_Store".
  • Добавьте в проект Форму Web Form. Дайте ей имя, например, "MainForm.aspx"
  • Добавьте в проект базу данных SQL Server Compact. Для этого в обозревателе решений правой кнопкой мыши кликните по имени проекта и выберите пункт "Добавить" -> "Создать элемент".

    В открывшемся окне выберите "Локальная база данных SQL Server Compact" и задайте имя базы, например, "StoreDB.sdf":

    На вопрос о размещении базы в папке "App_Data" ответьте "Да":

  • Добавьте в созданную базу данных таблицу. Для этого в обозревателе решений двойным щелчком кликните на StoreDB.sdf , чтобы открыть обозреватель серверов:

    В обозревателе серверов правой кнопкой мыши кликните на строке "Таблицы", выберите пункт "Создать Таблицу":

    В открывшемся окне задайте имя таблицы, например, Store, и поля: Продукт (строковое), Количество (целое, числовое), Цена (действительное, числовое).

    Нажмите на кнопку "ОК". В обозревателе серверов правой кнопкой мыши кликните на таблице Store и выберите пункт "Показать таблицу данных". Заполните несколько строк.

  • Для работы с данными клиента, используя панель элементов, установите на главной форме проекта:
  • три элемента "TextBox" для ввода содержимого полей;
  • три кнопки "Button": "Добавить", "Изменить", "Удалить".
  • Примерный код формы будет следующим:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainForm.aspx.cs" 
    Inherits="WebApplication_Store.MainForm" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
     .text {
     font-size: xx-large;
     }
    </style>
    </head>
     
    <body>
        <h1>База данных магазина</h1>
        <p style="height: 25px" class="text"> <strong>Форма ввода изменений в магазине</strong></p>
        <form id="form1" runat="server">
        <table style="width: 50%; height: 162px;">
            <tr>
                <td class="text"><strong>Продукт</strong></td>
                <td>
                    <asp:TextBox ID="tbProduct" runat="server" Width="100%" 
    Font-Bold="True" Font-Size="X-Large"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="text"><strong>Количество</strong></td>
                <td>
                    <asp:TextBox ID="tbQuantity" runat="server" Width="100%" 
    Font-Bold="True" Font-Size="X-Large"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="text" ><strong>Цена</strong></td>
                <td>
                    <asp:TextBox ID="tbPrice" runat="server" Width="100%" Font-Bold="True" 
    Font-Size="X-Large"></asp:TextBox>
                </td> 
            </tr>
        </table>
        <asp:Button ID="btnInsert" runat="server" Font-Bold="True" 
    Font-Size="X-Large" Height="49px" Text="Добавить" Width="15%" />
        <asp:Button ID="btnUpdate" runat="server" Font-Bold="True" 
    Font-Size="X-Large" Height="49px" Text="Изменить" Width="15%" />
        <asp:Button ID="btnDelete" runat="server" Font-Bold="True" 
    Font-Size="X-Large" Height="49px" Text="Удалить" Width="15%" />
        <br />
        <br />
        </form>
    </body>
    </html>

    Запустите проект, используя эмулятор мобильного браузера:

  • Настройте источник данных, который свяжет данные формы и базу данных. Для этого в режиме "Конструктор" с помощью "Панели элементов" добавьте на форму источник данных SqlDataSource. Справа от источника нажмите на стрелочку и выберите пункт "Настроить источник данных":

    В открывшемся диалоговом окне в выпадающем меню выберите базу данных StoreDB.sdf. Нажмите "Далее".

    Нажмите "Далее":

    "Далее":

    Нажмите "Далее" и выполните пробный запрос.

    Увидев, что связь с базой работает, нажмите "Готово".

  • Для визуализации данных добавьте на форму проекта элемент GridView. Нажмите на треугольник справа от элемента и в пункте "Выбрать источник данных" выберите SqlDataSource1:
  • Проверьте визуализацию таблицы базы данных. Запустите проект:

    Для увеличения размера таблицы в свойствах GridView1 задайте размер шрифта XX-Large:

  • Для реализации возможных изменений в базе данных с использованием операторов INSERT, DELETE, UPDATE создайте еще один элемент SqlDataSource - SqlDataSource2.

    Настроим источник данных для SqlDataSource2:

    Выберите пункт "Укажите специальный оператор SQL или хранимую процедуру":

    Во вкладке Select введите "Select * From Store":

    Выполните пробный запрос:

    Нажмите "Готово".

  • Добавьте события onClick для всех кнопок формы MainForm.aspx и перейдите к файлу "MainForm.aspx.cs" для создания C# - кода для каждой из кнопок.

    Замените содержимое файла MainForm.aspx.cs следующим C# - кодом:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebApplication_Store
    {
        public partial class MainForm : System.Web.UI.Page
        {
    
            protected string Product;
            protected string Quantity;
            protected string Price;
    
            protected void Page_Load(object sender, EventArgs e)
            {
                Product = Request["product"];
                Quantity = Request["quantity"];
                Price = Request["price"];
                string Type = Request["type"];  //Указывает, какой запрос необходимо выполнить
                switch (Type)
                {
                    case "insert":  //добавление
                        Insert();
                        Refresh();
                        break;
                    case "update":  //изменение
                        Update();
                        Refresh();
                        break;
                    case "delete":  //удаление
                        Delete();
                        Refresh();
                        break;
                }
            }
    
            protected void btnInsert_Click(object sender, EventArgs e)
            {
                Set();
                Insert();
                Refresh();
            }
    
            protected void btnUpdate_Click(object sender, EventArgs e)
            {
                Set();
                Update();
                Refresh();
            }
    
            protected void btnDelete_Click(object sender, EventArgs e)
            {
                Set();
                Delete();
                Refresh();
            }
    
            public void Insert()
            {
                SqlDataSource2.InsertCommand = "INSERT INTO Store(Продукт, Количество,Цена)
     VALUES ('" + Product + "','" + Quantity + "','" + Price + "' );";
                SqlDataSource2.Insert();
            }
    
            public void Update()
            {
                SqlDataSource2.UpdateCommand = "UPDATE Store SET Количество = '" + Quantity + 
    "',Цена = '" + Price + "' WHERE Продукт = '" + Product + "';";
                SqlDataSource2.Update();
            }
    
            public void Delete()
            {
                /* одному значению поля Продукт соответствует не более одной строки, поэтому
                для процедуры удаления нужно только значение поля Продукт */
                SqlDataSource2.DeleteCommand = "DELETE FROM Store WHERE Продукт = '" + Product + "';";
                SqlDataSource2.Delete();
            }
    
            protected void Refresh()//обновление GridView и очистка TextBox
            {
                GridView1.DataBind();
                GridView1.Visible = true;
                tbProduct.Text = "";
                tbQuantity.Text = "";
                tbPrice.Text = "";
            }
    
            protected void Set() //задаем значения для полей
            {
                Product = tbProduct.Text;
                Quantity = tbQuantity.Text;
                Price = tbPrice.Text;
            }
        }
    }

    Запустите и отладьте проект, используя эмулятор мобильного браузера:

    Результат тестирования добавления в базу данных информации о новом товаре (20 упаковок чая по 35 рублей):

    Результат удаления и изменения (продали 11 единиц хлеба и снизили его цену на 3 рубля):

    Результат удаления молока (продали всё молоко):

  • Страницы:

    Ход выполнения работы:

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

  • Создайте проект с шаблоном "Пустое веб-приложение ASP.NET". Дайте ему имя, например, "WebApplication_Store".
  • Добавьте в проект Форму Web Form. Дайте ей имя, например, "MainForm.aspx"
  • Добавьте в проект базу данных SQL Server Compact. Для этого в обозревателе решений правой кнопкой мыши кликните по имени проекта и выберите пункт "Добавить" -> "Создать элемент".

    В открывшемся окне выберите "Локальная база данных SQL Server Compact" и задайте имя базы, например, "StoreDB.sdf":

    На вопрос о размещении базы в папке "App_Data" ответьте "Да":

  • Добавьте в созданную базу данных таблицу. Для этого в обозревателе решений двойным щелчком кликните на StoreDB.sdf , чтобы открыть обозреватель серверов:

    В обозревателе серверов правой кнопкой мыши кликните на строке "Таблицы", выберите пункт "Создать Таблицу":

    В открывшемся окне задайте имя таблицы, например, Store, и поля: Продукт (строковое), Количество (целое, числовое), Цена (действительное, числовое).

    Нажмите на кнопку "ОК". В обозревателе серверов правой кнопкой мыши кликните на таблице Store и выберите пункт "Показать таблицу данных". Заполните несколько строк.

  • Для работы с данными клиента, используя панель элементов, установите на главной форме проекта:
  • три элемента "TextBox" для ввода содержимого полей;
  • три кнопки "Button": "Добавить", "Изменить", "Удалить".
  • Примерный код формы будет следующим:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainForm.aspx.cs" 
    Inherits="WebApplication_Store.MainForm" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
     .text {
     font-size: xx-large;
     }
    </style>
    </head>
     
    <body>
        <h1>База данных магазина</h1>
        <p style="height: 25px" class="text"> <strong>Форма ввода изменений в магазине</strong></p>
        <form id="form1" runat="server">
        <table style="width: 50%; height: 162px;">
            <tr>
                <td class="text"><strong>Продукт</strong></td>
                <td>
                    <asp:TextBox ID="tbProduct" runat="server" Width="100%" 
    Font-Bold="True" Font-Size="X-Large"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="text"><strong>Количество</strong></td>
                <td>
                    <asp:TextBox ID="tbQuantity" runat="server" Width="100%" 
    Font-Bold="True" Font-Size="X-Large"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="text" ><strong>Цена</strong></td>
                <td>
                    <asp:TextBox ID="tbPrice" runat="server" Width="100%" Font-Bold="True" 
    Font-Size="X-Large"></asp:TextBox>
                </td> 
            </tr>
        </table>
        <asp:Button ID="btnInsert" runat="server" Font-Bold="True" 
    Font-Size="X-Large" Height="49px" Text="Добавить" Width="15%" />
        <asp:Button ID="btnUpdate" runat="server" Font-Bold="True" 
    Font-Size="X-Large" Height="49px" Text="Изменить" Width="15%" />
        <asp:Button ID="btnDelete" runat="server" Font-Bold="True" 
    Font-Size="X-Large" Height="49px" Text="Удалить" Width="15%" />
        <br />
        <br />
        </form>
    </body>
    </html>

    Запустите проект, используя эмулятор мобильного браузера:

  • Настройте источник данных, который свяжет данные формы и базу данных. Для этого в режиме "Конструктор" с помощью "Панели элементов" добавьте на форму источник данных SqlDataSource. Справа от источника нажмите на стрелочку и выберите пункт "Настроить источник данных":

    В открывшемся диалоговом окне в выпадающем меню выберите базу данных StoreDB.sdf. Нажмите "Далее".

    Нажмите "Далее":

    "Далее":

    Нажмите "Далее" и выполните пробный запрос.

    Увидев, что связь с базой работает, нажмите "Готово".

  • Для визуализации данных добавьте на форму проекта элемент GridView. Нажмите на треугольник справа от элемента и в пункте "Выбрать источник данных" выберите SqlDataSource1:
  • Проверьте визуализацию таблицы базы данных. Запустите проект:

    Для увеличения размера таблицы в свойствах GridView1 задайте размер шрифта XX-Large:

  • Для реализации возможных изменений в базе данных с использованием операторов INSERT, DELETE, UPDATE создайте еще один элемент SqlDataSource - SqlDataSource2.

    Настроим источник данных для SqlDataSource2:

    Выберите пункт "Укажите специальный оператор SQL или хранимую процедуру":

    Во вкладке Select введите "Select * From Store":

    Выполните пробный запрос:

    Нажмите "Готово".

  • Добавьте события onClick для всех кнопок формы MainForm.aspx и перейдите к файлу "MainForm.aspx.cs" для создания C# - кода для каждой из кнопок.

    Замените содержимое файла MainForm.aspx.cs следующим C# - кодом:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebApplication_Store
    {
        public partial class MainForm : System.Web.UI.Page
        {
    
            protected string Product;
            protected string Quantity;
            protected string Price;
    
            protected void Page_Load(object sender, EventArgs e)
            {
                Product = Request["product"];
                Quantity = Request["quantity"];
                Price = Request["price"];
                string Type = Request["type"];  //Указывает, какой запрос необходимо выполнить
                switch (Type)
                {
                    case "insert":  //добавление
                        Insert();
                        Refresh();
                        break;
                    case "update":  //изменение
                        Update();
                        Refresh();
                        break;
                    case "delete":  //удаление
                        Delete();
                        Refresh();
                        break;
                }
            }
    
            protected void btnInsert_Click(object sender, EventArgs e)
            {
                Set();
                Insert();
                Refresh();
            }
    
            protected void btnUpdate_Click(object sender, EventArgs e)
            {
                Set();
                Update();
                Refresh();
            }
    
            protected void btnDelete_Click(object sender, EventArgs e)
            {
                Set();
                Delete();
                Refresh();
            }
    
            public void Insert()
            {
                SqlDataSource2.InsertCommand = "INSERT INTO Store(Продукт, Количество,Цена)
     VALUES ('" + Product + "','" + Quantity + "','" + Price + "' );";
                SqlDataSource2.Insert();
            }
    
            public void Update()
            {
                SqlDataSource2.UpdateCommand = "UPDATE Store SET Количество = '" + Quantity + 
    "',Цена = '" + Price + "' WHERE Продукт = '" + Product + "';";
                SqlDataSource2.Update();
            }
    
            public void Delete()
            {
                /* одному значению поля Продукт соответствует не более одной строки, поэтому
                для процедуры удаления нужно только значение поля Продукт */
                SqlDataSource2.DeleteCommand = "DELETE FROM Store WHERE Продукт = '" + Product + "';";
                SqlDataSource2.Delete();
            }
    
            protected void Refresh()//обновление GridView и очистка TextBox
            {
                GridView1.DataBind();
                GridView1.Visible = true;
                tbProduct.Text = "";
                tbQuantity.Text = "";
                tbPrice.Text = "";
            }
    
            protected void Set() //задаем значения для полей
            {
                Product = tbProduct.Text;
                Quantity = tbQuantity.Text;
                Price = tbPrice.Text;
            }
        }
    }

    Запустите и отладьте проект, используя эмулятор мобильного браузера:

    Результат тестирования добавления в базу данных информации о новом товаре (20 упаковок чая по 35 рублей):

    Результат удаления и изменения (продали 11 единиц хлеба и снизили его цену на 3 рубля):

    Результат удаления молока (продали всё молоко):

  • Вернуться к учебному плану