Приклад створення Web-додатку в C #

Зміст

Умова задачі

Дано три сторони трикутника: a, b, c.

Використовуючи формулу Герона, розробити додаток, який знаходить площу трикутника. Програма реалізувати як Web-application .

Формула Герона має вигляд:

де p – напівпериметр:

a, b, c - Довжина сторін трикутника.

⇑

Виконання

1. Запустити MS Visual Studio

Приклад створення програми у MS Visual Studio за шаблоном Windows Forms Application докладно описується у темі:

⇑

2. Створення Web-програми

Програми типу Web можуть викликатися з будь-якого комп'ютера, підключеного до Інтернету. Для відкриття такої програми використовується Web-браузер (наприклад Opera, Google Chrome, Internet Explorer та інші).

Нижче вказано два способи створення Web-програми в MS Visual Studio.

⇑

2.1. Створення Web-додатку (спосіб №1)

Для цього способу, щоб створити Web-додаток, потрібно спочатку викликати команду (рис. 1):

Мал. 1. Команда створення нового веб-сайту

У вікні, що відкрилося (рис. 2), потрібно вибрати шаблон «C#» і вкладення «ASP .NET Empty Web Site». Можна також вказати шлях, де будуть створені робочі файли програми (кнопка Browse ...).

Наприклад, у нашому випадку файли зберігатимуться в папці

Місце розташування файлів вказується в полі "Web-location" . Доступні три способи розміщення файлів:

файлова система (File system);
http-з'єднання;
ftp-з'єднання.

Мал. 2. Створення Web-сайту

⇑

2.2. Створення Web-додатку (спосіб №2)

Існує також і іншийспосіб створення Web-додатки за допомогою команди (рис. 3)

Мал. 3. Команда створення нового проекту

Після цього відкриється вікно (рис. 4), в якому потрібно вибрати шаблон Visual C# і тип проекту ASP .NET Web Application.

Мал. 4. Команда створення Web-додатку

⇑

3. Створення програми як веб-сайту

Для розв'язання задачі вибираємо перший спосіб.

Після виконаних операцій створюється рішення (Solution), в якому є один проект типу веб-сайт (рис. 5).

Мал. 5. Вікно "Solution Explorer" після створення веб-сайту

Якщо запустити на виконання цей проект, то внизу у правій частині екрана ( SySTray ) відобразиться вікно завантаженого локального сервера (рис. 6).

Мал. 6. Завантаження локального сервера для виконання програми

Наступним відобразиться вікно, зображене на малюнку 7. У цьому вікні потрібно підтвердити на кнопці "ОК", щоб модифікувати файл "Web.config" таким чином, щоб можна було виконувати нашу програму.

Мал. 7. Запит до модифікації файлу "Web.config"

В результаті запуску в активному веб-браузері відкриється сторінка з приблизно таким текстом (мал. 8):

Мал. 8. Текст, який виводиться у веб-браузері

Для завершення роботи програми, потрібно в MS Visual Studio викликати команду Stop Debugging з меню Debug.

⇑

4. Додавання форми до додатку

Додамо нову форму до Web-додатку.

Для цього потрібно виділити назву програми в Solution Explorer, зробити клік правою кнопкою «миші» та в контекстному меню вибрати команду «Add New Item…» (рис. 9).

Мал. 9. Команда "Add New Item ..."

Існує й інший спосіб додавання форми - виклик команди "Add New Item ..." з меню "Website".

В результаті відкриється вікно "Add New Item". У цьому вікні потрібно вибрати шаблон Visual C# і елемент Web Form (рис. 10). Ім'я форми (Name) залишаємо без змін "Default.aspx".

Мал. 10. Додавання нової форми

Після додавання в Solution Explorer можна побачити додаткові два файли (рис. 11):

"Default.aspx" - файл форми в термінології HTML мови розмітки гіпертексту;
Default.aspx.c s – файл форми, який відповідає програмному коду мовою C# .

За допомогою цих двох файлів можна змінювати зовнішній вигляд форми та організовувати роботу у ній.

Мал. 11. Файли форми "Default.aspx" та "Default.aspx.cs"

За допомогою кнопок Design та Source можна перемикатися між режимом проектування та режимом коду сторінки Default.aspx (рис. 12).

Мал. 12. Режими проектування (Design) та коду (Source)

⇑

5. Конструювання форми

Відповідно до умови завдання, форма повинна містити такі елементи управління:

три поля введення для введення значень a, b, с;
текстові рядки для виведення повідомлень;
кнопку завдання початку обчислення;
текстовий рядок, що виводить результат обчислення.

⇑

5.1. Зміна розмірів форми

Переходимо в режим проектування за допомогою кнопки «Design» (рис. 12).

З допомогою «мишки» збільшуємо розмір форми, як показано малюнку 13 (необов'язково).

Мал. 13. Зміна розмірів форми у режимі проектування

⇑

5.2. Формування інформаційних повідомлень тавиведення на форму елементів керування

За допомогою мишки можна виносити на форму різні елементи управління. Робота з Web-формою є така сама як і з формою типу Windows Forms. Текст на формі можна вносити безпосередньо.

Для нашого завдання потрібно винести на форму такі елементи керування:

три елементи управління типу Label для позначення "а =", "b =", "c =";
один елемент керування типу Button;
три елементи керування типу TextBox;
один елемент керування типу Label для виведення результату.

При винесенні елемента управління у нижній правій частині екрана (вікно Properties ) можна змінювати властивості елементів управління (рис. 14).

Мал. 14. Зміна властивостей елементів управління Web-форми

В цілому, після побудови, форма додатка повинна мати вигляд, як показано на малюнку 15.

Мал. 15. Форма застосування у режимі проектування

⇑

6. Програмування події кліка на кнопці Calculate

Останнім кроком є програмування події, яке буде генеруватися при натисканні на кнопці "Calculate". Для Web-додатків це здійснюється стандартним для MS Visual Studio способом. Програмний код обробки події буде сформований у файлі "Default.aspx.cs".

Таким чином, виділяємо елемент керування Button1. У списку властивостей Properties переходимо до вкладки Events. У вкладці Events робимо подвійний клік "мишкою" навпроти назви події "OnClick". Система відкриє файл " Default.aspx.cs " з наступним кодом:

У обробник події Button1_Click(…) вводимо код розрахунку площі трикутника з трьох сторін. В цілому текст модуля Default.aspx.cs буде мати вигляд.

Після запускупрограми на виконання можна проконтролювати його роботу в Web-браузері (рис. 16).

Мал. 16. Виконання Web-програми в браузері Opera

Після цього можна виносити програму на Web-сервер. Але це вже інша тема.