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

Запускаем Visual Studio 2010, откроется Начальная страница:

Для начала, надо создать проект, для этого выполним последовательно: Файл -> Создать -> Проект… (также можно просто нажать сочетание клавиш Ctrl + Shift + N или пункт «Создать проект…» на Начальной странице):

Рис. 2. 1. Создание нового проекта

Выберем слева в пункте Установленные шаблоны язык Visual C #, далее нажмём на Веб и найдём в списке справа Веб-приложение ASP . NET. Также здесь можно выбрать какой использовать «фреймворк» (набора компонентов для написания программ). В нашем случае выберем . NET Framework 4.

Рис. 2. 2. Окно создания нового проекта

В поле Имя вводим LWP 18 ASPNET — это название программы (выбрано по названию лабораторного практикума, номеру и названию работы). В поле Расположение указана конечная директория, где будет находиться весь проект. Выберем расположение удобное для быстрого поиска. В поле Имя решения вводится либо название программы «по умолчанию» из поля Имя автоматически, либо можно ввести своё собственное. Под этим именем будет создана конечная папка проекта (если Имя и Имя решения разные).

Рис. 2. 3. Вводим данные нового проекта веб-приложения ASP.NET

После нажатия кнопки ОК (рисунок 2. 3), среда разработки сформирует один полноценный проект веб-приложения (шаблон ASP . NET 4):

Рис. 2. 4. Обозреватель решений: состав проекта веб-приложения ASP.NET сформированного средой разработки

