Добавление Web-страницы в ваш Web-сайт

Оценить
(0 голоса)

Первый шаг работы с Web-страницами — это добавление их в ваш Web-сайт. Для этого служит диалоговое окно Add New Item, в котором надо выбрать шаблон элемента Web Form. На рис. 14.19 показан пример добавления страницы CustomerEdit.aspx в Web-сайт. Описание: C:\Users\Артём\Desktop\media\image334.jpeg

Рис. 14.19. Добавление новой Web-страницы в ваш Web-сайт

При добавлении новой Web-страницы в Web-сайт у вас есть несколько опций. Во-первых, вы можете задать имя страницы. Лучше всего использовать стандартную схему именования и стараться, чтобы имя страницы соответствовало ее основному назначению. Имена Web- страниц в данном каталоге должны быть уникальными. Хорошим правилом было бы указа- ние данных, с которыми работает страница, а за ними — действия пользователя для данной страницы. В нашем примере так и сделано — CustomerEdit.aspx. Вторая опция — это язык, на котором основана Web-форма. Ваш Web-сайт обычно весь выполнен на C# или Visual Basic. Однако он может быть выполнен и на смеси обоих языков. При создании новой стра­ницы язык по умолчанию выбирается на основе языка по умолчанию для вашего Web-сайта. Однако вы можете использовать раскрывающийся список в нижней части диалогового окна Add New Item для выбора другого языка для вашей страницы.

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

Преобладающей настройкой у большинства профессиональных разработчиков является вы­деленный код (Place code in separate file) — она же принята и по умолчанию. Размещение кода в новом файле позволяет вам управлять этим кодом независимо от разметки пользова­тельского интерфейса. Это создает гораздо более четкую среду разработки. Кроме того, ASP.NET помещает ваш код в частичный класс. Этот частичный класс содержит только тот код, который пишете вы. Код, который выдается инструментами или самой Framework, не является частью этого файла. Ваш код и сгенерированный инструментами код комбиниру­ются во время компиляции. Таким образом, вас не обременяют тем кодом, который вам не принадлежит. Описание: C:\Users\Артём\Desktop\media\image335.jpeg

Последняя опция в диалоговом окне Add New Item при добавлении Web-формы — это Select master page. Эта настройка говорит интегрированной среде, что вы хотите, чтобы ваша новая Web-форма использовала главную страницу для своего содержимого и компо­новки по умолчанию. Мы рассмотрим главные страницы далее в этой главе.

Добавление элементов управления на вашу Web-страницу

Элементы управления на Web-страницу добавляются путем перетаскивания их из панели Toolbox в Visual Studio. В визуальном конструкторе страниц имеется несколько представле­ний вашей формы: конструкторское, исходный код и совместное представление. Конструк­торское представление позволяет вам строить вашу форму при помощи перетаскивания в визуальном редакторе (конструкторе). Это аналогично конструированию форм Windows. Когда вы перетаскиваете на страницу элементы, то видите визуальное представление того, как они будут выглядеть во время выполнения (в том числе и их взаимное расположение). Вы можете выделить на странице элемент и использовать редактор свойств для изменения вида и поведения.данного элемента.

На рис. 14.20 показана страница в конструкторском представлении. Обратите внимание на панель Toolbox слева. Это источник элементов управления, которые вы можете добавлять на вашу страницу. В центре рисунка находится поверхность конструирования. Обратите внимание, что кнопка Save выделена. Свойства кнопки Save показаны справа. Вы можете использовать редактор свойств для внесения изменений во внешний вид и работу элемента управления. Эти изменения сохраняются внутри разметки страницы. Описание: C:\Users\Артём\Desktop\media\image336.jpeg

Представление в виде исходного кода позволяет вам видеть (и редактировать) разметку, относящуюся к Web-странице. Здесь вы также можете перетаскивать элементы управления из панели инструментов в редактор, но вместо визуального представления вы получаете код разметки, который представляет собой данный элемент. Вы можете затем использовать ре­дактор разметки для изменения значений в разметке (в том числе и для настройки значений свойств, и для изменения информации о расположении). Конечно, в Visual Studio для этого работает IntelliSense. На рис. 14.21 показана та же самая страница в представлении исходно­го кода. Обратите внимание, что свойства кнопки можно редактировать из IntelliSense. Это более привычно для кодировщиков.

Рис. 14.21. Редактирование элемента управления в представлении исходного кода страницы ASP.NET

Третье представление появилось в Visual Studio 2008 впервые — это совместное представ­ление. Оно дает вам одновременно и разметку, и поверхность визуального конструирования, причем они стараются поддерживать синхронизацию между собой. Например, если вы сде­лаете изменение в представлении исходного кода, то конструкторское представление будет стараться обновиться (или будет ждать вашего щелчка по нему для его обновления). Это может быть очень полезно в том случае, если вы работаете одновременно визуально и в ко­де (и если у вас есть большой монитор). В итоге вы гораздо меньше будете переключаться между представлениями. На рис. 14.22 показан пример той же самой страницы в совмест­ном представлении. Обратите внимание, что в обоих представлениях Visual Studio знает, что кнопка Save выбрана.

Обратите внимание, что вы можете переключаться между этими тремя представлениями при помощи кнопок в нижней части окна конструктора формы. Здесь вы видите кнопки для представлений: конструкторского, совместного и исходного кода. Описание: C:\Users\Артём\Desktop\media\image337.jpeg

Совет

Вы можете изменить способ отображения ваших Web-форм в Visual Studio. В качестве режима представления по умолчанию вы можете выбрать либо просмотр в представ­лении исходного кода, либо просмотр в конструкторском представлении. Для этого выберите в меню Tools пункт Options. Затем в дереве нужно выбрать узел HTML De­signer. На рис. 14.23 показан пример этого окна. Раздел Start pages in позволяет вам изменить эту настройку. Описание: C:\Users\Артём\Desktop\media\image338.jpegОписание: C:\Users\Артём\Desktop\media\image339.jpeg

Реакция на события
Определение компоновки страницы и размещение элементов управления
Настройка позиционирования элементов управления
Создание общего внешнего вида
Стили и основы таблиц стилей

Добавить комментарий


Защитный код
Обновить

© 2017 www.visualstudios.ru. Все права защищены.