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

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

Содержание

Поиск на других ресурсах:

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

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

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

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

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

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

Выполнение

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

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

Создание приложения по шаблону Windows Forms Application в MS Visual Studio 2010

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

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

⇑

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. Текст на форме можно вносить непосредственно.

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

три элемента управления типа 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» со следующим кодом:

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-сервер. Но это уже другая тема.

BestProg