Теперь, можно откомпилировать созданную программу, нажав клавишу F 5 (Отладка -> Начать отладку или нажав на иконку . Тем самым мы запускаем приложение в режиме отладки (и производим компиляцию debug-версии программы) (Debug выбрано изначально). Перед компиляцией обратим вниманием на директорию App _ Data веб-проекта. Директория пока что пуста.

Рис. 2. 5. Запуск веб-приложения ASP.NET по конфигурации Debug

Жмём Войти, далее Регистрация.

Вводим в поле «Имя пользователя»: «Test» без кавычек.

В поле «Электронная почта»: «test@test.com».

В поля «Пароль» и «Подтвердите пароль», первоначально вписываем «123», жмём Создать пользователя и видим предупреждение о минимальном количестве знаков и содержании пароля. Вводим любой простой пароль из шести знаков и снова жмём на кнопку:

Рис. 2. 6. Запуск веб-приложения ASP.NET по конфигурации Debug: создание базы данных пользователей

Ждём, пока система сформирует базу данных. Закрываем приложение (страницу в браузере). Теперь, если снова запустить приложение и нажать кнопку «Войти», а затем ввести данные пользователя «Test» + его пароль, то будет осуществлён вход в систему веб-приложения. Данные будут подцепляться из базы. Сама база создаётся в папке App _ Data. Для просмотра записей таблиц базы сделаем следующее: нажмём в обозревателе решений на кнопку Показать все файлы:

Далее, если на ПК не установлен SQL Server 2012 или ниже, будем работать в «местном аналоге» предлагаемым по умолчанию студией. Откроем папку «App_Data»:

Дважды щёлкнем на ASPNETDB . MDF. Откроется новая панель слева:

Рис. 2. 7. Обозреватель серверов: ASPNETDB . MDF -> Таблицы -> aspnet _ Membership

«Обозреватель серверов» отображает все текущие подключенные серверы (в нашем случаем это текущий ПК), а также все базы данных, когда-либо подключавшиеся к среде разработки и не удалённые из списка «Подключения данных». Если база не подключена, около её значка стоит маленький красный крестик.

Откроем двойным щелчком таблицу aspnet _ Membership (префикс имени базы данных и названия таблиц как видно выбран из названия веб-приложения). Откроется «режим конструктора таблицы», где можно изменить свойства тех или иных столбцов, создать новые и прочее:

Рис. 2. 8. aspnet _ Membership:режим конструктора таблицы

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

В режиме таблицы будет доступа только одна запись добавленного пользователя:

Для работы с базами данных (как SQL Server, SQL Express, так и Microsoft Access) Visual Studio имеет достаточно средств для комфортной работы с базами различных поставщиков. В среде разработки предусмотрело большинство средств работы с базами данных. От «схемы данных» и «связи данных», до создания SQL-запросов. Останавливаться на этом не будем. Куда интереснее посмотреть непосредственно код подключения и работы с базой данных.

Для подключения к базе и выбора провайдера используется файл Web . config (в корневой папке проекта). Код подключения очевиден:

<add name="ApplicationServices"

connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnetdb.mdf;User Instance=true"

providerName="System.Data.SqlClient" />

</connectionStrings>

За запись данных в базу отвечает файл в папке Account -> Register . aspx, и непосредственно элемент управления CreateUserWizard (группа элементов Вход: ). Настройка вводимых данных на странице регистрации (минимальная длина пароля, возможность сбора пароля для пользователя и прочее), осуществляется следующим кодом «конфига»:

<add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="ApplicationServices"

enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false"

maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10"

applicationName="/" />

</providers>

</membership>

За страницу «входа» в систему отвечает файл той же папки: Login . aspx.

За страницу смены пароля для текущего пользователя отвечает файл ChangePassword . aspx. Страница, оповещающая об успешной смене пароля: ChangePasswordSuccess.aspx.

Итак, откроем любую веб-страницу нашего приложения и посмотрим на код. Например, для «начальной» страницы веб-приложения Default . aspx код такой:

<%@ Page Title="Домашняя страница" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

CodeBehind="Default.aspx.cs" Inherits="LWP18ASPNET._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<h2>

Добро пожаловать в ASP.NET!

</h2>

<p>

Для получения дополнительных сведений об ASP.NET посетите веб-сайт <a href="http://www.asp.net" title="Веб-сайт ASP.NET">www.asp.net</a>.

</p>

<p>

Кроме того, <a href="http://go.microsoft.com/fwlink/?LinkID=152368"

title="Документация по ASP.NET на MSDN">документация по ASP.NET доступна на MSDN</a>.

</p>

</asp:Content>

Это полноценная HTML-страница, которая является «встраиваемой в главную мастер-страницу Site . Master. Встраивание страницы похоже на работу элемента Windows Forms: TabControl. Мастер-страница (шаблон) отвечает за меню и внешнее оформление страницы, содержимое же самой страницы Default . aspx подгружается внутри рамки мастер-страницы. Код Site.Master для вложения содержимого Default . aspx:

<asp:ContentPlaceHolder ID="MainContent" runat="server"/>

</div>

Как видно, Default.aspx имеет «ссылку» MainContent:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

...

</asp:Content>

Информация о том, что страница использует шаблон храниться в заголовке:

... MasterPageFile="~/Site.Master" ...

Для чего нужны шаблоны ( Site . Master )?

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

Разумеет, страницы могут быть любыми и содержать любой HTML-код. Классический вариант веб-страниц это «пустая» страница, или так называемая Форма Web Form, которую можно добавить вызван окно создания нового элемента для проекта. Встраиваемая страница под выбираемый шаблон: Веб-форма, использующая главную. Главный шаблон: Главная страница.

Создаём новый элемент: Проект -> Добавить новый элемент... (Ctrl+Shift+A). Выбираем тип страницы «Веб-форма, использующая главную страницу», Имя вводим как Page . aspx, жмём ОК.

Рис. 2. 9. Добавление нового элемента – LWP 18 ASPNET: добавление встраиваемой страницы

В следующем окне, среда разработки поспросит выбрать главную страницу в качестве основы. У нас она одна, это «Site.Master». Жмём ОК.

Любая веб-страница имеет свой «Конструктор». Как и для Windows Forms, так и для WPF отображение страницы через конструктор достаточно наглядное. Для переключения между режимами работы с файлами веб-страниц используются кнопки «Конструктор», «Разделитель» и «Исходный код». Наиболее удобным (личное мнение автора) является режим «Разделитель», подходящий идеально в случае наличия монитора с большим экраном J:

Представление «Конструктор» — это область редактирования, близкая к режиму точного отображения (WYSIWYG).Представление «Исходный код» — это HTML-редактор страницы. В представлении с Разделитель отображаются оба представления документа — Конструктор и Исходный код.

Добавленная страница теперь выглядит так:

Напишем что-нибудь внутри:

Тут же изменится HTML-код (тэг p будет вставлен автоматически):

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<p>

Это новая страница нашего сайта!</p>

</asp:Content>

Выполним последовательно следующие действия:

1. Поместите точку (курсор) вставки в конце текста «Это новая страница нашего сайта!» и нажмём Enter один раз, чтобы создать дополнительное пространство в поле элемента div. Вручную перепишем тэг <p></p> на тэг <div><div>:

<p>

Это новая страница нашего сайта!</p>

<div>

</div>

2. Развернём группу Стандартные на панели элементов.

3. Перетащим элемент управления TextBox на страницу и расположим его в центре поля элемента div. После текстового поля нажмём пробел.

4. Перетащим элемент управления Button на страницу, и расположите его справа от элемента управления TextBox.

5. Изменим код div ’а для вставки над TextBox строчки «Введите свое имя:»:

<div>

<p>Введите ваше имя:<br />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button

ID="Button1" runat="server" Text="Button" />

</p>

</div>

6. Переставим курсор в конструкторе после кнопки и нажмём клавишу Enter, чтобы расширить место на странице. Перетащим элемент управления Label на страницу, и расположим его на отдельной строке под элементом управления Button.

7. Выберем элемент управления Button, после чего в окне Свойства задаём для свойства Text значение «Отображаемое имя». Введённый текст появится на кнопке в конструкторе. Получим:

Теперь выполним следующее:

1. Перейдём в представление «Исходный код».

В представлении Исходный код отображается HTML-код страницы, включая элементы, автоматически создаваемые в Visual Studio для серверных элементов управления. Для объявления элементов управления используется схожий с HTML синтаксис. Отличие заключается в использовании префикса asp: и атрибута runat="server".

Свойства элемента управления объявляются как атрибуты. Например, при задании свойства Text элемента управления Button фактически задаётся атрибут Text разметки элемента управления.

Обратим внимание, что все элементы управления находятся внутри элемента Content, который также имеет атрибут runat="server".Атрибут runat="server" и префикс asp: тегов элемента управления отмечают элементы управления так, что они обрабатываются в ASP.NET на сервере при запуске страницы. Код вне элементов <form runat="server"> и <script runat="server"> передаётся в браузер в неизменённом виде, поэтому код в ASP.NET должен быть внутри элемента, в открывающем теге которого содержится атрибут runat="server".

2. Установим точку вставки после asp:Label в теге <asp:Label> и нажмём на пробел. Появится раскрывающийся список, в котором отображается список свойств, которые можно задавать для элемента управления Label. Эта стандартный IntelliSense¹, помогает работать в представлении «Исходный код» с синтаксисом серверных элементов управления, HTML-элементами и другими элементами на странице.

3. Выберем свойство ForeColor и введём знак равенства и знак кавычек «="». Отобразится список возможных цветов.

4. Выберите цвет текста элемента управления Label. Выберем достаточно тёмный цвет, который будет хорошо смотреться на белом фоне.

5. Дважды щёлкнем элемент управления Button в конструкторе. Visual Studio переключится в представление Исходный код и создаст каркас обработчика для события по умолчанию элемента управления Button и события Click. Код события Click, а также слегка изменённое событие возникающие при вызове страницы Page _ Load:

protected void Page_Load(object sender, EventArgs e)

{

Label1.Text = "";

}

protected void Button1_Click(object sender, EventArgs e)

{

Label1.Text = TextBox1.Text + ", добро пожаловать на страницу!";

}

Прокрутим HTML-код страницы вниз до элемента <asp:Button>.Обратим внимание, что элемент <asp:Button> теперь имеет атрибут onclick="Button1_Click".

ПРИМЕЧАНИЕ № 1: Раскрывающийся список IntelliSense можно отобразить в любой момент путем нажатия сочетания клавиш Ctrl+J.

Теперь для данной страницы выполним последние действия (добавление элемента управления «Календарь»):

1. В Visual Studio перейдём в представление конструктора.

2. Из раздела Стандартные на панели элементов перетащим элемент управления Calendar на страницу, и разместите его под элементом Label (Enter после элемента создаст новый тэг «p»). Отобразится панель смарт-тега календаря. Панель отображает команды, которые позволяют выполнять самые часто используемые задачи выбранного элемента управления.

3. В области смарт-тега выберем Автоформат....

4. В окне Автоформат в списке «Выберите схему», выбираем Простой. Жмём ОК.

5. В представлении «Конструктор» дважды щёлкнем на элементе управления «Calendar». Исходный код события SelectionChanged:

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

Label1.Text = Calendar1.SelectedDate.ToLongDateString();

}

