Создание веб-приложения asp. Net

---

Практическая работа «Создание веб-приложения ASP.NET» 
Реализация базового функционала 
Задание: Разработать веб-приложение, реализующее работу с базой 
данных интернет-магазина ретрокомпьютеров. Необходимо реализовать 
форму для редактирования информации о конкретном товаре, а также 
табличную часть для вывода списка всех товаров. Внешний вид приложения, 
которое должно быть получено в итоге, представлен на рисунке ниже. 
Указания: 
1)
Создайте проект веб-приложения. Для этого запустите MS Visual 
Studio 2019, в открывшемся окне выберите пункт «Создание проекта» 

---

В следующем окне в поисковую строку введите текст 
Веб-приложение 
ASP.NET
, в параметрах фильтрации выберите язык «C#» , операционная 
система «Windows», тип приложения «Веб». Из появившегося списка 
выберите «Веб-приложение ASP.NET (.NET Framework)», нажмите на 
кнопку «Далее».
В следующем окне задайте имя проекта «ASPNET_Task1» и 
расположение для проекта (это может быть любая папка на диске, но чтобы 
не потерять проект, сохраните его на диск D в каталог с вашей фамилией, 
записанной латинскими буквами), и нажмите на кнопку «Создать». 

---

В следующем окне выберите шаблон приложения «Пустой», в секции 
«Добавить папки и основные ссылки» установите отметку (флажок) для 
пункта «Веб-формы». Нажмите на кнопку «Создать» 
После этого проект будет создан и откроется основное окно 
интегрированной среды разработки Visual Studio. 

---

2)
Создайте базу данных проекта. В правой части окна находится 
Обозреватель решений 
представляющий структуру каталогов и файлов 
проекта. Правой кнопкой мыши вызовите контекстное меню на пункте 
«ASPNET_Task1» и выполните команду Добавить > Создать элемент. В 
открывшемся окне выберите пункт «База данных SQL Server», и задайте имя 
файла 
retro_db.mdf. 
Нажмите на кнопку «Добавить». В открывшемся окне 
разрешите поместить базу данных в папку App_Data. 
Перейдите к редактированию базы данных дважды щёлкнув по файлу 
retro_db.mdf в обозревателе решений.

---

В левой части окна откроется 
Обозреватель серверов
. В секции, 
соответствующей базе данных 
retro_db.mdf
вызовите контекстное меню на 
папке 
Таблицы
и выполните команду «Добавить новую таблицу» 
Откроется окно создания таблицы базы данных. Оно состоит из 
визуального конструктора и редактора SQL-запроса. В соответствии со 
скриншотом ниже создайте в таблице поля, представляющие свойства товара 
магазина комьютерной ретротехники. Задайте таблице имя tovary путём 
впечатывания его вручную в редакторе SQL-запроса, там же для поля Id 
задайте тип IDENTITY(1,1), который сделает это поле автоматически 
генерируемым для каждой новой записи (новый Id будет получаться путём 
увеличения на единицу Id предыдущей добавленной записи, подобно тому, 
как это делает тип «Счётчик» в MS Access). По завершению редактирования 
таблицы нажмите на кнопку «Обновить», что приведёт собственно к 
созданию таблицы. 

---

В открывшемся окне нажмите на кнопку «Обновить базу данных» 
В результате будет создана таблица tovary, которая будет видна в 
обозревателе серверов.
Для просмотра и редактирования содержимого таблицы вызовите 
контекстное меню и выполните пункт «Показать таблицу данных». 

---

В настоящий момент таблица пуста. Добавлять в неё записи вручную не 
нужно, это будет делать приложение, которое вы создадите в следующих 
шагах. 
3)
Создайте веб-страницу для работы с данными базы. Правой кнопкой 
мыши вызовите контекстное меню на пункте «ASPNET_Task1» в 
обозревателе решений и выполните команду Добавить > Создать 
элемент. В открывшемся окне раскройте узел Visual С#, веб, выберите 
пункт «Веб-форма». Задайте создаваемому файлу имя tovary.aspx. 
Откроется редактор страницы. Он позволяет редактировать содержимое 
страницы как в виде HTML-кода (для этого перейдите на вкладку «Исходный 
код»): 

---

Так и визуально (подобно тому, как вы форматируете текст в MS Word) - 
(для этого перейдите на вкладку «Конструктор»): 
В боковом меню Visual Studio расположена кнопка «Панель элементов», 
по нажатии на которой откроется палитра элементов управления. Элементы 

---

управления можно добавлять на веб-страницу путём их «перетаскивания» 
(drag-and-drop) на веб-страницу. 
Находясь в режиме конструктора, создайте в файле tovary.aspx веб-
страницу следующего вида: 
Подписи к полям ввода создайте простым вводом текста на страницу (как 
будто бы печатаете в Word). Поля для ввода и отображения ID, названия, 

---

цены, количества, года выпуска и описания создайте с помощью элемента 
управления TextBox. Для того, чтобы в поле «Описание» можно было 
вводить многострочный текст, установите у соответсвующего TextBox'a 
свойство TextMode в значение 
Multiline
. У поля, предназначенного для 
отображения ID задайте свойство 
Enabled
в значение 
False
(пользователь не 
должен иметь возможность изменять значение этого поля). 
Поле «Страна» создайте на основе элемента управления DropDownList. 
Для заполнения раскрывающегося списка названиями стран выделите 
элемент управления мышью, далее нажмите на кнопку, появившуюся в 
правом верхнем углу элемента управления, из открывшегося меню 
выполните пункт 
Правка элементов
В открывшемся окне создайте список стран. Для добавления каждой 
страны используйте кнопку «Добавить». Для каждой страны необходимо 
задать свойства 
Text
и 
Value
. В свойство Text необходимо ввести название 
страны, а в свойство Value – некоторый уникальный числовой код, 
соответствующий этой стране. Первым элементом в списке должна быть 
строка «Выберите страну», имеющая числовой код 0 и отображаемая в 
списке по умолчанию. По завершении добавления стран в список нажмите на 
кнопку ОК. 
Для создания кнопки «Сохранить» используйте элемент управления 
Button. 
Каждый элемент управления на форме имеет уникальный идентификатор, 
используя который к нему возможно обращаться из программного кода. Для 
того чтобы просмотреть/изменить уникальный идентификатор элемента, 

---

выделите его мышью и посмотрите в окно свойств – идентификатор 
находится в свойстве 
(ID)
Задайте элементам управления (именно элементам управления, а не их 
подписям!) идентификаторы в соответствии с таблицей ниже: