C#. ASP .NET. Приклад створення 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...

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

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

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

"C:\Programs\C_SHARP"

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

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

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

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

⇑

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

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

File -> New -> Project...

Рис. 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.cs” – файл форми, що відповідає програмному коду на мові “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 Application. Текст на формі можна вносити безпосередньо.

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

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

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

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

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

Рис. 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).

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

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

BestProg