Текстовый вариант доклада “Что такое ASP.NET”

Ниже приведена расшифровка доклада “Что такое ASP.NET”, видео версия размещена на портале TechDays.ru . Доклад расчитан на разработчиков, не имеющих опыта работы с ASP.NET и представляет очень краткий обзор самых базовых понятий и принципов ASP.NET.

Основным инструментом разработки веб-приложений с использованием ASP.NET является Microsift Visual Studio.

Скачать бесплатную версию Visualo Studio Express можно по ссылке: https://www.microsoft.com/express/ru/product/

Для разработки ASP.NET приложений нужно установить редакцию Visual Web Developer Express: https://www.microsoft.com/express/ru/vwd/

Запустив Visual Studio, давайте создадим очень простой проект.

Мы выбираем тип проекта “веб-приложение” (Web Application) и Visual Studio создает для нас заготовку этого проекта и одну страницу ASP.NET.

Данное веб-приложение состоит из набора страниц, являющихся не просто статическими страницами html, а некими динамическими страницами, разделенными фактически на две части. Прежде всего, это сама страница с расширением aspx, где хранится код разметки, который потом будет преобразован в html-код, передаваемый браузеру пользователя.

И вторая часть - это код, так называемый code-behind файл. В нем хранится код логики, который обрабатывает события, происходящие со страницей.

Но прежде чем приступить к созданию веб приложения, давайте вспомним о том, что вообще оно собой представляет. По сути, любое веб приложение - это программа, которая принимает некоторый текст на вход и на выходе выдает также некоторый текст в формате HTML. В свою очередь, браузер на стороне клиента формирует этот текст в формате HTML в графическое представление, с которым и работает пользователь.

Очевидно, что разработать веб приложение можно с использованием любой технологии, позволяющей получать на вход текст и выдавать текст. Однако, в чем же состоит преимущество такой технологии, как ASP.NET? ASP.NET дает возможность несколько абстрагироваться от того механизма, который работает с веб-приложениями, т.е. абстрагироваться от протокола передачи данных и передаваемой в браузер пользователю HTML-разметки.

Посмотрим на типичный пример странички на ASP.NET

Для того, чтобы редактировать страничку, мы можем воспользоваться графическим редактором Visual Studio и в графическом же интерфейсе создать простое приложение. Давайте так и поступим, добавив на нашу страничку несколько, элементов управления (или контролов), которые представляют собой инкапсуляцию логики взаимодействия с браузером пользователя. Т.е. каждый из этих элементов, по сути, в момент отображения в браузере пользователя будет преобразован к тому виду HTML разметки, который необходим для представления этого элемента.

Добавим элемент метка (Label), который служит лишь для того, чтобы отображать текст, элемент текстовое поле (TextBox) и кнопку (Button).

Как видим, у нас на странице создано несколько этих элементов.

Если мы перейдем к виду HTML-разметки, то обнаружим, что у нас появились записи, которые начинаются с префикса asp, означающего, что данный элемент является стандартным элементом управления ASP.NET, и в будущем будет использоваться для того, чтобы создать на его основе некую HTML-разметку, отправляемую клиенту.

Помимо того, что каждый из этих элементов преобразуется в HTML-разметку, каждый из них обладает некоторым набором собственных свойств. Например, логично было бы обрабатывать такое событие, как щелчок по кнопке. Как это сделать: мы дважды щелкаем на кнопку в дизайнере.

Visual Studio генерирует для нас заглушку метода, позволяющего обрабатывать логику щелчка по кнопке, и уже в этом методе мы можем задать код, который будет выполнять какое-либо действие.

Давайте добавим код, который будет присваивать текст из нашего текстового поля нашей текстовой метке.

Собственно, вот вся логика приложения. Теперь мы можем запустить наше приложение и увидеть, что произойдет. ASP.NET компилирует написанный нами код, собирая его в специальную сборку, которая и загружается уже на веб-сервер.

В данном случае используется встроенный в Visual Studio веб-сервер, используемый для отладки приложений.

Что происходит, когда пользователь вводит некоторый текст и нажимает на кнопку? С точки зрения протокола HTTP и веб-приложения происходит следующее: браузер берет некоторые данные, введенные в текстовое поле, и отправляет их на сервер. С точки зрения ASP.NET: сервер и сама среда выполнения ASP.NET анализирует текст, который пришел на сервер, выясняет, какие элементы управления имели какие значения на стороне клиента, а также с помощью специальных параметров, передаваемых на сервер со страницы, определяет, какая кнопка была нажата, и какой обработчик событий необходимо выполнить. Далее происходит обработка и генерация HTML-кода. В этом HTML-коде присваивается значение нашему текстовому полю, которое мы определили в коде логики, и эта разметка возвращается пользователю, и пользователь видит такую страницу.

Т.е. с точки зрения ASP.NET мы работаем с некоторыми объектами, такими как объект кнопка, объект метка, объект текстовое поле, но мы не работает с самой HTML-разметкой и не задаем ей никаких свойств. Разумеется, иногда возникает необходимость воздействовать на используемые нами элементы управления, например, изменять их внешний вид. Для этого существуют специальные свойства, которые мы можем редактировать.

В качестве примера, попробуем изменить свойства нашего текстового поля. Мы можем изменить цвет, которым будет вводиться текст, максимальную длину вводимого текста, изменить дополнительные параметры, например, толщину границы самого текстового поля.

При этом измененные параметры будут записываться, как атрибуты нашего тега asp:TextBox, т.е. как атрибуты этого текстового поля. В дальнейшем они будут преобразованы к тем атрибутам, которые необходимы для отображения HTML-страницы в браузере пользователя.

Теперь, запустив наш проект на выполнение, мы увидим,что наши атрибуты были применены, и все работает исправно. Ограничение в 10 символов также работает.

