007 – Приклад створення Web-додатку в MS Visual Studio – C#

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


Зміст


Умова задачі

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

Використовуючи формулу Герона, розробити додаток, що знаходить площу трикутника.

Додаток реалізувати як Web-application.

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

Формула Герона

де p – півпериметр

півпериметер формула трикутник

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

 

Виконання

1. Завантажити Microsoft Visual Studio

Приклад створення додатку за шаблоном Windows Forms Application детально описується тут.

 

2. Створення Web-додатку

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

Нижче показано два способи створення Web-додатку.

 

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

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

File -> New -> Web Site...

Visual Studiol Команда "File-New-Web Site..."

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

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

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

"C:\Programs\C_SHARP"

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

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

Вибираємо “File system“. У цьому випадку файли додатку будуть розташовуватись на локальному сервері (localhost), який створюється системою. Це означає, що програма-клієнт (наш додаток) і програма-сервер (умовно віддалений комп’ютер в мережі) розміщуються на одному (домашньому) комп’ютері. Фактично localhost – це IP-адреса, з допомогою якої комп’ютер може звернутися до мережі до самого себе, незалежно від наявності чи виду комп’ютерної мережі.

Visual Studio вікно "New Web Site"

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

 

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

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

File -> New -> Project...

Visual Studio Команда "File-New-Project..." новий проект

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

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

Visual Studio Команда створення Web-додатку

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

 

3. Створення додатку як веб-сайту.

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

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

Visual Studio Вікно "Solution Explorer"

Рис. 5. Вікно “Solution Explorer” після створення веб-сайту

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

завантаження локального сервера localhost виконання додаток

Рис. 6. Завантаження локального сервера для виконання додатку

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

Visual Studio Вікно запит модифікація файлу Web.config

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

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

Visual Studio Текст веб-браузер

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

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

 

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

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

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

Visual Studio Web Applicaiton Команда "Add New Item..."

Рис. 9. Команда Add New Item…

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

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

MS Visual Studio нова форма

Рис. 10. Додавання нової форми

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

  • Default.aspx” – файл форми в термінах HTML мови розмітки гіпертексту;
  • Default.aspx.cs” – файл форми, що відповідає програмному коду на мові “C#“.

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

Web Application Файли форми "Default.aspx" "Default.aspx.cs"

Рис. 11. Файли форми “Default.aspx” та “Default.aspx.cs

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

Visual Studio Web Application режим проектування коду

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

 

5. Проектування форми

Згідно з умовою задачі, форма повинна містити такі компоненти:

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


 

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

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

З допомогою “мишки” збільшуємо розміри форми як показано на рисунку 13.

Web Form Зміна розмірів форми режим проектування

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

 

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

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

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

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

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

Visual Studio властивість елемент управління Web-форма

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

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

Web Form Форма додатку режим проектування

Рис. 15. Форма додатку в режимі проектування

 

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

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

Програмний код обробки події буде сформовано в файлі “Default.aspx.cs“.

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

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

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

    protected void Button1_Click(object sender, EventArgs e)
    {
    }
}

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

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

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
  
    protected void Button1_Click(object sender, EventArgs e)
    {
        double a, b, c, p, s;
        a = Double.Parse(TextBox1.Text);
        b = Double.Parse(TextBox2.Text);
        c = Double.Parse(TextBox3.Text);
        p = (a + b + c) / 2;
        s = Math.Sqrt(p * (p - a) * (p - b) * (p - c));
        Label4.Text = "S = " + s.ToString();
    }
}

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

Visual Studio Виконання Web-додатку браузер Opera

Рис. 16. Виконання Web-додатку у браузері Opera

Після створення Web-додатку можна виносити його на Web-сервер. Але це вже зовсім інша тема.

 


Зв’язані теми