007 — Пример создания Web-приложения в MS Visual Studio — C#

Пример создания Web-приложения в C#


Содержание



Условие задачи

Дано три стороны треугольника: a, b, c.

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

Формула Герона имеет вид:

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

где p – полупериметр:

полупериметер треугольника

a, b, c – длина сторон треугольника.

 

 

Выполнение

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

Пример создания приложения в MS Visual Studio по шаблону Windows Forms Application подробно описывается в теме:

 

 

2. Создание Web-приложения

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

Ниже указаны два способа создания Web-приложения в MS Visual Studio.

 

 

2.1. Создание Web-приложения (способ № 1)

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

File -> New -> Web Site...

Visual Studio C# новый веб-сайт команда

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

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

Например, в нашем случае, файлы будут сохраняться в папке

"C:\Programs\C_SHARP"

Место расположения файлов указывается в поле «Web-location». Доступны три способа размещения файлов:

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

Выбираем «File system«. В этом случае файлы приложения будут размещаться на локальном сервере (localhost), который создается системой. Это означает, что программа-клиент (наше приложение) и программа-сервер (условно отдаленный компьютер в сети) размещены на одном и том же (домашнем) компьютере. Фактически localhost – это IP-адрес, с помощью которого компьютер может обратиться в сети к самому себе, независимо от наличия или вида компьютерной сети.

MS Visual Studio  команда создания Web-сайта

Рис. 2. Создание Web-сайта

 

 

2.2. Создание Web-приложения (способ № 2)

Существует также и другой способ создания Web-приложения с помощью команды (рис. 3)

File -> New -> Project...

Visual Studio Команда ASP .NET Empty Web Site

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

После этого откроется окно (рис. 4), в котором нужно выбрать шаблон «Visual C#» и тип проекта «ASP .NET Web Application«.

Visual Studio C# Web-приложение создание

Рис. 4. Команда создания Web-приложения

 

 

3. Создание приложения как веб-сайта

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

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

Окно "Solution Explorer" создание веб-сайта

Рис. 5. Окно «Solution Explorer» после создания веб-сайта

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

Visual Studio локальный сервер выполнение приложения

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

Следующим отобразится окно, изображенное на рисунке 7. В этом окне нужно подтвердить на кнопке «ОК«, чтобы модифицировать файл «Web.config» таким образом, чтобы можно было выполнять наше приложение.

Visual Studio C# модификация файл "Web.config"

Рис. 7. Запрос к модификации файла «Web.config«

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

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

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

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

 

 

4. Добавление формы к приложению

Добавим новую форму к Web-приложению.

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

Visual Studio C# Команда "Add New Item..."

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

Существует и другой способ добавления формы – вызов команды «Add New Item…» из меню «Website«.

В результате откроется окно «Add New Item«. В этом окне нужно выбрать шаблон «Visual C#» и элемент «Web Form» (рис. 10). Имя формы (Name) оставляем без изменений «Default.aspx«.

C# Web Application Добавление новой формы

Рис. 10. Добавление новой формы

После добавления, в Solution Explorer можно увидеть дополнительные два файла (рис. 11):

  • «Default.aspx» – файл формы в терминологии HTML языка разметки гипертекста;
  • «Default.aspx.cs» – файл формы, который отвечает программному коду на языке C#.

С помощью этих двух файлов можно изменять внешний вид формы и организовывать работу в ней.

Visual Studio Файлы формы "Default.aspx" "Default.aspx.cs"

Рис. 11. Файлы формы «Default.aspx» и «Default.aspx.cs«

С помощью кнопок Design и Source можно переключаться между режимом проектирования и режимом кода страницы Default.aspx (рис. 12).

Visual Studio C# Режим проектирования (Design) кода (Source)

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

 

 

5. Конструирование формы

Согласно с условием задачи, форма должна содержать следующие элементы управления:

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

 

 

5.1. Изменение размеров формы

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

С помощью «мышки» увеличиваем размер формы, как показано на рисунке 13 (необязательно).

Visual Studio C# режим проектирования

Рис. 13. Изменение размеров формы в режиме проектирования

 

 

5.2. Формирование информационных сообщений и вывод на форму элементов управления

С помощью «мышки» можно выносить на форму различные элементы управления. Работа с Web-формой есть точно такая же как и с формой типа Windows Forms. Текст на форме можно вносить непосредственно.

Для нашей задачи нужно вынести на форму следующие элементы управления:

  • три элемента управления типа Label для обозначения «а = «, «b = «, «c = «;
  • один элемент управления типа Button;
  • три элемента управления типа TextBox;
  • один элемент управления типа Label для вывода результата.

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

Visual Studio C# свойства элементы управления Web-форма

Рис. 14. Изменение свойств элементов управления Web-формы

В целом, после построения, форма приложения должна иметь вид как показано на рисунке 15.

Visual Studio C# Web Application Форма приложения

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

 

 

6. Программирование события клика на кнопке «Calculate«

Последним шагом есть программирование события, которое будет генерироваться при клике на кнопке «Calculate«. Для Web-приложений это осуществляется стандартным для MS Visual Studio способом. Программный код обработки события будет сформирован в файле «Default.aspx.cs«.

Таким образом, выделяем элемент управления Button1. В списке свойств Properties переходим к вкладке Events. В вкладке Events делаем двойной клик «мышкой» напротив названия события «OnClick«. Система откроет файл «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 C# Web-приложение браузер Opera выполнение

Рис. 16. Выполнение Web-приложения в браузере Opera

После этого можно выносить приложение на Web-сервер. Но это уже другая тема.

 


Связанные темы