Если мы посмотрим на HTML-разметку этой страницы, то увидим, как наше текстовое поле было преобразовано к стандартному HTML-элементу, а атрибуты, которые мы задали, были преобразованы в атрибуты, которые понимает браузер. Т.е. был добавлен атрибут, ограничивающий длину строки, а также добавлены специальные атрибуты, регулирующие стиль оформления нашего элемента.

Теперь, давайте посмотрим, что можно сделать с помощью серверных элементов управления и насколько сложными они могут быть. Для этого напишем другую страницу, которая уже будет нести в себе некоторый полезный функционал. Удалим все элементы, которые у нас уже были добавлены, перейдем в режим графического редактирования и добавим новые элементы управления.

Мы хотим создать некоторое приложение, работающее с данными базы данных. Поэтому мы воспользуемся специальным элементом управления под названием SqDataSource, позволяющим нам связаться с базой данных.

Мы сконфигурируем этот самый элемент управления, являющийся источником данных с тем, чтобы получить доступ к данным, хранящимся в базе данных SqServer.

Сохранив строку соединения с базой данных, необходимо определить какие данные мы хотим добавить в наш элемент управления.

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

Также мы добавим сюда возможность редактирования тех данных, которые есть в SqServer.

Мы сообщаем этому элементу управления, что во время своей работы для обновления данных он должен генерировать инструкции, вставки, удаления и обновления данных в базе данных.

Сконфигурировав, мы можем посмотреть какие данные возвращаются сейчас из базы данных и закончить работу с этим элементом. Данный элемент не будет преобразован в HTML-разметку и отображаться пользователю. Он необходим только на стороне сервера для самой инфраструктуры ASP.NET, которая будет получать данные из SqServer и связывать их с элементами управления на странице.

Для отображения этих данных добавим новый элемент управления GridView. Который позволит сделать табличное отображение данных, имеющихся в нашей базе.

Мы свяжем между собой элемент GridView и элемент SqlDataSource, и увидим,

что Visual Studio сразу отрисовала в дизайнере, как будет выглядеть наша таблица с продуктами. Более того, мы можем внести некоторые дополнительные свойства к нашему элементы GridView. Включим разбиение на страницы, возможность сортировки, возможность редактирования, удаление тех элементов, которые есть в нашей табличке.

Есть также возможность выделения, однако сейчас мы включать ее не будем.

В результате получилась страница, которая уже сейчас позволяет нам просматривать данные, находящиеся в базе данных, и выполнять с ними какие-либо базовые операции. Например, переходить между страницами, сортировать данные, редактировать их.

Теперь попытаемся расширить функционал данного приложения. Допустим мы хотим иметь возможность редактировать не только часть этих данных, но и еще какие-либо дополнительные данные, которые содержатся в базе данных и относятся к нашему продукту. Как мы это сделать? Точно также, декларативно, не написав ни строчки кода. Мы добавим еще один элемент управления DataSourse и сконфигурируем его следующим образом.

Мы свяжем его той же строкой соединения с той же базой данных, с той же таблицей, с той же таблицей продуктов, при этом выбирать будем все значения.

Точно также включим поддержку редактирования, но сейчас сделаем дополнительный момент.

Мы внесем ограничивающее условие, указав нашему источнику данных, какие данные он должен выбирать. Необходимо будет выбирать лишь те данные, идентификатор продукта которого равен значению, заданному в элементе управления GridView в самой таблице.

По умолчанию нам предлагается свойство Selected value, т.е. выборное значение, которое в данный момент нам как раз подходит. Добавляем это условие, сохраняем, сохраняем наш элемент SqDataSource.

Теперь внесем некоторые условия в нашу таблицу. Мы отключим возможность редактирования и удаления непосредственно в таблице, однако включим возможность выделения строки, т.е. появится специальная ссылка select, нажав на которую, мы сможем выбрать ту или иную строку в таблице. Таким образом мы дадим команду второму источнику данных SqDataSource2, что хотим выбрать из базы данных строку, относящуюся именно к этому продукту.

Добавим на форму еще один элемент управления под названием DetailsView.

Этот элемент мы свяжем со вторым источником данных SqDataSource2,

а также включим сюда поддержку редактирования, удаления и вставки новых элементов в таблицу.

Запустим приложение на выполнение и увидим, что теперь у нас есть наша таблица, но только с ссылкой select. В момент, когда мы выбираем какой-то из продуктов, внизу появляется табличка с полными деталями по данному продукту.

Также есть ссылки для редактирования, удаления и создания нового. Т.е. у нас есть возможность вносить изменения в данные. В итоге, не написав ни строчки кода, а лишь декларативно добавив уже существующие элементы управления, мы смогли создать очень простое приложение, работающее с данными.

Таким образом, элементы управления, использующиеся в ASP.NET, позволяют нам абстрагироваться от той разметки, с которой нам приходится работать для создания интерфейса пользователя, а также частично абстрагироваться от той реализации, которую мы выполняем. В данном случае мы используем стандартные элементы для работы с данными и, соответственно, представляем их в табличном виде. Мы можем настраивать элементы управления с помощью задания их свойств, оформлять различным образом, вносить какие-либо дополнительные изменения и, более того, можем создавать собственные элементы управления.

Но об этом можно будет узнать в более детальных докладах по технологии ASP.NET. Надеюсь, вас заинтересовала технология ASP.NET и вы захотите узнать о ней больше. На сайте www.techdays.ru вы сможете просмотреть также и другие доклады по технологии ASP.NET, в которых найдете более подробную информацию о том, как делать действительно функциональные веб приложения, какие существуют дополнительные возможности в ASP.NET и как все это можно использовать.