Страницу можно запускать через отладку, но если текущий выбор в среде разработки выставлен на иную страницу (не на Page . aspx), то для доступа к странице придётся вводить имя в адресную строку браузера.

Для того, чтобы добавить страницу в меню навигации веб-приложения (запускать не только через отладку), откроем файл Site . Master и перейдём на представление «Исходный код». Найдём:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">

<Items>

<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Домашняя"/>

<asp:MenuItem NavigateUrl="~/About.aspx" Text="О программе"/>

</Items>

</asp:Menu>

</div>

Здесь главным является элемент Menu. Дочерние элементы расположены в тэге Items. Для добавления новых можно скопировать код и вписать нужный адрес, либо работать через визуальный конструктор (смарт-тэг Правка элементов меню...):

Редактируем код:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">

<Items>

<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Домашняя"/>

<asp:MenuItem NavigateUrl="~/Page.aspx" Text="Страница"/>

<asp:MenuItem NavigateUrl="~/About.aspx" Text="О программе"/>

</Items>

</asp:Menu>

</div>

И изменим заголовок (для браузера) Page . aspx:

<%@ Page Title="Новая страница" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Page.aspx.cs" Inherits="LWP18ASPNET.Page" %>

Компилируем, проверяем работоспособность. Вводим имя, жмём кнопку и выделяем дату в календаре на странице.

Рис. 2. 10. Результат работы веб-приложения ASP.NET: выбрана дата в календаре

Дата добавления: 2019-09-13; просмотров: 311; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 65 66 67 68 697071 72 73 74 Следующая ⇒

Мы поможем в написании ваших работ!